npm - kawaijs - Versions diffs - 1.0.0 → 1.0.1 - Mend

kawaijs 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/commands/build.js +4 -4
package/dist/commands/build.js.map +1 -1
package/dist/commands/create.d.ts.map +1 -1
package/dist/commands/create.js +3 -1
package/dist/commands/create.js.map +1 -1
package/dist/commands/dev.js +4 -4
package/dist/commands/dev.js.map +1 -1
package/dist/commands/validate.d.ts.map +1 -1
package/dist/commands/validate.js +20 -2
package/dist/commands/validate.js.map +1 -1
package/dist/config.d.ts.map +1 -1
package/dist/config.js +8 -3
package/dist/config.js.map +1 -1
package/dist/pwa.d.ts +1 -1
package/dist/pwa.d.ts.map +1 -1
package/dist/pwa.js +4 -3
package/dist/pwa.js.map +1 -1
package/dist/runtime-bundle.d.ts +1 -0
package/dist/runtime-bundle.d.ts.map +1 -1
package/dist/runtime-bundle.js +32 -15
package/dist/runtime-bundle.js.map +1 -1
package/package.json +8 -7
package/templates/starter/README.md +11 -0
package/templates/starter/game/assets/audio/bgm_ambient.mp3 +0 -0
package/templates/starter/game/assets/audio/bgm_ambient.wav +0 -0
package/templates/starter/game/assets/audio/bgm_upbeat.mp3 +0 -0
package/templates/starter/game/assets/audio/bgm_upbeat.wav +0 -0
package/templates/starter/game/assets/audio/sfx_click.mp3 +0 -0
package/templates/starter/game/assets/audio/sfx_click.wav +0 -0
package/templates/starter/game/assets/audio/sfx_sparkle.mp3 +0 -0
package/templates/starter/game/assets/audio/sfx_sparkle.wav +0 -0
package/templates/starter/game/assets/backgrounds/cg_celebration.svg +150 -0
package/templates/starter/game/assets/backgrounds/cg_sunset_promise.svg +70 -0
package/templates/starter/game/assets/backgrounds/classroom.svg +47 -0
package/templates/starter/game/assets/backgrounds/rooftop.svg +86 -0
package/templates/starter/game/assets/backgrounds/sunset_courtyard.svg +75 -0
package/templates/starter/game/assets/characters/kaori/happy.svg +40 -0
package/templates/starter/game/assets/characters/kaori/normal.svg +46 -0
package/templates/starter/game/assets/characters/kaori/smug.svg +38 -0
package/templates/starter/game/assets/characters/kaori/thinking.svg +38 -0
package/templates/starter/game/assets/characters/yumia/excited.svg +51 -0
package/templates/starter/game/assets/characters/yumia/happy.svg +48 -0
package/templates/starter/game/assets/characters/yumia/normal.svg +41 -0
package/templates/starter/game/assets/characters/yumia/sad.svg +41 -0
package/templates/starter/game/favicon.svg +8 -0
package/templates/starter/game/script.kawa +160 -0
package/templates/starter/game/style.css +41 -0
package/templates/starter/package.json +14 -0

package/templates/starter/game/assets/backgrounds/cg_celebration.svg ADDED Viewed

