create-smore-game 2.4.0 → 3.0.0

package/templates/react-phaser/screen/App.tsx

@@ -0,0 +1,97 @@
+import { createScreen } from '@smoregg/sdk';
+import type { Screen, ControllerInfo, GameResults } from '@smoregg/sdk';
+import { useEffect, useRef, useState } from 'react';
+import Phaser from 'phaser';
+import { GameScene } from './scenes/GameScene';
+import type { GameEvents } from '../../types';
+
+export function App() {
+  const screenRef = useRef<Screen | null>(null);
+  const gameRef = useRef<Phaser.Game | null>(null);
+  const [roomCode, setRoomCode] = useState('');
+  const [controllers, setControllers] = useState<ControllerInfo[]>([]);
+  const [tapCount, setTapCount] = useState(0);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const screen = createScreen<GameEvents>({ debug: true });
+
+    screen.onControllerJoin((playerIndex, info) => {
+      console.log('Player joined:', playerIndex);
+      if (!mounted) return;
+      setControllers([...screen.controllers]);
+    });
+
+    screen.onControllerLeave((playerIndex) => {
+      console.log('Player left:', playerIndex);
+      if (!mounted) return;
+      setControllers([...screen.controllers]);
+    });
+
+    screen.onControllerDisconnect((playerIndex) => {
+      console.log(`Player ${playerIndex} disconnected`);
+    });
+
+    screen.onError((error) => {
+      console.error('SDK Error:', error.message);
+    });
+
+    screen.onAllReady(() => {
+      if (!mounted) return;
+      setRoomCode(screen.roomCode);
+      setControllers([...screen.controllers]);
+    });
+
+    screenRef.current = screen;
+
+    screen.on('tap', (playerIndex, data) => {
+      console.log('Player', playerIndex, 'tapped:', data);
+      gameRef.current?.events.emit('player-tap', { playerIndex, ...data });
+      setTapCount((prev) => {
+        const newCount = prev + 1;
+        screen.broadcast('score-update', { score: newCount });
+        return newCount;
+      });
+    });
+
+    return () => {
+      mounted = false;
+      screenRef.current?.destroy();
+      screenRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (gameRef.current) return;
+
+    gameRef.current = new Phaser.Game({
+      type: Phaser.AUTO,
+      parent: 'phaser-container',
+      width: 1280,
+      height: 720,
+      backgroundColor: '#0f0f0f',
+      scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+      },
+      scene: [GameScene],
+    });
+
+    return () => {
+      gameRef.current?.destroy(true);
+      gameRef.current = null;
+    };
+  }, []);
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div id="phaser-container" style={{ width: '100%', height: '100%' }} />
+      {roomCode && (
+        <div style={{ position: 'absolute', top: '20px', left: '20px', fontSize: '24px' }}>
+          Room: {roomCode} | Players: {controllers.length}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/react-phaser/screen/scenes/GameScene.ts

@@ -0,0 +1,22 @@
+import Phaser from 'phaser';
+
+export class GameScene extends Phaser.Scene {
+  private label!: Phaser.GameObjects.Text;
+
+  constructor() {
+    super('GameScene');
+  }
+
+  create() {
+    this.label = this.add
+      .text(640, 360, 'Waiting for players...', {
+        fontSize: '32px',
+        color: '#ffffff',
+      })
+      .setOrigin(0.5);
+
+    this.game.events.on('player-tap', (data: { playerIndex: number }) => {
+      this.label.setText(`Player ${data.playerIndex} tapped!`);
+    });
+  }
+}

package/templates/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Game event types - shared between Screen and Controller.
+ * Define your custom events here. Both sides will have type-safe access.
+ *
+ * Convention:
+ *   Screen -> Controller: view state (Screen pushes what to display)
+ *   Controller -> Screen: user input (player actions only)
+ */
+export interface GameEvents {
+  // Screen -> Controller (view state)
+  'score-update': { score: number };
+  'personal-message': { text: string };
+  // Controller -> Screen (input)
+  'tap': { timestamp: number };
+}

package/templates/vanilla/controller/App.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createMockController } from '@smoregg/sdk/testing';
+import type { GameEvents } from '../../types';
+
+describe('Game Controller', () => {
+  let controller: ReturnType<typeof createMockController<GameEvents>>;
+
+  beforeEach(() => {
+    controller = createMockController<GameEvents>({ autoReady: true });
+  });
+
+  it('should send tap event on user input', async () => {
+    await controller.ready;
+    controller.send('tap', { timestamp: Date.now() });
+    const sends = controller.getSends();
+    expect(sends).toHaveLength(1);
+    expect(sends[0].event).toBe('tap');
+  });
+
+  it('should update display when Screen pushes score', async () => {
+    await controller.ready;
+    controller.simulateEvent('score-update', { score: 42 });
+  });
+});

package/templates/vanilla/controller/main.ts

@@ -0,0 +1,33 @@
+import { createController } from '@smoregg/sdk';
+import type { GameEvents } from '../../types';
+
+/**
+ * ARCHITECTURE: Stateless Controller Pattern
+ *
+ * The controller is a stateless display + input device:
+ * - Render ONLY what the Screen sends (via controller.on())
+ * - Send ONLY user input to Screen (via controller.send())
+ * - Do NOT store or compute game state here
+ */
+
+const playerInfoEl = document.getElementById('player-info')!;
+const countEl = document.getElementById('count')!;
+const tapBtn = document.getElementById('tap-btn')!;
+
+const controller = createController<GameEvents>({ debug: true });
+
+controller.onAllReady(() => {
+  playerInfoEl.textContent = controller.me?.nickname ?? `Player ${controller.myPlayerIndex}`;
+});
+
+controller.on('score-update', (data) => {
+  countEl.textContent = String(data.score);
+});
+
+controller.on('personal-message', (data) => {
+  console.log('Received message:', data.text);
+});
+
+tapBtn.addEventListener('pointerdown', () => {
+  controller.send('tap', { timestamp: Date.now() });
+});

package/templates/vanilla/screen/App.test.ts

@@ -0,0 +1,21 @@
+import { describe, it, beforeEach } from 'vitest';
+import { createMockScreen } from '@smoregg/sdk/testing';
+import type { GameEvents } from '../../types';
+
+describe('Game Screen', () => {
+  let screen: ReturnType<typeof createMockScreen<GameEvents>>;
+
+  beforeEach(() => {
+    screen = createMockScreen<GameEvents>({ autoReady: true });
+  });
+
+  it('should broadcast score-update when player taps', async () => {
+    await screen.ready;
+    screen.simulateEvent('tap', 0, { timestamp: Date.now() });
+  });
+
+  it('should handle player reconnection', async () => {
+    await screen.ready;
+    screen.simulateControllerReconnect(0);
+  });
+});

package/templates/vanilla/screen/main.ts

@@ -0,0 +1,50 @@
+import { createScreen } from '@smoregg/sdk';
+import type { GameResults } from '@smoregg/sdk';
+import type { GameEvents } from '../../types';
+
+const statusEl = document.getElementById('status')!;
+const roomCodeEl = document.getElementById('room-code')!;
+const logEl = document.getElementById('log')!;
+
+const screen = createScreen<GameEvents>({ debug: true });
+
+screen.onControllerJoin((playerIndex) => {
+  console.log('Player joined:', playerIndex);
+  updateStatus();
+});
+
+screen.onControllerLeave((playerIndex) => {
+  console.log('Player left:', playerIndex);
+  updateStatus();
+});
+
+screen.onControllerDisconnect((playerIndex) => {
+  console.log(`Player ${playerIndex} disconnected`);
+});
+
+screen.onError((error) => {
+  console.error('SDK Error:', error.message);
+});
+
+screen.onAllReady(() => {
+  roomCodeEl.textContent = `Room Code: ${screen.roomCode}`;
+  updateStatus();
+});
+
+let tapCount = 0;
+
+screen.on('tap', (playerIndex, data) => {
+  const line = document.createElement('div');
+  line.textContent = `Player ${playerIndex} tapped`;
+  logEl.appendChild(line);
+  while (logEl.children.length > 10) {
+    logEl.removeChild(logEl.firstChild!);
+  }
+  tapCount++;
+  screen.broadcast('score-update', { score: tapCount });
+});
+
+function updateStatus() {
+  const count = screen.controllers.length;
+  statusEl.textContent = count > 0 ? `${count} player(s) connected` : 'Waiting for players...';
+}