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

things + stff

Browse Source
This commit is contained in:
Kim Ravn Hansen
2025-09-07 23:24:50 +02:00
parent fb915f2681
commit 8a4eb25507
27 changed files with 1991 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
server/public/client.js Executable file
View File

@@ -0,0 +1,330 @@
class MUDClient {
constructor() {
/** @type {WebSocket} ws */
this.websocket = null;
/** @type {boolean} Are we in development mode (decided by the server);
this.dev = false;
/**
* The last thing we were asked.
* @type {string|null}
*/
this.serverExpects = null;
this.output = document.getElementById("output");
this.input = document.getElementById("input");
this.sendButton = document.getElementById("send");
this.status = document.getElementById("status");
// Passwords are crypted and salted before being sent to the server
// This means that if ANY of these three parameters below change,
// The server can no longer accept the passwords.
this.digest = "SHA-256";
this.salt = "V1_Kims_Krappy_Krypto";
this.rounds = 1000;
this.username = ""; // the username also salts the password, so the username must never change.
this.setupEventListeners();
this.connect();
}
async hashPassword(password) {
const encoder = new TextEncoder();
let data = encoder.encode(password + this.salt + this.username);
for (let i = 0; i < this.rounds; i++) {
const hashBuffer = await crypto.subtle.digest(this.digest, data);
data = new Uint8Array(hashBuffer); // feed hash back in
}
// Convert final hash to hex
const rawHash = Array.from(data).map(b => b.toString(16).padStart(2, '0')).join('');
return `${this.salt}:${this.rounds}:${this.digest}:${rawHash}`;
}
connect() {
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${window.location.host}`;
this.updateStatus("Connecting...", "connecting");
try {
this.websocket = new WebSocket(wsUrl);
this.websocket.onopen = () => {
this.updateStatus("Connected", "connected");
this.input.disabled = false;
this.sendButton.disabled = false;
this.input.focus();
this.output.innerHTML = '';
};
this.websocket.onmessage = (event) => {
console.log(event);
const data = JSON.parse(event.data);
this.onMessage(data);
this.input.focus();
};
this.websocket.onclose = () => {
this.updateStatus("Disconnected", "disconnected");
this.input.disabled = true;
this.sendButton.disabled = true;
// Attempt to reconnect after 3 seconds
setTimeout(() => this.connect(), 3000);
};
this.websocket.onerror = (error) => {
this.updateStatus("Connection Error", "error");
this.appendOutput("Connection error occurred. Retrying...", { class: "error" });
};
} catch (error) {
console.error(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();
// -- This is a sneaky command that should not be in production?
//
// In reality we want to use :clear, nor /clear
// :clear would be sent to the server, and we ask if it's okay
// to clear the screen right now, and only on a positive answer would we
// allow the screen to be cleared. Maybe.....
if (message === "/clear") {
this.output.innerHTML = "";
this.input.value = "";
return;
}
if (message && this.websocket && this.websocket.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.input.value = "";
this.input.type = "text";
if (this.serverExpects === "password") {
//--------------------------------------------------
// The server asked us for a password, so we send it.
// But we hash it first, so we don't send our stuff
// in the clear.
//--------------------------------------------------
this.hashPassword(message).then((pwHash) => {
this.websocket.send(JSON.stringify(["reply", "password", pwHash]))
this.serverExpects = null;
});
return;
}
this.appendOutput("> " + message, { class: "input" });
if (message === ":quit") {
this.websocket.send(JSON.stringify(["quit"]));
return;
}
if (message === ":help") {
this.websocket.send(JSON.stringify(["help"]));
return;
}
if (this.serverExpects === "username") {
//--------------------------------------------------
// The server asked us for a user, so we send it.
// We also store the username for later
//--------------------------------------------------
this.username = message;
this.websocket.send(JSON.stringify(["reply", "username", message]))
this.serverExpects = null;
return;
}
if (this.serverExpects) {
//--------------------------------------------------
// The server asked the player a question,
// so we send the answer the way the server wants.
//--------------------------------------------------
this.websocket.send(JSON.stringify(["reply", this.serverExpects, message]))
this.serverExpects = null;
return;
}
//
//-----------------------------------------------------
// The player sends a text-based command to the server
//-----------------------------------------------------
this.websocket.send(JSON.stringify(["c", message]));
}
}
// ___ __ __
// / _ \ _ __ | \/ | ___ ___ ___ __ _ __ _ ___
// | | | | '_ \| |\/| |/ _ \/ __/ __|/ _` |/ _` |/ _ \
// | |_| | | | | | | | __/\__ \__ \ (_| | (_| | __/
// \___/|_| |_|_| |_|\___||___/___/\__,_|\__, |\___|
//
/** @param {any[]} data*/
onMessage(data) {
console.log(data);
switch (data[0]) {
case "prompt":
this.serverExpects = data[1];
this.appendOutput(data[2], { class: "prompt" });
if (this.serverExpects === "password") {
this.input.type = "password";
}
break;
case "e": // error
this.appendOutput(data[1], { class: "error" });
break;
case "calamity":
this.appendOutput(data[1], { class: "error" });
break;
case "_": // system messages, not to be displayed
if (data.length === 3 && data[1] === "dev") {
this.dev = data[2];
}
if (this.dev) {
this.appendOutput(`system message: ${data[1]} = ${JSON.stringify(data[2])}`, { class: "debug" });
}
break;
case "m":
// normal text message to be shown to the player
// formatting magic is allowed.
//
// TODO: styling, font size, etc.
const args = typeof (data[2] === "object") ? data[2] : {};
this.appendOutput(data[1], args);
break;
this.appendOutput(data[1], {preformatted:true})
default:
if (this.dev) {
msgType = data.shift();
this.appendOutput(`unknown message type: ${msgType}: ${JSON.stringify(data)}`, "debug");
}
console.log("unknown message type", data);
}
}
/**
* Add output to the text.
* @param {string} text
* @param {object} options
*/
appendOutput(text, options = {}) {
const el = document.createElement("span");
if (typeof options.class === "string") {
el.className = options.class;
}
// Enter prompt answers on the same line as the prompt?
// if (className !== "prompt") {
// el.textContent = text + "\n";
// } else {
// el.textContent = text + " ";
// }
// add end of line character "\n" unless
// options.addEol = false is set explicitly
const eol = options.addEol === false ? "" : "\n";
if (options.preformatted) {
el.textContent = text + eol;
} else {
el.innerHTML = parseCrackdown(text) + eol;
}
this.output.appendChild(el);
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();
});
function parseCrackdown(text) {
console.log("starting crack parsing");
console.log(text);
return text.replace(/[&<>"'`]/g, (c) => {
switch (c) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return c;
}
})
.replace(/---(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])---/g, '<span class="strike">$1</span>') // line-through
.replace(/___(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])___/g, '<span class="underline">$1</span>') // underline
.replace(/_(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])_/g, '<span class="italic">$1</span>') // italic
.replace(/\*(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])\*/g, '<span class="bold">$1</span>') // bold
.replace(/\.{3}(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])\.{3}/g, '<span class="undercurl">$1</span>') // undercurl
.replace(/\({3}(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])\){3}/g, '<span class="faint">($1)</span>') // faint with parentheses
.replace(/\({2}(([a-zA-Z0-9:].*?[a-zA-Z0-9:])|[a-zA-Z0-9:])\){2}/g, '<span class="faint">$1</span>') // faint with parentheses
;
console.log("crack output", text);
return text;
}