@@ -0,0 +1,150 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <linearGradient id="celSky" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#1e1b4b"/>
+      <stop offset="35%" stop-color="#4c0519"/>
+      <stop offset="70%" stop-color="#831843"/>
+      <stop offset="100%" stop-color="#042f2e"/>
+    </linearGradient>
+    <radialGradient id="centerGlow" cx="50%" cy="40%" r="55%">
+      <stop offset="0%" stop-color="#f43f5e" stop-opacity="0.55"/>
+      <stop offset="55%" stop-color="#fb7185" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="goldBanner" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="50%" stop-color="#fef08a"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+    <linearGradient id="yumiaHair" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fb7185"/>
+      <stop offset="100%" stop-color="#e11d48"/>
+    </linearGradient>
+    <linearGradient id="yumiaUniform" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1e293b"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <linearGradient id="kaoriHair" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#0284c7"/>
+    </linearGradient>
+    <linearGradient id="kaoriUniform" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#312e81"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="softShadow" x="-30%" y="-10%" width="160%" height="130%">
+      <feDropShadow dx="0" dy="18" stdDeviation="16" flood-color="#000" flood-opacity="0.45"/>
+    </filter>
+  </defs>
+  <rect width="1920" height="1080" fill="url(#celSky)"/>
+  <rect width="1920" height="1080" fill="url(#centerGlow)"/>
+  <g opacity="0.18" fill="#ffffff">
+    <polygon points="960,420 0,0 150,0"/>
+    <polygon points="960,420 400,0 600,0"/>
+    <polygon points="960,420 850,0 1070,0"/>
+    <polygon points="960,420 1320,0 1520,0"/>
+    <polygon points="960,420 1770,0 1920,0"/>
+    <polygon points="960,420 1920,280 1920,430"/>
+    <polygon points="960,420 1920,620 1920,780"/>
+    <polygon points="960,420 0,280 0,430"/>
+    <polygon points="960,420 0,620 0,780"/>
+  </g>
+  <g filter="url(#glow)">
+    <rect x="250" y="180" width="30" height="12" rx="4" fill="#f43f5e" transform="rotate(25 250 180)"/>
+    <rect x="420" y="120" width="28" height="10" rx="3" fill="#38bdf8" transform="rotate(-35 420 120)"/>
+    <rect x="750" y="150" width="32" height="14" rx="4" fill="#facc15" transform="rotate(15 750 150)"/>
+    <rect x="1180" y="110" width="30" height="12" rx="4" fill="#a855f7" transform="rotate(-20 1180 110)"/>
+    <rect x="1450" y="170" width="26" height="10" rx="3" fill="#34d399" transform="rotate(40 1450 170)"/>
+    <rect x="1680" y="240" width="34" height="14" rx="4" fill="#f43f5e" transform="rotate(-15 1680 240)"/>
+    <rect x="180" y="380" width="28" height="12" rx="3" fill="#facc15" transform="rotate(55 180 380)"/>
+    <rect x="1750" y="420" width="30" height="12" rx="4" fill="#38bdf8" transform="rotate(-45 1750 420)"/>
+    <path d="M 960,150 L 975,190 L 1020,195 L 985,225 L 995,270 L 960,245 L 925,270 L 935,225 L 900,195 L 945,190 Z" fill="#fef08a" opacity="0.95"/>
+    <path d="M 320,260 L 330,285 L 360,290 L 335,310 L 342,340 L 320,325 L 298,340 L 305,310 L 280,290 L 310,285 Z" fill="#38bdf8" opacity="0.85"/>
+    <path d="M 1600,260 L 1610,285 L 1640,290 L 1615,310 L 1622,340 L 1600,325 L 1578,340 L 1585,310 L 1560,290 L 1590,285 Z" fill="#f43f5e" opacity="0.85"/>
+  </g>
+  <!-- Banner -->
+  <g transform="translate(960, 250)">
+    <rect x="-420" y="-55" width="840" height="110" rx="20" fill="rgba(15, 23, 42, 0.88)" stroke="url(#goldBanner)" stroke-width="4"/>
+    <text x="0" y="5" font-family="'Segoe UI', system-ui, sans-serif" font-size="42" font-weight="900" fill="url(#goldBanner)" text-anchor="middle" letter-spacing="2">EVENT CG - PROJECT COMPLETE!</text>
+    <text x="0" y="38" font-family="'Segoe UI', system-ui, sans-serif" font-size="18" font-weight="600" fill="#94a3b8" text-anchor="middle" letter-spacing="4">KAWAIJS GAME DEVELOPMENT CLUB</text>
+  </g>
+  <!-- YUMIA (left) - matches character sprite: rose hair, ahoge, white collar, red ribbon -->
+  <g transform="translate(300, 280)" filter="url(#softShadow)">
+    <!-- back hair -->
+    <path d="M80 180 C40 450, 70 720, 120 860 C170 720, 140 450, 160 210 Z" fill="url(#yumiaHair)"/>
+    <path d="M440 180 C480 450, 450 720, 400 860 C350 720, 380 450, 360 210 Z" fill="url(#yumiaHair)"/>
+    <!-- body -->
+    <path d="M180 420 L340 420 L390 980 L130 980 Z" fill="url(#yumiaUniform)"/>
+    <polygon points="210,420 260,520 310,420 360,420 260,555 160,420" fill="#ffffff"/>
+    <polygon points="240,505 280,505 300,585 260,550 220,585" fill="#f43f5e"/>
+    <!-- neck + face -->
+    <rect x="235" y="350" width="50" height="80" fill="#fed7aa"/>
+    <ellipse cx="260" cy="290" rx="105" ry="120" fill="#ffedd5"/>
+    <ellipse cx="190" cy="330" rx="20" ry="11" fill="#f43f5e" opacity="0.4"/>
+    <ellipse cx="330" cy="330" rx="20" ry="11" fill="#f43f5e" opacity="0.4"/>
+    <!-- happy eyes + smile -->
+    <path d="M185 285 Q205 262 225 285" fill="none" stroke="#881337" stroke-width="7" stroke-linecap="round"/>
+    <path d="M295 285 Q315 262 335 285" fill="none" stroke="#881337" stroke-width="7" stroke-linecap="round"/>
+    <path d="M235 345 Q260 385 285 345 Z" fill="#e11d48"/>
+    <!-- front hair + bangs + ahoge -->
+    <path d="M155 210 C170 100, 350 100, 365 210 C340 245, 310 280, 285 245 C260 290, 240 290, 215 245 C190 280, 160 245, 155 210 Z" fill="url(#yumiaHair)"/>
+    <path d="M145 200 C120 320, 135 420, 170 470 C150 400, 150 310, 160 225 Z" fill="url(#yumiaHair)"/>
+    <path d="M375 200 C400 320, 385 420, 350 470 C370 400, 370 310, 360 225 Z" fill="url(#yumiaHair)"/>
+    <path d="M260 115 Q285 35 325 60 Q295 70 268 115" fill="url(#yumiaHair)"/>
+    <!-- wave hand -->
+    <g transform="translate(-20, 470) rotate(-18)">
+      <ellipse cx="40" cy="40" rx="38" ry="48" fill="#fed7aa"/>
+      <path d="M20 10 Q10 -25 35 -30 Q45 -5 40 15" fill="#fed7aa"/>
+      <path d="M45 5 Q55 -30 75 -25 Q70 0 55 18" fill="#fed7aa"/>
+    </g>
+    <!-- name plate -->
+    <rect x="170" y="1000" width="180" height="42" rx="21" fill="rgba(15,23,42,0.75)" stroke="#f43f5e" stroke-width="2"/>
+    <text x="260" y="1028" text-anchor="middle" font-family="'Segoe UI', system-ui, sans-serif" font-size="22" font-weight="800" fill="#fda4af" letter-spacing="2">YUMIA</text>
+  </g>
+  <!-- KAORI (right) - matches sprite: cyan hair, glasses, pale collar, blue tie -->
+  <g transform="translate(1120, 280)" filter="url(#softShadow)">
+    <!-- back hair halo -->
+    <ellipse cx="260" cy="300" rx="150" ry="160" fill="url(#kaoriHair)"/>
+    <path d="M90 220 C50 420, 80 700, 130 860 C175 700, 150 420, 160 250 Z" fill="url(#kaoriHair)"/>
+    <path d="M430 220 C470 420, 440 700, 390 860 C345 700, 370 420, 360 250 Z" fill="url(#kaoriHair)"/>
+    <!-- body -->
+    <path d="M180 420 L340 420 L390 980 L130 980 Z" fill="url(#kaoriUniform)"/>
+    <polygon points="220,420 260,510 300,420 350,420 260,550 150,420" fill="#e0f2fe"/>
+    <polygon points="245,485 275,485 288,590 260,620 232,590" fill="#0284c7"/>
+    <!-- neck + face -->
+    <rect x="235" y="350" width="50" height="80" fill="#fde68a"/>
+    <ellipse cx="260" cy="290" rx="105" ry="120" fill="#fef3c7"/>
+    <ellipse cx="190" cy="330" rx="18" ry="10" fill="#38bdf8" opacity="0.4"/>
+    <ellipse cx="330" cy="330" rx="18" ry="10" fill="#38bdf8" opacity="0.4"/>
+    <!-- glasses -->
+    <rect x="175" y="262" width="70" height="46" rx="9" fill="none" stroke="#0f172a" stroke-width="5"/>
+    <rect x="275" y="262" width="70" height="46" rx="9" fill="none" stroke="#0f172a" stroke-width="5"/>
+    <line x1="245" y1="285" x2="275" y2="285" stroke="#0f172a" stroke-width="5"/>
+    <!-- happy eyes + smile -->
+    <path d="M190 285 Q210 265 228 285" fill="none" stroke="#0369a1" stroke-width="6" stroke-linecap="round"/>
+    <path d="M292 285 Q310 265 328 285" fill="none" stroke="#0369a1" stroke-width="6" stroke-linecap="round"/>
+    <path d="M235 350 Q260 375 285 350" fill="none" stroke="#0284c7" stroke-width="5" stroke-linecap="round"/>
+    <!-- bangs -->
+    <path d="M145 210 C170 100, 350 100, 375 210 C340 235, 310 260, 275 235 C245 270, 225 270, 195 235 C170 260, 145 235, 145 210 Z" fill="url(#kaoriHair)"/>
+    <path d="M135 205 C110 320, 130 420, 170 460 C145 390, 145 320, 150 225 Z" fill="url(#kaoriHair)"/>
+    <path d="M385 205 C410 320, 390 420, 350 460 C375 390, 375 320, 370 225 Z" fill="url(#kaoriHair)"/>
+    <!-- name plate -->
+    <rect x="170" y="1000" width="180" height="42" rx="21" fill="rgba(15,23,42,0.75)" stroke="#38bdf8" stroke-width="2"/>
+    <text x="260" y="1028" text-anchor="middle" font-family="'Segoe UI', system-ui, sans-serif" font-size="22" font-weight="800" fill="#7dd3fc" letter-spacing="2">KAORI</text>
+  </g>
+  <rect width="1920" height="1080" fill="none" stroke="rgba(244, 63, 94, 0.4)" stroke-width="16"/>
+</svg>

