Initial commit
This commit is contained in:
Cam Spry
commit
6e55209159
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "yarn",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"cookie-parser": "^1.4.7",
|
||||
"express": "^5.2.1",
|
||||
"socket.io": "^4.8.3",
|
||||
"uuid": "^13.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,837 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>YARN 2026 – Spin Your Story!</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-main: #4b0082;
|
||||
--text-beige: #FFFFE4;
|
||||
--box-bg: #0a0a0a;
|
||||
--player-green: #00ff88;
|
||||
--player-yellow: #ffdd00;
|
||||
--header-bg: #3a0066;
|
||||
--accent-purple: #6a0dad;
|
||||
--chat-text: #ffffcc;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
background: var(--bg-main);
|
||||
font-family: system-ui, sans-serif;
|
||||
color: var(--text-beige);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#layout {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#header {
|
||||
flex: 0 0 5%;
|
||||
background: var(--header-bg);
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 2px solid var(--accent-purple);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#main-text {
|
||||
flex: 0 0 50%;
|
||||
background: var(--box-bg);
|
||||
margin: 1.2rem 2rem 0 2rem;
|
||||
border-radius: 8px;
|
||||
padding: 1.6rem 2rem;
|
||||
overflow-y: auto;
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.45;
|
||||
color: var(--text-beige);
|
||||
border: 2px solid var(--accent-purple);
|
||||
}
|
||||
|
||||
.story-segment {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.story-segment[data-player]::before {
|
||||
content: attr(data-player) ": ";
|
||||
font-weight: bold;
|
||||
color: var(--accent-purple);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#game-bar {
|
||||
flex: 0 0 10%;
|
||||
background: var(--bg-main);
|
||||
padding: 0.8rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#game-bar > * {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#game-bar input[type="text"],
|
||||
#game-bar input[type="number"] {
|
||||
background: #1a1a1a;
|
||||
border: 2px solid var(--accent-purple);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--text-beige);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#game-bar button {
|
||||
background: var(--accent-purple);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
#game-bar button:hover {
|
||||
background: #8a1dbd;
|
||||
}
|
||||
|
||||
#game-bar button:disabled {
|
||||
background: #444;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.setting-group label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.setting-group input[type="number"] {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
#timer {
|
||||
font-size: 2rem;
|
||||
color: #ff6666;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#timer.warning {
|
||||
color: #ff3333;
|
||||
animation: pulse 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
#entry-input {
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#voting-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.vote-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
background: #1a1a1a;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--accent-purple);
|
||||
}
|
||||
|
||||
.vote-entry-text {
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.vote-btn {
|
||||
background: var(--player-green);
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vote-btn:disabled {
|
||||
background: #444;
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#chat-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin: 0 2rem 1.2rem 2rem;
|
||||
background: var(--box-bg);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
color: var(--chat-text);
|
||||
border: 2px solid var(--accent-purple);
|
||||
}
|
||||
|
||||
#players {
|
||||
width: 260px;
|
||||
background: #111;
|
||||
padding: 1rem 0.8rem;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #333;
|
||||
}
|
||||
|
||||
#players-header {
|
||||
font-weight: bold;
|
||||
padding: 0.3rem 1rem 0.8rem;
|
||||
border-bottom: 1px solid #333;
|
||||
margin-bottom: 0.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.player-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.15rem 1rem;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.2;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.player-row.submitted {
|
||||
color: var(--player-green);
|
||||
}
|
||||
|
||||
.player-row.pending {
|
||||
color: var(--player-yellow);
|
||||
}
|
||||
|
||||
.player-row.host::after {
|
||||
content: " ★";
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.player-score {
|
||||
text-align: right;
|
||||
min-width: 70px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
#chat-and-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#chat-messages {
|
||||
flex: 1;
|
||||
padding: 1.3rem 1.6rem;
|
||||
overflow-y: auto;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.chat-message strong {
|
||||
color: var(--player-green);
|
||||
}
|
||||
|
||||
.system-message {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
height: 52px;
|
||||
background: #1a1a1a;
|
||||
border: none;
|
||||
border-top: 1px solid #444;
|
||||
color: var(--text-beige);
|
||||
font-size: 1.15rem;
|
||||
padding: 0 1.6rem;
|
||||
outline: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#chat-input:focus {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.waiting-message {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.game-over-message {
|
||||
font-size: 1.5rem;
|
||||
color: gold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-display {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.round-winner {
|
||||
color: var(--player-green);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div id="header">
|
||||
YARN 2026 - Spin your story! <span id="room-display"></span>
|
||||
</div>
|
||||
|
||||
<div id="main-text">
|
||||
<em>Waiting for the game to begin...</em>
|
||||
</div>
|
||||
|
||||
<div id="game-bar">
|
||||
<!-- Dynamic content will be inserted here -->
|
||||
</div>
|
||||
|
||||
<div id="chat-area">
|
||||
|
||||
<div id="players">
|
||||
<div id="players-header">Players</div>
|
||||
<div id="players-list">
|
||||
<!-- Players will be listed here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chat-and-input">
|
||||
<div id="chat-messages">
|
||||
<!-- Chat messages will appear here -->
|
||||
</div>
|
||||
|
||||
<input type="text" id="chat-input" placeholder="Type message… (Enter to send)" autocomplete="off">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
// Get room name from URL
|
||||
const pathParts = window.location.pathname.split('/').filter(p => p);
|
||||
const roomName = pathParts[0] || 'default';
|
||||
document.getElementById('room-display').textContent = ` — Room: ${roomName}`;
|
||||
|
||||
// Get or create player UUID
|
||||
let playerUUID = getCookie('yarn_player_uuid');
|
||||
if (!playerUUID) {
|
||||
playerUUID = generateUUID();
|
||||
setCookie('yarn_player_uuid', playerUUID, 365);
|
||||
}
|
||||
|
||||
// Get stored player name
|
||||
let playerName = getCookie('yarn_player_name') || '';
|
||||
|
||||
// Game state
|
||||
let gameState = null;
|
||||
let hasVoted = false;
|
||||
let hasSubmitted = false;
|
||||
|
||||
// Connect to Socket.IO
|
||||
const socket = io();
|
||||
|
||||
// Join the room
|
||||
socket.emit('joinRoom', {
|
||||
roomName: roomName,
|
||||
playerUUID: playerUUID,
|
||||
playerName: playerName
|
||||
});
|
||||
|
||||
// === Socket Event Handlers ===
|
||||
|
||||
socket.on('gameState', (state) => {
|
||||
gameState = state;
|
||||
updateUI();
|
||||
});
|
||||
|
||||
socket.on('chatHistory', (chat) => {
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
chatMessages.innerHTML = '';
|
||||
chat.forEach(msg => appendChatMessage(msg));
|
||||
});
|
||||
|
||||
socket.on('playersUpdate', (players) => {
|
||||
if (gameState) {
|
||||
gameState.players = players;
|
||||
updatePlayersList();
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('settingsUpdate', (settings) => {
|
||||
if (gameState) {
|
||||
gameState.gameSettings = settings;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('nameSet', (data) => {
|
||||
if (data.success) {
|
||||
playerName = data.name;
|
||||
setCookie('yarn_player_name', playerName, 365);
|
||||
document.getElementById('chat-input').disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('playerJoined', (data) => {
|
||||
appendSystemMessage(`${data.name} joined the game`);
|
||||
});
|
||||
|
||||
socket.on('playerLeft', (data) => {
|
||||
appendSystemMessage(`${data.name} left the game`);
|
||||
});
|
||||
|
||||
socket.on('gameStarted', (state) => {
|
||||
gameState = state;
|
||||
hasSubmitted = false;
|
||||
hasVoted = false;
|
||||
updateUI();
|
||||
appendSystemMessage('The game has started!');
|
||||
});
|
||||
|
||||
socket.on('timerUpdate', (time) => {
|
||||
if (gameState) {
|
||||
gameState.timeRemaining = time;
|
||||
updateTimer();
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('votingPhase', (data) => {
|
||||
if (gameState) {
|
||||
gameState.currentPhase = 'voting';
|
||||
gameState.round_data = data.entries;
|
||||
gameState.timeRemaining = data.timeRemaining;
|
||||
hasVoted = false;
|
||||
updateUI();
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('roundResults', (data) => {
|
||||
if (gameState) {
|
||||
gameState.players = data.players;
|
||||
gameState.yarnStory = data.story;
|
||||
showRoundResults(data.winner);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('newRound', (state) => {
|
||||
gameState = state;
|
||||
hasSubmitted = false;
|
||||
hasVoted = false;
|
||||
updateUI();
|
||||
appendSystemMessage('New round started!');
|
||||
});
|
||||
|
||||
socket.on('gameOver', (data) => {
|
||||
if (gameState) {
|
||||
gameState.currentPhase = 'gameOver';
|
||||
gameState.players = data.players;
|
||||
gameState.yarnStory = data.story;
|
||||
updateUI();
|
||||
showGameOver(data.winner);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('gameReset', (state) => {
|
||||
gameState = state;
|
||||
hasSubmitted = false;
|
||||
hasVoted = false;
|
||||
updateUI();
|
||||
appendSystemMessage('Game has been reset. Waiting for host to start...');
|
||||
});
|
||||
|
||||
socket.on('newChatMessage', (msg) => {
|
||||
appendChatMessage(msg);
|
||||
});
|
||||
|
||||
socket.on('error', (data) => {
|
||||
alert(data.message);
|
||||
});
|
||||
|
||||
// === UI Functions ===
|
||||
|
||||
function updateUI() {
|
||||
updateStory();
|
||||
updateGameBar();
|
||||
updatePlayersList();
|
||||
}
|
||||
|
||||
function updateStory() {
|
||||
const mainText = document.getElementById('main-text');
|
||||
|
||||
if (!gameState || !gameState.inProgress && gameState.yarnStory.length === 0) {
|
||||
mainText.innerHTML = '<em>Waiting for the game to begin...</em>';
|
||||
return;
|
||||
}
|
||||
|
||||
mainText.innerHTML = gameState.yarnStory.map(segment =>
|
||||
`<span class="story-segment" data-player="${escapeHtml(segment.player)}">${escapeHtml(segment.str)} </span>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function updateGameBar() {
|
||||
const gameBar = document.getElementById('game-bar');
|
||||
|
||||
// If player hasn't set name yet
|
||||
if (!playerName) {
|
||||
gameBar.innerHTML = `
|
||||
<span>Enter your name to join:</span>
|
||||
<input type="text" id="name-input" placeholder="Your name..." maxlength="20">
|
||||
<button id="set-name-btn">Join Game</button>
|
||||
`;
|
||||
|
||||
document.getElementById('set-name-btn').onclick = setPlayerName;
|
||||
document.getElementById('name-input').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') setPlayerName();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!gameState) return;
|
||||
|
||||
const isHost = gameState.gameHost === playerUUID;
|
||||
|
||||
switch (gameState.currentPhase) {
|
||||
case 'lobby':
|
||||
if (isHost) {
|
||||
gameBar.innerHTML = `
|
||||
<div class="setting-group">
|
||||
<label>Score Limit:</label>
|
||||
<input type="number" id="score-limit" value="${gameState.gameSettings.scoreLimit}" min="10" max="100">
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<label>Time per Round (sec):</label>
|
||||
<input type="number" id="time-limit" value="${gameState.gameSettings.timeLimit}" min="15" max="180">
|
||||
</div>
|
||||
<button id="start-game-btn">Start Game</button>
|
||||
`;
|
||||
|
||||
document.getElementById('start-game-btn').onclick = startGame;
|
||||
} else {
|
||||
gameBar.innerHTML = `
|
||||
<span class="waiting-message">Waiting for host to start the game...</span>
|
||||
<span>Score Limit: ${gameState.gameSettings.scoreLimit}</span>
|
||||
<span>Time Limit: ${gameState.gameSettings.timeLimit}s</span>
|
||||
`;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'writing':
|
||||
if (hasSubmitted) {
|
||||
gameBar.innerHTML = `
|
||||
<span id="timer">${gameState.timeRemaining}</span>
|
||||
<span class="waiting-message">Entry submitted! Waiting for other players...</span>
|
||||
`;
|
||||
} else {
|
||||
gameBar.innerHTML = `
|
||||
<span id="timer">${gameState.timeRemaining}</span>
|
||||
<input type="text" id="entry-input" placeholder="Continue the story..." maxlength="200">
|
||||
<button id="submit-entry-btn">Submit</button>
|
||||
`;
|
||||
|
||||
document.getElementById('submit-entry-btn').onclick = submitEntry;
|
||||
document.getElementById('entry-input').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') submitEntry();
|
||||
});
|
||||
document.getElementById('entry-input').focus();
|
||||
}
|
||||
updateTimer();
|
||||
break;
|
||||
|
||||
case 'voting':
|
||||
if (hasVoted) {
|
||||
gameBar.innerHTML = `
|
||||
<span id="timer">${gameState.timeRemaining}</span>
|
||||
<span class="waiting-message">Vote cast! Waiting for other players...</span>
|
||||
`;
|
||||
} else {
|
||||
const entries = gameState.round_data.filter(e => e.entry_text);
|
||||
|
||||
if (entries.length === 0) {
|
||||
gameBar.innerHTML = `
|
||||
<span class="waiting-message">No entries to vote on...</span>
|
||||
`;
|
||||
} else {
|
||||
gameBar.innerHTML = `
|
||||
<span id="timer">${gameState.timeRemaining}</span>
|
||||
<div id="voting-container">
|
||||
${entries.map(e => `
|
||||
<div class="vote-entry">
|
||||
<span class="vote-entry-text">"${escapeHtml(e.entry_text)}"</span>
|
||||
<button class="vote-btn" data-index="${e.index}">Vote</button>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.querySelectorAll('.vote-btn').forEach(btn => {
|
||||
btn.onclick = () => submitVote(parseInt(btn.dataset.index));
|
||||
});
|
||||
}
|
||||
}
|
||||
updateTimer();
|
||||
break;
|
||||
|
||||
case 'gameOver':
|
||||
if (isHost) {
|
||||
gameBar.innerHTML = `
|
||||
<span class="game-over-message">Game Over!</span>
|
||||
<button id="play-again-btn">Play Again</button>
|
||||
`;
|
||||
|
||||
document.getElementById('play-again-btn').onclick = () => {
|
||||
socket.emit('playAgain');
|
||||
};
|
||||
} else {
|
||||
gameBar.innerHTML = `
|
||||
<span class="game-over-message">Game Over! Waiting for host...</span>
|
||||
`;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function updateTimer() {
|
||||
const timer = document.getElementById('timer');
|
||||
if (timer && gameState) {
|
||||
timer.textContent = gameState.timeRemaining;
|
||||
if (gameState.timeRemaining <= 10) {
|
||||
timer.classList.add('warning');
|
||||
} else {
|
||||
timer.classList.remove('warning');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updatePlayersList() {
|
||||
const playersList = document.getElementById('players-list');
|
||||
if (!gameState) {
|
||||
playersList.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
playersList.innerHTML = gameState.players.map(p => {
|
||||
let statusClass = '';
|
||||
if (gameState.currentPhase === 'writing') {
|
||||
statusClass = p.hasSubmitted ? 'submitted' : 'pending';
|
||||
} else if (gameState.currentPhase === 'voting') {
|
||||
statusClass = p.hasVoted ? 'submitted' : 'pending';
|
||||
} else {
|
||||
statusClass = 'submitted';
|
||||
}
|
||||
|
||||
const hostClass = p.player_id === gameState.gameHost ? 'host' : '';
|
||||
|
||||
return `
|
||||
<div class="player-row ${statusClass} ${hostClass}">
|
||||
<span class="player-name">${escapeHtml(p.name)}${p.player_id === playerUUID ? ' (You)' : ''}</span>
|
||||
<span class="player-score">${p.score}</span>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function showRoundResults(winner) {
|
||||
const gameBar = document.getElementById('game-bar');
|
||||
if (winner && winner.entry_text) {
|
||||
const winnerPlayer = gameState.players.find(p => p.player_id === winner.player_id);
|
||||
const winnerName = winnerPlayer ? winnerPlayer.name : 'Unknown';
|
||||
|
||||
gameBar.innerHTML = `
|
||||
<div class="results-display">
|
||||
<span class="round-winner">🏆 "${escapeHtml(winner.entry_text)}" by ${escapeHtml(winnerName)} wins!</span>
|
||||
<br><span class="waiting-message">Next round starting soon...</span>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
gameBar.innerHTML = `
|
||||
<div class="results-display">
|
||||
<span class="waiting-message">No winner this round. Next round starting soon...</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
updateStory();
|
||||
updatePlayersList();
|
||||
}
|
||||
|
||||
function showGameOver(winner) {
|
||||
const mainText = document.getElementById('main-text');
|
||||
const storyHtml = gameState.yarnStory.map(segment =>
|
||||
`<span class="story-segment" data-player="${escapeHtml(segment.player)}">${escapeHtml(segment.str)} </span>`
|
||||
).join('');
|
||||
|
||||
mainText.innerHTML = `
|
||||
<div style="text-align: center; margin-bottom: 1rem;">
|
||||
<span class="game-over-message">🎉 ${escapeHtml(winner.name)} is victorious with ${winner.score} points! 🎉</span>
|
||||
</div>
|
||||
<hr style="border-color: var(--accent-purple); margin: 1rem 0;">
|
||||
<strong>The Final Story:</strong><br><br>
|
||||
${storyHtml}
|
||||
`;
|
||||
|
||||
appendSystemMessage(`${winner.name} wins the game with ${winner.score} points!`);
|
||||
}
|
||||
|
||||
// === Action Functions ===
|
||||
|
||||
function setPlayerName() {
|
||||
const input = document.getElementById('name-input');
|
||||
const name = input.value.trim();
|
||||
|
||||
if (name.length < 1 || name.length > 20) {
|
||||
alert('Please enter a name (1-20 characters)');
|
||||
return;
|
||||
}
|
||||
|
||||
socket.emit('setName', { name });
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
const scoreLimit = parseInt(document.getElementById('score-limit').value) || 25;
|
||||
const timeLimit = parseInt(document.getElementById('time-limit').value) || 60;
|
||||
|
||||
socket.emit('startGame', {
|
||||
scoreLimit: Math.max(10, Math.min(100, scoreLimit)),
|
||||
timeLimit: Math.max(15, Math.min(180, timeLimit))
|
||||
});
|
||||
}
|
||||
|
||||
function submitEntry() {
|
||||
const input = document.getElementById('entry-input');
|
||||
const entry = input.value.trim();
|
||||
|
||||
socket.emit('submitEntry', { entry });
|
||||
hasSubmitted = true;
|
||||
updateGameBar();
|
||||
}
|
||||
|
||||
function submitVote(entryIndex) {
|
||||
socket.emit('submitVote', { entryIndex });
|
||||
hasVoted = true;
|
||||
updateGameBar();
|
||||
}
|
||||
|
||||
// === Chat Functions ===
|
||||
|
||||
document.getElementById('chat-input').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const msg = this.value.trim();
|
||||
if (msg && playerName) {
|
||||
socket.emit('chatMessage', { msg });
|
||||
this.value = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function appendChatMessage(msg) {
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'chat-message';
|
||||
div.innerHTML = `<strong>${escapeHtml(msg.name)}></strong> ${escapeHtml(msg.msg)}`;
|
||||
chatMessages.appendChild(div);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function appendSystemMessage(msg) {
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'chat-message system-message';
|
||||
div.textContent = `* ${msg}`;
|
||||
chatMessages.appendChild(div);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
// === Utility Functions ===
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) {
|
||||
return decodeURIComponent(parts.pop().split(';').shift());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,488 @@
|
|||
const express = require('express');
|
||||
const http = require('http');
|
||||
const { Server } = require('socket.io');
|
||||
const path = require('path');
|
||||
const cookieParser = require('cookie-parser');
|
||||
//const { v4: uuidv4 } = require('uuid');
|
||||
const { randomUUID } = require('node:crypto');
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const io = new Server(server);
|
||||
|
||||
app.use(cookieParser());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
// Store all game rooms
|
||||
const games = {};
|
||||
|
||||
// YarnGame class
|
||||
class YarnGame {
|
||||
constructor(roomName) {
|
||||
this.roomName = roomName;
|
||||
this.inProgress = false;
|
||||
this.gameHost = null;
|
||||
this.gameSettings = {
|
||||
scoreLimit: 25,
|
||||
timeLimit: 60
|
||||
};
|
||||
this.players = []; // { player_id, name, score, socketId }
|
||||
this.yarnStory = []; // { player: "", str: "" }
|
||||
this.chat = []; // { id, name, msg }
|
||||
this.round_data = []; // { entry_text, player_id, votes: [] }
|
||||
this.currentPhase = 'lobby'; // lobby, writing, voting, gameOver
|
||||
this.timer = null;
|
||||
this.timeRemaining = 0;
|
||||
this.submittedPlayers = new Set();
|
||||
this.votedPlayers = new Set();
|
||||
}
|
||||
|
||||
addPlayer(playerId, name, socketId) {
|
||||
const existingPlayer = this.players.find(p => p.player_id === playerId);
|
||||
if (existingPlayer) {
|
||||
existingPlayer.socketId = socketId;
|
||||
existingPlayer.name = name;
|
||||
return existingPlayer;
|
||||
}
|
||||
|
||||
const player = {
|
||||
player_id: playerId,
|
||||
name: name,
|
||||
score: 0,
|
||||
socketId: socketId
|
||||
};
|
||||
this.players.push(player);
|
||||
|
||||
// First player becomes host
|
||||
if (this.players.length === 1) {
|
||||
this.gameHost = playerId;
|
||||
}
|
||||
|
||||
return player;
|
||||
}
|
||||
|
||||
removePlayer(playerId) {
|
||||
const index = this.players.findIndex(p => p.player_id === playerId);
|
||||
if (index !== -1) {
|
||||
this.players.splice(index, 1);
|
||||
|
||||
// Assign new host if host left
|
||||
if (this.gameHost === playerId && this.players.length > 0) {
|
||||
this.gameHost = this.players[0].player_id;
|
||||
}
|
||||
}
|
||||
return this.players.length;
|
||||
}
|
||||
|
||||
getPlayer(playerId) {
|
||||
return this.players.find(p => p.player_id === playerId);
|
||||
}
|
||||
|
||||
getPlayerBySocket(socketId) {
|
||||
return this.players.find(p => p.socketId === socketId);
|
||||
}
|
||||
|
||||
updatePlayerName(playerId, name) {
|
||||
const player = this.getPlayer(playerId);
|
||||
if (player) {
|
||||
player.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
startGame(settings) {
|
||||
this.gameSettings = { ...this.gameSettings, ...settings };
|
||||
this.inProgress = true;
|
||||
this.yarnStory = [{ player: "Narrator", str: "It was a dark and stormy night..." }];
|
||||
this.players.forEach(p => p.score = 0);
|
||||
this.startWritingPhase();
|
||||
}
|
||||
|
||||
startWritingPhase() {
|
||||
this.currentPhase = 'writing';
|
||||
this.round_data = [];
|
||||
this.submittedPlayers = new Set();
|
||||
this.timeRemaining = this.gameSettings.timeLimit;
|
||||
}
|
||||
|
||||
submitEntry(playerId, entryText) {
|
||||
if (this.currentPhase !== 'writing') return false;
|
||||
if (this.submittedPlayers.has(playerId)) return false;
|
||||
|
||||
this.round_data.push({
|
||||
entry_text: entryText.trim(),
|
||||
player_id: playerId,
|
||||
votes: []
|
||||
});
|
||||
this.submittedPlayers.add(playerId);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
allPlayersSubmitted() {
|
||||
return this.submittedPlayers.size >= this.players.length;
|
||||
}
|
||||
|
||||
startVotingPhase() {
|
||||
this.currentPhase = 'voting';
|
||||
this.votedPlayers = new Set();
|
||||
this.timeRemaining = 30; // 30 seconds for voting
|
||||
}
|
||||
|
||||
submitVote(playerId, entryIndex) {
|
||||
if (this.currentPhase !== 'voting') return false;
|
||||
if (this.votedPlayers.has(playerId)) return false;
|
||||
|
||||
|
||||
const entry = this.round_data[entryIndex];
|
||||
// Can't vote for own entry
|
||||
//if (!entry || entry.player_id === playerId) return false;
|
||||
|
||||
entry.votes.push(playerId);
|
||||
this.votedPlayers.add(playerId);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
allPlayersVoted() {
|
||||
return this.votedPlayers.size >= this.players.length;
|
||||
}
|
||||
|
||||
tallyVotes() {
|
||||
if (this.round_data.length === 0) return null;
|
||||
|
||||
// Find winner (most votes)
|
||||
let winner = this.round_data[0];
|
||||
for (const entry of this.round_data) {
|
||||
if (entry.votes.length > winner.votes.length) {
|
||||
winner = entry;
|
||||
}
|
||||
}
|
||||
|
||||
// Award points
|
||||
const winnerPlayer = this.getPlayer(winner.player_id);
|
||||
if (winnerPlayer) {
|
||||
winnerPlayer.score += 5 + winner.votes.length;
|
||||
}
|
||||
|
||||
// Add to story
|
||||
if (winner.entry_text) {
|
||||
this.yarnStory.push({
|
||||
player: winnerPlayer ? winnerPlayer.name : "Unknown",
|
||||
str: winner.entry_text
|
||||
});
|
||||
}
|
||||
|
||||
return winner;
|
||||
}
|
||||
|
||||
checkGameOver() {
|
||||
const winner = this.players.find(p => p.score >= this.gameSettings.scoreLimit);
|
||||
if (winner) {
|
||||
this.currentPhase = 'gameOver';
|
||||
this.inProgress = false;
|
||||
return winner;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
resetGame() {
|
||||
this.inProgress = false;
|
||||
this.currentPhase = 'lobby';
|
||||
this.round_data = [];
|
||||
this.yarnStory = [];
|
||||
this.submittedPlayers = new Set();
|
||||
this.votedPlayers = new Set();
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
addChatMessage(playerId, msg) {
|
||||
const player = this.getPlayer(playerId);
|
||||
const chatMsg = {
|
||||
id: playerId,
|
||||
name: player ? player.name : 'Unknown',
|
||||
msg: msg
|
||||
};
|
||||
this.chat.push(chatMsg);
|
||||
// Keep last 100 messages
|
||||
if (this.chat.length > 100) {
|
||||
this.chat.shift();
|
||||
}
|
||||
return chatMsg;
|
||||
}
|
||||
|
||||
getState() {
|
||||
return {
|
||||
roomName: this.roomName,
|
||||
inProgress: this.inProgress,
|
||||
gameHost: this.gameHost,
|
||||
gameSettings: this.gameSettings,
|
||||
players: this.players.map(p => ({
|
||||
player_id: p.player_id,
|
||||
name: p.name,
|
||||
score: p.score,
|
||||
hasSubmitted: this.submittedPlayers.has(p.player_id),
|
||||
hasVoted: this.votedPlayers.has(p.player_id)
|
||||
})),
|
||||
yarnStory: this.yarnStory,
|
||||
currentPhase: this.currentPhase,
|
||||
timeRemaining: this.timeRemaining,
|
||||
round_data: this.currentPhase === 'voting' ? this.round_data.map((e, i) => ({
|
||||
index: i,
|
||||
entry_text: e.entry_text,
|
||||
voteCount: e.votes.length
|
||||
})) : []
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Get or create a game room
|
||||
function getOrCreateGame(roomName) {
|
||||
if (!games[roomName]) {
|
||||
games[roomName] = new YarnGame(roomName);
|
||||
}
|
||||
return games[roomName];
|
||||
}
|
||||
|
||||
// Route for game rooms
|
||||
app.get('/:roomName', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'index.html'));
|
||||
});
|
||||
|
||||
// Socket.IO connection handling
|
||||
io.on('connection', (socket) => {
|
||||
let currentRoom = null;
|
||||
let playerId = null;
|
||||
|
||||
socket.on('joinRoom', (data) => {
|
||||
const { roomName, playerUUID, playerName } = data;
|
||||
currentRoom = roomName;
|
||||
playerId = playerUUID;
|
||||
|
||||
socket.join(roomName);
|
||||
|
||||
const game = getOrCreateGame(roomName);
|
||||
|
||||
if (playerName) {
|
||||
game.addPlayer(playerId, playerName, socket.id);
|
||||
}
|
||||
|
||||
// Send current game state to the joining player
|
||||
socket.emit('gameState', game.getState());
|
||||
socket.emit('chatHistory', game.chat);
|
||||
|
||||
// Notify others
|
||||
if (playerName) {
|
||||
io.to(roomName).emit('playerJoined', {
|
||||
player_id: playerId,
|
||||
name: playerName
|
||||
});
|
||||
io.to(roomName).emit('playersUpdate', game.getState().players);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('setName', (data) => {
|
||||
const { name } = data;
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game) return;
|
||||
|
||||
game.addPlayer(playerId, name, socket.id);
|
||||
|
||||
socket.emit('nameSet', { success: true, name });
|
||||
io.to(currentRoom).emit('playersUpdate', game.getState().players);
|
||||
io.to(currentRoom).emit('gameState', game.getState());
|
||||
});
|
||||
|
||||
socket.on('updateSettings', (data) => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game || game.gameHost !== playerId) return;
|
||||
|
||||
game.gameSettings = { ...game.gameSettings, ...data };
|
||||
io.to(currentRoom).emit('settingsUpdate', game.gameSettings);
|
||||
});
|
||||
|
||||
socket.on('startGame', (settings) => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game || game.gameHost !== playerId) return;
|
||||
if (game.players.length < 2) {
|
||||
socket.emit('error', { message: 'Need at least 2 players to start' });
|
||||
return;
|
||||
}
|
||||
|
||||
game.startGame(settings);
|
||||
io.to(currentRoom).emit('gameStarted', game.getState());
|
||||
|
||||
startTimer(game);
|
||||
});
|
||||
|
||||
socket.on('submitEntry', (data) => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game) return;
|
||||
|
||||
const success = game.submitEntry(playerId, data.entry);
|
||||
|
||||
if (success) {
|
||||
io.to(currentRoom).emit('playersUpdate', game.getState().players);
|
||||
|
||||
if (game.allPlayersSubmitted()) {
|
||||
clearInterval(game.timer);
|
||||
game.startVotingPhase();
|
||||
io.to(currentRoom).emit('votingPhase', {
|
||||
entries: game.round_data.map((e, i) => ({
|
||||
index: i,
|
||||
entry_text: e.entry_text
|
||||
})),
|
||||
timeRemaining: game.timeRemaining
|
||||
});
|
||||
startVotingTimer(game);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('submitVote', (data) => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game) return;
|
||||
|
||||
const success = game.submitVote(playerId, data.entryIndex);
|
||||
|
||||
if (success) {
|
||||
io.to(currentRoom).emit('playersUpdate', game.getState().players);
|
||||
|
||||
if (game.allPlayersVoted()) {
|
||||
clearInterval(game.timer);
|
||||
endVotingPhase(game);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('chatMessage', (data) => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game) return;
|
||||
|
||||
const chatMsg = game.addChatMessage(playerId, data.msg);
|
||||
io.to(currentRoom).emit('newChatMessage', chatMsg);
|
||||
});
|
||||
|
||||
socket.on('playAgain', (settings) => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game || game.gameHost !== playerId) return;
|
||||
|
||||
game.resetGame();
|
||||
io.to(currentRoom).emit('gameReset', game.getState());
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
if (!currentRoom || !playerId) return;
|
||||
|
||||
const game = games[currentRoom];
|
||||
if (!game) return;
|
||||
|
||||
const player = game.getPlayer(playerId);
|
||||
const playerName = player ? player.name : 'Unknown';
|
||||
|
||||
const remaining = game.removePlayer(playerId);
|
||||
|
||||
io.to(currentRoom).emit('playerLeft', { player_id: playerId, name: playerName });
|
||||
io.to(currentRoom).emit('playersUpdate', game.getState().players);
|
||||
io.to(currentRoom).emit('gameState', game.getState());
|
||||
|
||||
// Clean up empty rooms
|
||||
if (remaining === 0) {
|
||||
if (game.timer) clearInterval(game.timer);
|
||||
delete games[currentRoom];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function startTimer(game) {
|
||||
if (game.timer) clearInterval(game.timer);
|
||||
|
||||
game.timer = setInterval(() => {
|
||||
game.timeRemaining--;
|
||||
io.to(game.roomName).emit('timerUpdate', game.timeRemaining);
|
||||
|
||||
if (game.timeRemaining <= 0) {
|
||||
clearInterval(game.timer);
|
||||
|
||||
// Force submit empty entries for players who haven't submitted
|
||||
for (const player of game.players) {
|
||||
if (!game.submittedPlayers.has(player.player_id)) {
|
||||
game.submitEntry(player.player_id, "");
|
||||
}
|
||||
}
|
||||
|
||||
game.startVotingPhase();
|
||||
io.to(game.roomName).emit('votingPhase', {
|
||||
entries: game.round_data.map((e, i) => ({
|
||||
index: i,
|
||||
entry_text: e.entry_text
|
||||
})),
|
||||
timeRemaining: game.timeRemaining
|
||||
});
|
||||
startVotingTimer(game);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function startVotingTimer(game) {
|
||||
if (game.timer) clearInterval(game.timer);
|
||||
|
||||
game.timer = setInterval(() => {
|
||||
game.timeRemaining--;
|
||||
io.to(game.roomName).emit('timerUpdate', game.timeRemaining);
|
||||
|
||||
if (game.timeRemaining <= 0) {
|
||||
clearInterval(game.timer);
|
||||
endVotingPhase(game);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function endVotingPhase(game) {
|
||||
const winner = game.tallyVotes();
|
||||
|
||||
io.to(game.roomName).emit('roundResults', {
|
||||
winner: winner,
|
||||
players: game.getState().players,
|
||||
story: game.yarnStory
|
||||
});
|
||||
|
||||
// Check for game over
|
||||
const gameWinner = game.checkGameOver();
|
||||
if (gameWinner) {
|
||||
io.to(game.roomName).emit('gameOver', {
|
||||
winner: gameWinner,
|
||||
players: game.getState().players,
|
||||
story: game.yarnStory
|
||||
});
|
||||
} else {
|
||||
// Start next round after a short delay
|
||||
setTimeout(() => {
|
||||
game.startWritingPhase();
|
||||
io.to(game.roomName).emit('newRound', game.getState());
|
||||
startTimer(game);
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
const PORT = process.env.PORT || 3000;
|
||||
server.listen(PORT, () => {
|
||||
console.log(`YARN server running on http://localhost:${PORT}`);
|
||||
console.log(`Join a room at http://localhost:${PORT}/game101`);
|
||||
});
|
||||
Loading…
Reference in New Issue