@loonylabs/create-game 0.1.0

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

@@ -0,0 +1,290 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import HealthBar from './HealthBar.svelte';
+  import Inventory from './Inventory.svelte';
+  import CraftingPanel from './CraftingPanel.svelte';
+  import EquipmentPanel from './EquipmentPanel.svelte';
+  import ToastSystem from './ToastSystem.svelte';
+  import DevPanel from './DevPanel.svelte';
+  import DungeonClearOverlay from './DungeonClearOverlay.svelte';
+  import SkillBar from './SkillBar.svelte';
+  import Hub from './Hub/Hub.svelte';
+  import BackToHubButton from './Hub/BackToHubButton.svelte';
+  import ShooterHUD from './Shooter/ShooterHUD.svelte';
+  import DamageNumbers from './Shooter/DamageNumbers.svelte';
+  import GameOverScreen from './Shooter/GameOverScreen.svelte';
+  import RunnerHUD from './Runner/RunnerHUD.svelte';
+  import RunnerDeathScreen from './Runner/RunnerDeathScreen.svelte';
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+  import { sendMessage } from '../socket.js';
+  import type { GameMode } from '../store.js';
+
+  let inventoryOpen = false;
+  let craftingOpen = false;
+  let equipmentOpen = false;
+  let devPanelOpen = false;
+  const connected = valtioToSvelte(store, s => s.connected);
+  const currentMode = valtioToSvelte(store, s => s.gameMode);
+  const inHub = valtioToSvelte(store, s => s.currentExperience === null);
+  const isShooter = valtioToSvelte(store, s => s.currentExperience === 'shooter');
+  const shooterDead = valtioToSvelte(store, s => s.shooterDead);
+  const isRunner = valtioToSvelte(store, s => s.currentExperience === 'runner');
+  const runnerDead = valtioToSvelte(store, s => s.runnerDead);
+
+  function requestNewDungeon() {
+    sendMessage({ type: 'REQUEST_NEW_DUNGEON' });
+  }
+
+  const MODES: { id: GameMode; label: string; hint: string }[] = [
+    { id: 'click+orbit',      label: 'Diablo',      hint: 'Click to move · Space/RMB = attack' },
+    { id: 'wasd+thirdperson', label: 'Third Person', hint: 'WASD · RMB drag = rotate cam · E = attack' },
+    { id: 'wasd+firstperson', label: 'FPS',          hint: 'WASD · Click = pointer lock · E = attack · Esc = unlock' },
+    { id: 'wasd+follow',      label: 'Follow',       hint: 'WASD · Scroll = zoom FPS↔TPS · RMB drag = rotate' },
+  ];
+
+  function setMode(mode: GameMode) {
+    store.gameMode = mode;
+  }
+
+  function returnToHub() {
+    sendMessage({ type: 'EXPERIENCE_LEAVE' });
+    store.currentExperience = null;
+    store.experienceLoading = false;
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.code === 'KeyI') inventoryOpen = !inventoryOpen;
+    if (e.code === 'KeyC') craftingOpen = !craftingOpen;
+    if (e.code === 'KeyU') equipmentOpen = !equipmentOpen;
+    if (e.code === 'F1' && e.shiftKey) { devPanelOpen = !devPanelOpen; e.preventDefault(); }
+    if (e.code === 'Escape') {
+      if (inventoryOpen || craftingOpen || equipmentOpen) {
+        inventoryOpen = false; craftingOpen = false; equipmentOpen = false;
+      } else if (!$inHub) {
+        returnToHub();
+      }
+    }
+  }
+
+  onMount(() => window.addEventListener('keydown', onKeyDown));
+  onDestroy(() => window.removeEventListener('keydown', onKeyDown));
+</script>
+
+<!-- Hub overlay (shown when no experience is active) -->
+{#if $inHub}
+  <Hub />
+{:else}
+  <!-- Back to Hub button -->
+  <BackToHubButton />
+
+  <!-- Connection status (top-left) -->
+  <div class="status {$connected ? 'connected' : 'disconnected'}">
+    {$connected ? 'Connected' : 'Disconnected'}
+  </div>
+
+  <!-- Mode switcher (top-right) -->
+  <div class="mode-switcher">
+    <button class="mode-btn regen-btn" on:click={requestNewDungeon} title="Regenerate Dungeon">Regen</button>
+    {#each MODES as m}
+      <button
+        class="mode-btn {$currentMode === m.id ? 'active' : ''}"
+        on:click={() => setMode(m.id)}
+        title={m.hint}
+      >{m.label}</button>
+    {/each}
+  </div>
+
+  <!-- Active mode hint (below buttons) -->
+  <div class="mode-hint">{MODES.find(m => m.id === $currentMode)?.hint ?? ''}</div>
+
+  <!-- Skill Bar (bottom-center, above health) -->
+  <SkillBar />
+
+  <!-- Health bar (bottom-center) -->
+  <div class="healthbar-anchor">
+    <HealthBar />
+  </div>
+
+  <!-- Inventory (center, toggled with I) -->
+  <Inventory bind:visible={inventoryOpen} />
+
+  <!-- Crafting Panel (toggled with C) -->
+  <CraftingPanel bind:visible={craftingOpen} />
+
+  <!-- Equipment Panel (toggled with E) -->
+  <EquipmentPanel bind:visible={equipmentOpen} />
+
+  <!-- Crosshair (visible in FPS/WASD modes) -->
+  {#if $currentMode.startsWith('wasd')}
+    <div class="crosshair"></div>
+  {/if}
+
+  <!-- Shooter HUD + Damage Numbers -->
+  {#if $isShooter}
+    <ShooterHUD />
+    <DamageNumbers />
+    {#if $shooterDead}
+      <GameOverScreen />
+    {/if}
+  {/if}
+
+  <!-- Runner HUD + Death Screen -->
+  {#if $isRunner}
+    <RunnerHUD />
+    {#if $runnerDead}
+      <RunnerDeathScreen />
+    {/if}
+  {/if}
+
+  <!-- Toast notification system (always visible) -->
+  <ToastSystem />
+
+  <!-- Dungeon Clear countdown overlay -->
+  <DungeonClearOverlay />
+
+  <!-- Dev Panel (Shift+F1 to toggle) -->
+  {#if devPanelOpen}
+    <DevPanel />
+  {/if}
+
+  <!-- Hint -->
+  {#if !inventoryOpen && !craftingOpen && !equipmentOpen}
+    <div class="hint">I = Inventory · C = Crafting · U = Equipment · ESC = Hub</div>
+  {/if}
+{/if}
+
+<style>
+  .status {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    padding: 4px 10px;
+    border-radius: 3px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    font-family: 'Courier New', monospace;
+    pointer-events: none;
+  }
+
+  .status.connected {
+    background: rgba(68, 204, 68, 0.2);
+    color: #44cc44;
+    border: 1px solid #44cc44;
+  }
+
+  .status.disconnected {
+    background: rgba(204, 68, 68, 0.2);
+    color: #cc4444;
+    border: 1px solid #cc4444;
+  }
+
+  .healthbar-anchor {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  .hint {
+    position: absolute;
+    bottom: 8px;
+    right: 12px;
+    color: #555;
+    font-size: 0.65rem;
+    letter-spacing: 0.05em;
+    pointer-events: none;
+  }
+
+  .mode-switcher {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    display: flex;
+    gap: 6px;
+    pointer-events: auto;
+  }
+
+  .mode-btn {
+    padding: 4px 12px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #888;
+    border: 1px solid #333;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    text-transform: uppercase;
+  }
+
+  .mode-btn:hover {
+    border-color: #666;
+    color: #aaa;
+  }
+
+  .mode-btn.active {
+    background: rgba(68, 136, 204, 0.25);
+    border-color: #4488cc;
+    color: #4488cc;
+  }
+
+  .regen-btn {
+    background: rgba(204, 136, 68, 0.2);
+    border-color: #cc8844;
+    color: #cc8844;
+  }
+
+  .regen-btn:hover {
+    background: rgba(204, 136, 68, 0.4);
+    border-color: #ffaa44;
+    color: #ffaa44;
+  }
+
+  .mode-hint {
+    position: absolute;
+    top: 42px;
+    right: 12px;
+    color: #444;
+    font-size: 0.62rem;
+    font-family: 'Courier New', monospace;
+    letter-spacing: 0.03em;
+    pointer-events: none;
+    text-align: right;
+  }
+
+  .crosshair {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  .crosshair::before,
+  .crosshair::after {
+    content: '';
+    position: absolute;
+    background: rgba(255, 255, 255, 0.8);
+  }
+
+  .crosshair::before {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    margin-top: -1px;
+  }
+
+  .crosshair::after {
+    left: 50%;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    margin-left: -1px;
+  }
+</style>

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

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import { valtioToSvelte, dragState, craftedSlots } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+  import { sendMessage } from '../socket.js';
+
+  export let visible = false;
+
+  // When panel is hidden, return all items to inventory (unlock)
+  $: if (!visible) {
+    craftedSlots.set(new Set());
+    craftGrid = Array(9).fill(null);
+    craftGridNames = Array(9).fill(null);
+    craftGridRarity = Array(9).fill(null);
+    craftGridSources = Array(9).fill(null);
+  }
+
+  const inventory = valtioToSvelte(store, s => s.inventory);
+
+  // 9 slots for 3×3 crafting grid, each holds an item id or null
+  let craftGrid: Array<string | null> = Array(9).fill(null);
+  let craftGridNames: Array<string | null> = Array(9).fill(null);
+  let craftGridRarity: Array<string | null> = Array(9).fill(null);
+  // tracks which inventory slot index each crafting slot came from (for craftedSlots lock)
+  let craftGridSources: Array<number | null> = Array(9).fill(null);
+
+  let dragOverIdx: number | null = null;
+
+  function rarityColor(rarity: string | null): string {
+    if (!rarity) return 'var(--color-rarity-common)';
+    switch (rarity) {
+      case 'rare': return 'var(--color-rarity-rare)';
+      case 'unique': return 'var(--color-rarity-unique)';
+      default: return 'var(--color-rarity-common)';
+    }
+  }
+
+  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 item = $inventory.find(i => i.slot === ds.index);
+      if (item) {
+        // Free the old inventory slot if this crafting slot was already occupied
+        const oldSrc = craftGridSources[targetIdx];
+        if (oldSrc !== null) {
+          craftedSlots.update(s => { s.delete(oldSrc); return new Set(s); });
+        }
+        craftGrid[targetIdx] = item.id;
+        craftGridNames[targetIdx] = item.name;
+        craftGridRarity[targetIdx] = item.rarity;
+        craftGridSources[targetIdx] = ds.index;
+        craftGrid = [...craftGrid];
+        craftGridNames = [...craftGridNames];
+        craftGridRarity = [...craftGridRarity];
+        craftGridSources = [...craftGridSources];
+        craftedSlots.update(s => { s.add(ds.index); return new Set(s); });
+      }
+    } else if (ds.source === 'crafting') {
+      // Move within crafting grid
+      const srcId = craftGrid[ds.index];
+      const srcName = craftGridNames[ds.index];
+      const srcRarity = craftGridRarity[ds.index];
+      const srcSource = craftGridSources[ds.index];
+      craftGrid[ds.index] = craftGrid[targetIdx];
+      craftGridNames[ds.index] = craftGridNames[targetIdx];
+      craftGridRarity[ds.index] = craftGridRarity[targetIdx];
+      craftGridSources[ds.index] = craftGridSources[targetIdx];
+      craftGrid[targetIdx] = srcId;
+      craftGridNames[targetIdx] = srcName;
+      craftGridRarity[targetIdx] = srcRarity;
+      craftGridSources[targetIdx] = srcSource;
+      craftGrid = [...craftGrid];
+      craftGridNames = [...craftGridNames];
+      craftGridRarity = [...craftGridRarity];
+      craftGridSources = [...craftGridSources];
+    }
+    dragState.set(null);
+  }
+
+  function onDragEnd() {
+    dragOverIdx = null;
+    dragState.set(null);
+  }
+
+  function clearSlot(idx: number) {
+    const src = craftGridSources[idx];
+    if (src !== null) craftedSlots.update(s => { s.delete(src); return new Set(s); });
+    craftGrid[idx] = null;
+    craftGridNames[idx] = null;
+    craftGridRarity[idx] = null;
+    craftGridSources[idx] = null;
+    craftGrid = [...craftGrid];
+    craftGridNames = [...craftGridNames];
+    craftGridRarity = [...craftGridRarity];
+    craftGridSources = [...craftGridSources];
+  }
+
+  function craft() {
+    sendMessage({ type: 'CRAFT_REQUEST', grid: craftGrid });
+    // Release all locked inventory slots and clear the grid
+    craftedSlots.set(new Set());
+    craftGrid = Array(9).fill(null);
+    craftGridNames = Array(9).fill(null);
+    craftGridRarity = Array(9).fill(null);
+    craftGridSources = Array(9).fill(null);
+  }
+
+  $: hasSomething = craftGrid.some(c => c !== null);
+</script>
+
+{#if visible}
+<div class="crafting-panel" role="dialog" aria-label="Crafting">
+  <div class="crafting-title">Crafting</div>
+  <div class="crafting-grid">
+    {#each craftGrid as itemId, idx}
+      <div
+        class="slot"
+        class:filled={!!itemId}
+        class:drag-over={dragOverIdx === idx}
+        draggable={!!itemId}
+        style={itemId ? `background: ${rarityColor(craftGridRarity[idx])}22; border-color: ${rarityColor(craftGridRarity[idx])};` : ''}
+        title={craftGridNames[idx] ?? ''}
+        on:dragstart={() => itemId && dragState.set({ source: 'crafting', index: idx })}
+        on:dragover|preventDefault={() => onDragOver(idx)}
+        on:dragleave={onDragLeave}
+        on:drop={() => onDrop(idx)}
+        on:dragend={onDragEnd}
+        on:dblclick={() => clearSlot(idx)}
+        role="listitem"
+      >
+        {#if itemId}
+          <span class="item-name" style="color: {rarityColor(craftGridRarity[idx])}">
+            {(craftGridNames[idx] ?? '').split(' ')[0]}
+          </span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <button
+    class="craft-btn"
+    disabled={!hasSomething}
+    on:click={craft}
+  >
+    CRAFT
+  </button>
+
+  <div class="hint-text">Drag items from Inventory · Dbl-click to remove</div>
+</div>
+{/if}
+
+<style>
+  .crafting-panel {
+    position: absolute;
+    top: 50%;
+    left: calc(50% + 280px);
+    transform: translateY(-50%);
+    background: rgba(10, 10, 10, 0.95);
+    border: 1px solid #444;
+    padding: 16px;
+    pointer-events: auto;
+    user-select: none;
+  }
+
+  .crafting-title {
+    color: #aaa;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .crafting-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 3px;
+    margin-bottom: 10px;
+  }
+
+  .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;
+  }
+
+  .craft-btn {
+    width: 100%;
+    padding: 6px;
+    background: rgba(68, 136, 68, 0.3);
+    border: 1px solid #448844;
+    color: #44cc44;
+    font-family: 'Courier New', monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    cursor: pointer;
+    text-transform: uppercase;
+  }
+
+  .craft-btn:disabled {
+    background: rgba(40, 40, 40, 0.3);
+    border-color: #333;
+    color: #555;
+    cursor: default;
+  }
+
+  .craft-btn:not(:disabled):hover {
+    background: rgba(68, 136, 68, 0.5);
+  }
+
+  .hint-text {
+    margin-top: 6px;
+    color: #444;
+    font-size: 0.55rem;
+    text-align: center;
+    letter-spacing: 0.03em;
+  }
+</style>