package/templates/starter/game/assets/backgrounds/cg_sunset_promise.svg ADDED Viewed

@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <linearGradient id="promiseSky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#311042"/>
+      <stop offset="30%" stop-color="#701a75"/>
+      <stop offset="60%" stop-color="#c2410c"/>
+      <stop offset="85%" stop-color="#f97316"/>
+      <stop offset="100%" stop-color="#fef08a"/>
+    </linearGradient>
+    <radialGradient id="sunBloom" cx="65%" cy="60%" r="50%">
+      <stop offset="0%" stop-color="#fffbeb" stop-opacity="1"/>
+      <stop offset="25%" stop-color="#fde047" stop-opacity="0.8"/>
+      <stop offset="55%" stop-color="#ea580c" stop-opacity="0.3"/>
+      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="horizonGlow" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#ec4899"/>
+      <stop offset="50%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <!-- Sky -->
+  <rect width="1920" height="1080" fill="url(#promiseSky)"/>
+  <rect width="1920" height="1080" fill="url(#sunBloom)"/>
+  <!-- Clouds glowing in sunset -->
+  <path d="M 0,320 Q 300,260 650,330 Q 950,250 1350,340 Q 1650,280 1920,350 L 1920,480 L 0,480 Z" fill="#9d174d" opacity="0.35"/>
+  <path d="M 0,420 Q 400,360 850,430 Q 1250,370 1700,440 L 1920,440 L 1920,540 L 0,540 Z" fill="#c2410c" opacity="0.4"/>
+  <!-- Distant City Skyline & Mountains -->
+  <polygon points="0,680 200,580 450,680 700,540 1000,680 1300,590 1600,690 1920,620 1920,800 0,800" fill="#4a044e" opacity="0.75"/>
+  <!-- Rooftop Railing & Balcony Platform -->
+  <rect x="0" y="720" width="1920" height="360" fill="#18181b"/>
+  <!-- Glowing Horizon Line -->
+  <rect x="0" y="718" width="1920" height="4" fill="url(#horizonGlow)"/>
+  <!-- Railing Bars -->
+  <g stroke="#3f3f46" stroke-width="6" opacity="0.85">
+    <line x1="0" y1="780" x2="1920" y2="780"/>
+    <line x1="0" y1="860" x2="1920" y2="860"/>
+    <!-- Vertical Posts -->
+    <line x1="120" y1="720" x2="120" y2="940"/>
+    <line x1="320" y1="720" x2="320" y2="940"/>
+    <line x1="520" y1="720" x2="520" y2="940"/>
+    <line x1="720" y1="720" x2="720" y2="940"/>
+    <line x1="920" y1="720" x2="920" y2="940"/>
+    <line x1="1120" y1="720" x2="1120" y2="940"/>
+    <line x1="1320" y1="720" x2="1320" y2="940"/>
+    <line x1="1520" y1="720" x2="1520" y2="940"/>
+    <line x1="1720" y1="720" x2="1720" y2="940"/>
+  </g>
+  <!-- Atmospheric Cherry Blossom Petals in the Wind -->
+  <g fill="#fda4af" opacity="0.8">
+    <path d="M 280,450 C 270,430 300,420 310,440 C 315,455 295,470 280,450 Z" transform="rotate(25 280 450)"/>
+    <path d="M 520,380 C 510,360 540,350 550,370 C 555,385 535,400 520,380 Z" transform="rotate(-40 520 380)"/>
+    <path d="M 850,520 C 840,500 870,490 880,510 C 885,525 865,540 850,520 Z" transform="rotate(15 850 520)"/>
+    <path d="M 1200,420 C 1190,400 1220,390 1230,410 C 1235,425 1215,440 1200,420 Z" transform="rotate(65 1200 420)"/>
+    <path d="M 1520,490 C 1510,470 1540,460 1550,480 C 1555,495 1535,510 1520,490 Z" transform="rotate(-20 1520 490)"/>
+    <path d="M 1750,380 C 1740,360 1770,350 1780,370 C 1785,385 1765,400 1750,380 Z" transform="rotate(35 1750 380)"/>
+  </g>
+  <!-- Title Badge in Top Left -->
+  <g transform="translate(100, 100)">
+    <rect x="0" y="0" width="480" height="70" rx="14" fill="rgba(15, 23, 42, 0.75)" stroke="#fb7185" stroke-width="2"/>
+    <text x="24" y="44" font-family="'Plus Jakarta Sans', 'Segoe UI', sans-serif" font-size="24" font-weight="800" fill="#ffffff" letter-spacing="1">EVENT CG • THE SUNSET PROMISE</text>
+  </g>
+</svg>