191
server/public/index.html
View File

@@ -4,201 +4,20 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebSocket MUD</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="style.css" />
</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
/>
<input type="text" autocomplete="off" 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) => {
console.log(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) {
console.error(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) {
console.log(data);
switch (data[0]) {
case "error":
this.appendOutput(data[1], "error");
break;
case "system":
this.appendOutput(data[1], "system");
break;
default:
this.appendOutput(data[1]);
}
}
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>
<script src="client.js"></script>
</body>
</html>

57
server/public/style.css Normal file → Executable file
View File

@@ -1,21 +1,29 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
body {
font-family: "Courier New", monospace;
font-family: "Fira Code", monospace;
font-optical-sizing: auto;
font-size: 14px;
background-color: #1a1a1a;
color: #00ff00;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
overflow: hidden;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 1200px;
max-width: 99.9vw;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}
#output {
@@ -25,9 +33,12 @@ body {
padding: 15px;
overflow-y: auto;
white-space: pre-wrap;
font-size: 14px;
line-height: 1.4;
margin-bottom: 10px;
margin-bottom: 20px;
font-family: "Fira Code", monospace;
font-optical-sizing: auto;
font-size: 14px;
width: 100ch;
}
#input-container {
@@ -41,7 +52,8 @@ body {
border: 2px solid #333;
color: #00ff00;
padding: 10px;
font-family: "Courier New", monospace;
font-family: "Fira Code", monospace;
font-optical-sizing: auto;
font-size: 14px;
}
@@ -55,7 +67,8 @@ body {
border: 2px solid #555;
color: #00ff00;
padding: 10px 20px;
font-family: "Courier New", monospace;
font-family: "Fira Code", monospace;
font-optical-sizing: auto;
cursor: pointer;
}
@@ -86,10 +99,38 @@ body {
color: #ff4444;
}
.system {
color: #aaaaaa;
.input {
color: #666;
}
.debug {
opacity: 0.33;
}
.prompt {
color: #00ccff;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.strike {
text-decoration:line-through;
}
.underline {
text-decoration: underline;
}
.undercurl {
text-decoration: wavy underline lime;
}
.faint {
opacity: 0.42;
}