ryan/stickman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add StageBackgroundView and related tests for plain background functionality

Browse Source 
- Implemented StageBackgroundView class for managing sky and plain backgrounds in the stage.
- Added functionality to set background type and color, bind camera, and apply themes.
- Created test_phase19_plain_background.gd to validate plain background behavior and migration.
- Developed test_phase19_starter_chooser_layout.gd to ensure proper layout and functionality of the starter chooser.
- Included visual capture tests for UI elements and interactions.
This commit is contained in:
ryan
2026-10-22 16:18:25 -04:00
parent db677dc194
commit 59f1817063
43 changed files with 2403 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plans/assets/phase_19_plain_background/01_new_scene.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

docs/plans/assets/phase_19_plain_background/01_new_scene.svg
+78
View File
@@ -0,0 +1,78 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000">
<defs>
<pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse">
<path d="M64 0H0V64" fill="none" stroke="#FFFFFF" stroke-opacity=".055" stroke-width="1"/>
</pattern>
<linearGradient id="sky" x2="0" y2="1"><stop stop-color="#626E7E"/><stop offset="1" stop-color="#D3DEE5"/></linearGradient>
<linearGradient id="day" x2="0" y2="1"><stop stop-color="#52ADE8"/><stop offset="1" stop-color="#DFF5FF"/></linearGradient>
<linearGradient id="room" x2="0" y2="1"><stop stop-color="#DAD0B7"/><stop offset="1" stop-color="#F4E8CF"/></linearGradient>
</defs>
<rect width="1600" height="1000" fill="#2A313B"/>
<rect width="1600" height="1000" fill="url(#grid)"/>
<rect x="84" y="54" width="1432" height="892" rx="30" fill="#202735" stroke="#566173" stroke-width="2"/>
<text x="136" y="123" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="42" font-weight="700">Choose a starter scene</text>
<text x="137" y="160" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="21">Pick a place to begin. You can change the background later.</text>
<!-- Plain Background card -->
<g>
<rect x="134" y="190" width="638" height="302" rx="16" fill="#171C25" stroke="#22C6FF" stroke-width="4"/>
<rect x="146" y="202" width="614" height="170" rx="10" fill="#F5EFE0"/>
<rect x="146" y="202" width="614" height="170" rx="10" fill="none" stroke="#FFFFFF" stroke-opacity=".35" stroke-width="2"/>
<text x="453" y="416" text-anchor="middle" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="28" font-weight="700">Plain Background</text>
<text x="453" y="449" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">An empty stage with one color.</text>
<text x="453" y="476" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">Choose a new color whenever you like.</text>
</g>
<!-- Open Sky card -->
<g>
<rect x="798" y="190" width="638" height="302" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="810" y="202" width="614" height="170" rx="10" fill="url(#sky)"/>
<circle cx="1286" cy="250" r="22" fill="#FFF0A2" stroke="#FFE27A" stroke-width="6"/>
<g fill="#F7FBFF" stroke="#DCE7F0" stroke-width="3">
<ellipse cx="921" cy="275" rx="37" ry="15"/><circle cx="902" cy="268" r="15"/><circle cx="925" cy="261" r="19"/><circle cx="946" cy="271" r="14"/>
<ellipse cx="1115" cy="316" rx="39" ry="14"/><circle cx="1094" cy="309" r="14"/><circle cx="1117" cy="302" r="18"/><circle cx="1140" cy="313" r="13"/>
</g>
<text x="1117" y="416" text-anchor="middle" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="28" font-weight="700">Open Sky</text>
<text x="1117" y="449" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">An empty stage with a soft sky.</text>
<text x="1117" y="476" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">Sun and clouds, ready for your story.</text>
</g>
<!-- Town Street card -->
<g>
<rect x="134" y="522" width="638" height="302" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="146" y="534" width="614" height="170" rx="10" fill="url(#day)"/>
<circle cx="695" cy="566" r="17" fill="#FFE99A"/>
<g fill="#FFFFFF" stroke="#DCE7F0" stroke-width="2">
<ellipse cx="228" cy="574" rx="29" ry="11"/><circle cx="215" cy="568" r="11"/><circle cx="231" cy="563" r="14"/><circle cx="247" cy="572" r="10"/>
<ellipse cx="430" cy="600" rx="32" ry="11"/><circle cx="414" cy="594" r="11"/><circle cx="432" cy="588" r="14"/><circle cx="450" cy="598" r="10"/>
</g>
<rect x="146" y="643" width="614" height="39" fill="#58996B"/>
<rect x="146" y="682" width="614" height="22" fill="#5C626A"/>
<path d="M322 642L393 586L466 642Z" fill="#D86F58" stroke="#282D35" stroke-width="4"/>
<rect x="338" y="642" width="108" height="40" fill="#EAD6AE" stroke="#282D35" stroke-width="4"/>
<rect x="373" y="650" width="28" height="32" fill="#55A6D0" stroke="#282D35" stroke-width="3"/>
<rect x="394" y="612" width="24" height="27" fill="#68B9E2" stroke="#282D35" stroke-width="3"/>
<text x="453" y="752" text-anchor="middle" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="28" font-weight="700">Town Street</text>
<text x="453" y="785" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">Cloudy sky, shops, trees,</text>
<text x="453" y="812" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">sidewalk, and road.</text>
</g>
<!-- Living Room card -->
<g>
<rect x="798" y="522" width="638" height="302" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="810" y="534" width="614" height="170" rx="10" fill="url(#room)"/>
<rect x="810" y="534" width="614" height="67" fill="url(#day)"/>
<circle cx="1306" cy="567" r="17" fill="#FFE99A"/>
<rect x="1038" y="570" width="103" height="98" fill="#91C5E3" stroke="#704E3D" stroke-width="8"/>
<path d="M1089 574V664M1042 620H1137" stroke="#FFF8E9" stroke-width="7"/>
<rect x="810" y="676" width="614" height="28" fill="#926545"/>
<rect x="876" y="630" width="135" height="54" rx="14" fill="#6D8E67" stroke="#4E5E49" stroke-width="4"/>
<rect x="890" y="614" width="107" height="36" rx="12" fill="#7FA17A" stroke="#4E5E49" stroke-width="4"/>
<text x="1117" y="752" text-anchor="middle" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="28" font-weight="700">Living Room</text>
<text x="1117" y="785" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">A cozy room with a window,</text>
<text x="1117" y="812" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="20">rug, and furniture.</text>
</g>
<rect x="692" y="864" width="216" height="58" rx="18" fill="#171C25" stroke="#586273" stroke-width="2"/>
<text x="800" y="902" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="24" font-weight="700">Close</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