package/templates/starter/game/assets/backgrounds/classroom.svg ADDED Viewed

@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="60%" stop-color="#bae6fd"/>
+      <stop offset="100%" stop-color="#fef08a"/>
+    </linearGradient>
+    <linearGradient id="wallGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#f8fafc"/>
+      <stop offset="100%" stop-color="#cbd5e1"/>
+    </linearGradient>
+    <linearGradient id="floorGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#b45309"/>
+      <stop offset="100%" stop-color="#78350f"/>
+    </linearGradient>
+  </defs>
+  <!-- Sky & Window View -->
+  <rect x="0" y="0" width="1920" height="1080" fill="#f1f5f9"/>
+  <rect x="150" y="100" width="900" height="550" fill="url(#skyGrad)"/>
+  <!-- Clouds -->
+  <circle cx="350" cy="250" r="60" fill="#ffffff" opacity="0.8"/>
+  <circle cx="420" cy="240" r="80" fill="#ffffff" opacity="0.9"/>
+  <circle cx="500" cy="260" r="50" fill="#ffffff" opacity="0.8"/>
+  <!-- Classroom Wall -->
+  <rect x="0" y="0" width="1920" height="700" fill="url(#wallGrad)" fill-opacity="0.9"/>
+  <!-- Large Window Frame -->
+  <rect x="140" y="90" width="920" height="570" fill="none" stroke="#64748b" stroke-width="16"/>
+  <line x1="600" y1="90" x2="600" y2="660" stroke="#64748b" stroke-width="12"/>
+  <line x1="140" y1="375" x2="1060" y2="375" stroke="#64748b" stroke-width="12"/>
+  <!-- Blackboard -->
+  <rect x="1150" y="120" width="680" height="380" rx="8" fill="#1e293b" stroke="#78350f" stroke-width="14"/>
+  <text x="1200" y="240" fill="#f8fafc" font-family="sans-serif" font-size="42" font-weight="bold">Welcome to Kawaijs!</text>
+  <text x="1200" y="320" fill="#38bdf8" font-family="sans-serif" font-size="28">Web-native Visual Novel Engine</text>
+  <!-- Wooden Floor -->
+  <polygon points="0,700 1920,700 1920,1080 0,1080" fill="url(#floorGrad)"/>
+  <!-- Floor Plank Lines -->
+  <line x1="0" y1="780" x2="1920" y2="780" stroke="#451a03" stroke-width="3" opacity="0.4"/>
+  <line x1="0" y1="880" x2="1920" y2="880" stroke="#451a03" stroke-width="3" opacity="0.4"/>
+  <line x1="0" y1="980" x2="1920" y2="980" stroke="#451a03" stroke-width="3" opacity="0.4"/>
+</svg>

