@loonylabs/create-game 0.1.0

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

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { store } from '../store.js';
+  import { sendMessage } from '../socket.js';
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+
+  const currentArea = valtioToSvelte(store, s => s.currentArea);
+  const showAimDebug = valtioToSvelte(store, s => s.showAimDebug);
+  const terrainQuality = valtioToSvelte(store, s => s.terrainQuality);
+  const qualityLabels = ['Low', 'Medium', 'High', 'Ultra'];
+
+  /** Spawn a grunt 5 units in front of the player's current position. */
+  function spawnEnemy() {
+    const localId = store.localEntityId;
+    const player = store.entities.find(e => e.entityId === localId);
+    if (!player) return;
+    sendMessage({ type: 'DEBUG_SPAWN', entityType: 'grunt', x: player.x + 5, y: player.y });
+  }
+
+  function teleport(targetArea: string) {
+    sendMessage({ type: 'DEBUG_TELEPORT', targetArea });
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.code === 'F2') { spawnEnemy(); e.preventDefault(); }
+    if (e.code === 'F5') { teleport('overworld'); e.preventDefault(); }
+    if (e.code === 'F7') { teleport('dungeon'); e.preventDefault(); }
+  }
+
+  onMount(() => window.addEventListener('keydown', onKeyDown));
+  onDestroy(() => window.removeEventListener('keydown', onKeyDown));
+</script>
+
+<div class="dev-panel">
+  <h3>Dev Tools</h3>
+  <p class="area-label">Area: <span class="area-name">{$currentArea}</span></p>
+  <button on:click={spawnEnemy}>Spawn Target <span class="hint">[F2]</span></button>
+  <div class="divider"></div>
+  <p class="section-label">Teleport</p>
+  <button class="tp {$currentArea === 'overworld' ? 'active' : ''}" on:click={() => teleport('overworld')}>→ Overworld <span class="hint">[F5]</span></button>
+  <button class="tp {$currentArea === 'dungeon' ? 'active' : ''}" on:click={() => teleport('dungeon')}>→ Dungeon <span class="hint">[F7]</span></button>
+  <div class="divider"></div>
+  <p class="section-label">Debug</p>
+  <label class="toggle">
+    <input type="checkbox" checked={$showAimDebug} on:change={() => { store.showAimDebug = !store.showAimDebug; }} />
+    Show Aim Ray
+  </label>
+  <div class="divider"></div>
+  <p class="section-label">Terrain Quality</p>
+  <div class="quality-slider">
+    <input type="range" min="0" max="3" step="1"
+      value={$terrainQuality}
+      on:input={(e) => { store.terrainQuality = parseInt(e.currentTarget.value); }}
+    />
+    <span class="quality-label">{qualityLabels[$terrainQuality]}</span>
+  </div>
+</div>
+
+<style>
+  .dev-panel {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid #555;
+    border-radius: 4px;
+    padding: 10px 14px;
+    pointer-events: auto;
+    z-index: 1000;
+    font-family: 'Courier New', monospace;
+    color: #ccc;
+  }
+
+  h3 {
+    margin: 0 0 8px;
+    font-size: 0.75rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #ffaa44;
+  }
+
+  .hint {
+    opacity: 0.5;
+    font-size: 0.6rem;
+  }
+
+  button {
+    display: block;
+    width: 100%;
+    padding: 5px 10px;
+    background: rgba(68, 136, 68, 0.3);
+    color: #88cc88;
+    border: 1px solid #446644;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.7rem;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  button:hover {
+    background: rgba(68, 136, 68, 0.5);
+    border-color: #88cc88;
+    color: #aaffaa;
+  }
+
+  .area-label {
+    margin: 0 0 6px;
+    font-size: 0.65rem;
+    color: #666;
+  }
+
+  .area-name {
+    color: #ffcc44;
+  }
+
+  .divider {
+    height: 1px;
+    background: #333;
+    margin: 6px 0;
+  }
+
+  .section-label {
+    margin: 0 0 4px;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #555;
+  }
+
+  .tp {
+    background: rgba(68, 100, 160, 0.2);
+    color: #7799cc;
+    border-color: #334466;
+    margin-top: 3px;
+  }
+
+  .tp:hover {
+    background: rgba(68, 100, 160, 0.4);
+    border-color: #6688bb;
+    color: #aabbdd;
+  }
+
+  .tp.active {
+    background: rgba(68, 100, 160, 0.35);
+    border-color: #5577aa;
+    color: #88aaee;
+  }
+
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7rem;
+    color: #aaa;
+    cursor: pointer;
+  }
+
+  .toggle input {
+    accent-color: #44cc88;
+  }
+
+  .quality-slider {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .quality-slider input[type="range"] {
+    flex: 1;
+    accent-color: #44aacc;
+    height: 4px;
+  }
+
+  .quality-label {
+    font-size: 0.7rem;
+    color: #44aacc;
+    min-width: 45px;
+  }
+</style>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+
+  const dungeonCleared = valtioToSvelte(store, s => s.dungeonCleared);
+  const countdown = valtioToSvelte(store, s => s.countdownSeconds);
+</script>
+
+{#if $dungeonCleared}
+  <div class="overlay">
+    <p class="title">DUNGEON CLEARED</p>
+    <p class="count">{$countdown}</p>
+    <p class="sub">Returning to basecamp…</p>
+  </div>
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    color: #f0d080;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .title {
+    font-size: 2rem;
+    letter-spacing: 0.2em;
+    margin-bottom: 1rem;
+    font-family: 'Courier New', monospace;
+    text-transform: uppercase;
+  }
+
+  .count {
+    font-size: 6rem;
+    font-weight: bold;
+    line-height: 1;
+    font-family: 'Courier New', monospace;
+  }
+
+  .sub {
+    font-size: 1rem;
+    color: #a09060;
+    margin-top: 1rem;
+    font-family: 'Courier New', monospace;
+    letter-spacing: 0.05em;
+  }
+</style>

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

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { valtioToSvelte, dragState } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+  import { sendMessage } from '../socket.js';
+
+  export let visible = false;
+
+  const equippedStore = valtioToSvelte(store, s => s.equipped);
+  const equipInteraction = valtioToSvelte(store, s => s.equipInteraction);
+
+  const SLOTS = [
+    { id: 'weapon', label: 'Weapon' },
+    { id: 'armor',  label: 'Armor'  },
+    { id: 'ring',   label: 'Ring'   },
+  ];
+
+  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)';
+    }
+  }
+
+  let dragOverSlot: string | null = null;
+
+  function itemFitsSlot(statBonus: Record<string, number> | undefined, slotId: string): boolean {
+    if (!statBonus) return false;
+    const keys = Object.keys(statBonus);
+    if (slotId === 'weapon') return keys.includes('attack') && !keys.includes('defense');
+    if (slotId === 'armor')  return keys.includes('defense') && !keys.includes('attack');
+    if (slotId === 'ring')   return keys.includes('attack') && keys.includes('defense');
+    return false;
+  }
+
+  function onDragStart(slotId: string) {
+    dragState.set({ source: 'equipment', index: 0, slotId });
+  }
+
+  function onDragOver(slotId: string) {
+    dragOverSlot = slotId;
+  }
+
+  function onDragLeave() {
+    dragOverSlot = null;
+  }
+
+  function onDrop(slotId: string) {
+    dragOverSlot = null;
+    const ds = $dragState;
+    if (!ds) return;
+
+    if (ds.source === 'inventory') {
+      const item = store.inventory.find(i => i.slot === ds.index);
+      if (!item) return;
+      if (!itemFitsSlot(item.statBonus, slotId)) return; // reject if wrong slot
+      sendMessage({ type: 'EQUIP_REQUEST', slotId, itemId: item.id });
+    }
+    dragState.set(null);
+  }
+
+  function onDragEnd() {
+    dragOverSlot = null;
+    dragState.set(null);
+  }
+
+  function onSlotClick(slotId: string) {
+    // Dblclick on equipped slot → unequip
+    if ($equipInteraction === 'drag') return;
+    const item = $equippedStore[slotId];
+    if (item) {
+      sendMessage({ type: 'UNEQUIP_REQUEST', slotId });
+    }
+  }
+</script>
+
+{#if visible}
+<div class="equipment-panel" role="dialog" aria-label="Equipment">
+  <div class="panel-title">Equipment</div>
+  <div class="slots">
+    {#each SLOTS as slot}
+      {@const item = $equippedStore[slot.id]}
+      <div class="slot-row">
+        <div class="slot-label">{slot.label}</div>
+        <div
+          class="slot"
+          class:filled={!!item}
+          class:drag-over={dragOverSlot === slot.id}
+          draggable={!!item && $equipInteraction !== 'doubleclick'}
+          style={item ? `background: ${rarityColor(item.rarity)}22; border-color: ${rarityColor(item.rarity)};` : ''}
+          title={item ? `${item.name} (dblclick to unequip)` : `Empty ${slot.label} slot`}
+          on:dragstart={() => item && onDragStart(slot.id)}
+          on:dragover|preventDefault={() => onDragOver(slot.id)}
+          on:dragleave={onDragLeave}
+          on:drop={() => onDrop(slot.id)}
+          on:dragend={onDragEnd}
+          on:dblclick={() => onSlotClick(slot.id)}
+          role="listitem"
+        >
+          {#if item}
+            <span class="item-name" style="color: {rarityColor(item.rarity)};">
+              {item.name.split(' ')[0]}
+            </span>
+          {:else}
+            <span class="empty-label">—</span>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+{/if}
+
+<style>
+  .equipment-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;
+    min-width: 160px;
+  }
+
+  .panel-title {
+    color: #aaa;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    text-align: center;
+  }
+
+  .slots {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .slot-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .slot-label {
+    color: #666;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    width: 44px;
+    text-align: right;
+  }
+
+  .slot {
+    width: 96px;
+    height: 40px;
+    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;
+    cursor: default;
+  }
+
+  .slot[draggable="true"] {
+    cursor: grab;
+  }
+
+  .slot.drag-over {
+    border-color: #88aaff;
+  }
+
+  .item-name {
+    font-size: 0.55rem;
+    padding: 2px 4px;
+    word-break: break-word;
+    text-align: center;
+  }
+
+  .empty-label {
+    color: #333;
+    font-size: 0.7rem;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+
+  const playerHP = valtioToSvelte(store, s => s.playerHP);
+
+  $: pct = $playerHP.max > 0 ? $playerHP.current / $playerHP.max : 0;
+  $: color = pct > 0.6
+    ? 'var(--color-hp-high)'
+    : pct > 0.3
+      ? 'var(--color-hp-mid)'
+      : 'var(--color-hp-low)';
+</script>
+
+<div class="healthbar-wrap">
+  <div class="healthbar-track">
+    <div class="healthbar-fill" style="width: {Math.max(0, pct * 100)}%; background: {color};"></div>
+  </div>
+  <span class="healthbar-label">{$playerHP.current} / {$playerHP.max}</span>
+</div>
+
+<style>
+  .healthbar-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    pointer-events: none;
+  }
+
+  .healthbar-track {
+    width: 220px;
+    height: 14px;
+    background: #111;
+    border: 1px solid #444;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+
+  .healthbar-fill {
+    height: 100%;
+    transition: width 0.15s ease, background 0.3s ease;
+  }
+
+  .healthbar-label {
+    color: #ccc;
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+  }
+</style>

package/template/apps/client/src/components/Hub/BackToHubButton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { store } from '../../store.js';
+  import { sendMessage } from '../../socket.js';
+
+  function leaveExperience() {
+    sendMessage({ type: 'EXPERIENCE_LEAVE' });
+    store.currentExperience = null;
+    store.experienceLoading = false;
+  }
+</script>
+
+<button class="back-btn" on:click={leaveExperience} title="Return to Hub (ESC)">
+  &#x2190; Hub
+</button>
+
+<style>
+  .back-btn {
+    position: absolute;
+    top: 12px;
+    left: 120px;
+    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;
+    z-index: 50;
+  }
+
+  .back-btn:hover {
+    border-color: #cc8844;
+    color: #cc8844;
+  }
+</style>

package/template/apps/client/src/components/Hub/ExperienceCard.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  export let name: string;
+  export let description: string;
+  export let thumbnail: string | undefined = undefined;
+  export let loading = false;
+  export let onselect: (() => void) | undefined = undefined;
+
+</script>
+
+<button class="card" class:loading on:click={onselect} disabled={loading}>
+  <div class="card-thumb">
+    {#if thumbnail}
+      <img src={thumbnail} alt={name} />
+    {:else}
+      <div class="card-thumb-placeholder">{name.charAt(0).toUpperCase()}</div>
+    {/if}
+  </div>
+  <div class="card-body">
+    <h3 class="card-title">{name}</h3>
+    <p class="card-desc">{description}</p>
+  </div>
+  {#if loading}
+    <div class="card-loading">Loading...</div>
+  {/if}
+</button>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    background: rgba(20, 20, 30, 0.9);
+    border: 1px solid #333;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
+    padding: 0;
+    text-align: left;
+    color: inherit;
+    font-family: inherit;
+    min-width: 220px;
+    max-width: 280px;
+  }
+
+  .card:hover:not(:disabled) {
+    transform: scale(1.03);
+    border-color: #4488cc;
+    box-shadow: 0 4px 20px rgba(68, 136, 204, 0.3);
+  }
+
+  .card:disabled {
+    opacity: 0.7;
+    cursor: wait;
+  }
+
+  .card-thumb {
+    height: 120px;
+    background: linear-gradient(135deg, #1a1a2e, #16213e);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .card-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .card-thumb-placeholder {
+    font-size: 3rem;
+    color: #4488cc;
+    font-weight: bold;
+    opacity: 0.5;
+  }
+
+  .card-body {
+    padding: 12px 16px;
+  }
+
+  .card-title {
+    margin: 0 0 6px;
+    font-size: 1rem;
+    color: #ddd;
+    font-family: 'Courier New', monospace;
+    letter-spacing: 0.03em;
+  }
+
+  .card-desc {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #777;
+    line-height: 1.4;
+  }
+
+  .card-loading {
+    padding: 8px 16px;
+    font-size: 0.7rem;
+    color: #4488cc;
+    text-align: center;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  .loading {
+    border-color: #4488cc;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 1; }
+  }
+</style>

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import ExperienceCard from './ExperienceCard.svelte';
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../../store.js';
+  import { sendMessage } from '../../socket.js';
+
+  const experiences = valtioToSvelte(store, s => s.availableExperiences);
+  const loading = valtioToSvelte(store, s => s.experienceLoading);
+  const connected = valtioToSvelte(store, s => s.connected);
+
+  let loadingId: string | null = null;
+
+  function joinExperience(id: string) {
+    store.experienceLoading = true;
+    loadingId = id;
+    sendMessage({ type: 'EXPERIENCE_JOIN', experienceId: id });
+  }
+</script>
+
+<div class="hub-overlay">
+  <div class="hub-container">
+    <h1 class="hub-title">Choose Your Experience</h1>
+    <p class="hub-subtitle">
+      {#if !$connected}
+        Connecting to server...
+      {:else if $experiences.length === 0}
+        No experiences available
+      {:else}
+        Select a game to play
+      {/if}
+    </p>
+
+    <div class="hub-grid">
+      {#each $experiences as exp}
+        <ExperienceCard
+          name={exp.name}
+          description={exp.description}
+          thumbnail={exp.thumbnail}
+          loading={$loading && loadingId === exp.id}
+          onselect={() => joinExperience(exp.id)}
+        />
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .hub-overlay {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at center, #0d0d1a 0%, #000 70%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    pointer-events: auto;
+  }
+
+  .hub-container {
+    text-align: center;
+    max-width: 900px;
+    padding: 40px;
+  }
+
+  .hub-title {
+    font-family: 'Courier New', monospace;
+    font-size: 2rem;
+    color: #ccc;
+    margin: 0 0 8px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .hub-subtitle {
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+    color: #555;
+    margin: 0 0 40px;
+    letter-spacing: 0.05em;
+  }
+
+  .hub-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+  }
+</style>