# Habbo-Style Multiplayer Game This is a substantial project! I'll create a full-featured isometric social game with online multiplayer, room navigation, avatars, chat, furniture placement, and beautiful graphics. ## Project Structure ``` habbo-clone/ ├── server/ │ ├── package.json │ ├── server.js │ └── rooms.js ├── client/ │ ├── index.html │ ├── css/ │ │ └── style.css │ └── js/ │ ├── game.js │ ├── renderer.js │ ├── avatar.js │ ├── room.js │ ├── furniture.js │ ├── network.js │ ├── ui.js │ ├── chat.js │ └── pathfinding.js └── README.md ``` ## Server ```json // server/package.json { "name": "habbo-clone-server", "version": "1.0.0", "description": "Habbo-style multiplayer game server", "main": "server.js", "scripts": { "start": "node server.js", "dev": "nodemon server.js" }, "dependencies": { "ws": "^8.14.2", "uuid": "^9.0.0" }, "devDependencies": { "nodemon": "^3.0.1" } } ``` ```javascript // server/rooms.js class Room { constructor(id, name, owner, width = 14, height = 14) { this.id = id; this.name = name; this.owner = owner; this.width = width; this.height = height; this.users = new Map(); this.furniture = []; this.floor = this.generateFloor(); this.wallColor = '#8BA4C7'; this.floorColor = '#A8B86A'; this.maxUsers = 25; this.description = ''; } generateFloor() { const floor = []; for (let y = 0; y < this.height; y++) { floor[y] = []; for (let x = 0; x < this.width; x++) { floor[y][x] = 1; // 1 = walkable, 0 = void, 2 = door } } floor[0][6] = 2; // door position return floor; } addUser(user) { if (this.users.size >= this.maxUsers) return false; this.users.set(user.id, user); return true; } removeUser(userId) { this.users.delete(userId); } addFurniture(item) { this.furniture.push(item); } removeFurniture(itemId) { this.furniture = this.furniture.filter(f => f.id !== itemId); } isTileWalkable(x, y) { if (x < 0 || y < 0 || x >= this.width || y >= this.height) return false; if (this.floor[y][x] === 0) return false; // Check furniture blocking for (const item of this.furniture) { if (item.x === x && item.y === y && item.blocking) return false; } return true; } serialize() { return { id: this.id, name: this.name, owner: this.owner, width: this.width, height: this.height, floor: this.floor, furniture: this.furniture, wallColor: this.wallColor, floorColor: this.floorColor, userCount: this.users.size, maxUsers: this.maxUsers, users: Array.from(this.users.values()).map(u => u.serialize()) }; } } class RoomUser { constructor(id, username, look) { this.id = id; this.username = username; this.look = look; this.x = 6; this.y = 0; this.z = 0; this.direction = 4; this.headDirection = 4; this.action = 'stand'; this.dancing = false; this.chatMessage = ''; this.chatTimer = null; this.motto = ''; } serialize() { return { id: this.id, username: this.username, look: this.look, x: this.x, y: this.y, z: this.z, direction: this.direction, headDirection: this.headDirection, action: this.action, dancing: this.dancing, chatMessage: this.chatMessage, motto: this.motto }; } } const defaultRooms = [ { id: 'lobby', name: 'Hotel Lobby', owner: 'System', width: 16, height: 16, description: 'Welcome to the hotel!', floorLayout: [ [0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0], [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], [0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0], [0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0], [0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0], [0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0], ], furniture: [ { id: 'f1', type: 'sofa', x: 3, y: 5, z: 0, direction: 2, color: '#C0392B', blocking: false, sittable: true }, { id: 'f2', type: 'sofa', x: 3, y: 6, z: 0, direction: 2, color: '#C0392B', blocking: false, sittable: true }, { id: 'f3', type: 'table', x: 5, y: 5, z: 0, direction: 0, color: '#8B4513', blocking: true }, { id: 'f4', type: 'lamp', x: 8, y: 3, z: 0, direction: 0, color: '#F1C40F', blocking: true }, { id: 'f5', type: 'plant', x: 12, y: 5, z: 0, direction: 0, color: '#27AE60', blocking: true }, { id: 'f6', type: 'plant', x: 12, y: 9, z: 0, direction: 0, color: '#27AE60', blocking: true }, { id: 'f7', type: 'sofa', x: 10, y: 7, z: 0, direction: 6, color: '#2980B9', blocking: false, sittable: true }, { id: 'f8', type: 'sofa', x: 10, y: 8, z: 0, direction: 6, color: '#2980B9', blocking: false, sittable: true }, { id: 'f9', type: 'table', x: 9, y: 7, z: 0, direction: 0, color: '#8B4513', blocking: true }, { id: 'f10', type: 'jukebox', x: 8, y: 10, z: 0, direction: 4, color: '#9B59B6', blocking: true }, { id: 'f11', type: 'bar_counter', x: 5, y: 9, z: 0, direction: 2, color: '#D35400', blocking: true }, { id: 'f12', type: 'bar_counter', x: 5, y: 10, z: 0, direction: 2, color: '#D35400', blocking: true }, { id: 'f13', type: 'bar_stool', x: 6, y: 9, z: 0, direction: 6, color: '#95A5A6', blocking: false, sittable: true }, { id: 'f14', type: 'bar_stool', x: 6, y: 10, z: 0, direction: 6, color: '#95A5A6', blocking: false, sittable: true }, ] }, { id: 'cafe', name: 'Pixel Café', owner: 'System', width: 12, height: 10, description: 'Relax and chat with friends!', furniture: [ { id: 'cf1', type: 'table', x: 3, y: 3, z: 0, direction: 0, color: '#D4A574', blocking: true }, { id: 'cf2', type: 'chair', x: 2, y: 3, z: 0, direction: 2, color: '#C0392B', blocking: false, sittable: true }, { id: 'cf3', type: 'chair', x: 4, y: 3, z: 0, direction: 6, color: '#C0392B', blocking: false, sittable: true }, { id: 'cf4', type: 'table', x: 7, y: 3, z: 0, direction: 0, color: '#D4A574', blocking: true }, { id: 'cf5', type: 'chair', x: 6, y: 3, z: 0, direction: 2, color: '#2980B9', blocking: false, sittable: true }, { id: 'cf6', type: 'chair', x: 8, y: 3, z: 0, direction: 6, color: '#2980B9', blocking: false, sittable: true }, { id: 'cf7', type: 'bar_counter', x: 2, y: 7, z: 0, direction: 0, color: '#8B4513', blocking: true }, { id: 'cf8', type: 'bar_counter', x: 3, y: 7, z: 0, direction: 0, color: '#8B4513', blocking: true }, { id: 'cf9', type: 'bar_counter', x: 4, y: 7, z: 0, direction: 0, color: '#8B4513', blocking: true }, { id: 'cf10', type: 'plant', x: 1, y: 1, z: 0, direction: 0, color: '#27AE60', blocking: true }, { id: 'cf11', type: 'plant', x: 9, y: 1, z: 0, direction: 0, color: '#27AE60', blocking: true }, { id: 'cf12', type: 'lamp', x: 5, y: 5, z: 0, direction: 0, color: '#F39C12', blocking: true }, ] }, { id: 'pool', name: 'Swimming Pool', owner: 'System', width: 14, height: 12, description: 'Take a dip!', floorLayout: [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,0,0,0,0,0,0,0,0,1,1,1], [1,1,1,0,0,0,0,0,0,0,0,1,1,1], [1,1,1,0,0,0,0,0,0,0,0,1,1,1], [2,1,1,0,0,0,0,0,0,0,0,1,1,1], [1,1,1,0,0,0,0,0,0,0,0,1,1,1], [1,1,1,0,0,0,0,0,0,0,0,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1], ], furniture: [ { id: 'pl1', type: 'lounger', x: 1, y: 2, z: 0, direction: 2, color: '#E74C3C', blocking: false, sittable: true }, { id: 'pl2', type: 'lounger', x: 1, y: 4, z: 0, direction: 2, color: '#3498DB', blocking: false, sittable: true }, { id: 'pl3', type: 'lounger', x: 12, y: 3, z: 0, direction: 6, color: '#E74C3C', blocking: false, sittable: true }, { id: 'pl4', type: 'lounger', x: 12, y: 5, z: 0, direction: 6, color: '#3498DB', blocking: false, sittable: true }, { id: 'pl5', type: 'plant', x: 1, y: 9, z: 0, direction: 0, color: '#27AE60', blocking: true }, { id: 'pl6', type: 'plant', x: 12, y: 9, z: 0, direction: 0, color: '#27AE60', blocking: true }, ] }, { id: 'club', name: 'Club Nitro', owner: 'System', width: 12, height: 14, description: 'Dance the night away!', furniture: [ { id: 'cl1', type: 'jukebox', x: 5, y: 1, z: 0, direction: 4, color: '#9B59B6', blocking: true }, { id: 'cl2', type: 'lamp', x: 1, y: 1, z: 0, direction: 0, color: '#E74C3C', blocking: true }, { id: 'cl3', type: 'lamp', x: 10, y: 1, z: 0, direction: 0, color: '#3498DB', blocking: true }, { id: 'cl4', type: 'lamp', x: 1, y: 12, z: 0, direction: 0, color: '#F39C12', blocking: true }, { id: 'cl5', type: 'lamp', x: 10, y: 12, z: 0, direction: 0, color: '#2ECC71', blocking: true }, { id: 'cl6', type: 'sofa', x: 1, y: 6, z: 0, direction: 2, color: '#8E44AD', blocking: false, sittable: true }, { id: 'cl7', type: 'sofa', x: 1, y: 7, z: 0, direction: 2, color: '#8E44AD', blocking: false, sittable: true }, { id: 'cl8', type: 'sofa', x: 10, y: 6, z: 0, direction: 6, color: '#8E44AD', blocking: false, sittable: true }, { id: 'cl9', type: 'sofa', x: 10, y: 7, z: 0, direction: 6, color: '#8E44AD', blocking: false, sittable: true }, { id: 'cl10', type: 'bar_counter', x: 3, y: 11, z: 0, direction: 0, color: '#2C3E50', blocking: true }, { id: 'cl11', type: 'bar_counter', x: 4, y: 11, z: 0, direction: 0, color: '#2C3E50', blocking: true }, { id: 'cl12', type: 'bar_counter', x: 5, y: 11, z: 0, direction: 0, color: '#2C3E50', blocking: true }, { id: 'cl13', type: 'bar_counter', x: 6, y: 11, z: 0, direction: 0, color: '#2C3E50', blocking: true }, { id: 'cl14', type: 'bar_counter', x: 7, y: 11, z: 0, direction: 0, color: '#2C3E50', blocking: true }, { id: 'cl15', type: 'bar_stool', x: 3, y: 10, z: 0, direction: 4, color: '#7F8C8D', blocking: false, sittable: true }, { id: 'cl16', type: 'bar_stool', x: 5, y: 10, z: 0, direction: 4, color: '#7F8C8D', blocking: false, sittable: true }, { id: 'cl17', type: 'bar_stool', x: 7, y: 10, z: 0, direction: 4, color: '#7F8C8D', blocking: false, sittable: true }, ] } ]; module.exports = { Room, RoomUser, defaultRooms }; ``` ```javascript // server/server.js const WebSocket = require('ws'); const { v4: uuidv4 } = require('uuid'); const { Room, RoomUser, defaultRooms } = require('./rooms'); const PORT = process.env.PORT || 8080; const wss = new WebSocket.Server({ port: PORT }); console.log(`🏨 Hotel server running on port ${PORT}`); // State const clients = new Map(); const rooms = new Map(); const users = new Map(); // global user registry // Initialize default rooms defaultRooms.forEach(rd => { const room = new Room(rd.id, rd.name, rd.owner, rd.width, rd.height); room.description = rd.description || ''; if (rd.floorLayout) room.floor = rd.floorLayout; if (rd.furniture) room.furniture = rd.furniture; if (rd.id === 'lobby') { room.wallColor = '#7B9EC7'; room.floorColor = '#A8B86A'; } else if (rd.id === 'cafe') { room.wallColor = '#D4A574'; room.floorColor = '#C19A6B'; } else if (rd.id === 'pool') { room.wallColor = '#87CEEB'; room.floorColor = '#F5DEB3'; } else if (rd.id === 'club') { room.wallColor = '#2C2C54'; room.floorColor = '#474787'; } rooms.set(rd.id, room); }); function broadcast(roomId, message, excludeId = null) { const room = rooms.get(roomId); if (!room) return; const data = JSON.stringify(message); room.users.forEach((user, userId) => { if (userId === excludeId) return; const client = clients.get(userId); if (client && client.ws.readyState === WebSocket.OPEN) { client.ws.send(data); } }); } function sendTo(userId, message) { const client = clients.get(userId); if (client && client.ws.readyState === WebSocket.OPEN) { client.ws.send(JSON.stringify(message)); } } wss.on('connection', (ws) => { const clientId = uuidv4(); clients.set(clientId, { ws, userId: null, roomId: null }); ws.on('message', (raw) => { let msg; try { msg = JSON.parse(raw); } catch (e) { return; } const client = clients.get(clientId); if (!client) return; switch (msg.type) { case 'login': { const username = (msg.username || '').trim().substring(0, 20); if (!username) { sendTo(clientId, { type: 'login_error', message: 'Invalid username' }); return; } // Check duplicate for (const [id, u] of users) { if (u.username.toLowerCase() === username.toLowerCase() && id !== clientId) { sendTo(clientId, { type: 'login_error', message: 'Username taken' }); return; } } const look = msg.look || { skin: '#F5CBA7', hair: '#4A2F1B', hairStyle: 0, shirt: '#3498DB', pants: '#2C3E50', shoes: '#1A1A1A', gender: 'M', eyes: '#2C3E50' }; users.set(clientId, { username, look, motto: msg.motto || '' }); client.userId = clientId; sendTo(clientId, { type: 'login_ok', userId: clientId, username, look, rooms: Array.from(rooms.values()).map(r => ({ id: r.id, name: r.name, owner: r.owner, userCount: r.users.size, maxUsers: r.maxUsers, description: r.description })) }); break; } case 'get_rooms': { sendTo(clientId, { type: 'room_list', rooms: Array.from(rooms.values()).map(r => ({ id: r.id, name: r.name, owner: r.owner, userCount: r.users.size, maxUsers: r.maxUsers, description: r.description })) }); break; } case 'join_room': { const user = users.get(clientId); if (!user) return; // Leave current room if (client.roomId) { const oldRoom = rooms.get(client.roomId); if (oldRoom) { oldRoom.removeUser(clientId); broadcast(client.roomId, { type: 'user_left', userId: clientId }); } } const room = rooms.get(msg.roomId); if (!room) { sendTo(clientId, { type: 'error', message: 'Room not found' }); return; } const roomUser = new RoomUser(clientId, user.username, user.look); roomUser.motto = user.motto; // Find door position for (let y = 0; y < room.height; y++) { for (let x = 0; x < room.width; x++) { if (room.floor[y][x] === 2) { roomUser.x = x; roomUser.y = y; } } } if (!room.addUser(roomUser)) { sendTo(clientId, { type: 'error', message: 'Room is full' }); return; } client.roomId = msg.roomId; sendTo(clientId, { type: 'room_data', room: room.serialize() }); broadcast(msg.roomId, { type: 'user_joined', user: roomUser.serialize() }, clientId); break; } case 'move': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const roomUser = room.users.get(clientId); if (!roomUser) return; const targetX = Math.floor(msg.x); const targetY = Math.floor(msg.y); if (!room.isTileWalkable(targetX, targetY)) return; // Check if another user is on that tile let occupied = false; room.users.forEach((u, id) => { if (id !== clientId && u.x === targetX && u.y === targetY) { occupied = true; } }); if (occupied) return; roomUser.x = targetX; roomUser.y = targetY; roomUser.action = 'walk'; // Calculate direction const dx = targetX - (msg.fromX || roomUser.x); const dy = targetY - (msg.fromY || roomUser.y); if (dx !== 0 || dy !== 0) { roomUser.direction = getDirection(dx, dy); roomUser.headDirection = roomUser.direction; } broadcast(client.roomId, { type: 'user_moved', userId: clientId, x: targetX, y: targetY, direction: roomUser.direction, action: 'walk' }); break; } case 'walk_path': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const roomUser = room.users.get(clientId); if (!roomUser) return; // Validate path const path = msg.path || []; if (path.length === 0) return; const finalPos = path[path.length - 1]; if (!room.isTileWalkable(finalPos.x, finalPos.y)) return; broadcast(client.roomId, { type: 'user_walk_path', userId: clientId, path: path, startX: roomUser.x, startY: roomUser.y }); roomUser.x = finalPos.x; roomUser.y = finalPos.y; if (path.length > 1) { const prev = path[path.length - 2]; roomUser.direction = getDirection(finalPos.x - prev.x, finalPos.y - prev.y); } else { roomUser.direction = getDirection(finalPos.x - roomUser.x, finalPos.y - roomUser.y); } roomUser.action = 'stand'; break; } case 'chat': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const roomUser = room.users.get(clientId); if (!roomUser) return; const text = (msg.text || '').trim().substring(0, 200); if (!text) return; // Commands if (text.startsWith(':')) { const cmd = text.toLowerCase(); if (cmd === ':wave') { roomUser.action = 'wave'; broadcast(client.roomId, { type: 'user_action', userId: clientId, action: 'wave' }); setTimeout(() => { roomUser.action = 'stand'; broadcast(client.roomId, { type: 'user_action', userId: clientId, action: 'stand' }); }, 3000); return; } if (cmd === ':dance') { roomUser.dancing = !roomUser.dancing; roomUser.action = roomUser.dancing ? 'dance' : 'stand'; broadcast(client.roomId, { type: 'user_action', userId: clientId, action: roomUser.action, dancing: roomUser.dancing }); return; } if (cmd === ':sit') { roomUser.action = roomUser.action === 'sit' ? 'stand' : 'sit'; broadcast(client.roomId, { type: 'user_action', userId: clientId, action: roomUser.action }); return; } } roomUser.chatMessage = text; broadcast(client.roomId, { type: 'chat', userId: clientId, username: roomUser.username, text, bubble: msg.bubble || 0 }); clearTimeout(roomUser.chatTimer); roomUser.chatTimer = setTimeout(() => { roomUser.chatMessage = ''; }, 5000); break; } case 'shout': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const roomUser = room.users.get(clientId); if (!roomUser) return; const text = (msg.text || '').trim().substring(0, 200); if (!text) return; broadcast(client.roomId, { type: 'shout', userId: clientId, username: roomUser.username, text }); break; } case 'whisper': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const targetUser = Array.from(room.users.values()).find(u => u.username === msg.target); if (targetUser) { sendTo(targetUser.id, { type: 'whisper', from: users.get(clientId).username, text: msg.text }); sendTo(clientId, { type: 'whisper_sent', to: msg.target, text: msg.text }); } break; } case 'action': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const roomUser = room.users.get(clientId); if (!roomUser) return; roomUser.action = msg.action || 'stand'; if (msg.action === 'dance') roomUser.dancing = true; if (msg.action === 'stand') roomUser.dancing = false; broadcast(client.roomId, { type: 'user_action', userId: clientId, action: roomUser.action, dancing: roomUser.dancing }); break; } case 'direction': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const roomUser = room.users.get(clientId); if (!roomUser) return; roomUser.direction = msg.direction; roomUser.headDirection = msg.headDirection || msg.direction; broadcast(client.roomId, { type: 'user_direction', userId: clientId, direction: roomUser.direction, headDirection: roomUser.headDirection }, clientId); break; } case 'create_room': { const user = users.get(clientId); if (!user) return; const roomId = 'room_' + uuidv4().substring(0, 8); const name = (msg.name || 'My Room').trim().substring(0, 30); const width = Math.min(Math.max(msg.width || 10, 6), 20); const height = Math.min(Math.max(msg.height || 10, 6), 20); const newRoom = new Room(roomId, name, user.username, width, height); newRoom.description = (msg.description || '').substring(0, 100); newRoom.wallColor = msg.wallColor || '#8BA4C7'; newRoom.floorColor = msg.floorColor || '#A8B86A'; rooms.set(roomId, newRoom); sendTo(clientId, { type: 'room_created', roomId, rooms: Array.from(rooms.values()).map(r => ({ id: r.id, name: r.name, owner: r.owner, userCount: r.users.size, maxUsers: r.maxUsers, description: r.description })) }); break; } case 'place_furniture': { if (!client.roomId) return; const room = rooms.get(client.roomId); if (!room) return; const user = users.get(clientId); if (!user || room.owner !== user.username && room.owner !== 'System') return; const item = { id: 'f_' + uuidv4().substring(0, 8), type: msg.furniType || 'chair', x: msg.x, y: msg.y, z: 0, direction: msg.direction || 0, color: msg.color || '#8B4513', blocking: msg.blocking !== undefined ? msg.blocking : true, sittable: msg.sittable || false }; room.addFurniture(item); broadcast(client.roomId, { type: 'furniture_placed', item }); break; } case 'leave_room': { if (client.roomId) { const room = rooms.get(client.roomId); if (room) { room.removeUser(clientId); broadcast(client.roomId, { type: 'user_left', userId: clientId }); } client.roomId = null; } break; } case 'update_look': { const user = users.get(clientId); if (!user) return; user.look = msg.look; if (client.roomId) { const room = rooms.get(client.roomId); if (room) { const roomUser = room.users.get(clientId); if (roomUser) roomUser.look = msg.look; broadcast(client.roomId, { type: 'user_look_updated', userId: clientId, look: msg.look }); } } break; } } }); ws.on('close', () => { const client = clients.get(clientId); if (client && client.roomId) { const room = rooms.get(client.roomId); if (room) { room.removeUser(clientId); broadcast(client.roomId, { type: 'user_left', userId: clientId }); } } users.delete(clientId); clients.delete(clientId); }); sendTo(clientId, { type: 'welcome', clientId }); }); function getDirection(dx, dy) { if (dx === 0 && dy === -1) return 0; if (dx === 1 && dy === -1) return 1; if (dx === 1 && dy === 0) return 2; if (dx === 1 && dy === 1) return 3; if (dx === 0 && dy === 1) return 4; if (dx === -1 && dy === 1) return 5; if (dx === -1 && dy === 0) return 6; if (dx === -1 && dy === -1) return 7; return 4; } // Keep alive setInterval(() => { wss.clients.forEach((ws) => { if (ws.readyState === WebSocket.OPEN) { ws.ping(); } }); }, 30000); ``` ## Client ```html Pixel Hotel

