krh/muuhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stuff and junk

Browse Source
This commit is contained in:
Kim Ravn Hansen
2025-09-02 18:49:42 +02:00
parent e588bb11c3
commit e12076260d
2 changed files with 349 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
server/public/index.html Executable file
View File

@@ -0,0 +1,269 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket MUD</title>
<style>
body {
font-family: 'Courier New', monospace;
background-color: #1a1a1a;
color: #00ff00;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}
#output {
flex: 1;
background-color: #000;
border: 2px solid #333;
padding: 15px;
overflow-y: auto;
white-space: pre-wrap;
font-size: 14px;
line-height: 1.4;
margin-bottom: 10px;
}
#input-container {
display: flex;
gap: 10px;
}
#input {
flex: 1;
background-color: #222;
border: 2px solid #333;
color: #00ff00;
padding: 10px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
#input:focus {
outline: none;
border-color: #00ff00;
}
#send {
background-color: #333;
border: 2px solid #555;
color: #00ff00;
padding: 10px 20px;
font-family: 'Courier New', monospace;
cursor: pointer;
}
#send:hover {
background-color: #444;
}
#status {
background-color: #333;
padding: 5px 15px;
margin-bottom: 10px;
border-radius: 3px;
}
.connected {
color: #00ff00;
}
.disconnected {
color: #ff4444;
}
.connecting {
color: #ffaa00;
}
.error {
color: #ff4444;
}
.system {
color: #aaaaaa;
}
.prompt {
color: #00ccff;
}
</style>
</head>
<body>
<div id="container">
<div id="status" class="connecting">Connecting...</div>
<div id="output"></div>
<div id="input-container">
<input type="text" id="input" placeholder="Enter command..." disabled>
<button id="send" disabled>Send</button>
</div>
</div>
<script>
class MUDClient {
constructor() {
this.ws = null;
this.output = document.getElementById('output');
this.input = document.getElementById('input');
this.sendButton = document.getElementById('send');
this.status = document.getElementById('status');
this.setupEventListeners();
this.connect();
}
connect() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}`;
this.updateStatus('Connecting...', 'connecting');
try {
this.ws = new WebSocket(wsUrl);
this.ws.onopen = () => {
this.updateStatus('Connected', 'connected');
this.input.disabled = false;
this.sendButton.disabled = false;
this.input.focus();
};
this.ws.onmessage = (event) => {
const data = JSON.parse(event.data);
this.handleMessage(data);
};
this.ws.onclose = () => {
this.updateStatus('Disconnected', 'disconnected');
this.input.disabled = true;
this.sendButton.disabled = true;
// Attempt to reconnect after 3 seconds
setTimeout(() => this.connect(), 3000);
};
this.ws.onerror = (error) => {
this.updateStatus('Connection Error', 'error');
this.appendOutput('Connection error occurred. Retrying...', 'error');
};
} catch (error) {
this.updateStatus('Connection Failed', 'error');
setTimeout(() => this.connect(), 3000);
}
}
setupEventListeners() {
this.input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.sendMessage();
}
});
this.sendButton.addEventListener('click', () => {
this.sendMessage();
});
// Command history
this.commandHistory = [];
this.historyIndex = -1;
this.input.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
if (this.historyIndex < this.commandHistory.length - 1) {
this.historyIndex++;
this.input.value = this.commandHistory[this.commandHistory.length - 1 - this.historyIndex];
}
} else if (e.key === 'ArrowDown') {
e.preventDefault();
if (this.historyIndex > 0) {
this.historyIndex--;
this.input.value = this.commandHistory[this.commandHistory.length - 1 - this.historyIndex];
} else if (this.historyIndex === 0) {
this.historyIndex = -1;
this.input.value = '';
}
}
});
}
sendMessage() {
const message = this.input.value.trim();
if (message && this.ws && this.ws.readyState === WebSocket.OPEN) {
// Add to command history
if (this.commandHistory[this.commandHistory.length - 1] !== message) {
this.commandHistory.push(message);
if (this.commandHistory.length > 50) {
this.commandHistory.shift();
}
}
this.historyIndex = -1;
this.ws.send(JSON.stringify({
type: 'command',
content: message
}));
this.input.value = '';
}
}
handleMessage(data) {
switch (data.type) {
case 'message':
this.appendOutput(data.content);
break;
case 'error':
this.appendOutput(data.content, 'error');
break;
case 'system':
this.appendOutput(data.content, 'system');
break;
default:
this.appendOutput(data.content);
}
}
appendOutput(text, className = '') {
const div = document.createElement('div');
if (className) {
div.className = className;
}
// Check if this looks like a prompt
if (text.includes('] > ')) {
div.className = 'prompt';
}
div.textContent = text;
this.output.appendChild(div);
this.output.scrollTop = this.output.scrollHeight;
}
updateStatus(message, className) {
this.status.textContent = `Status: ${message}`;
this.status.className = className;
}
}
// Initialize the MUD client when the page loads
document.addEventListener('DOMContentLoaded', () => {
new MUDClient();
});
</script>
</body>
</html>

89
server/server.js
View File

@@ -3,7 +3,17 @@ const http = require('http');
const path = require('path');
const fs = require('fs');
/**
* Player
*
* @property WebSocket websocket
*/
class Player {
/**
*
* @param {String} name
* @param {WebSocket} websocket
*/
constructor(name, websocket) {
this.name = name;
this.websocket = websocket;
@@ -13,6 +23,11 @@ class Player {
this.level = 1;
}
/***
* Send a message back to the client via the websocket.
*
* @param {string} message
*/
sendMessage(message) {
if (this.websocket.readyState === WebSocket.OPEN) {
this.websocket.send(JSON.stringify({
@@ -28,6 +43,13 @@ class Player {
}
class Room {
/**
*
* @param {string} id
* @param {string} name
* @param {string} description
* @param {string[]} exits
*/
constructor(id, name, description, exits = {}) {
this.id = id;
this.name = name;
@@ -38,22 +60,45 @@ class Room {
this.npcs = [];
}
/**
* Add a player to the list of active players.
*
* (an active player is a player that currently has an active web socketA)
*
* @param {Player} player
*/
addPlayer(player) {
this.players.add(player);
this.broadcastToRoom(`${player.name} enters the room.`, player);
}
/**
* Remove a player from the list of active players.
*
* (an active player is a player that currently has an active web socketA)
*
* @param {Player} player
*/
removePlayer(player) {
this.players.delete(player);
this.broadcastToRoom(`${player.name} leaves the room.`, player);
}
/**
* Send a message to all other players in this room.
*
* @param {string} message
* @param {Player} excludePlayer A single player to exclude from the broadcast
*/
broadcastToRoom(message, excludePlayer = null) {
for (const player of this.players) {
if (player !== excludePlayer) {
player.sendMessage(message);
}
}
// for (const player of this.players) {
// if (player !== excludePlayer) {
// player.sendMessage(message);
// }
// }
this.getPlayersExcept(excludePlayer).forEach((player) => {
player.sendMessage(message);
})
}
getPlayersExcept(excludePlayer) {
@@ -104,9 +149,13 @@ class MudServer {
this.rooms.set('deep_forest', deepForest);
}
/**
*
* @param {WebSocket} ws
*/
handleConnection(ws) {
console.log('New connection established');
ws.send(JSON.stringify({
type: 'message',
content: 'Welcome to the WebSocket MUD!\nWhat is your character name?'
@@ -126,6 +175,12 @@ class MudServer {
});
}
/**
*
* @param {WebSocket} ws
* @param {strings} message
* @returns
*/
handleMessage(ws, message) {
const player = this.players.get(ws);
@@ -147,6 +202,11 @@ class MudServer {
this.processCommand(player, message.content.trim());
}
/**
*
* @param {WebSocket} ws
* @param {string} name
*/
createPlayer(ws, name) {
const player = new Player(name, ws);
this.players.set(ws, player);
@@ -159,6 +219,11 @@ class MudServer {
this.showRoom(player);
}
/**
*
* @param {Player} player
* @param {string} input
*/
processCommand(player, input) {
const args = input.toLowerCase().split(' ');
const command = args[0];
@@ -232,6 +297,12 @@ class MudServer {
player.sendPrompt();
}
/**
*
* @param {Player} player
* @param {*} direction
* @returns
*/
movePlayer(player, direction) {
const currentRoom = this.rooms.get(player.currentRoom);
const newRoomId = currentRoom.exits[direction];
@@ -278,7 +349,7 @@ class MudServer {
sayToRoom(player, message) {
const room = this.rooms.get(player.currentRoom);
const fullMessage = `${player.name} says: "${message}"`;
room.broadcastToRoom(fullMessage, player);
player.sendMessage(`You say: "${message}"`);
}
@@ -314,7 +385,7 @@ Available Commands:
const player = this.players.get(ws);
if (player) {
console.log(`Player ${player.name} disconnected`);
// Remove from room
const room = this.rooms.get(player.currentRoom);
if (room) {
@@ -332,7 +403,7 @@ Available Commands:
const server = http.createServer((req, res) => {
let filePath = path.join(__dirname, 'public', req.url === '/' ? 'index.html' : req.url);
const ext = path.extname(filePath);
let contentType = 'text/html';
if (ext === '.js') contentType = 'application/javascript';
if (ext === '.css') contentType = 'text/css';