diff --git a/docs/design/character-creation-screen-wireframe.md b/docs/design/character-creation-screen-wireframe.md new file mode 100644 index 000000000..e6b36c17c --- /dev/null +++ b/docs/design/character-creation-screen-wireframe.md @@ -0,0 +1,141 @@ +--- +title: "Character Creation Screen Wireframe" +description: "UI layout specification for the character creation screen — wireframe deliverable for ticket #685" +type: design +status: active +sprint: 28 +ticket: 685 +created: 2026-03-19 +--- + +# Character Creation Screen Wireframe + +**Ticket:** #685 +**Designed by:** Jeroen (project lead) +**Tool:** Frame0 +**Downstream:** #694 (client: character creation screen), #705 (character editor Godot tool) + +--- + +## Wireframe Files + +All source JSON and exported PNGs in `docs/design/wireframes/character-creation/`: + +| File | Description | +|------|-------------| +| `main-layout.json/.png` | Body tab (default view on open) | +| `head-tab.json/.png` | Head template + eyebrows tab | +| `hair-tab.json/.png` | Hair style + facial hair tab | +| `clothing-tab.json/.png` | Clothing slot selector tab | +| `accessories-tab.json/.png` | Accessories slot selector tab | +| `color-picker.json/.png` | Color picker modal (opens on swatch click) | + +--- + +## Screen Layout + +### Preview pane (left, ~60% of screen) +- Live 3D compositor in SubViewport (D-149, D-146) +- Default camera: **frontal (-5°)** for editor (D-158), toggle to dramatic (-30°) +- Default facing: **South** (face-forward) +- **[Q] / [E]** rotate buttons — incremental cardinal rotation (D-155) +- Always LOD Tier 0, no degradation + +### Tab panel (right, ~35% of screen) +5 tabs: **Body**, **Head**, **Hair**, **Clothing**, **Accessories** + +Each tab follows the same layout pattern: +1. **Search bar** (top, fixed) — scoped to current tab contents +2. **Scrollable content grid** (middle) — item/option thumbnails +3. **Color dock** (bottom, fixed, non-scrolling) — context-sensitive color controls + +### Footer (full width, bottom) +- **[ESC] Back** — return to main menu +- **[R] Randomise** — randomize all slots +- **[ENTER] Start** — confirm character and begin game + +--- + +## Tab Contents + +### Body +- **Skin tone dock** (bottom): 9 preset swatches (D-165 does not apply — skin tones are separate from clothing colors) +- **Body type grid**: 11 options (D-159) organized as: + - Female row: Thin, Average, Muscular, Heavy, Teen + - Male row: Thin, Average, Muscular, Heavy, Teen + - Other row: Child + +### Head +- **Head template grid**: Trellis-generated unique heads (D-163), scrollable. Starts with 4 Quaternius starters. +- **Eyebrow selector**: Thick, Thin, Arched, None +- **Skin tone dock** (bottom): same 9 swatches as Body tab (shared state) + +### Hair +- **Hair style grid**: Short A, Short B, Medium A, Medium B, Long A, Bald (and more via scroll) +- **Facial hair selector**: None, Stubble, Beard, Moustache +- **Hair color dock** (bottom): Primary swatch + Highlight swatch (auto-derives from primary if unset) + +### Clothing +- **Slot selector** (fixed): Torso, Legs, Feet, Hands — click to filter the grid below +- **Item grid**: Shows items for the selected slot (Coveralls, Jacket, Shirt, etc.) +- **Item color dock** (bottom): Primary / Secondary / Accent swatches. Secondary and Accent auto-derive if unset. + +### Accessories +- **Slot selector** (fixed): Hat, Goggles, Mask, Backpack, Belt, Wrist L, Wrist R +- **Item grid**: Shows items for the selected slot +- **Item color dock** (bottom): Primary / Secondary swatches + +--- + +## Color Picker Modal + +Opens when any color swatch in a dock is clicked. Overlays the tab panel. + +- **54-swatch palette** (6 rows × 9 columns, D-165): + 1. Reds (H=0° S=35%) + 2. Greens (H=150° S=28%) + 3. Blues (H=215° S=35%) + 4. Purples (H=275° S=28%) + 5. Browns (H=28° S=35%) + 6. Neutral grays (#000000 → #ffffff, even steps) +- **Hex input field** with Apply button for custom colors +- **Recent custom colors**: 9 slots, persisted at game (save) level +- **Cancel / OK** buttons + +--- + +## Keyboard Navigation + +Full keyboard/controller support required (existing `character_select.gd` is keyboard-friendly): + +- **Tab / Shift+Tab**: cycle between tabs +- **Arrow keys**: navigate within grids +- **Enter**: select item / confirm +- **Q / E**: rotate character in preview +- **R**: randomize +- **ESC**: back to main menu + +--- + +## Design Decisions Referenced + +| Decision | Summary | +|----------|---------| +| D-146 | Tile-scale preview with heavy zoom (compatible with 3D via SubViewport) | +| D-149 | 3D characters rendered live | +| D-153 | Player not visually distinct from NPCs | +| D-155 | Cardinal rotation only in editor | +| D-157 | Game start = alarm clock / fade from black (editor is separate context) | +| D-158 | Frontal camera default for editor | +| D-159 | 11 body types (5 types × 2 genders + 1 child) | +| D-163 | Trellis-generated unique heads | +| D-165 | Color picker palette (5×9 muted hues + 1×9 neutral gray) | + +--- + +## Notes for Implementation (#694) + +- Held items (held_l, held_r) are **not** in the character creator — those are play-time decisions. Wrist slots replace them. +- The color picker modal should preview changes live on the 3D model before OK is pressed. +- Search filters items by name within the active tab only. +- The skin tone dock appears on both Body and Head tabs and shares state — changing it on one updates the other. diff --git a/docs/design/wireframes/character-creation/accessories-tab.json b/docs/design/wireframes/character-creation/accessories-tab.json new file mode 100644 index 000000000..5c105c9c6 --- /dev/null +++ b/docs/design/wireframes/character-creation/accessories-tab.json @@ -0,0 +1,449 @@ +{ + "name": "Character Creation — Accessories Tab", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 780, + "fillColor": "#1a1e24" + }, + "title": { + "type": "Text", + "parent": "bg", + "left": 440, "top": 16, + "text": "CHARACTER CREATION", + "fontColor": "#c8d0e0", "fontSize": 24 + }, + "preview-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 20, "top": 56, "width": 700, "height": 600, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "preview-figure": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 260, "top": 110, "width": 220, "height": 460, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "cam-toggle": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 620, "top": 68, "width": 88, "height": 28, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "cam-toggle-label": { + "type": "Text", + "parent": "cam-toggle", + "left": 632, "top": 73, + "text": "Frontal", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "btn-rot-left": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 270, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-left-label": { + "type": "Text", + "parent": "btn-rot-left", + "left": 288, "top": 597, + "text": "[Q] <", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-rot-right": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 390, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-right-label": { + "type": "Text", + "parent": "btn-rot-right", + "left": 408, "top": 597, + "text": "> [E]", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + + "right-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 740, "top": 56, "width": 380, "height": 600, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "tab-body": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 64, "width": 60, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-body-label": { + "type": "Text", + "parent": "tab-body", + "left": 750, "top": 71, + "text": "Body", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-head": { + "type": "Rectangle", + "parent": "right-panel", + "left": 802, "top": 64, "width": 58, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-head-label": { + "type": "Text", + "parent": "tab-head", + "left": 812, "top": 71, + "text": "Head", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-hair": { + "type": "Rectangle", + "parent": "right-panel", + "left": 862, "top": 64, "width": 52, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-hair-label": { + "type": "Text", + "parent": "tab-hair", + "left": 872, "top": 71, + "text": "Hair", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-clothing": { + "type": "Rectangle", + "parent": "right-panel", + "left": 916, "top": 64, "width": 76, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-clothing-label": { + "type": "Text", + "parent": "tab-clothing", + "left": 922, "top": 71, + "text": "Clothing", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-accessories": { + "type": "Rectangle", + "parent": "right-panel", + "left": 994, "top": 64, "width": 94, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 0, 0] + }, + "tab-accessories-label": { + "type": "Text", + "parent": "tab-accessories", + "left": 1000, "top": 71, + "text": "Accessories", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + + "tab-content": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 94, "width": 380, "height": 562, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "search-bar": { + "type": "Rectangle", + "parent": "tab-content", + "left": 752, "top": 102, "width": 356, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "search-placeholder": { + "type": "Text", + "parent": "search-bar", + "left": 762, "top": 109, + "text": "Search...", + "fontColor": "#555568", "fontSize": 12 + }, + + "slot-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 146, + "text": "SLOT", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "slot-hat": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 164, "width": 64, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "slot-hat-label": { + "type": "Text", + "parent": "slot-hat", + "left": 772, "top": 170, + "text": "Hat", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "slot-goggles": { + "type": "Rectangle", + "parent": "tab-content", + "left": 826, "top": 164, "width": 76, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-goggles-label": { + "type": "Text", + "parent": "slot-goggles", + "left": 834, "top": 170, + "text": "Goggles", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-mask": { + "type": "Rectangle", + "parent": "tab-content", + "left": 908, "top": 164, "width": 64, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-mask-label": { + "type": "Text", + "parent": "slot-mask", + "left": 920, "top": 170, + "text": "Mask", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-backpack": { + "type": "Rectangle", + "parent": "tab-content", + "left": 978, "top": 164, "width": 80, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-backpack-label": { + "type": "Text", + "parent": "slot-backpack", + "left": 984, "top": 170, + "text": "Backpack", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-belt": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 198, "width": 60, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-belt-label": { + "type": "Text", + "parent": "slot-belt", + "left": 768, "top": 204, + "text": "Belt", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-wrist-l": { + "type": "Rectangle", + "parent": "tab-content", + "left": 822, "top": 198, "width": 72, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-wrist-l-label": { + "type": "Text", + "parent": "slot-wrist-l", + "left": 830, "top": 204, + "text": "Wrist L", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-wrist-r": { + "type": "Rectangle", + "parent": "tab-content", + "left": 900, "top": 198, "width": 72, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-wrist-r-label": { + "type": "Text", + "parent": "slot-wrist-r", + "left": 908, "top": 204, + "text": "Wrist R", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + + "items-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 240, + "text": "HATS", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "item-1": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 258, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-1-label": { + "type": "Text", + "parent": "item-1", + "left": 784, "top": 328, + "text": "None", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "item-2": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 258, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "item-2-label": { + "type": "Text", + "parent": "item-2", + "left": 900, "top": 328, + "text": "Cap", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "item-3": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 258, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-3-label": { + "type": "Text", + "parent": "item-3", + "left": 1006, "top": 328, + "text": "Beanie", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "item-4": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 356, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-4-label": { + "type": "Text", + "parent": "item-4", + "left": 784, "top": 426, + "text": "Helmet", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "item-5": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 356, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-5-label": { + "type": "Text", + "parent": "item-5", + "left": 896, "top": 426, + "text": "Hood", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "color-dock": { + "type": "Rectangle", + "parent": "tab-content", + "left": 740, "top": 568, "width": 380, "height": 88, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "color-dock-label": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 576, + "text": "ITEM COLOR — Cap", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "color-primary-label": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 596, + "text": "Primary", + "fontColor": "#555568", "fontSize": 10 + }, + "color-primary-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 756, "top": 610, "width": 140, "height": 32, + "fillColor": "#6a4040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "color-secondary-label": { + "type": "Text", + "parent": "color-dock", + "left": 916, "top": 596, + "text": "Secondary", + "fontColor": "#555568", "fontSize": 10 + }, + "color-secondary-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 916, "top": 610, "width": 140, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + + "footer": { + "type": "Rectangle", + "parent": "bg", + "left": 0, "top": 700, "width": 1140, "height": 80, + "fillColor": "#1a1e24" + }, + "btn-back": { + "type": "Rectangle", + "parent": "footer", + "left": 20, "top": 720, "width": 120, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-back-label": { + "type": "Text", + "parent": "btn-back", + "left": 36, "top": 730, + "text": "[ESC] Back", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-random": { + "type": "Rectangle", + "parent": "footer", + "left": 290, "top": 720, "width": 160, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-random-label": { + "type": "Text", + "parent": "btn-random", + "left": 310, "top": 730, + "text": "[R] Randomise", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-confirm": { + "type": "Rectangle", + "parent": "footer", + "left": 980, "top": 720, "width": 140, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-confirm-label": { + "type": "Text", + "parent": "btn-confirm", + "left": 998, "top": 730, + "text": "[ENTER] Start", + "fontColor": "#c8d8f0", "fontSize": 13 + } + } +} diff --git a/docs/design/wireframes/character-creation/accessories-tab.png b/docs/design/wireframes/character-creation/accessories-tab.png new file mode 100644 index 000000000..720640550 Binary files /dev/null and b/docs/design/wireframes/character-creation/accessories-tab.png differ diff --git a/docs/design/wireframes/character-creation/clothing-tab.json b/docs/design/wireframes/character-creation/clothing-tab.json new file mode 100644 index 000000000..9983f49a6 --- /dev/null +++ b/docs/design/wireframes/character-creation/clothing-tab.json @@ -0,0 +1,428 @@ +{ + "name": "Character Creation — Clothing Tab", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 780, + "fillColor": "#1a1e24" + }, + "title": { + "type": "Text", + "parent": "bg", + "left": 440, "top": 16, + "text": "CHARACTER CREATION", + "fontColor": "#c8d0e0", "fontSize": 24 + }, + "preview-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 20, "top": 56, "width": 700, "height": 600, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "preview-figure": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 260, "top": 110, "width": 220, "height": 460, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "cam-toggle": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 620, "top": 68, "width": 88, "height": 28, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "cam-toggle-label": { + "type": "Text", + "parent": "cam-toggle", + "left": 632, "top": 73, + "text": "Frontal", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "btn-rot-left": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 270, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-left-label": { + "type": "Text", + "parent": "btn-rot-left", + "left": 288, "top": 597, + "text": "[Q] <", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-rot-right": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 390, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-right-label": { + "type": "Text", + "parent": "btn-rot-right", + "left": 408, "top": 597, + "text": "> [E]", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + + "right-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 740, "top": 56, "width": 380, "height": 600, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "tab-body": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 64, "width": 60, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-body-label": { + "type": "Text", + "parent": "tab-body", + "left": 750, "top": 71, + "text": "Body", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-head": { + "type": "Rectangle", + "parent": "right-panel", + "left": 802, "top": 64, "width": 58, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-head-label": { + "type": "Text", + "parent": "tab-head", + "left": 812, "top": 71, + "text": "Head", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-hair": { + "type": "Rectangle", + "parent": "right-panel", + "left": 862, "top": 64, "width": 52, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-hair-label": { + "type": "Text", + "parent": "tab-hair", + "left": 872, "top": 71, + "text": "Hair", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-clothing": { + "type": "Rectangle", + "parent": "right-panel", + "left": 916, "top": 64, "width": 76, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 0, 0] + }, + "tab-clothing-label": { + "type": "Text", + "parent": "tab-clothing", + "left": 922, "top": 71, + "text": "Clothing", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "tab-accessories": { + "type": "Rectangle", + "parent": "right-panel", + "left": 994, "top": 64, "width": 94, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-accessories-label": { + "type": "Text", + "parent": "tab-accessories", + "left": 1000, "top": 71, + "text": "Accessories", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + + "tab-content": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 94, "width": 380, "height": 562, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "search-bar": { + "type": "Rectangle", + "parent": "tab-content", + "left": 752, "top": 102, "width": 356, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "search-placeholder": { + "type": "Text", + "parent": "search-bar", + "left": 762, "top": 109, + "text": "Search...", + "fontColor": "#555568", "fontSize": 12 + }, + + "slot-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 146, + "text": "SLOT", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "slot-torso": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 164, "width": 80, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "slot-torso-label": { + "type": "Text", + "parent": "slot-torso", + "left": 768, "top": 170, + "text": "Torso", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "slot-legs": { + "type": "Rectangle", + "parent": "tab-content", + "left": 844, "top": 164, "width": 80, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-legs-label": { + "type": "Text", + "parent": "slot-legs", + "left": 862, "top": 170, + "text": "Legs", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-feet": { + "type": "Rectangle", + "parent": "tab-content", + "left": 932, "top": 164, "width": 80, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-feet-label": { + "type": "Text", + "parent": "slot-feet", + "left": 954, "top": 170, + "text": "Feet", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "slot-hands": { + "type": "Rectangle", + "parent": "tab-content", + "left": 1020, "top": 164, "width": 80, "height": 28, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "slot-hands-label": { + "type": "Text", + "parent": "slot-hands", + "left": 1036, "top": 170, + "text": "Hands", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + + "items-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 206, + "text": "TORSO", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "item-1": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 224, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "item-1-label": { + "type": "Text", + "parent": "item-1", + "left": 770, "top": 294, + "text": "Coveralls", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "item-2": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 224, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-2-label": { + "type": "Text", + "parent": "item-2", + "left": 892, "top": 294, + "text": "Jacket", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "item-3": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 224, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-3-label": { + "type": "Text", + "parent": "item-3", + "left": 1008, "top": 294, + "text": "Shirt", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "item-4": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 322, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-4-label": { + "type": "Text", + "parent": "item-4", + "left": 774, "top": 392, + "text": "Tank Top", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "item-5": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 322, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "item-5-label": { + "type": "Text", + "parent": "item-5", + "left": 898, "top": 392, + "text": "None", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "color-dock": { + "type": "Rectangle", + "parent": "tab-content", + "left": 740, "top": 548, "width": 380, "height": 108, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "color-dock-label": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 554, + "text": "ITEM COLOR — Coveralls", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "color-primary-label": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 574, + "text": "Primary", + "fontColor": "#555568", "fontSize": 10 + }, + "color-primary-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 756, "top": 588, "width": 100, "height": 32, + "fillColor": "#4a6080", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "color-secondary-label": { + "type": "Text", + "parent": "color-dock", + "left": 868, "top": 574, + "text": "Secondary", + "fontColor": "#555568", "fontSize": 10 + }, + "color-secondary-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 868, "top": 588, "width": 100, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "color-accent-label": { + "type": "Text", + "parent": "color-dock", + "left": 980, "top": 574, + "text": "Accent", + "fontColor": "#555568", "fontSize": 10 + }, + "color-accent-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 980, "top": 588, "width": 100, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "color-auto-hint": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 630, + "text": "Click swatch to pick color. Secondary/Accent auto-derive if unset.", + "fontColor": "#555568", "fontSize": 9 + }, + + "footer": { + "type": "Rectangle", + "parent": "bg", + "left": 0, "top": 700, "width": 1140, "height": 80, + "fillColor": "#1a1e24" + }, + "btn-back": { + "type": "Rectangle", + "parent": "footer", + "left": 20, "top": 720, "width": 120, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-back-label": { + "type": "Text", + "parent": "btn-back", + "left": 36, "top": 730, + "text": "[ESC] Back", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-random": { + "type": "Rectangle", + "parent": "footer", + "left": 290, "top": 720, "width": 160, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-random-label": { + "type": "Text", + "parent": "btn-random", + "left": 310, "top": 730, + "text": "[R] Randomise", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-confirm": { + "type": "Rectangle", + "parent": "footer", + "left": 980, "top": 720, "width": 140, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-confirm-label": { + "type": "Text", + "parent": "btn-confirm", + "left": 998, "top": 730, + "text": "[ENTER] Start", + "fontColor": "#c8d8f0", "fontSize": 13 + } + } +} diff --git a/docs/design/wireframes/character-creation/clothing-tab.png b/docs/design/wireframes/character-creation/clothing-tab.png new file mode 100644 index 000000000..4c09d7a92 Binary files /dev/null and b/docs/design/wireframes/character-creation/clothing-tab.png differ diff --git a/docs/design/wireframes/character-creation/color-picker.json b/docs/design/wireframes/character-creation/color-picker.json new file mode 100644 index 000000000..3748f3ec1 --- /dev/null +++ b/docs/design/wireframes/character-creation/color-picker.json @@ -0,0 +1,263 @@ +{ + "name": "Character Creation — Color Picker", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 780, + "fillColor": "#1a1e24" + }, + "title": { + "type": "Text", + "parent": "bg", + "left": 440, "top": 16, + "text": "CHARACTER CREATION", + "fontColor": "#c8d0e0", "fontSize": 24 + }, + + "preview-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 20, "top": 56, "width": 700, "height": 600, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "preview-figure": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 260, "top": 110, "width": 220, "height": 460, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + + "right-panel-dimmed": { + "type": "Rectangle", + "parent": "bg", + "left": 740, "top": 56, "width": 380, "height": 600, + "fillColor": "#12151a", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + + "picker-modal": { + "type": "Rectangle", + "parent": "bg", + "left": 750, "top": 100, "width": 360, "height": 520, + "fillColor": "#1a1e24", "strokeColor": "#c8d8f0", + "corners": [8, 8, 8, 8] + }, + + "picker-title": { + "type": "Text", + "parent": "picker-modal", + "left": 770, "top": 112, + "text": "PICK COLOR — Primary", + "fontColor": "#c8d0e0", "fontSize": 14 + }, + + "preview-swatch": { + "type": "Rectangle", + "parent": "picker-modal", + "left": 1020, "top": 108, "width": 72, "height": 28, + "fillColor": "#4a6080", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + + "palette-label": { + "type": "Text", + "parent": "picker-modal", + "left": 770, "top": 148, + "text": "PALETTE", + "fontColor": "#555568", "fontSize": 10 + }, + + "p-r1c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 164, "width": 32, "height": 32, "fillColor": "#3d1d1d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 164, "width": 32, "height": 32, "fillColor": "#522727", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 164, "width": 32, "height": 32, "fillColor": "#673131", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 164, "width": 32, "height": 32, "fillColor": "#7f3d3d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 164, "width": 32, "height": 32, "fillColor": "#974848", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 164, "width": 32, "height": 32, "fillColor": "#af5959", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 164, "width": 32, "height": 32, "fillColor": "#bc7575", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 164, "width": 32, "height": 32, "fillColor": "#c99090", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r1c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 164, "width": 32, "height": 32, "fillColor": "#d7acac", "strokeColor": "#333340", "corners": [2,2,2,2] }, + + "p-r2c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 200, "width": 32, "height": 32, "fillColor": "#213a2d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 200, "width": 32, "height": 32, "fillColor": "#2c4e3d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 200, "width": 32, "height": 32, "fillColor": "#37614c", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 200, "width": 32, "height": 32, "fillColor": "#43785e", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 200, "width": 32, "height": 32, "fillColor": "#508f70", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 200, "width": 32, "height": 32, "fillColor": "#62a684", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 200, "width": 32, "height": 32, "fillColor": "#7cb599", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 200, "width": 32, "height": 32, "fillColor": "#96c4ad", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r2c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 200, "width": 32, "height": 32, "fillColor": "#b0d2c1", "strokeColor": "#333340", "corners": [2,2,2,2] }, + + "p-r3c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 236, "width": 32, "height": 32, "fillColor": "#1d2b3d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 236, "width": 32, "height": 32, "fillColor": "#273952", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 236, "width": 32, "height": 32, "fillColor": "#314867", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 236, "width": 32, "height": 32, "fillColor": "#3d587f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 236, "width": 32, "height": 32, "fillColor": "#486997", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 236, "width": 32, "height": 32, "fillColor": "#597daf", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 236, "width": 32, "height": 32, "fillColor": "#7593bc", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 236, "width": 32, "height": 32, "fillColor": "#90a8c9", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r3c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 236, "width": 32, "height": 32, "fillColor": "#acbed7", "strokeColor": "#333340", "corners": [2,2,2,2] }, + + "p-r4c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 272, "width": 32, "height": 32, "fillColor": "#30213a", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 272, "width": 32, "height": 32, "fillColor": "#402c4e", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 272, "width": 32, "height": 32, "fillColor": "#503761", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 272, "width": 32, "height": 32, "fillColor": "#624378", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 272, "width": 32, "height": 32, "fillColor": "#75508f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 272, "width": 32, "height": 32, "fillColor": "#8a62a6", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 272, "width": 32, "height": 32, "fillColor": "#9d7cb5", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 272, "width": 32, "height": 32, "fillColor": "#b196c4", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r4c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 272, "width": 32, "height": 32, "fillColor": "#c4b0d2", "strokeColor": "#333340", "corners": [2,2,2,2] }, + + "p-r5c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 308, "width": 32, "height": 32, "fillColor": "#3d2c1d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 308, "width": 32, "height": 32, "fillColor": "#523b27", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 308, "width": 32, "height": 32, "fillColor": "#674a31", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 308, "width": 32, "height": 32, "fillColor": "#7f5c3d", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 308, "width": 32, "height": 32, "fillColor": "#976d48", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 308, "width": 32, "height": 32, "fillColor": "#af8159", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 308, "width": 32, "height": 32, "fillColor": "#bc9675", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 308, "width": 32, "height": 32, "fillColor": "#c9ab90", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r5c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 308, "width": 32, "height": 32, "fillColor": "#d7c0ac", "strokeColor": "#333340", "corners": [2,2,2,2] }, + + "p-r6c1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 344, "width": 32, "height": 32, "fillColor": "#000000", "strokeColor": "#555568", "corners": [2,2,2,2] }, + "p-r6c2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 344, "width": 32, "height": 32, "fillColor": "#1f1f1f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 344, "width": 32, "height": 32, "fillColor": "#3f3f3f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 344, "width": 32, "height": 32, "fillColor": "#5f5f5f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 344, "width": 32, "height": 32, "fillColor": "#7f7f7f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 344, "width": 32, "height": 32, "fillColor": "#9f9f9f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 344, "width": 32, "height": 32, "fillColor": "#bfbfbf", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 344, "width": 32, "height": 32, "fillColor": "#dfdfdf", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "p-r6c9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 344, "width": 32, "height": 32, "fillColor": "#ffffff", "strokeColor": "#333340", "corners": [2,2,2,2] }, + + "hex-label": { + "type": "Text", + "parent": "picker-modal", + "left": 770, "top": 392, + "text": "CUSTOM HEX", + "fontColor": "#555568", "fontSize": 10 + }, + "hex-field": { + "type": "Rectangle", + "parent": "picker-modal", + "left": 770, "top": 408, "width": 160, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "hex-value": { + "type": "Text", + "parent": "hex-field", + "left": 782, "top": 415, + "text": "#4a6080", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "hex-apply": { + "type": "Rectangle", + "parent": "picker-modal", + "left": 940, "top": 408, "width": 60, "height": 32, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "hex-apply-label": { + "type": "Text", + "parent": "hex-apply", + "left": 952, "top": 415, + "text": "Apply", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + + "recent-label": { + "type": "Text", + "parent": "picker-modal", + "left": 770, "top": 456, + "text": "RECENT CUSTOM COLORS", + "fontColor": "#555568", "fontSize": 10 + }, + "rc-1": { "type": "Rectangle", "parent": "picker-modal", "left": 770, "top": 472, "width": 32, "height": 32, "fillColor": "#4a6080", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "rc-2": { "type": "Rectangle", "parent": "picker-modal", "left": 806, "top": 472, "width": 32, "height": 32, "fillColor": "#8b4513", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "rc-3": { "type": "Rectangle", "parent": "picker-modal", "left": 842, "top": 472, "width": 32, "height": 32, "fillColor": "#2f4f4f", "strokeColor": "#333340", "corners": [2,2,2,2] }, + "rc-4": { "type": "Rectangle", "parent": "picker-modal", "left": 878, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] }, + "rc-5": { "type": "Rectangle", "parent": "picker-modal", "left": 914, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] }, + "rc-6": { "type": "Rectangle", "parent": "picker-modal", "left": 950, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] }, + "rc-7": { "type": "Rectangle", "parent": "picker-modal", "left": 986, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] }, + "rc-8": { "type": "Rectangle", "parent": "picker-modal", "left": 1022, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] }, + "rc-9": { "type": "Rectangle", "parent": "picker-modal", "left": 1058, "top": 472, "width": 32, "height": 32, "fillColor": "#3a4050", "strokeColor": "#555568", "corners": [2,2,2,2] }, + + "btn-cancel": { + "type": "Rectangle", + "parent": "picker-modal", + "left": 770, "top": 524, "width": 100, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-cancel-label": { + "type": "Text", + "parent": "btn-cancel", + "left": 794, "top": 532, + "text": "Cancel", + "fontColor": "#c8d8f0", "fontSize": 12 + }, + "btn-ok": { + "type": "Rectangle", + "parent": "picker-modal", + "left": 990, "top": 524, "width": 100, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-ok-label": { + "type": "Text", + "parent": "btn-ok", + "left": 1024, "top": 532, + "text": "OK", + "fontColor": "#c8d8f0", "fontSize": 12 + }, + + "footer": { + "type": "Rectangle", + "parent": "bg", + "left": 0, "top": 700, "width": 1140, "height": 80, + "fillColor": "#1a1e24" + }, + "btn-back": { + "type": "Rectangle", + "parent": "footer", + "left": 20, "top": 720, "width": 120, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-back-label": { + "type": "Text", + "parent": "btn-back", + "left": 36, "top": 730, + "text": "[ESC] Back", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-random": { + "type": "Rectangle", + "parent": "footer", + "left": 290, "top": 720, "width": 160, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-random-label": { + "type": "Text", + "parent": "btn-random", + "left": 310, "top": 730, + "text": "[R] Randomise", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-confirm": { + "type": "Rectangle", + "parent": "footer", + "left": 980, "top": 720, "width": 140, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-confirm-label": { + "type": "Text", + "parent": "btn-confirm", + "left": 998, "top": 730, + "text": "[ENTER] Start", + "fontColor": "#c8d8f0", "fontSize": 13 + } + } +} diff --git a/docs/design/wireframes/character-creation/color-picker.png b/docs/design/wireframes/character-creation/color-picker.png new file mode 100644 index 000000000..b7e3771bc Binary files /dev/null and b/docs/design/wireframes/character-creation/color-picker.png differ diff --git a/docs/design/wireframes/character-creation/hair-tab.json b/docs/design/wireframes/character-creation/hair-tab.json new file mode 100644 index 000000000..4827b3ba6 --- /dev/null +++ b/docs/design/wireframes/character-creation/hair-tab.json @@ -0,0 +1,428 @@ +{ + "name": "Character Creation — Hair Tab", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 780, + "fillColor": "#1a1e24" + }, + "title": { + "type": "Text", + "parent": "bg", + "left": 440, "top": 16, + "text": "CHARACTER CREATION", + "fontColor": "#c8d0e0", "fontSize": 24 + }, + "preview-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 20, "top": 56, "width": 700, "height": 600, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "preview-figure": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 260, "top": 110, "width": 220, "height": 460, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "cam-toggle": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 620, "top": 68, "width": 88, "height": 28, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "cam-toggle-label": { + "type": "Text", + "parent": "cam-toggle", + "left": 632, "top": 73, + "text": "Frontal", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "btn-rot-left": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 270, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-left-label": { + "type": "Text", + "parent": "btn-rot-left", + "left": 288, "top": 597, + "text": "[Q] <", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-rot-right": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 390, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-right-label": { + "type": "Text", + "parent": "btn-rot-right", + "left": 408, "top": 597, + "text": "> [E]", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + + "right-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 740, "top": 56, "width": 380, "height": 600, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "tab-body": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 64, "width": 60, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-body-label": { + "type": "Text", + "parent": "tab-body", + "left": 750, "top": 71, + "text": "Body", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-head": { + "type": "Rectangle", + "parent": "right-panel", + "left": 802, "top": 64, "width": 58, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-head-label": { + "type": "Text", + "parent": "tab-head", + "left": 812, "top": 71, + "text": "Head", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-hair": { + "type": "Rectangle", + "parent": "right-panel", + "left": 862, "top": 64, "width": 52, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 0, 0] + }, + "tab-hair-label": { + "type": "Text", + "parent": "tab-hair", + "left": 872, "top": 71, + "text": "Hair", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "tab-clothing": { + "type": "Rectangle", + "parent": "right-panel", + "left": 916, "top": 64, "width": 76, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-clothing-label": { + "type": "Text", + "parent": "tab-clothing", + "left": 922, "top": 71, + "text": "Clothing", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-accessories": { + "type": "Rectangle", + "parent": "right-panel", + "left": 994, "top": 64, "width": 94, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-accessories-label": { + "type": "Text", + "parent": "tab-accessories", + "left": 1000, "top": 71, + "text": "Accessories", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + + "tab-content": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 94, "width": 380, "height": 562, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "search-bar": { + "type": "Rectangle", + "parent": "tab-content", + "left": 752, "top": 102, "width": 356, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "search-placeholder": { + "type": "Text", + "parent": "search-bar", + "left": 762, "top": 109, + "text": "Search...", + "fontColor": "#555568", "fontSize": 12 + }, + + "hair-section-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 146, + "text": "HAIR STYLE", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "hair-1": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 164, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "hair-1-label": { + "type": "Text", + "parent": "hair-1", + "left": 772, "top": 234, + "text": "Short A", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "hair-2": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 164, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "hair-2-label": { + "type": "Text", + "parent": "hair-2", + "left": 884, "top": 234, + "text": "Short B", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "hair-3": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 164, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "hair-3-label": { + "type": "Text", + "parent": "hair-3", + "left": 992, "top": 234, + "text": "Medium A", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "hair-4": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 262, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "hair-4-label": { + "type": "Text", + "parent": "hair-4", + "left": 768, "top": 332, + "text": "Medium B", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "hair-5": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 262, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "hair-5-label": { + "type": "Text", + "parent": "hair-5", + "left": 892, "top": 332, + "text": "Long A", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "hair-6": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 262, "width": 104, "height": 90, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "hair-6-label": { + "type": "Text", + "parent": "hair-6", + "left": 1008, "top": 332, + "text": "Bald", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "facial-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 366, + "text": "FACIAL HAIR", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "facial-1": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 384, "width": 80, "height": 64, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "facial-1-label": { + "type": "Text", + "parent": "facial-1", + "left": 770, "top": 428, + "text": "None", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "facial-2": { + "type": "Rectangle", + "parent": "tab-content", + "left": 844, "top": 384, "width": 80, "height": 64, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "facial-2-label": { + "type": "Text", + "parent": "facial-2", + "left": 854, "top": 428, + "text": "Stubble", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "facial-3": { + "type": "Rectangle", + "parent": "tab-content", + "left": 932, "top": 384, "width": 80, "height": 64, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "facial-3-label": { + "type": "Text", + "parent": "facial-3", + "left": 948, "top": 428, + "text": "Beard", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "facial-4": { + "type": "Rectangle", + "parent": "tab-content", + "left": 1020, "top": 384, "width": 80, "height": 64, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "facial-4-label": { + "type": "Text", + "parent": "facial-4", + "left": 1024, "top": 428, + "text": "Moustache", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "color-dock": { + "type": "Rectangle", + "parent": "tab-content", + "left": 740, "top": 568, "width": 380, "height": 88, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "color-dock-label": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 576, + "text": "HAIR COLOR", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "color-primary-label": { + "type": "Text", + "parent": "color-dock", + "left": 756, "top": 596, + "text": "Primary", + "fontColor": "#555568", "fontSize": 10 + }, + "color-primary-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 756, "top": 610, "width": 140, "height": 32, + "fillColor": "#3a2a1a", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "color-highlight-label": { + "type": "Text", + "parent": "color-dock", + "left": 916, "top": 596, + "text": "Highlight", + "fontColor": "#555568", "fontSize": 10 + }, + "color-highlight-swatch": { + "type": "Rectangle", + "parent": "color-dock", + "left": 916, "top": 610, "width": 140, "height": 32, + "fillColor": "#5a4a3a", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "color-auto-hint": { + "type": "Text", + "parent": "color-dock", + "left": 1066, "top": 622, + "text": "auto", + "fontColor": "#555568", "fontSize": 10 + }, + + "footer": { + "type": "Rectangle", + "parent": "bg", + "left": 0, "top": 700, "width": 1140, "height": 80, + "fillColor": "#1a1e24" + }, + "btn-back": { + "type": "Rectangle", + "parent": "footer", + "left": 20, "top": 720, "width": 120, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-back-label": { + "type": "Text", + "parent": "btn-back", + "left": 36, "top": 730, + "text": "[ESC] Back", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-random": { + "type": "Rectangle", + "parent": "footer", + "left": 290, "top": 720, "width": 160, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-random-label": { + "type": "Text", + "parent": "btn-random", + "left": 310, "top": 730, + "text": "[R] Randomise", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-confirm": { + "type": "Rectangle", + "parent": "footer", + "left": 980, "top": 720, "width": 140, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-confirm-label": { + "type": "Text", + "parent": "btn-confirm", + "left": 998, "top": 730, + "text": "[ENTER] Start", + "fontColor": "#c8d8f0", "fontSize": 13 + } + } +} diff --git a/docs/design/wireframes/character-creation/hair-tab.png b/docs/design/wireframes/character-creation/hair-tab.png new file mode 100644 index 000000000..ee4ab2351 Binary files /dev/null and b/docs/design/wireframes/character-creation/hair-tab.png differ diff --git a/docs/design/wireframes/character-creation/head-tab.json b/docs/design/wireframes/character-creation/head-tab.json new file mode 100644 index 000000000..21fe47afd --- /dev/null +++ b/docs/design/wireframes/character-creation/head-tab.json @@ -0,0 +1,471 @@ +{ + "name": "Character Creation — Head Tab", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 780, + "fillColor": "#1a1e24" + }, + "title": { + "type": "Text", + "parent": "bg", + "left": 440, "top": 16, + "text": "CHARACTER CREATION", + "fontColor": "#c8d0e0", "fontSize": 24 + }, + "preview-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 20, "top": 56, "width": 700, "height": 600, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "preview-figure": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 260, "top": 110, "width": 220, "height": 460, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "cam-toggle": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 620, "top": 68, "width": 88, "height": 28, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "cam-toggle-label": { + "type": "Text", + "parent": "cam-toggle", + "left": 632, "top": 73, + "text": "Frontal", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "btn-rot-left": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 270, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-left-label": { + "type": "Text", + "parent": "btn-rot-left", + "left": 288, "top": 597, + "text": "[Q] <", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-rot-right": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 390, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-right-label": { + "type": "Text", + "parent": "btn-rot-right", + "left": 408, "top": 597, + "text": "> [E]", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + + "right-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 740, "top": 56, "width": 380, "height": 600, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "tab-body": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 64, "width": 60, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-body-label": { + "type": "Text", + "parent": "tab-body", + "left": 750, "top": 71, + "text": "Body", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-head": { + "type": "Rectangle", + "parent": "right-panel", + "left": 802, "top": 64, "width": 58, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 0, 0] + }, + "tab-head-label": { + "type": "Text", + "parent": "tab-head", + "left": 812, "top": 71, + "text": "Head", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "tab-hair": { + "type": "Rectangle", + "parent": "right-panel", + "left": 862, "top": 64, "width": 52, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-hair-label": { + "type": "Text", + "parent": "tab-hair", + "left": 872, "top": 71, + "text": "Hair", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-clothing": { + "type": "Rectangle", + "parent": "right-panel", + "left": 916, "top": 64, "width": 76, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-clothing-label": { + "type": "Text", + "parent": "tab-clothing", + "left": 922, "top": 71, + "text": "Clothing", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-accessories": { + "type": "Rectangle", + "parent": "right-panel", + "left": 994, "top": 64, "width": 94, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-accessories-label": { + "type": "Text", + "parent": "tab-accessories", + "left": 1000, "top": 71, + "text": "Accessories", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + + "tab-content": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 94, "width": 380, "height": 562, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "search-bar": { + "type": "Rectangle", + "parent": "tab-content", + "left": 752, "top": 102, "width": 356, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "search-placeholder": { + "type": "Text", + "parent": "search-bar", + "left": 762, "top": 109, + "text": "Search...", + "fontColor": "#555568", "fontSize": 12 + }, + + "head-section-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 146, + "text": "HEAD TEMPLATE", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "head-hint": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 164, + "text": "Trellis-generated unique heads.", + "fontColor": "#555568", "fontSize": 10 + }, + "head-1": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 182, "width": 104, "height": 104, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "head-1-label": { + "type": "Text", + "parent": "head-1", + "left": 776, "top": 266, + "text": "Head A", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "head-2": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 182, "width": 104, "height": 104, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "head-2-label": { + "type": "Text", + "parent": "head-2", + "left": 888, "top": 266, + "text": "Head B", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "head-3": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 182, "width": 104, "height": 104, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "head-3-label": { + "type": "Text", + "parent": "head-3", + "left": 1000, "top": 266, + "text": "Head C", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "head-4": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 294, "width": 104, "height": 104, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "head-4-label": { + "type": "Text", + "parent": "head-4", + "left": 776, "top": 378, + "text": "Head D", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "head-5": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 294, "width": 104, "height": 104, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "head-5-label": { + "type": "Text", + "parent": "head-5", + "left": 888, "top": 378, + "text": "Head E", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "head-6": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 294, "width": 104, "height": 104, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "head-6-label": { + "type": "Text", + "parent": "head-6", + "left": 1000, "top": 378, + "text": "Head F", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "eyebrows-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 414, + "text": "EYEBROWS", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "brow-1": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 432, "width": 80, "height": 52, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "brow-1-label": { + "type": "Text", + "parent": "brow-1", + "left": 770, "top": 464, + "text": "Thick", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "brow-2": { + "type": "Rectangle", + "parent": "tab-content", + "left": 844, "top": 432, "width": 80, "height": 52, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "brow-2-label": { + "type": "Text", + "parent": "brow-2", + "left": 862, "top": 464, + "text": "Thin", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "brow-3": { + "type": "Rectangle", + "parent": "tab-content", + "left": 932, "top": 432, "width": 80, "height": 52, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "brow-3-label": { + "type": "Text", + "parent": "brow-3", + "left": 946, "top": 464, + "text": "Arched", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "brow-4": { + "type": "Rectangle", + "parent": "tab-content", + "left": 1020, "top": 432, "width": 80, "height": 52, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "brow-4-label": { + "type": "Text", + "parent": "brow-4", + "left": 1038, "top": 464, + "text": "None", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "scroll-hint": { + "type": "Text", + "parent": "tab-content", + "left": 880, "top": 500, + "text": "Scroll for more heads...", + "fontColor": "#555568", "fontSize": 10 + }, + + "skin-dock": { + "type": "Rectangle", + "parent": "tab-content", + "left": 740, "top": 580, "width": 380, "height": 76, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "skin-dock-label": { + "type": "Text", + "parent": "skin-dock", + "left": 756, "top": 588, + "text": "SKIN TONE", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "skin-1": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 756, "top": 606, "width": 32, "height": 32, + "fillColor": "#f5d6b8", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "skin-2": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 796, "top": 606, "width": 32, "height": 32, + "fillColor": "#e8c4a0", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-3": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 836, "top": 606, "width": 32, "height": 32, + "fillColor": "#c8a882", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-4": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 876, "top": 606, "width": 32, "height": 32, + "fillColor": "#b08860", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-5": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 916, "top": 606, "width": 32, "height": 32, + "fillColor": "#96724c", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-6": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 956, "top": 606, "width": 32, "height": 32, + "fillColor": "#7c5c3a", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-7": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 996, "top": 606, "width": 32, "height": 32, + "fillColor": "#624830", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-8": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 1036, "top": 606, "width": 32, "height": 32, + "fillColor": "#4a3424", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-9": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 1076, "top": 606, "width": 32, "height": 32, + "fillColor": "#3a2818", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + + "footer": { + "type": "Rectangle", + "parent": "bg", + "left": 0, "top": 700, "width": 1140, "height": 80, + "fillColor": "#1a1e24" + }, + "btn-back": { + "type": "Rectangle", + "parent": "footer", + "left": 20, "top": 720, "width": 120, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-back-label": { + "type": "Text", + "parent": "btn-back", + "left": 36, "top": 730, + "text": "[ESC] Back", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-random": { + "type": "Rectangle", + "parent": "footer", + "left": 290, "top": 720, "width": 160, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-random-label": { + "type": "Text", + "parent": "btn-random", + "left": 310, "top": 730, + "text": "[R] Randomise", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-confirm": { + "type": "Rectangle", + "parent": "footer", + "left": 980, "top": 720, "width": 140, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-confirm-label": { + "type": "Text", + "parent": "btn-confirm", + "left": 998, "top": 730, + "text": "[ENTER] Start", + "fontColor": "#c8d8f0", "fontSize": 13 + } + } +} diff --git a/docs/design/wireframes/character-creation/head-tab.png b/docs/design/wireframes/character-creation/head-tab.png new file mode 100644 index 000000000..a75b8405e Binary files /dev/null and b/docs/design/wireframes/character-creation/head-tab.png differ diff --git a/docs/design/wireframes/character-creation/main-layout.json b/docs/design/wireframes/character-creation/main-layout.json new file mode 100644 index 000000000..87826d873 --- /dev/null +++ b/docs/design/wireframes/character-creation/main-layout.json @@ -0,0 +1,458 @@ +{ + "name": "Character Creation — Body Tab", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 780, + "fillColor": "#1a1e24" + }, + "title": { + "type": "Text", + "parent": "bg", + "left": 440, "top": 16, + "text": "CHARACTER CREATION", + "fontColor": "#c8d0e0", "fontSize": 24 + }, + + "preview-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 20, "top": 56, "width": 700, "height": 600, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "preview-label": { + "type": "Text", + "parent": "preview-panel", + "left": 320, "top": 68, + "text": "3D PREVIEW", + "fontColor": "#555568", "fontSize": 14 + }, + "preview-figure": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 260, "top": 110, "width": 220, "height": 460, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "preview-figure-label": { + "type": "Text", + "parent": "preview-figure", + "left": 320, "top": 330, + "text": "Character\nModel", + "fontColor": "#555568", "fontSize": 14 + }, + "cam-toggle": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 620, "top": 68, "width": 88, "height": 28, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "cam-toggle-label": { + "type": "Text", + "parent": "cam-toggle", + "left": 632, "top": 73, + "text": "Frontal", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "btn-rot-left": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 270, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-left-label": { + "type": "Text", + "parent": "btn-rot-left", + "left": 288, "top": 597, + "text": "[Q] <", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-rot-right": { + "type": "Rectangle", + "parent": "preview-panel", + "left": 390, "top": 590, "width": 80, "height": 36, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-rot-right-label": { + "type": "Text", + "parent": "btn-rot-right", + "left": 408, "top": 597, + "text": "> [E]", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + + "right-panel": { + "type": "Rectangle", + "parent": "bg", + "left": 740, "top": 56, "width": 380, "height": 600, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [8, 8, 8, 8] + }, + "tab-body": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 64, "width": 60, "height": 30, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 0, 0] + }, + "tab-body-label": { + "type": "Text", + "parent": "tab-body", + "left": 750, "top": 71, + "text": "Body", + "fontColor": "#c8d8f0", "fontSize": 11 + }, + "tab-head": { + "type": "Rectangle", + "parent": "right-panel", + "left": 802, "top": 64, "width": 58, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-head-label": { + "type": "Text", + "parent": "tab-head", + "left": 812, "top": 71, + "text": "Head", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-hair": { + "type": "Rectangle", + "parent": "right-panel", + "left": 862, "top": 64, "width": 52, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-hair-label": { + "type": "Text", + "parent": "tab-hair", + "left": 872, "top": 71, + "text": "Hair", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-clothing": { + "type": "Rectangle", + "parent": "right-panel", + "left": 916, "top": 64, "width": 76, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-clothing-label": { + "type": "Text", + "parent": "tab-clothing", + "left": 922, "top": 71, + "text": "Clothing", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "tab-accessories": { + "type": "Rectangle", + "parent": "right-panel", + "left": 994, "top": 64, "width": 94, "height": 30, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "tab-accessories-label": { + "type": "Text", + "parent": "tab-accessories", + "left": 1000, "top": 71, + "text": "Accessories", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + + "tab-content": { + "type": "Rectangle", + "parent": "right-panel", + "left": 740, "top": 94, "width": 380, "height": 562, + "fillColor": "#2a3040", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "search-bar": { + "type": "Rectangle", + "parent": "tab-content", + "left": 752, "top": 102, "width": 356, "height": 32, + "fillColor": "#3a4050", "strokeColor": "#555568", + "corners": [4, 4, 4, 4] + }, + "search-placeholder": { + "type": "Text", + "parent": "search-bar", + "left": 762, "top": 109, + "text": "Search...", + "fontColor": "#555568", "fontSize": 12 + }, + + "body-section-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 146, + "text": "BODY TYPE", + "fontColor": "#c8d0e0", "fontSize": 12 + }, + "body-row1-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 166, + "text": "Female", + "fontColor": "#555568", "fontSize": 11 + }, + "body-thin-f": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 182, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-thin-f-label": { + "type": "Text", + "parent": "body-thin-f", + "left": 786, "top": 272, + "text": "Thin", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "body-avg-f": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 182, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "body-avg-f-label": { + "type": "Text", + "parent": "body-avg-f", + "left": 890, "top": 272, + "text": "Average", + "fontColor": "#c8d8f0", "fontSize": 10 + }, + "body-musc-f": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 182, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-musc-f-label": { + "type": "Text", + "parent": "body-musc-f", + "left": 1000, "top": 272, + "text": "Muscular", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "body-heavy-f": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 300, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-heavy-f-label": { + "type": "Text", + "parent": "body-heavy-f", + "left": 784, "top": 390, + "text": "Heavy", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "body-teen-f": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 300, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-teen-f-label": { + "type": "Text", + "parent": "body-teen-f", + "left": 898, "top": 390, + "text": "Teen", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "body-row2-label": { + "type": "Text", + "parent": "tab-content", + "left": 756, "top": 422, + "text": "Male", + "fontColor": "#555568", "fontSize": 11 + }, + "body-thin-m": { + "type": "Rectangle", + "parent": "tab-content", + "left": 756, "top": 438, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-thin-m-label": { + "type": "Text", + "parent": "body-thin-m", + "left": 786, "top": 528, + "text": "Thin", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "body-avg-m": { + "type": "Rectangle", + "parent": "tab-content", + "left": 868, "top": 438, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-avg-m-label": { + "type": "Text", + "parent": "body-avg-m", + "left": 890, "top": 528, + "text": "Average", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + "body-musc-m": { + "type": "Rectangle", + "parent": "tab-content", + "left": 980, "top": 438, "width": 104, "height": 110, + "fillColor": "#3a4050", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "body-musc-m-label": { + "type": "Text", + "parent": "body-musc-m", + "left": 1000, "top": 528, + "text": "Muscular", + "fontColor": "#c8d0e0", "fontSize": 10 + }, + + "body-scroll-hint": { + "type": "Text", + "parent": "tab-content", + "left": 880, "top": 556, + "text": "Scroll for more...", + "fontColor": "#555568", "fontSize": 10 + }, + + "skin-dock": { + "type": "Rectangle", + "parent": "tab-content", + "left": 740, "top": 580, "width": 380, "height": 76, + "fillColor": "#1a1e24", "strokeColor": "#333340", + "corners": [0, 0, 8, 8] + }, + "skin-dock-label": { + "type": "Text", + "parent": "skin-dock", + "left": 756, "top": 588, + "text": "SKIN TONE", + "fontColor": "#c8d0e0", "fontSize": 11 + }, + "skin-1": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 756, "top": 606, "width": 32, "height": 32, + "fillColor": "#f5d6b8", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "skin-2": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 796, "top": 606, "width": 32, "height": 32, + "fillColor": "#e8c4a0", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-3": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 836, "top": 606, "width": 32, "height": 32, + "fillColor": "#c8a882", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-4": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 876, "top": 606, "width": 32, "height": 32, + "fillColor": "#b08860", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-5": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 916, "top": 606, "width": 32, "height": 32, + "fillColor": "#96724c", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-6": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 956, "top": 606, "width": 32, "height": 32, + "fillColor": "#7c5c3a", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-7": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 996, "top": 606, "width": 32, "height": 32, + "fillColor": "#624830", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-8": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 1036, "top": 606, "width": 32, "height": 32, + "fillColor": "#4a3424", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "skin-9": { + "type": "Rectangle", + "parent": "skin-dock", + "left": 1076, "top": 606, "width": 32, "height": 32, + "fillColor": "#3a2818", "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + + "footer": { + "type": "Rectangle", + "parent": "bg", + "left": 0, "top": 700, "width": 1140, "height": 80, + "fillColor": "#1a1e24" + }, + "btn-back": { + "type": "Rectangle", + "parent": "footer", + "left": 20, "top": 720, "width": 120, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-back-label": { + "type": "Text", + "parent": "btn-back", + "left": 36, "top": 730, + "text": "[ESC] Back", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-random": { + "type": "Rectangle", + "parent": "footer", + "left": 290, "top": 720, "width": 160, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-random-label": { + "type": "Text", + "parent": "btn-random", + "left": 310, "top": 730, + "text": "[R] Randomise", + "fontColor": "#c8d8f0", "fontSize": 13 + }, + "btn-confirm": { + "type": "Rectangle", + "parent": "footer", + "left": 980, "top": 720, "width": 140, "height": 40, + "fillColor": "#2a3040", "strokeColor": "#c8d8f0", + "corners": [4, 4, 4, 4] + }, + "btn-confirm-label": { + "type": "Text", + "parent": "btn-confirm", + "left": 998, "top": 730, + "text": "[ENTER] Start", + "fontColor": "#c8d8f0", "fontSize": 13 + } + } +} diff --git a/docs/design/wireframes/character-creation/main-layout.png b/docs/design/wireframes/character-creation/main-layout.png new file mode 100644 index 000000000..9cdd21270 Binary files /dev/null and b/docs/design/wireframes/character-creation/main-layout.png differ