package/templates/starter/game/assets/backgrounds/rooftop.svg ADDED Viewed

@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <linearGradient id="nightSky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#020617"/>
+      <stop offset="60%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+    <linearGradient id="moonGlow" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ffffff"/>
+      <stop offset="100%" stop-color="#e0f2fe"/>
+    </linearGradient>
+    <linearGradient id="roofFloor" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#334155"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+  </defs>
+  <!-- Night Sky -->
+  <rect x="0" y="0" width="1920" height="1080" fill="url(#nightSky)"/>
+  <!-- Stars -->
+  <g fill="#ffffff">
+    <circle cx="200" cy="150" r="2.5" opacity="0.9"/>
+    <circle cx="350" cy="80" r="1.5" opacity="0.6"/>
+    <circle cx="520" cy="220" r="2" opacity="0.8"/>
+    <circle cx="780" cy="110" r="3" opacity="0.9"/>
+    <circle cx="950" cy="180" r="1.5" opacity="0.7"/>
+    <circle cx="1120" cy="90" r="2" opacity="0.8"/>
+    <circle cx="1300" cy="240" r="2.5" opacity="0.9"/>
+    <circle cx="1580" cy="130" r="1.5" opacity="0.6"/>
+    <circle cx="1750" cy="210" r="3" opacity="0.95"/>
+    <circle cx="140" cy="300" r="2" opacity="0.5"/>
+    <circle cx="450" cy="340" r="1.5" opacity="0.7"/>
+  </g>
+  <!-- Glowing Crescent/Full Moon -->
+  <circle cx="1550" cy="220" r="90" fill="url(#moonGlow)"/>
+  <circle cx="1550" cy="220" r="140" fill="#38bdf8" opacity="0.15"/>
+  <!-- City Skyline in Distance -->
+  <g fill="#090d16">
+    <rect x="100" y="480" width="140" height="240"/>
+    <rect x="280" y="420" width="180" height="300"/>
+    <rect x="500" y="520" width="120" height="200"/>
+    <rect x="650" y="380" width="220" height="340"/>
+    <rect x="910" y="460" width="160" height="260"/>
+    <rect x="1100" y="400" width="200" height="320"/>
+    <rect x="1340" y="500" width="150" height="220"/>
+    <rect x="1520" y="440" width="190" height="280"/>
+    <rect x="1740" y="490" width="130" height="230"/>
+  </g>
+  <!-- Distant City Lights -->
+  <g fill="#fef08a" opacity="0.6">
+    <circle cx="140" cy="520" r="2"/>
+    <circle cx="180" cy="560" r="2"/>
+    <circle cx="320" cy="460" r="2.5" fill="#38bdf8"/>
+    <circle cx="360" cy="510" r="2"/>
+    <circle cx="400" cy="580" r="2"/>
+    <circle cx="700" cy="420" r="2.5" fill="#f43f5e"/>
+    <circle cx="750" cy="480" r="2"/>
+    <circle cx="800" cy="540" r="2"/>
+    <circle cx="1150" cy="440" r="2"/>
+    <circle cx="1220" cy="510" r="2.5" fill="#38bdf8"/>
+    <circle cx="1560" cy="480" r="2"/>
+    <circle cx="1620" cy="550" r="2"/>
+  </g>
+  <!-- Rooftop Safety Fence / Mesh -->
+  <line x1="0" y1="620" x2="1920" y2="620" stroke="#475569" stroke-width="8"/>
+  <line x1="0" y1="520" x2="1920" y2="520" stroke="#475569" stroke-width="6"/>
+  <line x1="0" y1="420" x2="1920" y2="420" stroke="#475569" stroke-width="6"/>
+  <!-- Fence Poles -->
+  <g stroke="#334155" stroke-width="8">
+    <line x1="160" y1="380" x2="160" y2="700"/>
+    <line x1="480" y1="380" x2="480" y2="700"/>
+    <line x1="800" y1="380" x2="800" y2="700"/>
+    <line x1="1120" y1="380" x2="1120" y2="700"/>
+    <line x1="1440" y1="380" x2="1440" y2="700"/>
+    <line x1="1760" y1="380" x2="1760" y2="700"/>
+  </g>
+  <!-- Rooftop Concrete Ground -->
+  <polygon points="0,680 1920,680 1920,1080 0,1080" fill="url(#roofFloor)"/>
+  <rect x="0" y="660" width="1920" height="30" fill="#1e293b"/>
+</svg>

