feat(01-01): create Vite project with TypeScript and Canvas

- Initialize Vite project with vanilla-ts configuration
- Add TypeScript with strict mode enabled
- Configure Vitest for testing
- Create index.html with Canvas element
- Add main.ts entry point with canvas setup
- Add setup tests for project dependencies

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/__tests__/setup.test.ts

@@ -0,0 +1,30 @@
+// Test 1: npm run dev starts without errors
+// Test 2: Browser displays Canvas element with colored background
+// Test 3: npm run test runs vitest successfully
+
+import { describe, it, expect } from 'vitest';
+
+describe('Project Setup', () => {
+  it('should have vite as a dev dependency', () => {
+    // Read package.json to verify vite is installed
+    const pkg = require('../../package.json');
+    expect(pkg.devDependencies).toHaveProperty('vite');
+  });
+
+  it('should have typescript as a dev dependency', () => {
+    const pkg = require('../../package.json');
+    expect(pkg.devDependencies).toHaveProperty('typescript');
+  });
+
+  it('should have vitest as a dev dependency', () => {
+    const pkg = require('../../package.json');
+    expect(pkg.devDependencies).toHaveProperty('vitest');
+  });
+
+  it('should have npm scripts for dev, test, and build', () => {
+    const pkg = require('../../package.json');
+    expect(pkg.scripts).toHaveProperty('dev');
+    expect(pkg.scripts).toHaveProperty('test');
+    expect(pkg.scripts).toHaveProperty('build');
+  });
+});

src/main.ts

@@ -0,0 +1,28 @@
+// Main entry point for the Pikachu Match game
+// Temporary placeholder - will be updated when CONFIG is available
+
+// Get canvas element by id 'game'
+const canvas = document.getElementById('game') as HTMLCanvasElement;
+if (!canvas) {
+  throw new Error('Canvas element with id "game" not found');
+}
+
+// Get 2D context
+const ctx = canvas.getContext('2d');
+if (!ctx) {
+  throw new Error('Could not get 2D context from canvas');
+}
+
+// Set canvas size (hardcoded for now: 16 cols * 52, 10 rows * 52)
+// 52 = 48 (tile size) + 4 (gap)
+const canvasWidth = 16 * 52; // 832
+const canvasHeight = 10 * 52; // 520
+canvas.width = canvasWidth;
+canvas.height = canvasHeight;
+
+// Fill with background color (hardcoded for now: '#1a1a2e')
+ctx.fillStyle = '#1a1a2e';
+ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+console.log('Pikachu Match game initialized');
+console.log(`Canvas size: ${canvasWidth}x${canvasHeight}`);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />