root
4a2819695b
Replace colored-rectangle world rendering with a proper tilemap system using a 16x16 RPG tileset scaled 3x. Server generates terrain via seeded procedural generation (river, ponds, dirt patches, tree decorations) and sends it to clients. Client renders 3-layer Phaser tilemap with 8-neighbor autotiling for water/dirt edges. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
36 lines
987 B
TypeScript
36 lines
987 B
TypeScript
import Phaser from 'phaser';
|
|
import { SocketClient } from '../network/SocketClient.js';
|
|
import type { WorldState } from '@dflike/shared';
|
|
|
|
export class BootScene extends Phaser.Scene {
|
|
private client!: SocketClient;
|
|
|
|
constructor() {
|
|
super({ key: 'BootScene' });
|
|
}
|
|
|
|
preload(): void {
|
|
this.load.image('tileset_16x16', 'assets/tileset_16x16.png');
|
|
}
|
|
|
|
create(): void {
|
|
const statusText = this.add.text(
|
|
this.cameras.main.centerX,
|
|
this.cameras.main.centerY,
|
|
'Connecting to server...',
|
|
{ fontSize: '24px', color: '#ffffff' }
|
|
).setOrigin(0.5);
|
|
|
|
const serverUrl = import.meta.env.VITE_SERVER_URL || `${window.location.protocol}//${window.location.hostname}:3001`;
|
|
this.client = new SocketClient(serverUrl);
|
|
|
|
this.client.onWorldState = (worldState: WorldState) => {
|
|
statusText.setText('Connected! Loading game...');
|
|
this.scene.start('GameScene', {
|
|
client: this.client,
|
|
worldState,
|
|
});
|
|
};
|
|
}
|
|
}
|