package/templates/starter/game/assets/backgrounds/sunset_courtyard.svg ADDED Viewed

@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
+  <defs>
+    <linearGradient id="sunsetSky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#4c1d95"/>
+      <stop offset="35%" stop-color="#be185d"/>
+      <stop offset="70%" stop-color="#fb923c"/>
+      <stop offset="100%" stop-color="#fef08a"/>
+    </linearGradient>
+    <linearGradient id="sunGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#ffffff"/>
+      <stop offset="100%" stop-color="#f59e0b"/>
+    </linearGradient>
+    <linearGradient id="groundGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#7c2d12"/>
+      <stop offset="100%" stop-color="#451a03"/>
+    </linearGradient>
+    <linearGradient id="schoolWall" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#701a75"/>
+      <stop offset="100%" stop-color="#831843"/>
+    </linearGradient>
+  </defs>
+  <!-- Sky -->
+  <rect x="0" y="0" width="1920" height="1080" fill="url(#sunsetSky)"/>
+  <!-- Glowing Setting Sun -->
+  <circle cx="1400" cy="500" r="140" fill="url(#sunGrad)" opacity="0.9"/>
+  <circle cx="1400" cy="500" r="220" fill="#fbbf24" opacity="0.25"/>
+  <!-- Distant Mountains -->
+  <polygon points="0,700 350,520 700,700" fill="#581c87" opacity="0.6"/>
+  <polygon points="500,700 900,480 1350,700" fill="#4a044e" opacity="0.7"/>
+  <polygon points="1100,700 1550,540 1920,680 1920,700" fill="#3b0764" opacity="0.8"/>
+  <!-- School Building Silhouette (Left) -->
+  <rect x="0" y="320" width="650" height="480" fill="url(#schoolWall)"/>
+  <!-- Windows -->
+  <g fill="#fef08a" opacity="0.85">
+    <rect x="60" y="380" width="80" height="60" rx="4"/>
+    <rect x="180" y="380" width="80" height="60" rx="4"/>
+    <rect x="300" y="380" width="80" height="60" rx="4"/>
+    <rect x="420" y="380" width="80" height="60" rx="4"/>
+    <rect x="60" y="480" width="80" height="60" rx="4"/>
+    <rect x="180" y="480" width="80" height="60" rx="4"/>
+    <rect x="300" y="480" width="80" height="60" rx="4"/>
+    <rect x="420" y="480" width="80" height="60" rx="4"/>
+    <rect x="60" y="580" width="80" height="60" rx="4"/>
+    <rect x="180" y="580" width="80" height="60" rx="4"/>
+    <rect x="300" y="580" width="80" height="60" rx="4"/>
+    <rect x="420" y="580" width="80" height="60" rx="4"/>
+  </g>
+  <!-- Courtyard Ground -->
+  <polygon points="0,720 1920,680 1920,1080 0,1080" fill="url(#groundGrad)"/>
+  <path d="M 300,1080 Q 900,850 1400,680 L 1550,680 Q 1100,880 700,1080 Z" fill="#b45309" opacity="0.7"/>
+  <!-- Sakura Tree Silhouette (Right) -->
+  <path d="M 1650,1080 C 1650,900 1620,820 1680,720 C 1720,660 1680,620 1710,540 C 1670,580 1630,680 1610,750 C 1580,850 1560,940 1540,1080 Z" fill="#292524"/>
+  <!-- Sakura Foliage -->
+  <circle cx="1680" cy="460" r="160" fill="#f43f5e" opacity="0.85"/>
+  <circle cx="1540" cy="480" r="130" fill="#fb7185" opacity="0.9"/>
+  <circle cx="1800" cy="500" r="140" fill="#fda4af" opacity="0.8"/>
+  <circle cx="1660" cy="380" r="110" fill="#fda4af" opacity="0.95"/>
+  <!-- Floating Sakura Petals -->
+  <g fill="#fecdd3" opacity="0.8">
+    <ellipse cx="1200" cy="550" rx="14" ry="7" transform="rotate(25 1200 550)"/>
+    <ellipse cx="1050" cy="620" rx="12" ry="6" transform="rotate(-35 1050 620)"/>
+    <ellipse cx="850" cy="710" rx="15" ry="8" transform="rotate(45 850 710)"/>
+    <ellipse cx="600" cy="780" rx="13" ry="7" transform="rotate(15 600 780)"/>
+    <ellipse cx="1400" cy="670" rx="16" ry="8" transform="rotate(-20 1400 670)"/>
+  </g>
+</svg>

package/templates/starter/game/assets/characters/kaori/happy.svg ADDED Viewed

@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="kaoriHair" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#0284c7"/>
+    </linearGradient>
+    <linearGradient id="kaoriUniform" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#312e81"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+  </defs>
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#kaoriUniform)"/>
+  <polygon points="270,450 300,520 330,450 370,450 300,550 230,450" fill="#e0f2fe"/>
+  <polygon points="290,490 310,490 318,570 300,590 282,570" fill="#0284c7"/>
+  <rect x="275" y="380" width="50" height="80" fill="#fde68a"/>
+  <ellipse cx="300" cy="330" rx="140" ry="150" fill="url(#kaoriHair)"/>
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#fef3c7"/>
+  <!-- Blush -->
+  <ellipse cx="235" cy="355" rx="16" ry="8" fill="#38bdf8" opacity="0.4"/>
+  <ellipse cx="365" cy="355" rx="16" ry="8" fill="#38bdf8" opacity="0.4"/>
+  <!-- Glasses -->
+  <rect x="220" y="295" width="65" height="42" rx="8" fill="none" stroke="#0f172a" stroke-width="4"/>
+  <rect x="315" y="295" width="65" height="42" rx="8" fill="none" stroke="#0f172a" stroke-width="4"/>
+  <line x1="285" y1="315" x2="315" y2="315" stroke="#0f172a" stroke-width="4"/>
+  <!-- Happy Curved Eyes -->
+  <path d="M235 315 Q252 300 270 315" fill="none" stroke="#0369a1" stroke-width="5" stroke-linecap="round"/>
+  <path d="M330 315 Q347 300 365 315" fill="none" stroke="#0369a1" stroke-width="5" stroke-linecap="round"/>
+  <!-- Gentle Smile -->
+  <path d="M285 365 Q300 385 315 365" fill="none" stroke="#0284c7" stroke-width="4" stroke-linecap="round"/>
+  <path d="M190 250 C210 160, 390 160, 410 250 C380 270, 350 290, 320 270 C290 300, 270 300, 250 270 C230 290, 200 270, 190 250 Z" fill="url(#kaoriHair)"/>
+  <path d="M180 250 C160 350, 180 430, 210 450 C190 390, 190 330, 195 260 Z" fill="url(#kaoriHair)"/>
+  <path d="M420 250 C440 350, 420 430, 390 450 C410 390, 410 330, 405 260 Z" fill="url(#kaoriHair)"/>
+</svg>

package/templates/starter/game/assets/characters/kaori/normal.svg ADDED Viewed

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="kaoriHair" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#0284c7"/>
+    </linearGradient>
+    <linearGradient id="kaoriUniform" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#312e81"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+  </defs>
+  <!-- Body / School Uniform & Cardigan -->
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#kaoriUniform)"/>
+  <!-- Light Blue Shirt / Tie -->
+  <polygon points="270,450 300,520 330,450 370,450 300,550 230,450" fill="#e0f2fe"/>
+  <polygon points="290,490 310,490 318,570 300,590 282,570" fill="#0284c7"/>
+  <!-- Neck -->
+  <rect x="275" y="380" width="50" height="80" fill="#fde68a"/>
+  <!-- Short Bob Hair (Back) -->
+  <ellipse cx="300" cy="330" rx="140" ry="150" fill="url(#kaoriHair)"/>
+  <!-- Face -->
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#fef3c7"/>
+  <!-- Glasses -->
+  <rect x="220" y="295" width="65" height="42" rx="8" fill="none" stroke="#0f172a" stroke-width="4"/>
+  <rect x="315" y="295" width="65" height="42" rx="8" fill="none" stroke="#0f172a" stroke-width="4"/>
+  <line x1="285" y1="315" x2="315" y2="315" stroke="#0f172a" stroke-width="4"/>
+  <!-- Calm Blue Eyes -->
+  <circle cx="252" cy="316" r="14" fill="#0369a1"/>
+  <circle cx="250" cy="312" r="5" fill="#ffffff"/>
+  <circle cx="347" cy="316" r="14" fill="#0369a1"/>
+  <circle cx="345" cy="312" r="5" fill="#ffffff"/>
+  <!-- Neutral Mouth -->
+  <line x1="285" y1="375" x2="315" y2="375" stroke="#92400e" stroke-width="4" stroke-linecap="round"/>
+  <!-- Hair (Front Bangs) -->
+  <path d="M190 250 C210 160, 390 160, 410 250 C380 270, 350 290, 320 270 C290 300, 270 300, 250 270 C230 290, 200 270, 190 250 Z" fill="url(#kaoriHair)"/>
+  <path d="M180 250 C160 350, 180 430, 210 450 C190 390, 190 330, 195 260 Z" fill="url(#kaoriHair)"/>
+  <path d="M420 250 C440 350, 420 430, 390 450 C410 390, 410 330, 405 260 Z" fill="url(#kaoriHair)"/>
+</svg>

