@loonylabs/create-game 0.1.0

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { valtioToSvelte } from '@loonylabs/gamedev-client';
+  import { store } from '../../store.js';
+
+  const ammo = valtioToSvelte(store, s => s.shooterAmmo);
+  const reloading = valtioToSvelte(store, s => s.shooterReloading);
+  const wave = valtioToSvelte(store, s => s.shooterWave);
+  const waveClear = valtioToSvelte(store, s => s.shooterWaveClear);
+</script>
+
+<div class="shooter-hud">
+  <!-- Ammo Counter -->
+  <div class="ammo-counter">
+    {#if $reloading}
+      <span class="reloading">Reloading...</span>
+    {:else}
+      <span class="ammo-current">{$ammo.current}</span>
+      <span class="ammo-sep"> / </span>
+      <span class="ammo-max">{$ammo.max}</span>
+    {/if}
+  </div>
+
+  <!-- Wave Indicator -->
+  <div class="wave-indicator">
+    Wave {$wave}
+    {#if $waveClear}
+      <span class="wave-clear">Wave Clear!</span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .shooter-hud {
+    position: absolute;
+    bottom: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 40px;
+    align-items: center;
+    pointer-events: none;
+    font-family: 'Courier New', monospace;
+  }
+
+  .ammo-counter {
+    font-size: 1.2rem;
+    color: #ccc;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 4px 12px;
+    border-radius: 3px;
+    border: 1px solid #444;
+  }
+
+  .ammo-current {
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .ammo-sep, .ammo-max {
+    color: #888;
+  }
+
+  .reloading {
+    color: #ffaa44;
+    animation: blink 0.5s infinite alternate;
+  }
+
+  .wave-indicator {
+    font-size: 1rem;
+    color: #aaa;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 4px 12px;
+    border-radius: 3px;
+    border: 1px solid #444;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .wave-clear {
+    color: #44cc44;
+    font-weight: bold;
+    margin-left: 10px;
+    animation: flash 0.5s ease-out;
+  }
+
+  @keyframes blink {
+    from { opacity: 0.4; }
+    to { opacity: 1; }
+  }
+
+  @keyframes flash {
+    from { color: #88ff88; transform: scale(1.2); }
+    to { color: #44cc44; transform: scale(1); }
+  }
+</style>

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

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { valtioToSvelte, currentAim } from '@loonylabs/gamedev-client';
+  import { store } from '../store.js';
+  import { sendMessage } from '../socket.js';
+
+  interface Skill {
+    id: string;
+    name: string;
+    cooldown: number; // ms
+  }
+
+  // Skills in slot order (keys 1-3)
+  const SKILLS: Skill[] = [
+    { id: 'basic-shot',  name: 'Shot',  cooldown:   500 },
+    { id: 'heavy-slam',  name: 'Slam',  cooldown:  3000 },
+    { id: 'burst-heal',  name: 'Heal',  cooldown: 15000 },
+  ];
+
+  const cooldowns = valtioToSvelte(store, s => s.skillCooldowns);
+
+  /** Returns 0..1 (0 = fully on cooldown, 1 = ready) */
+  function cdProgress(skill: Skill, nowMs: number): number {
+    const last = $cooldowns[skill.id] ?? 0;
+    if (last === 0) return 1;
+    return Math.min(1, (nowMs - last) / skill.cooldown);
+  }
+
+  let now = Date.now();
+  let rafId: number;
+  function tick() { now = Date.now(); rafId = requestAnimationFrame(tick); }
+
+  function tryUseSkill(skill: Skill): void {
+    if (cdProgress(skill, Date.now()) < 1) return;
+
+    // Client-side cooldown prediction
+    store.skillCooldowns = { ...store.skillCooldowns, [skill.id]: Date.now() };
+
+    const aim = currentAim;
+    sendMessage({
+      type: 'USE_SKILL',
+      skillId: skill.id,
+      ...(aim ? { origin: aim.origin, direction: aim.direction } : {}),
+    });
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const idx = parseInt(e.key, 10) - 1;
+    if (idx >= 0 && idx < SKILLS.length) tryUseSkill(SKILLS[idx]);
+  };
+
+  onMount(() => {
+    rafId = requestAnimationFrame(tick);
+    window.addEventListener('keydown', onKeyDown);
+  });
+  onDestroy(() => {
+    cancelAnimationFrame(rafId);
+    window.removeEventListener('keydown', onKeyDown);
+  });
+</script>
+
+<div class="skill-bar">
+  {#each SKILLS as skill, i}
+    {@const prog = cdProgress(skill, now)}
+    {@const onCd = prog < 1}
+    <div class="slot {onCd ? 'on-cooldown' : ''}">
+      <!-- Radial cooldown wipe -->
+      <div class="cd-overlay" style="--prog: {prog}"></div>
+      <span class="key">{i + 1}</span>
+      <span class="name">{skill.name}</span>
+      {#if onCd}
+        <span class="cd-text">{(skill.cooldown * (1 - prog) / 1000).toFixed(1)}s</span>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .skill-bar {
+    position: absolute;
+    bottom: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 6px;
+    pointer-events: none;
+  }
+
+  .slot {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid #555;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .slot.on-cooldown {
+    border-color: #333;
+  }
+
+  /* Radial cooldown wipe using conic-gradient */
+  .cd-overlay {
+    position: absolute;
+    inset: 0;
+    background: conic-gradient(
+      rgba(0, 0, 0, 0.65) 0deg,
+      rgba(0, 0, 0, 0.65) calc((1 - var(--prog)) * 360deg),
+      transparent calc((1 - var(--prog)) * 360deg)
+    );
+  }
+
+  .key {
+    position: absolute;
+    top: 3px;
+    left: 5px;
+    font-size: 0.6rem;
+    color: #888;
+    font-family: 'Courier New', monospace;
+    line-height: 1;
+    z-index: 1;
+  }
+
+  .name {
+    font-size: 0.62rem;
+    color: #ccc;
+    font-family: 'Courier New', monospace;
+    text-align: center;
+    z-index: 1;
+  }
+
+  .cd-text {
+    font-size: 0.7rem;
+    color: #fff;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    position: absolute;
+    bottom: 3px;
+    z-index: 1;
+  }
+</style>

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { eventBus } from '@loonylabs/gamedev-client';
+  import toastConfigRaw from '../../../game-data/src/events/toast-config.json';
+  import type { GameEvent } from '@loonylabs/gamedev-core';
+
+  // Allow partial runtime overrides via prop
+  export let overrides: Record<string, unknown> = {};
+
+  interface EventConfig {
+    enabled: boolean;
+    duration: number;
+    icon: string;
+    color: string;
+    template: string;
+  }
+
+  interface ToastConfig {
+    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-center';
+    maxVisible: number;
+    stackDirection: 'up' | 'down';
+    events: Record<string, EventConfig>;
+  }
+
+  const config: ToastConfig = { ...toastConfigRaw as ToastConfig, ...overrides };
+
+  interface Toast {
+    id: number;
+    text: string;
+    color: string;
+    exiting: boolean;
+  }
+
+  let toasts: Toast[] = [];
+  let counter = 0;
+
+  function interpolateTemplate(template: string, event: GameEvent): string {
+    let result = template;
+    if ('item' in event && event.item) {
+      result = result.replace('{item}', (event.item as { name: string }).name);
+    }
+    if ('slotId' in event) {
+      result = result.replace('{slot}', event.slotId);
+    }
+    if ('damage' in event) {
+      result = result.replace('{damage}', String(event.damage));
+    }
+    if ('amount' in event) {
+      result = result.replace('{amount}', String(event.amount));
+    }
+    return result;
+  }
+
+  function addToast(event: GameEvent): void {
+    const cfg = config.events[event.type];
+    if (!cfg?.enabled) return;
+
+    let text = interpolateTemplate(cfg.template, event);
+    // Replace {icon} placeholder with the icon value
+    text = text.replace('{icon}', cfg.icon);
+
+    const toast: Toast = { id: counter++, text, color: cfg.color, exiting: false };
+
+    if (config.stackDirection === 'up') {
+      toasts = [toast, ...toasts].slice(0, config.maxVisible);
+    } else {
+      toasts = [...toasts, toast].slice(-config.maxVisible);
+    }
+
+    setTimeout(() => dismissToast(toast.id), cfg.duration);
+  }
+
+  function dismissToast(id: number): void {
+    toasts = toasts.map(t => t.id === id ? { ...t, exiting: true } : t);
+    setTimeout(() => {
+      toasts = toasts.filter(t => t.id !== id);
+    }, 300);
+  }
+
+  const unsubscribers: Array<() => void> = [];
+
+  onMount(() => {
+    for (const type of Object.keys(config.events)) {
+      const unsub = eventBus.on(type as GameEvent['type'], (e) => addToast(e));
+      unsubscribers.push(unsub);
+    }
+  });
+
+  onDestroy(() => {
+    for (const unsub of unsubscribers) unsub();
+  });
+
+  // Position styles
+  const positionStyles: Record<string, string> = {
+    'bottom-right': 'bottom: 80px; right: 16px; align-items: flex-end;',
+    'bottom-left':  'bottom: 80px; left: 16px; align-items: flex-start;',
+    'top-right':    'top: 60px; right: 16px; align-items: flex-end;',
+    'top-center':   'top: 60px; left: 50%; transform: translateX(-50%); align-items: center;',
+  };
+  $: containerStyle = positionStyles[config.position] ?? positionStyles['bottom-right'];
+</script>
+
+<div class="toast-container" style={containerStyle}>
+  {#each toasts as toast (toast.id)}
+    <div
+      class="toast {toast.exiting ? 'exiting' : 'entering'}"
+      style="color: {toast.color}; border-color: {toast.color};"
+      role="status"
+    >
+      {toast.text}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .toast-container {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .toast {
+    background: rgba(0, 0, 0, 0.75);
+    border: 1px solid;
+    border-radius: 4px;
+    padding: 6px 14px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .toast.entering {
+    animation: slide-in 0.25s ease forwards;
+  }
+
+  .toast.exiting {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+</style>