docs/plans/assets/phase_19_plain_background/02_background_picker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

docs/plans/assets/phase_19_plain_background/02_background_picker.svg
+74
View File
@@ -0,0 +1,74 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000">
<defs>
<pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse"><path d="M64 0H0V64" fill="none" stroke="#FFFFFF" stroke-opacity=".055" stroke-width="1"/></pattern>
<linearGradient id="clear" x2="0" y2="1"><stop stop-color="#52ADE8"/><stop offset="1" stop-color="#DFF5FF"/></linearGradient>
<linearGradient id="cloudy" x2="0" y2="1"><stop stop-color="#72839A"/><stop offset="1" stop-color="#D4E0E4"/></linearGradient>
<linearGradient id="sunset" x2="0" y2="1"><stop stop-color="#765A91"/><stop offset=".55" stop-color="#DF8E9A"/><stop offset="1" stop-color="#FFC980"/></linearGradient>
<linearGradient id="night" x2="0" y2="1"><stop stop-color="#101A3B"/><stop offset="1" stop-color="#536F97"/></linearGradient>
</defs>
<rect width="1600" height="1000" fill="#2A313B"/><rect width="1600" height="1000" fill="url(#grid)"/>
<rect x="72" y="38" width="1456" height="924" rx="30" fill="#202735" stroke="#566173" stroke-width="2"/>
<text x="120" y="102" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="38" font-weight="700">Scenery</text>
<rect x="120" y="124" width="230" height="54" rx="16" fill="#12394A" stroke="#22C6FF" stroke-width="3"/>
<text x="235" y="160" text-anchor="middle" fill="#F6FAFF" font-family="Arial, sans-serif" font-size="22" font-weight="700">Backgrounds</text>
<rect x="365" y="124" width="190" height="54" rx="16" fill="#171C25" stroke="#566173" stroke-width="2"/>
<text x="460" y="160" text-anchor="middle" fill="#DCE3EC" font-family="Arial, sans-serif" font-size="22">Artwork</text>
<text x="120" y="224" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="25" font-weight="700">Choose the scene background</text>
<!-- Plain Background -->
<g>
<rect x="120" y="250" width="420" height="246" rx="16" fill="#171C25" stroke="#22C6FF" stroke-width="4"/>
<rect x="132" y="262" width="396" height="157" rx="10" fill="#F5EFE0"/>
<rect x="145" y="274" width="165" height="32" rx="12" fill="#12394A" stroke="#22C6FF" stroke-width="2"/>
<text x="227" y="297" text-anchor="middle" fill="#F7FBFF" font-family="Arial, sans-serif" font-size="16" font-weight="700">Current background</text>
<text x="330" y="458" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="23" font-weight="700">Plain Background</text>
</g>
<!-- Clear Day -->
<g>
<rect x="590" y="250" width="420" height="246" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="602" y="262" width="396" height="157" rx="10" fill="url(#clear)"/>
<circle cx="910" cy="304" r="23" fill="#FFE99A" stroke="#FFF3BD" stroke-width="5"/>
<g fill="#FFFFFF" stroke="#DFEAF1" stroke-width="2"><ellipse cx="714" cy="354" rx="43" ry="14"/><circle cx="694" cy="348" r="13"/><circle cx="717" cy="341" r="18"/><circle cx="741" cy="352" r="12"/></g>
<text x="800" y="458" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="23" font-weight="700">Clear Day</text>
</g>
<!-- Cloudy Day -->
<g>
<rect x="1060" y="250" width="420" height="246" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="1072" y="262" width="396" height="157" rx="10" fill="url(#cloudy)"/>
<g fill="#F8FBFE" stroke="#E2EBF1" stroke-width="2"><ellipse cx="1190" cy="326" rx="42" ry="14"/><circle cx="1170" cy="320" r="14"/><circle cx="1194" cy="312" r="18"/><circle cx="1216" cy="324" r="12"/><ellipse cx="1360" cy="372" rx="42" ry="13"/><circle cx="1342" cy="366" r="12"/><circle cx="1362" cy="358" r="17"/><circle cx="1384" cy="369" r="12"/></g>
<text x="1270" y="458" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="23" font-weight="700">Cloudy Day</text>
</g>
<!-- Sunset -->
<g>
<rect x="120" y="520" width="420" height="220" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="132" y="532" width="396" height="135" rx="10" fill="url(#sunset)"/>
<circle cx="330" cy="623" r="23" fill="#FFE09B"/><path d="M132 640Q330 600 528 640V667H132Z" fill="#5C6D76" opacity=".7"/>
<text x="330" y="713" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="23" font-weight="700">Sunset</text>
</g>
<!-- Starry Night -->
<g>
<rect x="590" y="520" width="420" height="220" rx="16" fill="#171C25" stroke="#465061" stroke-width="2"/>
<rect x="602" y="532" width="396" height="135" rx="10" fill="url(#night)"/>
<g fill="#FFE8A5"><circle cx="664" cy="563" r="3"/><circle cx="740" cy="604" r="3"/><circle cx="806" cy="555" r="4"/><circle cx="927" cy="580" r="3"/><circle cx="889" cy="635" r="3"/></g>
<path d="M875 560a28 28 0 1 0 26 46a22 22 0 1 1-26-46" fill="#FFF0BE"/>
<text x="800" y="713" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="23" font-weight="700">Starry Night</text>
</g>
<text x="1060" y="558" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="22" font-weight="700">More backgrounds</text>
<rect x="1060" y="578" width="195" height="100" rx="15" fill="#171C25" stroke="#566173" stroke-width="2"/>
<rect x="1077" y="596" width="52" height="56" rx="8" fill="#C6A36C" stroke="#E7D0A6" stroke-width="2"/>
<path d="M1083 606h40M1083 618h40M1083 630h40M1083 642h40" stroke="#896644" stroke-width="3"/>
<text x="1183" y="635" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="19" font-weight="700">Wall panel</text>
<rect x="1274" y="578" width="206" height="100" rx="15" fill="#171C25" stroke="#566173" stroke-width="2"/>
<rect x="1290" y="596" width="52" height="56" rx="8" fill="#7AA474" stroke="#A5C39C" stroke-width="2"/>
<path d="M1297 609h38M1297 622h38M1297 635h38" stroke="#D7E6C5" stroke-width="2" opacity=".7"/>
<text x="1402" y="622" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="16" font-weight="700">Background</text>
<text x="1402" y="644" text-anchor="middle" fill="#F6F8FC" font-family="Arial, sans-serif" font-size="16" font-weight="700">ground</text>
<rect x="692" y="874" width="216" height="58" rx="18" fill="#171C25" stroke="#586273" stroke-width="2"/>
<text x="800" y="912" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="24" font-weight="700">Close</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

