@loonylabs/create-game 0.1.0

package/template/apps/client/src/components/Inventory.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { valtioToSvelte, dragState, craftedSlots } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+  import { sendMessage } from '../socket.js';
+  import type { InventoryItem } from '@loonylabs/gamedev-protocol';
+
+  export let visible = false;
+
+  const inventoryStore = valtioToSvelte(store, s => s.inventory);
+  const equipInteraction = valtioToSvelte(store, s => s.equipInteraction);
+  // Local copy for instant re-renders on drag — synced from store on every server update
+  let displayInventory: InventoryItem[] = [];
+  $: displayInventory = $inventoryStore;
+
+  const COLS = 10;
+  const ROWS = 4;
+
+  let dragOverIdx: number | null = null;
+
+  function rarityColor(rarity: string): string {
+    switch (rarity) {
+      case 'rare': return 'var(--color-rarity-rare)';
+      case 'unique': return 'var(--color-rarity-unique)';
+      default: return 'var(--color-rarity-common)';
+    }
+  }
+
+  function onDragStart(idx: number) {
+    dragState.set({ source: 'inventory', index: idx });
+  }
+
+  function onDragOver(idx: number) {
+    dragOverIdx = idx;
+  }
+
+  function onDragLeave() {
+    dragOverIdx = null;
+  }
+
+  function onDrop(targetIdx: number) {
+    dragOverIdx = null;
+    const ds = $dragState;
+    if (!ds) return;
+
+    if (ds.source === 'inventory') {
+      const items = displayInventory.map(i => ({ ...i }));
+      const srcItem = items.find(i => i.slot === ds.index);
+      const dstItem = items.find(i => i.slot === targetIdx);
+      if (srcItem) srcItem.slot = targetIdx;
+      if (dstItem) dstItem.slot = ds.index;
+      displayInventory = items; // instant Svelte re-render
+      store.inventory = items; // sync Valtio for server messages / other components
+    } else if (ds.source === 'equipment' && ds.slotId) {
+      // Drag from equipment slot back to inventory → unequip
+      sendMessage({ type: 'UNEQUIP_REQUEST', slotId: ds.slotId });
+    }
+    dragState.set(null);
+  }
+
+  function onDragEnd() {
+    dragOverIdx = null;
+    dragState.set(null);
+  }
+
+  function guessSlot(statBonus: Record<string, number> | undefined): string | null {
+    if (!statBonus) return null;
+    const keys = Object.keys(statBonus);
+    if (keys.includes('attack') && keys.includes('defense')) return 'ring';
+    if (keys.includes('attack')) return 'weapon';
+    if (keys.includes('defense')) return 'armor';
+    return null;
+  }
+
+  function onDoubleClick(item: InventoryItem) {
+    if ($equipInteraction === 'drag') return;
+    const slotId = guessSlot(item.statBonus);
+    if (!slotId) return; // item has no equippable stats (e.g. speed-only, hp-only)
+    sendMessage({ type: 'EQUIP_REQUEST', slotId, itemId: item.id });
+  }
+</script>
+
+{#if visible}
+<div class="inventory-panel" role="dialog" aria-label="Inventory">
+  <div class="inventory-title">Inventory</div>
+  <div class="inventory-grid" style="grid-template-columns: repeat({COLS}, 1fr);">
+    {#each Array(ROWS * COLS) as _, idx}
+      {@const item = displayInventory.find(i => i.slot === idx)}
+      <div
+        class="slot"
+        class:filled={!!item}
+        class:drag-over={dragOverIdx === idx}
+        draggable={!!item && !$craftedSlots.has(idx)}
+        style={item ? `background: ${rarityColor(item.rarity)}22; border-color: ${rarityColor(item.rarity)};` : ''}
+        title={item ? item.name : ''}
+        on:dragstart={() => item && !$craftedSlots.has(idx) && onDragStart(idx)}
+        on:dragover|preventDefault={() => onDragOver(idx)}
+        on:dragleave={onDragLeave}
+        on:drop={() => onDrop(idx)}
+        on:dragend={onDragEnd}
+        on:dblclick={() => item && onDoubleClick(item)}
+        role="listitem"
+      >
+        {#if item}
+          <span
+            class="item-name"
+            style="color: {rarityColor(item.rarity)}; opacity: {($dragState?.source === 'inventory' && $dragState?.index === idx) || $craftedSlots.has(idx) ? 0.4 : 1};"
+          >
+            {item.name.split(' ')[0]}
+          </span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+{/if}
+
+<style>
+  .inventory-panel {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(10, 10, 10, 0.95);
+    border: 1px solid #444;
+    padding: 16px;
+    pointer-events: auto;
+    user-select: none;
+  }
+
+  .inventory-title {
+    color: #aaa;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .inventory-grid {
+    display: grid;
+    gap: 3px;
+  }
+
+  .slot {
+    width: 48px;
+    height: 48px;
+    background: var(--color-slot-empty);
+    border: 1px solid var(--color-slot-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.55rem;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+    cursor: default;
+  }
+
+  .slot[draggable="true"] {
+    cursor: grab;
+  }
+
+  .slot.drag-over {
+    border-color: #88aaff;
+  }
+
+  .item-name {
+    font-size: 0.5rem;
+    line-height: 1.1;
+    text-align: center;
+    padding: 2px;
+    word-break: break-word;
+  }
+</style>

package/template/apps/client/src/components/Runner/RunnerDeathScreen.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../../store.js';
+  import { sendMessage } from '../../socket.js';
+
+  const distance = valtioToSvelte(store, s => s.runnerDistance);
+  const score = valtioToSvelte(store, s => s.runnerScore);
+  const coins = valtioToSvelte(store, s => s.runnerCoins);
+  const gems = valtioToSvelte(store, s => s.runnerGems);
+  const bestCombo = valtioToSvelte(store, s => s.runnerBestCombo);
+  const highScore = valtioToSvelte(store, s => s.runnerHighScore);
+
+  $: isNewRecord = $score > 0 && $score >= $highScore;
+
+  function restart() {
+    sendMessage({ type: 'RUNNER_RESTART' });
+  }
+
+  function backToHub() {
+    sendMessage({ type: 'EXPERIENCE_LEAVE' });
+    store.currentExperience = null;
+    store.experienceLoading = false;
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.code === 'KeyR') restart();
+    if (e.code === 'KeyB') backToHub();
+  }
+
+  onMount(() => window.addEventListener('keydown', onKeyDown));
+  onDestroy(() => window.removeEventListener('keydown', onKeyDown));
+</script>
+
+<div class="death-overlay">
+  <div class="death-box">
+    <h1>Game Over</h1>
+    {#if isNewRecord}
+      <div class="new-record">New Record!</div>
+    {/if}
+    <div class="final-score">{$score}</div>
+    <div class="stats">
+      <div class="stat-row">
+        <span class="label">Distance</span>
+        <span class="value">{$distance}m</span>
+      </div>
+      <div class="stat-row">
+        <span class="label">Coins</span>
+        <span class="value">{$coins}</span>
+      </div>
+      {#if $gems > 0}
+        <div class="stat-row">
+          <span class="label">Gems</span>
+          <span class="value">{$gems}</span>
+        </div>
+      {/if}
+      <div class="stat-row">
+        <span class="label">Best Combo</span>
+        <span class="value">x{$bestCombo}</span>
+      </div>
+      <div class="stat-row">
+        <span class="label">High Score</span>
+        <span class="value">{$highScore}</span>
+      </div>
+    </div>
+    <div class="buttons">
+      <button class="btn restart" on:click={restart}>Play Again (R)</button>
+      <button class="btn hub" on:click={backToHub}>Back to Hub (B)</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .death-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    font-family: 'Courier New', monospace;
+  }
+
+  .death-box {
+    background: rgba(20, 20, 30, 0.95);
+    border: 1px solid #335;
+    border-radius: 8px;
+    padding: 32px 48px;
+    text-align: center;
+    min-width: 320px;
+  }
+
+  h1 {
+    color: #cc4444;
+    font-size: 2rem;
+    margin: 0 0 8px 0;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  .new-record {
+    color: #ffcc00;
+    font-size: 1.1rem;
+    font-weight: bold;
+    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
+    margin-bottom: 8px;
+    animation: pulse 0.6s ease-in-out infinite alternate;
+  }
+
+  .final-score {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffcc00;
+    text-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
+    margin-bottom: 16px;
+  }
+
+  .stats {
+    margin: 16px 0 24px 0;
+  }
+
+  .stat-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    border-bottom: 1px solid #222;
+  }
+
+  .label {
+    color: #888;
+    font-size: 0.85rem;
+  }
+
+  .value {
+    color: #44ccff;
+    font-size: 0.95rem;
+    font-weight: bold;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+  }
+
+  .btn {
+    padding: 8px 24px;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    text-transform: uppercase;
+    border: 1px solid;
+  }
+
+  .restart {
+    background: rgba(68, 204, 255, 0.2);
+    border-color: #44ccff;
+    color: #44ccff;
+  }
+
+  .restart:hover {
+    background: rgba(68, 204, 255, 0.35);
+  }
+
+  .hub {
+    background: rgba(136, 136, 136, 0.15);
+    border-color: #666;
+    color: #aaa;
+  }
+
+  .hub:hover {
+    background: rgba(136, 136, 136, 0.3);
+  }
+
+  @keyframes pulse {
+    from { transform: scale(1); }
+    to { transform: scale(1.05); }
+  }
+</style>

package/template/apps/client/src/components/Runner/RunnerHUD.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../../store.js';
+
+  const distance = valtioToSvelte(store, s => s.runnerDistance);
+  const speed = valtioToSvelte(store, s => s.runnerSpeed);
+  const score = valtioToSvelte(store, s => s.runnerScore);
+  const coins = valtioToSvelte(store, s => s.runnerCoins);
+  const combo = valtioToSvelte(store, s => s.runnerCombo);
+  const collectFlash = valtioToSvelte(store, s => s.runnerCollectFlash);
+  const powerupFlash = valtioToSvelte(store, s => s.runnerPowerupFlash);
+  const magnetActive = valtioToSvelte(store, s => s.runnerMagnetActive);
+  const hasSpeedBoost = valtioToSvelte(store, s => s.runnerHasSpeedBoost);
+  const hasLowGravity = valtioToSvelte(store, s => s.runnerHasLowGravity);
+</script>
+
+<div class="runner-hud">
+  <div class="score">{$score}</div>
+  {#if $combo > 1}
+    <div class="combo">x{$combo}</div>
+  {/if}
+  <div class="distance">{$distance}m</div>
+  <div class="coins">{$coins} coins</div>
+  <div class="speed">{Math.round($speed * 3.6)} km/h</div>
+
+  {#if $hasSpeedBoost || $hasLowGravity || $magnetActive}
+    <div class="powerups">
+      {#if $hasSpeedBoost}<span class="powerup speed-boost">SPEED</span>{/if}
+      {#if $hasLowGravity}<span class="powerup low-gravity">LOW-G</span>{/if}
+      {#if $magnetActive}<span class="powerup magnet">MAGNET</span>{/if}
+    </div>
+  {/if}
+
+  {#if $collectFlash}
+    <div class="collect-flash">{$collectFlash}</div>
+  {/if}
+
+  {#if $powerupFlash}
+    <div class="powerup-flash">{$powerupFlash}</div>
+  {/if}
+
+  <div class="controls">A/D = Dodge · Space = Jump · Hold Space = Glide</div>
+</div>
+
+<style>
+  .runner-hud {
+    position: absolute;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    pointer-events: none;
+    font-family: 'Courier New', monospace;
+  }
+
+  .score {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #ffcc00;
+    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
+    letter-spacing: 0.05em;
+  }
+
+  .combo {
+    font-size: 1.4rem;
+    color: #ff6644;
+    font-weight: bold;
+    text-shadow: 0 0 8px rgba(255, 102, 68, 0.6);
+    animation: pulse 0.5s ease-in-out infinite alternate;
+  }
+
+  .distance {
+    font-size: 1rem;
+    color: #44ccff;
+    text-shadow: 0 0 6px rgba(68, 204, 255, 0.4);
+    margin-top: 4px;
+  }
+
+  .coins {
+    font-size: 0.8rem;
+    color: #ffdd44;
+    margin-top: 2px;
+  }
+
+  .speed {
+    font-size: 0.75rem;
+    color: #88aacc;
+    margin-top: 2px;
+  }
+
+  .powerups {
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+    margin-top: 8px;
+  }
+
+  .powerup {
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: 0.65rem;
+    font-weight: bold;
+    letter-spacing: 0.1em;
+  }
+
+  .speed-boost {
+    background: rgba(255, 100, 0, 0.3);
+    border: 1px solid #ff6400;
+    color: #ff8833;
+  }
+
+  .low-gravity {
+    background: rgba(100, 200, 255, 0.3);
+    border: 1px solid #64c8ff;
+    color: #88ddff;
+  }
+
+  .magnet {
+    background: rgba(200, 100, 255, 0.3);
+    border: 1px solid #c864ff;
+    color: #dd88ff;
+  }
+
+  .collect-flash {
+    font-size: 1.1rem;
+    color: #ffee44;
+    font-weight: bold;
+    margin-top: 8px;
+    animation: fadeUp 0.6s ease-out forwards;
+  }
+
+  .powerup-flash {
+    font-size: 1.3rem;
+    color: #44ffaa;
+    font-weight: bold;
+    margin-top: 6px;
+    text-shadow: 0 0 12px rgba(68, 255, 170, 0.6);
+    animation: fadeUp 1.5s ease-out forwards;
+  }
+
+  .controls {
+    font-size: 0.6rem;
+    color: #556;
+    margin-top: 8px;
+    letter-spacing: 0.05em;
+  }
+
+  @keyframes pulse {
+    from { transform: scale(1); }
+    to { transform: scale(1.1); }
+  }
+
+  @keyframes fadeUp {
+    from { opacity: 1; transform: translateY(0); }
+    to { opacity: 0; transform: translateY(-20px); }
+  }
+</style>

package/template/apps/client/src/components/Shooter/DamageNumbers.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { eventBus } from '@loonylabs/gamedev-client';
+
+  interface DamageNumber {
+    id: number;
+    x: number;
+    y: number;
+    damage: number;
+    age: number;
+    killed: boolean;
+  }
+
+  let numbers: DamageNumber[] = [];
+  let nextId = 0;
+  let unsub: (() => void) | null = null;
+  let raf: number | null = null;
+  let lastTime = performance.now();
+
+  function addNumber(damage: number, screenX: number, screenY: number, killed = false) {
+    numbers = [...numbers, {
+      id: nextId++,
+      x: screenX + (Math.random() - 0.5) * 30,
+      y: screenY,
+      damage,
+      age: 0,
+      killed,
+    }];
+  }
+
+  function tick() {
+    const now = performance.now();
+    const dt = (now - lastTime) / 1000;
+    lastTime = now;
+
+    numbers = numbers
+      .map(n => ({ ...n, age: n.age + dt, y: n.y - 60 * dt }))
+      .filter(n => n.age < 1);
+
+    raf = requestAnimationFrame(tick);
+  }
+
+  onMount(() => {
+    const unsub1 = eventBus.on('hit_confirm', (event: any) => {
+      const cx = window.innerWidth / 2;
+      const cy = window.innerHeight / 2;
+      addNumber(event.damage, cx + (Math.random() - 0.5) * 60, cy - 40 + (Math.random() - 0.5) * 30);
+    });
+    const unsub2 = eventBus.on('enemy_killed', () => {
+      const cx = window.innerWidth / 2;
+      const cy = window.innerHeight / 2;
+      addNumber(0, cx, cy - 60, true);
+    });
+    unsub = () => { unsub1(); unsub2(); };
+    lastTime = performance.now();
+    raf = requestAnimationFrame(tick);
+  });
+
+  onDestroy(() => {
+    unsub?.();
+    if (raf !== null) cancelAnimationFrame(raf);
+  });
+</script>
+
+{#each numbers as n (n.id)}
+  <div
+    class="damage-number"
+    class:killed={n.killed}
+    style="left: {n.x}px; top: {n.y}px; opacity: {1 - n.age};"
+  >
+    {#if n.killed}
+      KILL
+    {:else}
+      {n.damage}
+    {/if}
+  </div>
+{/each}
+
+<style>
+  .damage-number {
+    position: absolute;
+    pointer-events: none;
+    font-family: 'Courier New', monospace;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #ffcc00;
+    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
+    transform: translateX(-50%);
+    z-index: 50;
+  }
+
+  .damage-number.killed {
+    color: #ff4444;
+    font-size: 1.4rem;
+  }
+</style>

package/template/apps/client/src/components/Shooter/GameOverScreen.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../../store.js';
+  import { sendMessage } from '../../socket.js';
+
+  const waveReached = valtioToSvelte(store, s => s.shooterWaveReached);
+
+  function restart() {
+    sendMessage({ type: 'SHOOTER_RESTART' });
+  }
+
+  function backToHub() {
+    sendMessage({ type: 'EXPERIENCE_LEAVE' });
+    store.currentExperience = null;
+    store.experienceLoading = false;
+    store.shooterDead = false;
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.code === 'KeyR') restart();
+    if (e.code === 'KeyB') backToHub();
+  }
+
+  onMount(() => window.addEventListener('keydown', onKeyDown));
+  onDestroy(() => window.removeEventListener('keydown', onKeyDown));
+</script>
+
+<div class="game-over-overlay">
+  <div class="game-over-box">
+    <h1 class="game-over-title">Game Over</h1>
+    <p class="wave-info">Wave {$waveReached} reached</p>
+    <div class="button-row">
+      <button class="go-btn restart" on:click={restart}>[R] Restart</button>
+      <button class="go-btn hub" on:click={backToHub}>[B] Back to Hub</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .game-over-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    pointer-events: auto;
+  }
+
+  .game-over-box {
+    text-align: center;
+    padding: 40px 60px;
+    background: rgba(20, 0, 0, 0.9);
+    border: 1px solid #cc4444;
+    border-radius: 6px;
+  }
+
+  .game-over-title {
+    font-family: 'Courier New', monospace;
+    font-size: 2.5rem;
+    color: #cc4444;
+    margin: 0 0 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .wave-info {
+    font-family: 'Courier New', monospace;
+    font-size: 1.2rem;
+    color: #888;
+    margin: 0 0 30px;
+  }
+
+  .button-row {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+  }
+
+  .go-btn {
+    padding: 10px 24px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    border: 1px solid #555;
+    border-radius: 3px;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.6);
+    color: #aaa;
+  }
+
+  .go-btn:hover {
+    border-color: #888;
+    color: #fff;
+  }
+
+  .go-btn.restart {
+    border-color: #44cc44;
+    color: #44cc44;
+  }
+
+  .go-btn.restart:hover {
+    background: rgba(68, 204, 68, 0.15);
+    color: #88ff88;
+  }
+</style>