package/templates/starter/game/assets/characters/kaori/smug.svg ADDED Viewed

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="kaoriHair" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#0284c7"/>
+    </linearGradient>
+    <linearGradient id="kaoriUniform" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#312e81"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+  </defs>
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#kaoriUniform)"/>
+  <polygon points="270,450 300,520 330,450 370,450 300,550 230,450" fill="#e0f2fe"/>
+  <polygon points="290,490 310,490 318,570 300,590 282,570" fill="#0284c7"/>
+  <rect x="275" y="380" width="50" height="80" fill="#fde68a"/>
+  <ellipse cx="300" cy="330" rx="140" ry="150" fill="url(#kaoriHair)"/>
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#fef3c7"/>
+  <!-- Glasses -->
+  <rect x="220" y="295" width="65" height="42" rx="8" fill="none" stroke="#0f172a" stroke-width="4"/>
+  <rect x="315" y="295" width="65" height="42" rx="8" fill="none" stroke="#0f172a" stroke-width="4"/>
+  <line x1="285" y1="315" x2="315" y2="315" stroke="#0f172a" stroke-width="4"/>
+  <!-- Smug Half-Closed Eyes -->
+  <path d="M230 315 Q252 305 270 312" fill="none" stroke="#0369a1" stroke-width="5" stroke-linecap="round"/>
+  <path d="M330 312 Q348 305 370 315" fill="none" stroke="#0369a1" stroke-width="5" stroke-linecap="round"/>
+  <circle cx="250" cy="318" r="6" fill="#0369a1"/>
+  <circle cx="350" cy="318" r="6" fill="#0369a1"/>
+  <!-- Smug Wavy Cat Mouth -->
+  <path d="M285 365 Q295 380 302 368 Q310 380 320 365" fill="none" stroke="#0369a1" stroke-width="4" stroke-linecap="round"/>
+  <path d="M190 250 C210 160, 390 160, 410 250 C380 270, 350 290, 320 270 C290 300, 270 300, 250 270 C230 290, 200 270, 190 250 Z" fill="url(#kaoriHair)"/>
+  <path d="M180 250 C160 350, 180 430, 210 450 C190 390, 190 330, 195 260 Z" fill="url(#kaoriHair)"/>
+  <path d="M420 250 C440 350, 420 430, 390 450 C410 390, 410 330, 405 260 Z" fill="url(#kaoriHair)"/>
+</svg>

package/templates/starter/game/assets/characters/kaori/thinking.svg ADDED Viewed

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1000" width="600" height="1000">
+  <defs>
+    <linearGradient id="kaoriHair" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#38bdf8"/>
+      <stop offset="100%" stop-color="#0284c7"/>
+    </linearGradient>
+    <linearGradient id="kaoriUniform" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#312e81"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
+    </linearGradient>
+  </defs>
+  <path d="M220 450 L380 450 L420 900 L180 900 Z" fill="url(#kaoriUniform)"/>
+  <polygon points="270,450 300,520 330,450 370,450 300,550 230,450" fill="#e0f2fe"/>
+  <polygon points="290,490 310,490 318,570 300,590 282,570" fill="#0284c7"/>
+  <rect x="275" y="380" width="50" height="80" fill="#fde68a"/>
+  <ellipse cx="300" cy="330" rx="140" ry="150" fill="url(#kaoriHair)"/>
+  <ellipse cx="300" cy="320" rx="100" ry="115" fill="#fef3c7"/>
+  <!-- Glasses Pushed Slightly Up / Glint -->
+  <rect x="220" y="290" width="65" height="42" rx="8" fill="rgba(255,255,255,0.4)" stroke="#0f172a" stroke-width="4"/>
+  <rect x="315" y="290" width="65" height="42" rx="8" fill="rgba(255,255,255,0.4)" stroke="#0f172a" stroke-width="4"/>
+  <line x1="285" y1="310" x2="315" y2="310" stroke="#0f172a" stroke-width="4"/>
+  <!-- Analytical / Looking to the side -->
+  <circle cx="260" cy="310" r="13" fill="#0369a1"/>
+  <circle cx="263" cy="307" r="4" fill="#ffffff"/>
+  <circle cx="355" cy="310" r="13" fill="#0369a1"/>
+  <circle cx="358" cy="307" r="4" fill="#ffffff"/>
+  <!-- Pensive Mouth -->
+  <ellipse cx="300" cy="375" rx="8" ry="6" fill="#0369a1" opacity="0.6"/>
+  <path d="M190 250 C210 160, 390 160, 410 250 C380 270, 350 290, 320 270 C290 300, 270 300, 250 270 C230 290, 200 270, 190 250 Z" fill="url(#kaoriHair)"/>
+  <path d="M180 250 C160 350, 180 430, 210 450 C190 390, 190 330, 195 260 Z" fill="url(#kaoriHair)"/>
+  <path d="M420 250 C440 350, 420 430, 390 450 C410 390, 410 330, 405 260 Z" fill="url(#kaoriHair)"/>
+</svg>