docs/plans/assets/phase_19_plain_background/03_color_choices.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

docs/plans/assets/phase_19_plain_background/03_color_choices.svg
+45
View File
@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000">
<defs>
<pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse"><path d="M64 0H0V64" fill="none" stroke="#FFFFFF" stroke-opacity=".055" stroke-width="1"/></pattern>
</defs>
<rect width="1600" height="1000" fill="#2A313B"/><rect width="1600" height="1000" fill="url(#grid)"/>
<rect x="76" y="46" width="1448" height="908" rx="30" fill="#202735" stroke="#566173" stroke-width="2"/>
<rect x="116" y="82" width="250" height="54" rx="16" fill="#171C25" stroke="#566173" stroke-width="2"/>
<text x="241" y="117" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="21" font-weight="700">‹ Backgrounds</text>
<text x="116" y="194" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="38" font-weight="700">Plain Background</text>
<text x="118" y="231" fill="#B8C2D0" font-family="Arial, sans-serif" font-size="21">Tap a color to use it on the Stage.</text>
<text x="120" y="279" fill="#EAF0F8" font-family="Arial, sans-serif" font-size="22" font-weight="700">Preview</text>
<rect x="120" y="296" width="1360" height="190" rx="22" fill="#F5EFE0" stroke="#F4F7FB" stroke-width="4"/>
<rect x="120" y="520" width="310" height="280" rx="18" fill="#171C25" stroke="#3C4656" stroke-width="2"/>
<text x="150" y="564" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="22" font-weight="700">Color</text>
<rect x="150" y="584" width="68" height="68" rx="12" fill="#F5EFE0" stroke="#22C6FF" stroke-width="4"/>
<circle cx="212" cy="646" r="16" fill="#087DBA" stroke="#44CCFF" stroke-width="2"/>
<path d="M205 652 L207 646 L215 638 L220 643 L212 651 Z M213 640 L218 645 M205 652 L211 650" fill="none" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="234" y="625" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="23" font-weight="700">#F5EFE0</text>
<text x="150" y="696" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="18">Tap swatch to pick a custom color</text>
<rect x="454" y="520" width="470" height="280" rx="18" fill="#171C25" stroke="#3C4656" stroke-width="2"/>
<text x="484" y="564" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="22" font-weight="700">Recently used</text>
<g stroke="#DCE3EC" stroke-width="3">
<rect x="484" y="590" width="64" height="64" rx="12" fill="#FFB703"/><rect x="560" y="590" width="64" height="64" rx="12" fill="#24B9E8"/>
<rect x="636" y="590" width="64" height="64" rx="12" fill="#00A542"/><rect x="712" y="590" width="64" height="64" rx="12" fill="#0798EA"/>
<rect x="788" y="590" width="64" height="64" rx="12" fill="#F5EFE0" stroke="#22C6FF" stroke-width="5"/>
</g>
<g stroke="#DCE3EC" stroke-width="3">
<rect x="484" y="682" width="64" height="64" rx="12" fill="#F04C53"/>
<rect x="560" y="682" width="64" height="64" rx="12" fill="#A855F7"/>
<rect x="636" y="682" width="64" height="64" rx="12" fill="#FFFFFF"/>
</g>
<rect x="948" y="520" width="532" height="280" rx="18" fill="#171C25" stroke="#3C4656" stroke-width="2"/>
<text x="978" y="564" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="22" font-weight="700">Colors</text>
<g stroke="#DCE3EC" stroke-width="3">
<rect x="978" y="590" width="64" height="64" rx="12" fill="#FFFFFF"/><rect x="1054" y="590" width="64" height="64" rx="12" fill="#171717"/>
<rect x="1130" y="590" width="64" height="64" rx="12" fill="#22B8E6"/><rect x="1206" y="590" width="64" height="64" rx="12" fill="#FFB703"/>
<rect x="1282" y="590" width="64" height="64" rx="12" fill="#2AD67B"/><rect x="1358" y="590" width="64" height="64" rx="12" fill="#F04C53"/>
</g>
<rect x="670" y="858" width="260" height="62" rx="18" fill="#171C25" stroke="#586273" stroke-width="2"/>
<text x="800" y="898" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="22" font-weight="700">Back to Backgrounds</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

