Scaffold tactical RPG web prototype

src/game/scenes/TitleScene.ts

@@ -0,0 +1,57 @@
+import Phaser from 'phaser';
+import { palette } from '../ui/palette';
+
+export class TitleScene extends Phaser.Scene {
+  constructor() {
+    super('TitleScene');
+  }
+
+  create() {
+    const { width, height } = this.scale;
+    this.add.rectangle(0, 0, width, height, 0x10131a).setOrigin(0);
+    this.add.rectangle(0, height * 0.58, width, height * 0.42, 0x20252c, 0.96).setOrigin(0);
+    this.add.image(width * 0.68, height * 0.33, 'title-banner').setScale(1.1);
+
+    this.add.text(96, 108, 'Heros Web', {
+      fontSize: '62px',
+      color: '#e8dfca',
+      fontStyle: '700'
+    });
+    this.add.text(100, 182, '삼국지풍 웹 전술 RPG', {
+      fontSize: '24px',
+      color: '#d8b15f'
+    });
+
+    const start = this.add.text(104, 296, '새 게임', {
+      fontSize: '28px',
+      color: '#10131a',
+      backgroundColor: '#d8b15f',
+      padding: { left: 28, right: 28, top: 14, bottom: 14 }
+    });
+    start.setInteractive({ useHandCursor: true });
+    start.on('pointerdown', () => this.scene.start('StoryScene'));
+
+    this.add.text(104, 382, '이어하기', {
+      fontSize: '24px',
+      color: '#6f7782'
+    });
+    this.add.text(104, 430, '설정', {
+      fontSize: '24px',
+      color: '#6f7782'
+    });
+
+    this.add.text(96, height - 112, '첫 목표: 프롤로그를 읽고 첫 전투에 진입합니다.', {
+      fontSize: '20px',
+      color: '#9aa3ad'
+    });
+
+    this.input.keyboard?.once('keydown-ENTER', () => this.scene.start('StoryScene'));
+    this.addLine(0, height * 0.58, width);
+  }
+
+  private addLine(x: number, y: number, width: number) {
+    const line = this.add.graphics();
+    line.lineStyle(2, palette.gold, 0.35);
+    line.lineBetween(x, y, x + width, y);
+  }
+}