🏨

PIXEL HOTEL

Your Virtual World Awaits

Username

Motto

Customize Your Look

Skin

Hair

Hair Style

Shirt

Pants

Gender

🏨 Room Navigator

Room Name

Description

Width

Height

Wall Color

Floor Color

``` ```css /* client/css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; background: #0a0a1a; color: white; overflow: hidden; width: 100vw; height: 100vh; } .screen { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .screen.active { display: flex; } /* === LOGIN SCREEN === */ #login-screen { background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 30%, #2d1b69 60%, #0a0a2e 100%); justify-content: center; align-items: center; animation: bgShift 10s ease-in-out infinite; } @keyframes bgShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } #login-screen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent), radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.2), transparent), radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,0.3), transparent), radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.2), transparent), radial-gradient(3px 3px at 10% 80%, rgba(100,149,237,0.4), transparent), radial-gradient(3px 3px at 90% 40%, rgba(147,112,219,0.4), transparent); animation: twinkle 4s ease-in-out infinite alternate; } @keyframes twinkle { 0% { opacity: 0.5; } 100% { opacity: 1; } } .login-container { position: relative; z-index: 1; background: rgba(20, 20, 50, 0.9); border: 2px solid rgba(100, 149, 237, 0.3); border-radius: 20px; padding: 40px; max-width: 500px; width: 95%; max-height: 90vh; overflow-y: auto; backdrop-filter: blur(20px); box-shadow: 0 0 40px rgba(100, 149, 237, 0.15), inset 0 0 40px rgba(100, 149, 237, 0.05); } .hotel-logo { text-align: center; margin-bottom: 30px; } .logo-icon { font-size: 64px; margin-bottom: 10px; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hotel-logo h1 { font-family: 'Volkhov', serif; font-size: 42px; background: linear-gradient(135deg, #6495ED, #9B59B6, #E74C3C, #F39C12); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientText 4s ease infinite; letter-spacing: 4px; } @keyframes gradientText { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .tagline { color: #8899aa; font-size: 14px; margin-top: 5px; letter-spacing: 2px; } .login-form .form-group { margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 6px; color: #8899aa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .form-group input[type="text"], .form-group input[type="number"] { width: 100%; padding: 12px 16px; background: rgba(30, 30, 70, 0.8); border: 2px solid rgba(100, 149, 237, 0.2); border-radius: 10px; color: white; font-size: 16px; font-family: 'Ubuntu', sans-serif; transition: all 0.3s; } .form-group input:focus { outline: none; border-color: #6495ED; box-shadow: 0 0 15px rgba(100, 149, 237, 0.3); } .avatar-preview-section { background: rgba(30, 30, 70, 0.5); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .avatar-preview-section h3 { text-align: center; color: #8899aa; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; } #avatar-preview { display: block; margin: 0 auto 15px; image-rendering: pixelated; border-radius: 8px; background: rgba(20, 20, 50, 0.8); } .look-options { display: flex; flex-direction: column; gap: 12px; } .color-group label { display: block; color: #8899aa; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } .color-row { display: flex; gap: 6px; flex-wrap: wrap; } .color-swatch { width: 30px; height: 30px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; } .color-swatch:hover { transform: scale(1.15); border-color: white; } .color-swatch.selected { border-color: #6495ED; box-shadow: 0 0 10px rgba(100, 149, 237, 0.5); } .style-row { display: flex; gap: 6px; flex-wrap: wrap; } .style-btn { padding: 6px 12px; background: rgba(30, 30, 70, 0.8); border: 2px solid rgba(100, 149, 237, 0.2); border-radius: 6px; color: #8899aa; cursor: pointer; font-size: 11px; transition: all 0.2s; } .style-btn:hover, .style-btn.selected { border-color: #6495ED; color: white; background: rgba(100, 149, 237, 0.2); } .primary-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #6495ED, #9B59B6); border: none; border-radius: 10px; color: white; font-size: 18px; font-weight: 700; cursor: pointer; letter-spacing: 3px; transition: all 0.3s; font-family: 'Ubuntu', sans-serif; } .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(100, 149, 237, 0.4); } .primary-btn:active { transform: translateY(0); } .error-msg { color: #E74C3C; text-align: center; margin-top: 10px; font-size: 14px; min-height: 20px; } /* === NAVIGATOR === */ .navigator-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(5px); } .navigator-panel { background: linear-gradient(180deg, #1a1a3e, #0d0d2b); border: 2px solid rgba(100, 149, 237, 0.3); border-radius: 16px; width: 480px; max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: rgba(100, 149, 237, 0.1); border-bottom: 1px solid rgba(100, 149, 237, 0.2); } .panel-header h2 { font-size: 18px; font-weight: 500; } .close-btn { background: rgba(231, 76, 60, 0.3); border: none; color: #E74C3C; width: 32px; height: 32px; border-radius: 8px; font-size: 20px; cursor: pointer; transition: all 0.2s; } .close-btn:hover { background: #E74C3C; color: white; } .panel-tabs { display: flex; padding: 10px 20px 0; gap: 8px; } .tab-btn { padding: 8px 16px; background: transparent; border: 2px solid transparent; border-bottom: none; color: #8899aa; cursor: pointer; border-radius: 8px 8px 0 0; font-size: 13px; transition: all 0.2s; } .tab-btn.active { background: rgba(100, 149, 237, 0.1); border-color: rgba(100, 149, 237, 0.3); color: white; } .tab-content { display: none; padding: 15px 20px 20px; max-height: 55vh; overflow-y: auto; } .tab-content.active { display: block; } .room-list { display: flex; flex-direction: column; gap: 8px; } .room-card { background: rgba(30, 30, 70, 0.6); border: 1px solid rgba(100, 149, 237, 0.15); border-radius: 10px; padding: 14px; cursor: pointer; transition: all 0.2s; } .room-card:hover { background: rgba(100, 149, 237, 0.15); border-color: rgba(100, 149, 237, 0.4); transform: translateX(4px); } .room-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .room-card-name { font-weight: 600; font-size: 15px; } .room-card-users { color: #8899aa; font-size: 12px; } .room-card-owner { color: #8899aa; font-size: 12px; } .room-card-desc { color: #6677aa; font-size: 12px; margin-top: 4px; } .create-room-form { display: flex; flex-direction: column; gap: 12px; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .form-group input[type="number"] { width: 100%; padding: 10px; background: rgba(30, 30, 70, 0.8); border: 2px solid rgba(100, 149, 237, 0.2); border-radius: 8px; color: white; font-size: 14px; } /* === GAME SCREEN === */ #game-screen { display: none; flex-direction: column; background: #0a0a1a; } #game-screen.active { display: flex; } .game-topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: linear-gradient(180deg, rgba(20,20,50,0.95), rgba(15,15,40,0.95)); border-bottom: 2px solid rgba(100, 149, 237, 0.2); z-index: 10; height: 50px; } .topbar-left { display: flex; align-items: center; gap: 16px; } .hotel-badge { font-family: 'Volkhov', serif; font-weight: 700; font-size: 16px; color: #6495ED; letter-spacing: 2px; } .room-info { color: #8899aa; font-size: 14px; } .topbar-right { display: flex; gap: 6px; } .toolbar-btn { width: 38px; height: 38px; background: rgba(30, 30, 70, 0.6); border: 2px solid rgba(100, 149, 237, 0.2); border-radius: 8px; font-size: 18px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .toolbar-btn:hover { background: rgba(100, 149, 237, 0.2); border-color: rgba(100, 149, 237, 0.5); transform: translateY(-1px); } #game-canvas { flex: 1; display: block; cursor: pointer; image-rendering: auto; } /* Chat */ #chat-container { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; } #chat-log { max-height: 200px; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; } #chat-log::-webkit-scrollbar { width: 4px; } #chat-log::-webkit-scrollbar-thumb { background: rgba(100, 149, 237, 0.3); border-radius: 2px; } .chat-message { display: inline-flex; align-items: flex-start; gap: 6px; padding: 6px 12px; border-radius: 12px; font-size: 13px; max-width: 80%; animation: chatIn 0.3s ease-out; pointer-events: auto; } @keyframes chatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .chat-message.normal { background: rgba(20, 20, 50, 0.9); border: 1px solid rgba(100, 149, 237, 0.2); } .chat-message.shout { background: rgba(231, 76, 60, 0.2); border: 1px solid rgba(231, 76, 60, 0.4); font-weight: 700; font-size: 15px; } .chat-message.whisper { background: rgba(155, 89, 182, 0.2); border: 1px solid rgba(155, 89, 182, 0.4); font-style: italic; } .chat-message.system { background: rgba(46, 204, 113, 0.15); border: 1px solid rgba(46, 204, 113, 0.3); color: #2ECC71; font-size: 12px; } .chat-username { font-weight: 700; color: #6495ED; white-space: nowrap; } .chat-text { color: #ddd; word-break: break-word; } #chat-input-container { display: flex; padding: 8px 16px 12px; gap: 6px; background: linear-gradient(0deg, rgba(15,15,40,0.95), rgba(15,15,40,0.8)); } #chat-input { flex: 1; padding: 10px 16px; background: rgba(30, 30, 70, 0.8); border: 2px solid rgba(100, 149, 237, 0.2); border-radius: 20px; color: white; font-size: 14px; font-family: 'Ubuntu', sans-serif; transition: border-color 0.2s; } #chat-input:focus { outline: none; border-color: #6495ED; } .send-btn, .shout-btn { padding: 10px 16px; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.2s; } .send-btn { background: linear-gradient(135deg, #6495ED, #5A7FD4); color: white; } .send-btn:hover { background: linear-gradient(135deg, #5A7FD4, #4A6FC4); } .shout-btn { background: rgba(231, 76, 60, 0.3); color: #E74C3C; border: 1px solid rgba(231, 76, 60, 0.3); font-size: 16px; padding: 10px 12px; } .shout-btn:hover { background: rgba(231, 76, 60, 0.5); } /* Action Bar */ #action-bar { position: absolute; bottom: 70px; right: 16px; display: flex; flex-direction: column; gap: 4px; z-index: 10; } .action-btn { width: 44px; height: 44px; background: rgba(20, 20, 50, 0.9); border: 2px solid rgba(100, 149, 237, 0.2); border-radius: 10px; font-size: 20px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .action-btn:hover { background: rgba(100, 149, 237, 0.3); border-color: rgba(100, 149, 237, 0.5); transform: scale(1.1); } /* User Info Popup */ #user-info-popup { position: absolute; background: rgba(20, 20, 50, 0.95); border: 2px solid rgba(100, 149, 237, 0.3); border-radius: 12px; padding: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } #user-info-popup.hidden { display: none; } .popup-name { font-weight: 700; font-size: 14px; color: #6495ED; } .popup-motto { font-size: 12px; color: #8899aa; } .popup-close { position: absolute; top: 4px; right: 8px; background: none; border: none; color: #8899aa; cursor: pointer; font-size: 16px; } /* Scrollbar */ .tab-content::-webkit-scrollbar, .login-container::-webkit-scrollbar { width: 6px; } .tab-content::-webkit-scrollbar-thumb, .login-container::-webkit-scrollbar-thumb { background: rgba(100, 149, 237, 0.3); border-radius: 3px; } .tab-content::-webkit-scrollbar-track, .login-container::-webkit-scrollbar-track { background: transparent; } /* Responsive */ @media (max-width: 600px) { .login-container { padding: 20px; max-height: 95vh; } .hotel-logo h1 { font-size: 28px; } .logo-icon { font-size: 48px; } .navigator-panel { width: 95%; } } /* Loading dots */ .loading-dots::after { content: ''; animation: dots 1.5s steps(4) infinite; } @keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } ``` ```javascript // client/js/pathfinding.js class Pathfinder { static findPath(grid, startX, startY, endX, endY, users, myId) { const width = grid[0].length; const height = grid.length; if (endX < 0 || endY < 0 || endX >= width || endY >= height) return []; if (grid[endY][endX] === 0) return []; const openSet = []; const closedSet = new Set(); const cameFrom = {}; const start = { x: startX, y: startY, g: 0, h: 0, f: 0 }; start.h = heuristic(startX, startY, endX, endY); start.f = start.h; openSet.push(start); // Build blocked set from other users const blockedTiles = new Set(); if (users) { users.forEach((u, id) => { if (id !== myId && !(u.x === endX && u.y === endY)) { // Don't block the target tile, but block other user tiles } }); } while (openSet.length > 0) { // Find lowest f let current = openSet[0]; let currentIdx = 0; for (let i = 1; i < openSet.length; i++) { if (openSet[i].f < current.f) { current = openSet[i]; currentIdx = i; } } if (current.x === endX && current.y === endY) { // Reconstruct const path = []; let node = `${current.x},${current.y}`; while (node) { const [x, y] = node.split(',').map(Number); path.unshift({ x, y }); node = cameFrom[node]; } return path.slice(1); // Remove start position } openSet.splice(currentIdx, 1); closedSet.add(`${current.x},${current.y}`); // 8-directional neighbors const neighbors = [ { x: current.x, y: current.y - 1 }, // N { x: current.x + 1, y: current.y - 1 }, // NE { x: current.x + 1, y: current.y }, // E { x: current.x + 1, y: current.y + 1 }, // SE { x: current.x, y: current.y + 1 }, // S { x: current.x - 1, y: current.y + 1 }, // SW { x: current.x - 1, y: current.y }, // W { x: current.x - 1, y: current.y - 1 }, // NW ]; for (const n of neighbors) { if (n.x < 0 || n.y < 0 || n.x >= width || n.y >= height) continue; if (grid[n.y][n.x] === 0) continue; if (closedSet.has(`${n.x},${n.y}`)) continue; // For diagonal moves, check that adjacent orthogonal tiles are walkable const dx = n.x - current.x; const dy = n.y - current.y; if (Math.abs(dx) + Math.abs(dy) === 2) { if (grid[current.y][current.x + dx] === 0 || grid[current.y + dy][current.x] === 0) { continue; } } const isDiagonal = Math.abs(dx) + Math.abs(dy) === 2; const moveCost = isDiagonal ? 1.414 : 1; const tentativeG = current.g + moveCost; const existing = openSet.find(o => o.x === n.x && o.y === n.y); if (existing) { if (tentativeG < existing.g) { existing.g = tentativeG; existing.f = tentativeG + existing.h; cameFrom[`${n.x},${n.y}`] = `${current.x},${current.y}`; } } else { const h = heuristic(n.x, n.y, endX, endY); openSet.push({ x: n.x, y: n.y, g: tentativeG, h, f: tentativeG + h }); cameFrom[`${n.x},${n.y}`] = `${current.x},${current.y}`; } } } return []; // No path found } } function heuristic(x1, y1, x2, y2) { // Chebyshev distance for 8-directional return Math.max(Math.abs(x1 - x2), Math.abs(y1 - y2)); } ``` ```javascript // client/js/network.js class Network { constructor(game) { this.game = game; this.ws = null; this.connected = false; this.reconnectTimer = null; this.messageQueue = []; } connect(url) { return new Promise((resolve, reject) => { try { this.ws = new WebSocket(url); } catch (e) { reject(e); return; } this.ws.onopen = () => { this.connected = true; console.log('Connected to server'); this.messageQueue.forEach(msg => this.send(msg)); this.messageQueue = []; resolve(); }; this.ws.onmessage = (event) => { try { const msg = JSON.parse(event.data); this.game.handleMessage(msg); } catch (e) { console.error('Failed to parse message', e); } }; this.ws.onclose = () => { this.connected = false; console.log('Disconnected'); this.tryReconnect(url); }; this.ws.onerror = (err) => { console.error('WebSocket error'); reject(err); }; }); } tryReconnect(url) { if (this.reconnectTimer) return; this.reconnectTimer = setTimeout(() => { this.reconnectTimer = null; console.log('Attempting reconnect...'); this.connect(url).catch(() => {}); }, 3000); } send(msg) { if (this.connected && this.ws.readyState === WebSocket.OPEN) { this.ws.send(JSON.stringify(msg)); } else { this.messageQueue.push(msg); } } disconnect() { if (this.ws) { this.ws.close(); } } } ``` ```javascript // client/js/avatar.js class AvatarRenderer { static TILE_W = 64; static TILE_H = 32; static drawAvatar(ctx, x, y, look, direction, action, frame, username, chatMessage, scale = 1) { ctx.save(); ctx.translate(x, y); ctx.scale(scale, scale); const dir = direction || 4; const facingRight = dir >= 1 && dir <= 3; const facingLeft = dir >= 5 && dir <= 7; const facingFront = dir === 4; const facingBack = dir === 0; // Shadow ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.beginPath(); ctx.ellipse(0, 5, 14, 6, 0, 0, Math.PI * 2); ctx.fill(); // Animation offsets let bodyOffsetY = 0; let legOffset = 0; let armWave = 0; let danceOffset = 0; let sittingOffset = 0; if (action === 'walk') { bodyOffsetY = Math.sin(frame * 0.3) * 2; legOffset = Math.sin(frame * 0.6) * 4; } else if (action === 'dance') { danceOffset = Math.sin(frame * 0.15) * 3; bodyOffsetY = Math.abs(Math.sin(frame * 0.1)) * -4; } else if (action === 'wave') { armWave = Math.sin(frame * 0.2) * 15; } else if (action === 'sit') { sittingOffset = 12; } const skinColor = look.skin || '#F5CBA7'; const hairColor = look.hair || '#4A2F1B'; const shirtColor = look.shirt || '#3498DB'; const pantsColor = look.pants || '#2C3E50'; const shoesColor = look.shoes || '#1A1A1A'; const flip = facingLeft ? -1 : 1; ctx.save(); ctx.scale(flip, 1); const baseY = -40 + bodyOffsetY + sittingOffset; // === LEGS === if (action === 'sit') { // Sitting legs - bent forward ctx.fillStyle = pantsColor; ctx.fillRect(-7, baseY + 28, 6, 8); ctx.fillRect(1, baseY + 28, 6, 8); // Feet ctx.fillStyle = shoesColor; ctx.fillRect(-7, baseY + 36, 7, 3); ctx.fillRect(1, baseY + 36, 7, 3); } else { // Left leg ctx.fillStyle = pantsColor; ctx.fillRect(-6, baseY + 26, 5, 10 + (action === 'walk' ? legOffset : 0)); // Right leg ctx.fillRect(1, baseY + 26, 5, 10 + (action === 'walk' ? -legOffset : 0)); // Shoes ctx.fillStyle = shoesColor; ctx.fillRect(-7, baseY + 36 + (action === 'walk' ? legOffset : 0), 6, 3); ctx.fillRect(1, baseY + 36 + (action === 'walk' ? -legOffset : 0), 6, 3); } // === BODY / SHIRT === ctx.fillStyle = shirtColor; const torsoY = baseY + 14 + danceOffset; ctx.fillRect(-8, torsoY, 16, 14); // Shirt shading ctx.fillStyle = darkenColor(shirtColor, 20); ctx.fillRect(-8, torsoY, 3, 14); // === ARMS === ctx.fillStyle = shirtColor; if (action === 'wave' && !facingBack) { // Waving arm ctx.save(); ctx.translate(8, torsoY + 2); ctx.rotate((-60 + armWave) * Math.PI / 180); ctx.fillRect(0, 0, 4, 12); ctx.fillStyle = skinColor; ctx.fillRect(0, 12, 4, 4); ctx.restore(); // Other arm ctx.fillRect(-12, torsoY + 2, 4, 12); ctx.fillStyle = skinColor; ctx.fillRect(-12, torsoY + 14, 4, 4); } else if (action === 'dance') { // Dancing arms ctx.save(); ctx.translate(8, torsoY + 2); ctx.rotate((-45 + Math.sin(frame * 0.15) * 30) * Math.PI / 180); ctx.fillRect(0, 0, 4, 12); ctx.fillStyle = skinColor; ctx.fillRect(0, 12, 4, 4); ctx.restore(); ctx.save(); ctx.translate(-12, torsoY + 2); ctx.rotate((45 + Math.sin(frame * 0.15 + Math.PI) * 30) * Math.PI / 180); ctx.fillRect(0, 0, 4, 12); ctx.fillStyle = skinColor; ctx.fillRect(0, 12, 4, 4); ctx.restore(); } else { // Normal arms const armSwing = action === 'walk' ? Math.sin(frame * 0.3) * 3 : 0; ctx.fillRect(-12, torsoY + 2, 4, 12 + armSwing); ctx.fillRect(8, torsoY + 2, 4, 12 - armSwing); ctx.fillStyle = skinColor; ctx.fillRect(-12, torsoY + 14 + armSwing, 4, 4); ctx.fillRect(8, torsoY + 14 - armSwing, 4, 4); } // === NECK === ctx.fillStyle = skinColor; ctx.fillRect(-3, baseY + 10 + danceOffset, 6, 6); // === HEAD === const headY = baseY + danceOffset; ctx.fillStyle = skinColor; // Main head ctx.beginPath(); ctx.roundRect(-10, headY - 2, 20, 16, 4); ctx.fill(); // Face features if (!facingBack) { // Eyes ctx.fillStyle = look.eyes || '#2C3E50'; if (facingFront) { ctx.fillRect(-5, headY + 4, 3, 3); ctx.fillRect(2, headY + 4, 3, 3); // Eye shine ctx.fillStyle = 'rgba(255,255,255,0.8)'; ctx.fillRect(-4, headY + 4, 1, 1); ctx.fillRect(3, headY + 4, 1, 1); } else { // Side view ctx.fillRect(1, headY + 4, 3, 3); ctx.fillStyle = 'rgba(255,255,255,0.8)'; ctx.fillRect(2, headY + 4, 1, 1); } // Mouth ctx.fillStyle = darkenColor(skinColor, 30); if (facingFront) { ctx.fillRect(-2, headY + 9, 4, 1); } else { ctx.fillRect(3, headY + 9, 3, 1); } // Blush ctx.fillStyle = 'rgba(255,150,150,0.2)'; if (facingFront) { ctx.fillRect(-8, headY + 7, 4, 2); ctx.fillRect(4, headY + 7, 4, 2); } } // === HAIR === ctx.fillStyle = hairColor; const hairStyle = look.hairStyle || 0; switch (hairStyle) { case 0: // Short ctx.fillRect(-10, headY - 4, 20, 7); ctx.fillRect(-11, headY - 3, 2, 5); if (facingFront || facingRight || facingLeft) { ctx.fillRect(-11, headY - 2, 2, 8); } break; case 1: // Medium ctx.fillRect(-11, headY - 5, 22, 8); ctx.fillRect(-11, headY - 2, 3, 12); ctx.fillRect(8, headY - 2, 3, 10); break; case 2: // Long ctx.fillRect(-11, headY - 5, 22, 8); ctx.fillRect(-12, headY - 2, 3, 18); ctx.fillRect(9, headY - 2, 3, 18); ctx.fillRect(-11, headY + 14, 22, 3); break; case 3: // Spiky ctx.fillRect(-10, headY - 4, 20, 6); // Spikes ctx.fillRect(-8, headY - 8, 3, 5); ctx.fillRect(-3, headY - 10, 3, 7); ctx.fillRect(2, headY - 9, 3, 6); ctx.fillRect(7, headY - 7, 3, 4); break; case 4: // Curly ctx.beginPath(); ctx.arc(0, headY, 13, Math.PI, 0); ctx.fill(); ctx.fillRect(-13, headY - 2, 4, 10); ctx.fillRect(9, headY - 2, 4, 10); // Curly bits for (let i = -10; i <= 8; i += 4) { ctx.beginPath(); ctx.arc(i, headY - 4, 3, 0, Math.PI * 2); ctx.fill(); } break; } ctx.restore(); // Undo flip // === NAME TAG === if (username) { ctx.font = 'bold 11px Ubuntu, sans-serif'; ctx.textAlign = 'center'; const nameWidth = ctx.measureText(username).width + 12; // Name background ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.beginPath(); ctx.roundRect(-nameWidth / 2, -55 + bodyOffsetY + sittingOffset + danceOffset, nameWidth, 16, 4); ctx.fill(); ctx.fillStyle = '#FFFFFF'; ctx.fillText(username, 0, -43 + bodyOffsetY + sittingOffset + danceOffset); } // === CHAT BUBBLE === if (chatMessage) { AvatarRenderer.drawChatBubble(ctx, 0, -70 + bodyOffsetY + sittingOffset + danceOffset, chatMessage); } ctx.restore(); } static drawChatBubble(ctx, x, y, text) { ctx.font = '12px Ubuntu, sans-serif'; const lines = wrapText(ctx, text, 150); const lineHeight = 16; const maxLineWidth = Math.max(...lines.map(l => ctx.measureText(l).width)); const bubbleWidth = maxLineWidth + 20; const bubbleHeight = lines.length * lineHeight + 12; // Bubble ctx.fillStyle = 'rgba(255, 255, 255, 0.95)'; ctx.strokeStyle = 'rgba(100, 149, 237, 0.5)'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.roundRect(x - bubbleWidth / 2, y - bubbleHeight, bubbleWidth, bubbleHeight, 8); ctx.fill(); ctx.stroke(); // Pointer ctx.fillStyle = 'rgba(255, 255, 255, 0.95)'; ctx.beginPath(); ctx.moveTo(x - 5, y); ctx.lineTo(x + 5, y); ctx.lineTo(x, y + 6); ctx.closePath(); ctx.fill(); // Text ctx.fillStyle = '#1a1a1a'; ctx.textAlign = 'center'; lines.forEach((line, i) => { ctx.fillText(line, x, y - bubbleHeight + 16 + i * lineHeight); }); } } function wrapText(ctx, text, maxWidth) { const words = text.split(' '); const lines = []; let currentLine = ''; for (const word of words) { const testLine = currentLine ? `${currentLine} ${word}` : word; if (ctx.measureText(testLine).width > maxWidth && currentLine) { lines.push(currentLine); currentLine = word; } else { currentLine = testLine; } } if (currentLine) lines.push(currentLine); return lines.length ? lines : ['']; } function darkenColor(hex, amount) { let r = parseInt(hex.slice(1, 3), 16); let g = parseInt(hex.slice(3, 5), 16); let b = parseInt(hex.slice(5, 7), 16); r = Math.max(0, r - amount); g = Math.max(0, g - amount); b = Math.max(0, b - amount); return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; } function lightenColor(hex, amount) { let r = parseInt(hex.slice(1, 3), 16); let g = parseInt(hex.slice(3, 5), 16); let b = parseInt(hex.slice(5, 7), 16); r = Math.min(255, r + amount); g = Math.min(255, g + amount); b = Math.min(255, b + amount); return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; } ``` ```javascript // client/js/furniture.js class FurnitureRenderer { static TILE_W = 64; static TILE_H = 32; static draw(ctx, item, screenX, screenY) { const type = item.type; const color = item.color || '#8B4513'; const dir = item.direction || 0; ctx.save(); ctx.translate(screenX, screenY); switch (type) { case 'chair': this.drawChair(ctx, color, dir); break; case 'sofa': this.drawSofa(ctx, color, dir); break; case 'table': this.drawTable(ctx, color); break; case 'lamp': this.drawLamp(ctx, color); break; case 'plant': this.drawPlant(ctx, color); break; case 'jukebox': this.drawJukebox(ctx, color); break; case 'bar_counter': this.drawBarCounter(ctx, color); break; case 'bar_stool': this.drawBarStool(ctx, color); break; case 'lounger': this.drawLounger(ctx, color, dir); break; default: this.drawGenericFurniture(ctx, color); } ctx.restore(); } static drawChair(ctx, color, dir) { // Seat ctx.fillStyle = color; this.drawIsoCube(ctx, -12, -10, 24, 6, 24, color); // Back ctx.fillStyle = darkenColor(color, 15); if (dir === 0 || dir === 4) { ctx.fillRect(-12, -30, 24, 20); ctx.fillStyle = darkenColor(color, 30); ctx.fillRect(-12, -30, 24, 3); } else { ctx.fillRect(-14, -30, 6, 20); ctx.fillStyle = darkenColor(color, 30); ctx.fillRect(-14, -30, 6, 3); } // Legs ctx.fillStyle = darkenColor(color, 40); ctx.fillRect(-10, -4, 3, 10); ctx.fillRect(7, -4, 3, 10); } static drawSofa(ctx, color, dir) { // Base cushion ctx.fillStyle = color; ctx.beginPath(); ctx.roundRect(-16, -12, 32, 14, 3); ctx.fill(); // Back ctx.fillStyle = darkenColor(color, 15); if (dir === 2 || dir === 6) { ctx.beginPath(); ctx.roundRect(-16, -28, 8, 22, 3); ctx.fill(); } else { ctx.beginPath(); ctx.roundRect(-16, -28, 32, 8, 3); ctx.fill(); } // Arm rests ctx.fillStyle = darkenColor(color, 20); ctx.beginPath(); ctx.roundRect(-18, -16, 6, 10, 2); ctx.fill(); ctx.beginPath(); ctx.roundRect(12, -16, 6, 10, 2); ctx.fill(); // Cushion line ctx.strokeStyle = darkenColor(color, 30); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(0, 0); ctx.stroke(); // Shadow ctx.fillStyle = darkenColor(color, 40); ctx.fillRect(-14, 2, 28, 4); } static drawTable(ctx, color) { // Table top (isometric diamond) ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(0, -20); ctx.lineTo(20, -10); ctx.lineTo(0, 0); ctx.lineTo(-20, -10); ctx.closePath(); ctx.fill(); // Top surface shine ctx.fillStyle = lightenColor(color, 20); ctx.beginPath(); ctx.moveTo(0, -18); ctx.lineTo(16, -10); ctx.lineTo(0, -2); ctx.lineTo(-16, -10); ctx.closePath(); ctx.fill(); // Front edge ctx.fillStyle = darkenColor(color, 20); ctx.beginPath(); ctx.moveTo(-20, -10); ctx.lineTo(0, 0); ctx.lineTo(0, 4); ctx.lineTo(-20, -6); ctx.closePath(); ctx.fill(); ctx.fillStyle = darkenColor(color, 35); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(20, -10); ctx.lineTo(20, -6); ctx.lineTo(0, 4); ctx.closePath(); ctx.fill(); // Legs ctx.fillStyle = darkenColor(color, 40); ctx.fillRect(-16, -6, 3, 12); ctx.fillRect(13, -6, 3, 12); ctx.fillRect(-2, 2, 3, 6); } static drawLamp(ctx, color) { // Base ctx.fillStyle = '#555'; ctx.beginPath(); ctx.ellipse(0, 4, 8, 4, 0, 0, Math.PI * 2); ctx.fill(); // Pole ctx.fillStyle = '#888'; ctx.fillRect(-2, -35, 4, 40); // Shade ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(-14, -32); ctx.lineTo(14, -32); ctx.lineTo(10, -45); ctx.lineTo(-10, -45); ctx.closePath(); ctx.fill(); ctx.fillStyle = lightenColor(color, 30); ctx.beginPath(); ctx.moveTo(-12, -33); ctx.lineTo(12, -33); ctx.lineTo(8, -44); ctx.lineTo(-8, -44); ctx.closePath(); ctx.fill(); // Glow const glow = ctx.createRadialGradient(0, -20, 0, 0, -20, 25); glow.addColorStop(0, 'rgba(255,255,200,0.3)'); glow.addColorStop(1, 'rgba(255,255,200,0)'); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(0, -20, 25, 0, Math.PI * 2); ctx.fill(); } static drawPlant(ctx, color) { // Pot ctx.fillStyle = '#C0754A'; ctx.beginPath(); ctx.moveTo(-10, 0); ctx.lineTo(10, 0); ctx.lineTo(8, 14); ctx.lineTo(-8, 14); ctx.closePath(); ctx.fill(); ctx.fillStyle = '#A0654A'; ctx.beginPath(); ctx.moveTo(-10, 0); ctx.lineTo(10, 0); ctx.lineTo(10, -3); ctx.lineTo(-10, -3); ctx.closePath(); ctx.fill(); // Soil ctx.fillStyle = '#5D3A1A'; ctx.beginPath(); ctx.ellipse(0, 0, 9, 3, 0, 0, Math.PI * 2); ctx.fill(); // Leaves ctx.fillStyle = color; const leafPositions = [ { x: 0, y: -15, r: 12 }, { x: -8, y: -10, r: 8 }, { x: 8, y: -12, r: 9 }, { x: -4, y: -22, r: 7 }, { x: 5, y: -20, r: 8 }, { x: 0, y: -25, r: 6 }, ]; leafPositions.forEach(lp => { ctx.beginPath(); ctx.arc(lp.x, lp.y, lp.r, 0, Math.PI * 2); ctx.fill(); }); // Darker leaves for depth ctx.fillStyle = darkenColor(color, 25); ctx.beginPath(); ctx.arc(-5, -13, 6, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(3, -18, 5, 0, Math.PI * 2); ctx.fill(); } static drawJukebox(ctx, color) { // Body ctx.fillStyle = color; ctx.beginPath(); ctx.roundRect(-14, -40, 28, 44, 4); ctx.fill(); // Front panel ctx.fillStyle = darkenColor(color, 20); ctx.beginPath(); ctx.roundRect(-11, -36, 22, 28, 3); ctx.fill(); // Screen ctx.fillStyle = '#1a1a2e'; ctx.beginPath(); ctx.roundRect(-8, -33, 16, 12, 2); ctx.fill(); // Screen glow const screenGlow = ctx.createLinearGradient(-8, -33, 8, -21); screenGlow.addColorStop(0, 'rgba(100,255,200,0.3)'); screenGlow.addColorStop(0.5, 'rgba(100,200,255,0.2)'); screenGlow.addColorStop(1, 'rgba(200,100,255,0.3)'); ctx.fillStyle = screenGlow; ctx.fillRect(-7, -32, 14, 10); // Music bars on screen ctx.fillStyle = '#2ECC71'; for (let i = 0; i < 5; i++) { const h = 3 + Math.random() * 5; ctx.fillRect(-6 + i * 3, -24 - h, 2, h); } // Buttons ctx.fillStyle = '#E74C3C'; ctx.beginPath(); ctx.arc(-4, -15, 2, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#2ECC71'; ctx.beginPath(); ctx.arc(4, -15, 2, 0, Math.PI * 2); ctx.fill(); // Speaker grills ctx.fillStyle = darkenColor(color, 40); for (let i = 0; i < 3; i++) { ctx.fillRect(-8, -8 + i * 3, 16, 1); } // Top arch ctx.fillStyle = lightenColor(color, 20); ctx.beginPath(); ctx.arc(0, -40, 10, Math.PI, 0); ctx.fill(); // Glow effect const glow = ctx.createRadialGradient(0, -30, 0, 0, -30, 30); glow.addColorStop(0, 'rgba(155,89,182,0.15)'); glow.addColorStop(1, 'rgba(155,89,182,0)'); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(0, -30, 30, 0, Math.PI * 2); ctx.fill(); } static drawBarCounter(ctx, color) { // Main body ctx.fillStyle = color; ctx.fillRect(-16, -22, 32, 26); // Top surface ctx.fillStyle = lightenColor(color, 15); ctx.beginPath(); ctx.moveTo(-18, -22); ctx.lineTo(18, -22); ctx.lineTo(16, -24); ctx.lineTo(-16, -24); ctx.closePath(); ctx.fill(); // Front panel detail ctx.fillStyle = darkenColor(color, 20); ctx.fillRect(-14, -18, 28, 18); // Trim ctx.fillStyle = lightenColor(color, 25); ctx.fillRect(-16, -22, 32, 2); } static drawBarStool(ctx, color) { // Base ctx.fillStyle = color; ctx.beginPath(); ctx.ellipse(0, 4, 8, 4, 0, 0, Math.PI * 2); ctx.fill(); // Pole ctx.fillStyle = darkenColor(color, 20); ctx.fillRect(-2, -14, 4, 18); // Seat ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(0, -14, 10, 5, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#444'; ctx.beginPath(); ctx.ellipse(0, -15, 8, 4, 0, 0, Math.PI * 2); ctx.fill(); } static drawLounger(ctx, color, dir) { // Base ctx.fillStyle = darkenColor(color, 30); ctx.fillRect(-16, -4, 32, 8); // Cushion ctx.fillStyle = color; ctx.beginPath(); ctx.roundRect(-14, -10, 28, 8, 2); ctx.fill(); // Head rest ctx.fillStyle = darkenColor(color, 10); if (dir === 2 || dir === 6) { ctx.beginPath(); ctx.roundRect(-14, -18, 10, 10, 2); ctx.fill(); } else { ctx.beginPath(); ctx.roundRect(-14, -18, 28, 4, 2); ctx.fill(); } } static drawGenericFurniture(ctx, color) { this.drawIsoCube(ctx, -12, -16, 24, 20, 24, color); } static drawIsoCube(ctx, x, y, w, h, d, color) { // Top ctx.fillStyle = lightenColor(color, 15); ctx.fillRect(x, y, w, h); // Front ctx.fillStyle = color; ctx.fillRect(x, y + h, w, d / 3); // Side shadow ctx.fillStyle = darkenColor(color, 25); ctx.fillRect(x, y, 3, h + d / 3); } } ``` ```javascript // client/js/room.js class RoomRenderer { constructor() { this.TILE_W = 64; this.TILE_H = 32; this.offsetX = 0; this.offsetY = 0; this.roomData = null; this.hoverTile = null; this.wallHeight = 80; } setRoom(roomData) { this.roomData = roomData; this.calculateOffset(window.innerWidth, window.innerHeight - 50); } calculateOffset(canvasW, canvasH) { if (!this.roomData) return; const w = this.roomData.width; const h = this.roomData.height; // Center the room this.offsetX = canvasW / 2; this.offsetY = 120 + this.wallHeight; } tileToScreen(tileX, tileY) { const sx = (tileX - tileY) * this.TILE_W / 2 + this.offsetX; const sy = (tileX + tileY) * this.TILE_H / 2 + this.offsetY; return { x: sx, y: sy }; } screenToTile(screenX, screenY) { const sx = screenX - this.offsetX; const sy = screenY - this.offsetY; const tileX = Math.floor((sx / (this.TILE_W / 2) + sy / (this.TILE_H / 2)) / 2); const tileY = Math.floor((sy / (this.TILE_H / 2) - sx / (this.TILE_W / 2)) / 2); return { x: tileX, y: tileY }; } drawRoom(ctx, frame) { if (!this.roomData) return; const floor = this.roomData.floor; const w = this.roomData.width; const h = this.roomData.height; // Draw walls first this.drawWalls(ctx, floor, w, h); // Draw floor and objects in isometric order for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { if (floor[y][x] === 0) continue; const screen = this.tileToScreen(x, y); this.drawFloorTile(ctx, screen.x, screen.y, floor[y][x], x, y, frame); } } } drawWalls(ctx, floor, w, h) { const wallColor = this.roomData.wallColor || '#8BA4C7'; const wallDark = darkenColor(wallColor, 20); const wallLight = lightenColor(wallColor, 15); // Left wall (along y=0 edge or wherever floor starts at top) for (let x = 0; x < w; x++) { // Find the first floor tile in this column let firstY = -1; for (let y = 0; y < h; y++) { if (floor[y][x] !== 0) { firstY = y; break; } } if (firstY > 0 || (firstY === 0 && x > 0)) { // Draw wall segment } } // Back walls // Top-left wall for (let x = 0; x < w; x++) { if (floor[0] && floor[0][x] !== 0) { const screen = this.tileToScreen(x, 0); // Left wall segment ctx.fillStyle = wallLight; ctx.beginPath(); ctx.moveTo(screen.x - this.TILE_W / 2, screen.y); ctx.lineTo(screen.x, screen.y - this.TILE_H / 2); ctx.lineTo(screen.x, screen.y - this.TILE_H / 2 - this.wallHeight); ctx.lineTo(screen.x - this.TILE_W / 2, screen.y - this.wallHeight); ctx.closePath(); ctx.fill(); // Wall detail lines ctx.strokeStyle = darkenColor(wallLight, 10); ctx.lineWidth = 0.5; ctx.beginPath(); ctx.moveTo(screen.x - this.TILE_W / 4, screen.y - this.TILE_H / 4); ctx.lineTo(screen.x - this.TILE_W / 4, screen.y - this.TILE_H / 4 - this.wallHeight); ctx.stroke(); } } // Top-right wall (along x=0) for (let y = 0; y < h; y++) { if (floor[y] && floor[y][0] !== 0) { const screen = this.tileToScreen(0, y); ctx.fillStyle = wallDark; ctx.beginPath(); ctx.moveTo(screen.x, screen.y - this.TILE_H / 2); ctx.lineTo(screen.x + this.TILE_W / 2, screen.y); ctx.lineTo(screen.x + this.TILE_W / 2, screen.y - this.wallHeight); ctx.lineTo(screen.x, screen.y - this.TILE_H / 2 - this.wallHeight); ctx.closePath(); ctx.fill(); ctx.strokeStyle = darkenColor(wallDark, 10); ctx.lineWidth = 0.5; ctx.beginPath(); ctx.moveTo(screen.x + this.TILE_W / 4, screen.y - this.TILE_H / 4); ctx.lineTo(screen.x + this.TILE_W / 4, screen.y - this.TILE_H / 4 - this.wallHeight); ctx.stroke(); } } // Wall top edge if (floor[0]) { for (let x = 0; x < w; x++) { if (floor[0][x] !== 0) { const screen = this.tileToScreen(x, 0); ctx.fillStyle = lightenColor(wallColor, 25); ctx.beginPath(); ctx.moveTo(screen.x - this.TILE_W / 2, screen.y - this.wallHeight); ctx.lineTo(screen.x, screen.y - this.TILE_H / 2 - this.wallHeight); ctx.lineTo(screen.x + this.TILE_W / 2, screen.y - this.wallHeight + this.TILE_H / 2); ctx.lineTo(screen.x, screen.y - this.wallHeight + this.TILE_H); ctx.closePath(); // Only draw the top cap } } } } drawFloorTile(ctx, sx, sy, tileType, tileX, tileY, frame) { const floorColor = this.roomData.floorColor || '#A8B86A'; const isHover = this.hoverTile && this.hoverTile.x === tileX && this.hoverTile.y === tileY; const isDoor = tileType === 2; // Floor diamond ctx.beginPath(); ctx.moveTo(sx, sy - this.TILE_H / 2); ctx.lineTo(sx + this.TILE_W / 2, sy); ctx.lineTo(sx, sy + this.TILE_H / 2); ctx.lineTo(sx - this.TILE_W / 2, sy); ctx.closePath(); if (isDoor) { ctx.fillStyle = '#4CAF50'; } else if (isHover) { ctx.fillStyle = lightenColor(floorColor, 30); } else { // Checker pattern const checker = (tileX + tileY) % 2 === 0; ctx.fillStyle = checker ? floorColor : darkenColor(floorColor, 8); } ctx.fill(); // Tile border ctx.strokeStyle = darkenColor(floorColor, 20); ctx.lineWidth = 0.5; ctx.stroke(); // Tile depth effect ctx.fillStyle = darkenColor(floorColor, 30); ctx.beginPath(); ctx.moveTo(sx - this.TILE_W / 2, sy); ctx.lineTo(sx, sy + this.TILE_H / 2); ctx.lineTo(sx, sy + this.TILE_H / 2 + 4); ctx.lineTo(sx - this.TILE_W / 2, sy + 4); ctx.closePath(); ctx.fill(); ctx.fillStyle = darkenColor(floorColor, 40); ctx.beginPath(); ctx.moveTo(sx, sy + this.TILE_H / 2); ctx.lineTo(sx + this.TILE_W / 2, sy); ctx.lineTo(sx + this.TILE_W / 2, sy + 4); ctx.lineTo(sx, sy + this.TILE_H / 2 + 4); ctx.closePath(); ctx.fill(); // Pool water effect if (this.roomData.id === 'pool' && tileType === 0) { // This won't be reached since we skip 0 tiles, but we can handle adjacent water } } drawWaterTiles(ctx, frame) { if (!this.roomData) return; const floor = this.roomData.floor; for (let y = 0; y < this.roomData.height; y++) { for (let x = 0; x < this.roomData.width; x++) { if (floor[y][x] !== 0) continue; // Check if this void is surrounded by floor (it's water) let isWater = false; if (x > 0 && x < this.roomData.width - 1 && y > 0 && y < this.roomData.height - 1) { isWater = true; } if (isWater) { const screen = this.tileToScreen(x, y); const waterPhase = Math.sin(frame * 0.05 + x * 0.5 + y * 0.3); // Water diamond ctx.beginPath(); ctx.moveTo(screen.x, screen.y - this.TILE_H / 2); ctx.lineTo(screen.x + this.TILE_W / 2, screen.y); ctx.lineTo(screen.x, screen.y + this.TILE_H / 2); ctx.lineTo(screen.x - this.TILE_W / 2, screen.y); ctx.closePath(); const waterGrad = ctx.createLinearGradient( screen.x - this.TILE_W / 2, screen.y, screen.x + this.TILE_W / 2, screen.y ); const r = Math.floor(30 + waterPhase * 10); const g = Math.floor(144 + waterPhase * 15); const b = Math.floor(255 + waterPhase * -10); waterGrad.addColorStop(0, `rgba(${r},${g},${b},0.8)`); waterGrad.addColorStop(0.5, `rgba(${r + 20},${g + 20},${b},0.9)`); waterGrad.addColorStop(1, `rgba(${r},${g},${b},0.8)`); ctx.fillStyle = waterGrad; ctx.fill(); // Water shine ctx.fillStyle = `rgba(255,255,255,${0.1 + waterPhase * 0.05})`; ctx.beginPath(); ctx.ellipse(screen.x + waterPhase * 5, screen.y - 2, 8, 3, 0.3, 0, Math.PI * 2); ctx.fill(); } } } } } ``` ```javascript // client/js/renderer.js class Renderer { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.roomRenderer = new RoomRenderer(); this.frame = 0; this.particles = []; this.resize(); window.addEventListener('resize', () => this.resize()); } resize() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight - 50; if (this.roomRenderer.roomData) { this.roomRenderer.calculateOffset(this.canvas.width, this.canvas.height); } } render(gameState) { this.frame++; const ctx = this.ctx; const w = this.canvas.width; const h = this.canvas.height; // Clear with gradient background const bgGrad = ctx.createLinearGradient(0, 0, 0, h); bgGrad.addColorStop(0, '#0a0a1a'); bgGrad.addColorStop(1, '#151530'); ctx.fillStyle = bgGrad; ctx.fillRect(0, 0, w, h); if (!gameState.currentRoom) return; // Draw water tiles behind floor this.roomRenderer.drawWaterTiles(ctx, this.frame); // Draw room floor and walls this.roomRenderer.drawRoom(ctx, this.frame); // Collect all renderable items (users + furniture) const renderables = []; // Add furniture if (gameState.currentRoom.furniture) { gameState.currentRoom.furniture.forEach(item => { const screen = this.roomRenderer.tileToScreen(item.x, item.y); renderables.push({ type: 'furniture', item, x: item.x, y: item.y, screenX: screen.x, screenY: screen.y, sortKey: (item.x + item.y) * 1000 + item.y }); }); } // Add users gameState.users.forEach((user, userId) => { const screen = this.roomRenderer.tileToScreen(user.renderX ?? user.x, user.renderY ?? user.y); renderables.push({ type: 'user', user, userId, x: user.renderX ?? user.x, y: user.renderY ?? user.y, screenX: screen.x, screenY: screen.y, sortKey: ((user.renderX ?? user.x) + (user.renderY ?? user.y)) * 1000 + (user.renderY ?? user.y) + 0.5 }); }); // Sort by isometric depth renderables.sort((a, b) => a.sortKey - b.sortKey); // Render all items renderables.forEach(r => { if (r.type === 'furniture') { FurnitureRenderer.draw(ctx, r.item, r.screenX, r.screenY); } else if (r.type === 'user') { const u = r.user; AvatarRenderer.drawAvatar( ctx, r.screenX, r.screenY - 5, u.look, u.direction, u.action || 'stand', this.frame, u.username, u.chatMessage, 1 ); } }); // Render particles this.updateParticles(ctx); // Render hover indicator if (this.roomRenderer.hoverTile) { const ht = this.roomRenderer.hoverTile; if (ht.x >= 0 && ht.y >= 0 && ht.x < gameState.currentRoom.width && ht.y < gameState.currentRoom.height && gameState.currentRoom.floor[ht.y][ht.x] !== 0) { const screen = this.roomRenderer.tileToScreen(ht.x, ht.y); ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(screen.x, screen.y - this.roomRenderer.TILE_H / 2); ctx.lineTo(screen.x + this.roomRenderer.TILE_W / 2, screen.y); ctx.lineTo(screen.x, screen.y + this.roomRenderer.TILE_H / 2); ctx.lineTo(screen.x - this.roomRenderer.TILE_W / 2, screen.y); ctx.closePath(); ctx.stroke(); } } } addParticle(x, y, type) { for (let i = 0; i < 5; i++) { this.particles.push({ x, y, vx: (Math.random() - 0.5) * 3, vy: -Math.random() * 3 - 1, life: 1, type, size: Math.random() * 3 + 1 }); } } updateParticles(ctx) { this.particles = this.particles.filter(p => { p.x += p.vx; p.y += p.vy; p.vy += 0.05; p.life -= 0.02; if (p.life <= 0) return false; ctx.globalAlpha = p.life; if (p.type === 'step') { ctx.fillStyle = 'rgba(200,200,200,0.5)'; } else { ctx.fillStyle = '#6495ED'; } ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; return true; }); } setHoverTile(tile) { this.roomRenderer.hoverTile = tile; } } ``` ```javascript // client/js/chat.js class ChatManager { constructor(game) { this.game = game; this.chatLog = document.getElementById('chat-log'); this.chatInput = document.getElementById('chat-input'); this.chatSend = document.getElementById('chat-send'); this.chatShout = document.getElementById('chat-shout'); this.chatSend.addEventListener('click', () => this.sendChat()); this.chatShout.addEventListener('click', () => this.sendShout()); this.chatInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { if (e.shiftKey) { this.sendShout(); } else { this.sendChat(); } } }); } sendChat() { const text = this.chatInput.value.trim(); if (!text) return; // Check for whisper if (text.startsWith('/w ')) { const parts = text.substring(3).split(' '); const target = parts[0]; const msg = parts.slice(1).join(' '); if (target && msg) { this.game.network.send({ type: 'whisper', target, text: msg }); } } else { this.game.network.send({ type: 'chat', text }); } this.chatInput.value = ''; } sendShout() { const text = this.chatInput.value.trim(); if (!text) return; this.game.network.send({ type: 'shout', text }); this.chatInput.value = ''; } addMessage(username, text, type = 'normal') { const div = document.createElement('div'); div.className = `chat-message ${type}`; if (type === 'system') { div.innerHTML = `${text}`; } else if (type === 'whisper') { div.innerHTML = `[Whisper] ${username}: ${text}`; } else { div.innerHTML = `${username}: ${text}`; } this.chatLog.appendChild(div); this.chatLog.scrollTop = this.chatLog.scrollHeight; // Fade out old messages setTimeout(() => { div.style.transition = 'opacity 1s'; div.style.opacity = '0.5'; }, 15000); } clear() { this.chatLog.innerHTML = ''; } } ``` ```javascript // client/js/ui.js class UI { constructor(game) { this.game = game; this.currentScreen = 'login'; this.look = { skin: '#F5CBA7', hair: '#4A2F1B', hairStyle: 0, shirt: '#3498DB', pants: '#2C3E50', shoes: '#1A1A1A', gender: 'M', eyes: '#2C3E50' }; this.selectedWallColor = '#8BA4C7'; this.selectedFloorColor = '#A8B86A'; this.setupLoginScreen(); this.setupNavigator(); this.setupGameUI(); this.updateAvatarPreview(); } setupLoginScreen() { const loginBtn = document.getElementById('login-btn'); const usernameInput = document.getElementById('username-input'); loginBtn.addEventListener('click', () => this.handleLogin()); usernameInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') this.handleLogin(); }); // Color swatches document.querySelectorAll('.color-swatch:not(.wall):not(.floor-color)').forEach(swatch => { swatch.addEventListener('click', () => { const part = swatch.dataset.part; const color = swatch.dataset.color; this.look[part] = color; // Update selection visual swatch.parentElement.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected')); swatch.classList.add('selected'); this.updateAvatarPreview(); }); }); // Style buttons document.querySelectorAll('.style-btn').forEach(btn => { btn.addEventListener('click', () => { const part = btn.dataset.part; const value = btn.dataset.value; if (part === 'gender') { this.look.gender = value; } else { this.look[part] = parseInt(value); } btn.parentElement.querySelectorAll('.style-btn').forEach(b => b.classList.remove('selected')); btn.classList.add('selected'); this.updateAvatarPreview(); }); }); // Wall color swatches document.querySelectorAll('.color-swatch.wall').forEach(swatch => { swatch.addEventListener('click', () => { this.selectedWallColor = swatch.dataset.color; swatch.parentElement.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected')); swatch.classList.add('selected'); }); }); // Floor color swatches document.querySelectorAll('.color-swatch.floor-color').forEach(swatch => { swatch.addEventListener('click', () => { this.selectedFloorColor = swatch.dataset.color; swatch.parentElement.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected')); swatch.classList.add('selected'); }); }); } setupNavigator() { document.getElementById('close-navigator').addEventListener('click', () => { this.hideNavigator(); }); document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); btn.classList.add('active'); document.getElementById(`tab-${btn.dataset.tab}`).classList.add('active'); }); }); document.getElementById('create-room-btn').addEventListener('click', () => { const name = document.getElementById('room-name').value.trim() || 'My Room'; const desc = document.getElementById('room-desc').value.trim(); const width = parseInt(document.getElementById('room-width').value) || 10; const height = parseInt(document.getElementById('room-height').value) || 10; this.game.network.send({ type: 'create_room', name, description: desc, width, height, wallColor: this.selectedWallColor, floorColor: this.selectedFloorColor }); }); } setupGameUI() { document.getElementById('nav-btn').addEventListener('click', () => { this.game.network.send({ type: 'get_rooms' }); this.showNavigator(); }); // Action buttons document.querySelectorAll('.action-btn').forEach(btn => { btn.addEventListener('click', () => { const action = btn.dataset.action; this.game.network.send({ type: 'action', action }); }); }); } handleLogin() { const username = document.getElementById('username-input').value.trim(); const motto = document.getElementById('motto-input').value.trim(); if (!username) { document.getElementById('login-error').textContent = 'Please enter a username'; return; } this.game.login(username, this.look, motto); } showScreen(screenName) { document.querySelectorAll('.screen').forEach(s => s.classList.remove('active')); document.getElementById(`${screenName}-screen`).classList.add('active'); this.currentScreen = screenName; } showNavigator() { document.getElementById('navigator-screen').classList.add('active'); } hideNavigator() { document.getElementById('navigator-screen').classList.remove('active'); } updateRoomList(rooms) { const list = document.getElementById('room-list'); list.innerHTML = ''; rooms.forEach(room => { const card = document.createElement('div'); card.className = 'room-card'; card.innerHTML = `