docs/plans/assets/phase_19_plain_background/04_custom_color_picker.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

docs/plans/assets/phase_19_plain_background/04_custom_color_picker.svg
+49
View File
@@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000">
<defs>
<pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse"><path d="M64 0H0V64" fill="none" stroke="#FFFFFF" stroke-opacity=".055" stroke-width="1"/></pattern>
<linearGradient id="fieldBase" x1="0" x2="1"><stop stop-color="#F2BF48"/><stop offset="1" stop-color="#F2BF48"/></linearGradient>
<linearGradient id="whiteFade" x1="0" x2="1"><stop stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient>
<linearGradient id="blackFade" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000"/></linearGradient>
<linearGradient id="hues" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#FF0000"/><stop offset=".17" stop-color="#FFFF00"/><stop offset=".34" stop-color="#00FF00"/><stop offset=".51" stop-color="#00FFFF"/><stop offset=".68" stop-color="#0000FF"/><stop offset=".84" stop-color="#FF00FF"/><stop offset="1" stop-color="#FF0000"/></linearGradient>
</defs>
<rect width="1600" height="1000" fill="#2A313B"/><rect width="1600" height="1000" fill="url(#grid)"/>
<rect x="175" y="56" width="1250" height="888" rx="30" fill="#202735" stroke="#566173" stroke-width="2"/>
<text x="800" y="119" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="40" font-weight="700">Choose background color</text>
<text x="230" y="165" fill="#EAF0F8" font-family="Arial, sans-serif" font-size="22" font-weight="700">Preview</text>
<rect x="230" y="184" width="1140" height="145" rx="22" fill="#F5EFE0" stroke="#F4F7FB" stroke-width="4"/>
<!-- saturation and value field -->
<rect x="230" y="356" width="890" height="365" rx="10" fill="url(#fieldBase)"/>
<rect x="230" y="356" width="890" height="365" rx="10" fill="url(#whiteFade)"/>
<rect x="230" y="356" width="890" height="365" rx="10" fill="url(#blackFade)"/>
<rect x="230" y="356" width="890" height="365" rx="10" fill="none" stroke="#AEB8C8" stroke-width="2"/>
<circle cx="328" cy="412" r="12" fill="none" stroke="#111827" stroke-width="5"/><circle cx="328" cy="412" r="8" fill="none" stroke="#FFFFFF" stroke-width="3"/>
<!-- hue bar -->
<rect x="1144" y="356" width="76" height="365" rx="12" fill="url(#hues)" stroke="#AEB8C8" stroke-width="2"/>
<path d="M1136 397H1228" stroke="#10151E" stroke-width="8"/><path d="M1136 397H1228" stroke="#FFFFFF" stroke-width="4"/>
<!-- mode tabs -->
<rect x="230" y="744" width="990" height="56" rx="14" fill="#171C25" stroke="#566173" stroke-width="2"/>
<rect x="232" y="746" width="326" height="52" rx="12" fill="#2D3543" stroke="#22C6FF" stroke-width="2"/>
<text x="395" y="781" text-anchor="middle" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="21" font-weight="700">RGB</text>
<path d="M560 750V795M890 750V795" stroke="#566173" stroke-width="2"/>
<text x="725" y="781" text-anchor="middle" fill="#DAE1EA" font-family="Arial, sans-serif" font-size="21">HSV</text>
<text x="1055" y="781" text-anchor="middle" fill="#DAE1EA" font-family="Arial, sans-serif" font-size="21">Linear</text>
<!-- selected value -->
<rect x="1245" y="356" width="125" height="365" rx="16" fill="#171C25" stroke="#3C4656" stroke-width="2"/>
<text x="1307" y="391" text-anchor="middle" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="16">COLOR</text>
<rect x="1268" y="416" width="79" height="79" rx="14" fill="#F5EFE0" stroke="#22C6FF" stroke-width="3"/>
<text x="1307" y="531" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="16">Hex</text>
<rect x="1260" y="546" width="94" height="44" rx="9" fill="#252D3A" stroke="#657184" stroke-width="2"/>
<text x="1307" y="575" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="18">F5EFE0</text>
<text x="1307" y="634" text-anchor="middle" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="15">R 245</text>
<text x="1307" y="662" text-anchor="middle" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="15">G 239</text>
<text x="1307" y="690" text-anchor="middle" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="15">B 224</text>
<rect x="835" y="850" width="230" height="62" rx="18" fill="#171C25" stroke="#586273" stroke-width="2"/>
<text x="950" y="890" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="22" font-weight="700">Back</text>
<rect x="1085" y="850" width="285" height="62" rx="18" fill="#087DBA" stroke="#44CCFF" stroke-width="3"/>
<text x="1227" y="890" text-anchor="middle" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="22" font-weight="700">Use color</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

