Selected work / 03
BCraftInfinite
A crafting party game where 2–8 players turn elemental scraps into inventions, choose five cards, and reveal their decisions together.
The brief
Curiosity first. Competition follows.
I wanted the freedom of combining unexpected things to lead somewhere social. BCraftInfinite gives each player room to experiment, then asks them to commit to a small set of inventions. The design challenge was making that shift feel understandable without turning discovery into a rules lesson.
- Who it’s for
- Small groups playing together across desktop, tablet, and phone.
- My contribution
- I designed the experience and directed its visual development. Codex assisted implementation and generated the 2D artwork and Blender assets under my direction.
- Focus
- Figma interfaces, game rules, a paper visual system, and a working multiplayer prototype.
01The game loop
Craft freely. Commit five. Reveal together.
Players join one room but work at their own tables. Discovered ingredients become reusable material for the room; earning a battle card still requires making that invention yourself. This distinction lets discoveries spread without taking away the reason to explore. The host’s room code creates a shared starting point without account setup. Once play begins, the table belongs to the individual, while the room’s progress remains visible. The interface needs to communicate both kinds of ownership at the same time.
Recorded prototype · 1× speed
01
Craft
Combine two ingredients by dragging or tapping. Discover recipes and grow a personal collection.
02
Commit
Choose five inventions and a form for each. Lock the deck before the shared timer ends.
03
Reveal
Choose privately, then reveal together across five rounds. The remaining hand changes the next decision.
One room, different points of view
02Visual identity
A workshop made from paper and ink.
Warm paper holds the inventions; charcoal holds the room. Condensed headings establish hierarchy, while handwritten prompts invite experimentation. Element names and symbols accompany color so the interface does not depend on color alone. I directed a consistent cut-paper and screenprint treatment across the generated artwork.
01 / The elemental vocabularyFive starting materials
02 / Unexpected inventionsOne visual language
From Figma foundations to reusable details
Look inside the component system
Explore the original element motifs
03Design evolution
Let the next idea keep moving.
The wireframe separates a free worktable from an ingredient library. The working interface keeps that structure and makes the pieces directly manipulable: players drag scraps together or tap two to try a combination. Success and unsuccessful attempts produce inline feedback, leaving the table available for the next idea. Library labels distinguish ingredients the room can reuse from discoveries a player has personally earned. Keeping these cues near the experiment matters when a shared timer is running; a player should be able to understand what happened without losing the thread of what to try next.
From layout to a working table
Drag the divider to compare the wireframe and working interface.
WireframeWorking interface
The wireframe establishes the worktable and library. The working interface adds movable scraps, ownership labels, and feedback beside the experiment.
See the crafting interaction
04Game decisions
Make a small hand feel deliberate.
Deck building turns an open collection into a commitment. Five visible slots keep the limit understandable; a fold inspector moves secondary choices out of the collection’s way. Creature, Machine, and Structure affect matchup weights. They give the same invention different strategic uses without changing its recipe. The order of information matters here: choose an invention first, inspect its form second, then lock the complete hand. Keeping those decisions connected makes the commitment explicit while leaving the collection available for comparison.
Five slots, then a form
Look inside the fold inspector
The decision, then its consequence
Make the result understandable
Drag the divider to compare the wireframe and working interface.
WireframeWorking interface
The results wireframe establishes a winner and final standings. The working interface adds a five-round ledger so players can review how the match ended. Form advantages still need investigation through balance work and participant feedback.
Watch deck building and battle
05Building with Codex
Turn a design rule into working behavior.
I supplied the concept, interface layouts, game direction, and feedback. Codex helped translate those decisions into the browser prototype. The five-card commitment is one concrete connection: the interface lets players explore a draft, while the server checks eligible, unique cards and valid forms before locking that choice for the room.
Explore how the design became a working interaction.
Designing the commitment
The September Figma presentation documents the collection, selected inventions, and form choices. The current implementation has since refined their hierarchy.
submitDeck(playerToken: string, selections: SubmitDeckInput['cards']): void {
if (this.phase !== 'deck-building') throw new GameError('WRONG_PHASE', 'Deck building is closed.');
const player = this.requirePlayerByToken(playerToken);
if (player.confirmed) throw new GameError('DECK_ALREADY_SUBMITTED', 'Your deck is already locked.');
const cardIds = selections.map((selection) => selection.cardId);
if (cardIds.length !== 5 || new Set(cardIds).size !== 5) {
throw new GameError('INVALID_DECK', 'Choose exactly five unique cards.');
}
if (selections.some((selection) => !FOLD_FORMS.includes(selection.form))) {
throw new GameError('INVALID_FORM', 'Choose Creature, Machine, or Structure for every card.');
}
const candidateById = new Map(player.deckCandidates.map((card) => [card.id, card]));
const cards = cardIds.map((id) => candidateById.get(id));
if (cards.some((card) => !card)) throw new GameError('INVALID_DECK', 'That deck includes an ineligible card.');
if (new Set(cards.map((card) => card!.definitionId)).size !== 5) {
throw new GameError('INVALID_DECK', 'A deck cannot repeat a card definition.');
}
player.deck = cards.map((card, index) => foldCard(card!, selections[index]!.form));
player.confirmed = true;
this.changed();
if ([...this.players.values()].every((candidate) => candidate.confirmed)) this.beginBattlePick(true);
}
Validate, lock, then advance
The server enforces the same commitment the interface communicates: five unique, eligible inventions, each with a valid form.
- Check
- Reject invalid or repeated cards.
- Commit
- Store the folded cards and lock the deck.
- Continue
- Advance when every player has confirmed.
Source: src/server/room.ts · submitDeck
A visible five-card decision
The current interface makes the five slots visible and keeps the lock action close. Unsubmitted local drafts remain distinct from the server’s timeout selection.
06Blender exploration
Give the inventions a physical form.
The Blender exploration asks how a flat illustration could become a folded object. Reusable forms separate the construction from each invention’s printed identity. Codex generated the procedural models under my direction. The hinges and printed inserts are working presentation experiments; the main game remains 2D. A printed insert lets different inventions share one construction instead of requiring a new model for every recipe. The fold sequence exposes that mechanism directly: the same geometry moves between closed, half-open, and open poses.
Blender / construction study
3D construction exploration — not integrated gameplay.
Explore in 3D to rotate and adjust folds.
Creature. A folded creature silhouette carries an invention’s printed identity.
Original render · Choose Explore in 3D to rotate the construction07Outcome & next steps
A playable foundation, with questions left open.
BCraftInfinite now connects discovery, deck commitment, and simultaneous competition in a responsive browser prototype. The clearest learning is the need to separate freedom from commitment: players need room to experiment, then a legible moment to decide what they will bring into play.
The next step is participant research on discovery ownership, deck confidence, and understanding the reveal. Automated recordings establish behavior, not usability outcomes.
Balance work remains exploratory. The 3D forms also need further art direction and performance evaluation before any gameplay integration.