${room.name} 👤 ${room.userCount}/${room.maxUsers}

by ${room.owner}

${room.description ? `

${room.description}

` : ''} `; card.addEventListener('click', () => { this.game.joinRoom(room.id); this.hideNavigator(); }); list.appendChild(card); }); } updateAvatarPreview() { const canvas = document.getElementById('avatar-preview'); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); AvatarRenderer.drawAvatar( ctx, 50, 120, this.look, 4, 'stand', 0, null, null, 1.5 ); } showLoginError(msg) { document.getElementById('login-error').textContent = msg; } updateRoomName(name) { document.getElementById('room-name-display').textContent = `📍 ${name}`; } } ``` ```javascript // client/js/game.js class Game { constructor() { this.network = new Network(this); this.ui = null; this.chat = null; this.renderer = null; this.userId = null; this.username = null; this.look = null; this.currentRoom = null; this.users = new Map(); this.walkingUsers = new Map(); // userId -> walk animation data this.serverUrl = `ws://${window.location.hostname}:8080`; this.init(); } async init() { this.ui = new UI(this); this.chat = new ChatManager(this); try { await this.network.connect(this.serverUrl); } catch (e) { console.error('Failed to connect:', e); this.ui.showLoginError('Cannot connect to server. Make sure the server is running.'); } } login(username, look, motto) { this.network.send({ type: 'login', username, look, motto }); } joinRoom(roomId) { this.network.send({ type: 'join_room', roomId }); } handleMessage(msg) { switch (msg.type) { case 'welcome': console.log('Connected, id:', msg.clientId); break; case 'login_ok': this.userId = msg.userId; this.username = msg.username; this.look = msg.look; this.ui.updateRoomList(msg.rooms); this.ui.showScreen('game'); // Initialize renderer const canvas = document.getElementById('game-canvas'); this.renderer = new Renderer(canvas); this.setupGameInput(canvas); this.startGameLoop(); // Show navigator to pick a room this.ui.showNavigator(); this.chat.addMessage('', `Welcome to Pixel Hotel, ${this.username}! Pick a room to enter.`, 'system'); break; case 'login_error': this.ui.showLoginError(msg.message); break; case 'room_list': this.ui.updateRoomList(msg.rooms); break; case 'room_data': this.currentRoom = msg.room; this.users.clear(); this.walkingUsers.clear(); this.renderer.roomRenderer.setRoom(msg.room); this.ui.updateRoomName(msg.room.name); this.chat.clear(); this.chat.addMessage('', `You entered ${msg.room.name}`, 'system'); // Add existing users msg.room.users.forEach(u => { this.users.set(u.id, { ...u, renderX: u.x, renderY: u.y }); }); break; case 'user_joined': this.users.set(msg.user.id, { ...msg.user, renderX: msg.user.x, renderY: msg.user.y }); this.chat.addMessage('', `${msg.user.username} entered the room`, 'system'); break; case 'user_left': const leftUser = this.users.get(msg.userId); if (leftUser) { this.chat.addMessage('', `${leftUser.username} left the room`, 'system'); } this.users.delete(msg.userId); this.walkingUsers.delete(msg.userId); break; case 'user_moved': this.handleUserMove(msg); break; case 'user_walk_path': this.handleUserWalkPath(msg); break; case 'chat': this.chat.addMessage(msg.username, msg.text, 'normal'); // Show bubble on avatar const chatUser = this.users.get(msg.userId); if (chatUser) { chatUser.chatMessage = msg.text; clearTimeout(chatUser._chatTimer); chatUser._chatTimer = setTimeout(() => { chatUser.chatMessage = ''; }, 5000); } break; case 'shout': this.chat.addMessage(msg.username, msg.text, 'shout'); const shoutUser = this.users.get(msg.userId); if (shoutUser) { shoutUser.chatMessage = msg.text.toUpperCase(); clearTimeout(shoutUser._chatTimer); shoutUser._chatTimer = setTimeout(() => { shoutUser.chatMessage = ''; }, 5000); } break; case 'whisper': this.chat.addMessage(msg.from, msg.text, 'whisper'); break; case 'whisper_sent': this.chat.addMessage(`To ${msg.to}`, msg.text, 'whisper'); break; case 'user_action': const actionUser = this.users.get(msg.userId); if (actionUser) { actionUser.action = msg.action; actionUser.dancing = msg.dancing || false; } break; case 'user_direction': const dirUser = this.users.get(msg.userId); if (dirUser) { dirUser.direction = msg.direction; dirUser.headDirection = msg.headDirection; } break; case 'user_look_updated': const lookUser = this.users.get(msg.userId); if (lookUser) { lookUser.look = msg.look; } break; case 'furniture_placed': if (this.currentRoom) { this.currentRoom.furniture.push(msg.item); } break; case 'room_created': this.ui.updateRoomList(msg.rooms); this.chat.addMessage('', 'Room created successfully!', 'system'); this.joinRoom(msg.roomId); this.ui.hideNavigator(); break; case 'error': this.chat.addMessage('', `Error: ${msg.message}`, 'system'); break; } } handleUserMove(msg) { const user = this.users.get(msg.userId); if (!user) return; user.x = msg.x; user.y = msg.y; user.renderX = msg.x; user.renderY = msg.y; user.direction = msg.direction; user.action = msg.action; } handleUserWalkPath(msg) { const user = this.users.get(msg.userId); if (!user) return; const walkData = { path: msg.path, currentStep: 0, progress: 0, startX: msg.startX, startY: msg.startY }; this.walkingUsers.set(msg.userId, walkData); user.action = 'walk'; } setupGameInput(canvas) { canvas.addEventListener('mousemove', (e) => { const rect = canvas.getBoundingClientRect(); const mx = e.clientX - rect.left; const my = e.clientY - rect.top; const tile = this.renderer.roomRenderer.screenToTile(mx, my); this.renderer.setHoverTile(tile); }); canvas.addEventListener('click', (e) => { if (!this.currentRoom) return; const rect = canvas.getBoundingClientRect(); const mx = e.clientX - rect.left; const my = e.clientY - rect.top; const tile = this.renderer.roomRenderer.screenToTile(mx, my); // Check bounds if (tile.x < 0 || tile.y < 0 || tile.x >= this.currentRoom.width || tile.y >= this.currentRoom.height) return; if (this.currentRoom.floor[tile.y][tile.x] === 0) return; // Check if clicking on a user let clickedUser = null; this.users.forEach((u, id) => { if (id !== this.userId && Math.round(u.renderX ?? u.x) === tile.x && Math.round(u.renderY ?? u.y) === tile.y) { clickedUser = u; } }); if (clickedUser) { // Show user info this.showUserPopup(clickedUser, e.clientX, e.clientY); return; } // Walk to tile const myUser = this.users.get(this.userId); if (!myUser) return; const startX = Math.round(myUser.renderX ?? myUser.x); const startY = Math.round(myUser.renderY ?? myUser.y); if (startX === tile.x && startY === tile.y) return; const path = Pathfinder.findPath( this.currentRoom.floor, startX, startY, tile.x, tile.y, this.users, this.userId ); if (path.length > 0) { this.network.send({ type: 'walk_path', path: path }); // Start local walking animation immediately const walkData = { path: path, currentStep: 0, progress: 0, startX: startX, startY: startY }; this.walkingUsers.set(this.userId, walkData); myUser.action = 'walk'; } }); canvas.addEventListener('mouseleave', () => { this.renderer.setHoverTile(null); }); } showUserPopup(user, mx, my) { const popup = document.getElementById('user-info-popup'); popup.classList.remove('hidden'); popup.style.left = mx + 'px'; popup.style.top = (my - 80) + 'px'; popup.querySelector('.popup-name').textContent = user.username; popup.querySelector('.popup-motto').textContent = user.motto || 'No motto set'; popup.querySelector('.popup-close').onclick = () => { popup.classList.add('hidden'); }; setTimeout(() => popup.classList.add('hidden'), 5000); } startGameLoop() { const loop = () => { this.update(); this.renderer.render(this); requestAnimationFrame(loop); }; requestAnimationFrame(loop); } update() { const WALK_SPEED = 0.08; // tiles per frame // Update walking animations this.walkingUsers.forEach((walkData, userId) => { const user = this.users.get(userId); if (!user) { this.walkingUsers.delete(userId); return; } walkData.progress += WALK_SPEED; if (walkData.progress >= 1) { walkData.progress = 0; walkData.currentStep++; if (walkData.currentStep >= walkData.path.length) { // Walking complete const finalPos = walkData.path[walkData.path.length - 1]; user.renderX = finalPos.x; user.renderY = finalPos.y; user.x = finalPos.x; user.y = finalPos.y; user.action = 'stand'; this.walkingUsers.delete(userId); // Particle effect at destination if (this.renderer) { const screen = this.renderer.roomRenderer.tileToScreen(finalPos.x, finalPos.y); this.renderer.addParticle(screen.x, screen.y, 'step'); } return; } } const step = walkData.currentStep; const path = walkData.path; let fromX, fromY; if (step === 0) { fromX = walkData.startX; fromY = walkData.startY; } else { fromX = path[step - 1].x; fromY = path[step - 1].y; } const toX = path[step].x; const toY = path[step].y; // Interpolate position user.renderX = fromX + (toX - fromX) * walkData.progress; user.renderY = fromY + (toY - fromY) * walkData.progress; // Update direction const dx = toX - fromX; const dy = toY - fromY; user.direction = getDirectionFromDelta(dx, dy); }); } } function getDirectionFromDelta(dx, dy) { if (dx === 0 && dy === -1) return 0; if (dx === 1 && dy === -1) return 1; if (dx === 1 && dy === 0) return 2; if (dx === 1 && dy === 1) return 3; if (dx === 0 && dy === 1) return 4; if (dx === -1 && dy === 1) return 5; if (dx === -1 && dy === 0) return 6; if (dx === -1 && dy === -1) return 7; return 4; } // Start the game! window.addEventListener('DOMContentLoaded', () => { window.game = new Game(); }); ``` ## README ```markdown # 🏨 Pixel Hotel A Habbo Hotel-inspired multiplayer browser game with isometric graphics, avatar customization, room navigation, chat, and real-time multiplayer. ## Features - **Avatar Customization**: Choose skin color, hair style/color, clothing colors, and gender - **Isometric Rooms**: Beautiful isometric room rendering with walls, floors, and furniture - **Real-time Multiplayer**: See other players move, chat, dance, and interact - **A* Pathfinding**: Click anywhere to walk — your avatar finds the best path - **Chat System**: Regular chat, shout, whisper, and chat bubbles above avatars - **Room Navigator**: Browse public rooms or create your own - **Furniture**: Sofas, tables, lamps, plants, jukeboxes, bars, and more - **Emotes/Actions**: Wave, dance, sit, stand - **Commands**: `:wave`, `:dance`, `:sit` in chat - **Multiple Themed Rooms**: Hotel Lobby, Pixel Café, Swimming Pool, Club Nitro ## Quick Start ### 1. Install & Start Server ```bash cd server npm install npm start ``` ### 2. Serve the Client In a separate terminal: ```bash cd client # Use any static file server, e.g.: npx serve . # Or: python3 -m http.server 3000 ``` ### 3. Play! Open `http://localhost:3000` in your browser (or whatever port your static server uses). Open multiple browser tabs to test multiplayer! ## Controls | Action | Control | |--------|---------| | Walk | Click any floor tile | | Chat | Type in chat bar + Enter | | Shout | Type + click 📢 or Shift+Enter | | Whisper | Type `/w username message` | | Wave | Click 👋 or type `:wave` | | Dance | Click 💃 or type `:dance` | | Sit | Click 🪑 or type `:sit` | | Open Navigator | Click 🗺️ | ## Architecture - **Server**: Node.js + WebSocket (`ws` library) - **Client**: Vanilla HTML5 Canvas + JavaScript (no framework needed) - **Protocol**: JSON over WebSocket - **Pathfinding**: A* algorithm with 8-directional movement - **Rendering**: Isometric 2D with depth sorting ## Configuration Edit `server/server.js` to change the port (default: 8080). In `client/js/game.js`, update `this.serverUrl` if your server is on a different host/port. ``` ## How to Run 1. **Start the server:** ```bash cd server npm install npm start ``` 2. **Serve the client** (separate terminal): ```bash cd client npx serve . ``` 3. **Open your browser** to `http://localhost:3000` 4. **Open multiple tabs** to test multiplayer! This gives you a fully functional Habbo-style game with: - **Isometric room rendering** with walls, floors, and depth - **Avatar system** with 5 hair styles, skin tones, clothing colors - **A\* pathfinding** — click to walk with smooth animation - **Real-time multiplayer** — see other players move and chat - **Chat bubbles** floating above avatars - **Furniture** rendering (sofas, tables, lamps, plants, jukeboxes, bars) - **4 themed rooms** (Lobby, Café, Pool, Club) - **Room creation** with custom colors and sizes - **Emotes**: wave, dance, sit - **Whisper system** for private messages

What game do you want to create?