docs/plans/assets/phase_19_plain_background/05_large_starter_chooser.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

docs/plans/assets/phase_19_plain_background/05_large_starter_chooser.svg
+92
View File
@@ -0,0 +1,92 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1800" height="1200" viewBox="0 0 1800 1200">
<defs>
<pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse">
<path d="M64 0H0V64" fill="none" stroke="#FFFFFF" stroke-opacity=".055" stroke-width="1"/>
</pattern>
<linearGradient id="open-sky" x2="0" y2="1"><stop stop-color="#626E7E"/><stop offset="1" stop-color="#D3DEE5"/></linearGradient>
<linearGradient id="town-sky" x2="0" y2="1"><stop stop-color="#52ADE8"/><stop offset="1" stop-color="#DFF5FF"/></linearGradient>
<linearGradient id="room-wall" x2="0" y2="1"><stop stop-color="#E6DABD"/><stop offset="1" stop-color="#F4E8CF"/></linearGradient>
<clipPath id="plain-clip"><rect x="134" y="198" width="742" height="276" rx="12"/></clipPath>
<clipPath id="sky-clip"><rect x="924" y="198" width="742" height="276" rx="12"/></clipPath>
<clipPath id="town-clip"><rect x="134" y="638" width="742" height="276" rx="12"/></clipPath>
<clipPath id="room-clip"><rect x="924" y="638" width="742" height="276" rx="12"/></clipPath>
</defs>
<rect width="1800" height="1200" fill="#2A313B"/>
<rect width="1800" height="1200" fill="url(#grid)"/>
<rect x="65" y="35" width="1670" height="1130" rx="30" fill="#202735" stroke="#566173" stroke-width="2"/>
<text x="122" y="111" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="46" font-weight="700">Choose a starter scene</text>
<text x="124" y="151" fill="#AEB8C8" font-family="Arial, sans-serif" font-size="23">Pick a place to begin. You can change the background later.</text>
<!-- The larger cards devote almost twice the original area to the scene preview. -->
<rect x="120" y="184" width="770" height="418" rx="20" fill="#171C25" stroke="#22C6FF" stroke-width="4"/>
<rect x="910" y="184" width="770" height="418" rx="20" fill="#171C25" stroke="#596474" stroke-width="2"/>
<rect x="120" y="624" width="770" height="418" rx="20" fill="#171C25" stroke="#596474" stroke-width="2"/>
<rect x="910" y="624" width="770" height="418" rx="20" fill="#171C25" stroke="#596474" stroke-width="2"/>
<g clip-path="url(#plain-clip)">
<rect x="134" y="198" width="742" height="276" fill="#F5EFE0"/>
</g>
<rect x="134" y="198" width="742" height="276" rx="12" fill="none" stroke="#FFFFFF" stroke-opacity=".38" stroke-width="2"/>
<g clip-path="url(#sky-clip)">
<rect x="924" y="198" width="742" height="276" fill="url(#open-sky)"/>
<circle cx="1525" cy="267" r="26" fill="#FFF1A8" stroke="#FFE27A" stroke-width="7"/>
<g fill="#F7FBFF" stroke="#DBE6EF" stroke-width="3">
<ellipse cx="1042" cy="297" rx="49" ry="19"/><circle cx="1014" cy="287" r="20"/><circle cx="1043" cy="278" r="25"/><circle cx="1077" cy="291" r="20"/>
<ellipse cx="1342" cy="365" rx="53" ry="18"/><circle cx="1312" cy="355" r="20"/><circle cx="1343" cy="345" r="25"/><circle cx="1378" cy="358" r="19"/>
</g>
</g>
<g clip-path="url(#town-clip)">
<rect x="134" y="638" width="742" height="276" fill="url(#town-sky)"/>
<circle cx="781" cy="699" r="24" fill="#FFE99A"/>
<g fill="#FFFFFF" stroke="#DCE7F0" stroke-width="3">
<ellipse cx="245" cy="707" rx="43" ry="16"/><circle cx="222" cy="699" r="17"/><circle cx="249" cy="690" r="21"/><circle cx="277" cy="704" r="15"/>
<ellipse cx="532" cy="737" rx="39" ry="14"/><circle cx="511" cy="730" r="15"/><circle cx="534" cy="721" r="19"/><circle cx="558" cy="733" r="14"/>
</g>
<rect x="134" y="823" width="742" height="47" fill="#5D9D70"/>
<rect x="134" y="870" width="742" height="44" fill="#575F68"/>
<path d="M329 820L432 728L534 820Z" fill="#D8705A" stroke="#28313A" stroke-width="5"/>
<rect x="349" y="820" width="166" height="51" fill="#E8D4AC" stroke="#28313A" stroke-width="5"/>
<rect x="415" y="834" width="39" height="37" fill="#58A7D4" stroke="#28313A" stroke-width="4"/>
<rect x="461" y="769" width="33" height="40" fill="#71BBDC" stroke="#28313A" stroke-width="4"/>
<path d="M647 821V746" stroke="#594D3B" stroke-width="12"/>
<circle cx="647" cy="738" r="48" fill="#4F9B67" stroke="#336D4C" stroke-width="5"/>
</g>
<g clip-path="url(#room-clip)">
<rect x="924" y="638" width="742" height="276" fill="url(#room-wall)"/>
<rect x="924" y="638" width="742" height="74" fill="url(#town-sky)"/>
<circle cx="1576" cy="680" r="23" fill="#FFE99A"/>
<rect x="1232" y="677" width="150" height="141" fill="#91C5E3" stroke="#704E3D" stroke-width="10"/>
<path d="M1307 683V812M1238 747H1376" stroke="#FFF8E9" stroke-width="8"/>
<rect x="924" y="866" width="742" height="48" fill="#926545"/>
<ellipse cx="1149" cy="865" rx="143" ry="26" fill="#BA7F5B"/>
<rect x="1041" y="792" width="226" height="81" rx="18" fill="#6D8E67" stroke="#4E5E49" stroke-width="6"/>
<rect x="1061" y="769" width="186" height="57" rx="18" fill="#80A17A" stroke="#4E5E49" stroke-width="6"/>
<rect x="1481" y="826" width="88" height="43" rx="6" fill="#C49371" stroke="#654C3E" stroke-width="5"/>
<path d="M1524 826V779" stroke="#755A43" stroke-width="6"/>
<circle cx="1524" cy="764" r="25" fill="#FFF5DF" stroke="#755A43" stroke-width="5"/>
</g>
<g fill="#F8FAFC" font-family="Arial, sans-serif" text-anchor="middle" font-weight="700" font-size="32">
<text x="505" y="521">Plain Background</text>
<text x="1295" y="521">Open Sky</text>
<text x="505" y="961">Town Street</text>
<text x="1295" y="961">Living Room</text>
</g>
<g fill="#F5F7FA" font-family="Arial, sans-serif" text-anchor="middle" font-size="22">
<text x="505" y="558">An empty stage with one color.</text>
<text x="505" y="589">Choose a new color whenever you like.</text>
<text x="1295" y="558">An empty stage with a soft sky.</text>
<text x="1295" y="589">Sun and clouds, ready for your story.</text>
<text x="505" y="998">Cloudy sky, shops, trees,</text>
<text x="505" y="1029">sidewalk, and road.</text>
<text x="1295" y="998">A cozy room with a window,</text>
<text x="1295" y="1029">rug, and furniture.</text>
</g>
<rect x="790" y="1077" width="220" height="64" rx="18" fill="#171C25" stroke="#667386" stroke-width="2"/>
<text x="900" y="1118" text-anchor="middle" fill="#F5F7FA" font-family="Arial, sans-serif" font-size="26" font-weight="700">Close</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB