Added menu screen, about section, etc
This commit is contained in:
Cam Spry
parent
6a91d2242a
commit
8b9a434be3
|
|
@ -369,7 +369,7 @@
|
|||
(function() {
|
||||
// Get room name from URL
|
||||
const pathParts = window.location.pathname.split('/').filter(p => p);
|
||||
const roomName = pathParts[0] || 'default';
|
||||
const roomName = pathParts[pathParts.length-1] || 'default';
|
||||
document.getElementById('room-display').textContent = `Room: ${roomName}`;
|
||||
|
||||
// Get or create player UUID
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Y.A.R.N. 2026</title>
|
||||
|
||||
<!-- re-use the same CSS-variables and base look -->
|
||||
<style>
|
||||
:root {
|
||||
--bg-main: #4b0082;
|
||||
--text-beige: #FFFFE4;
|
||||
--box-bg: #0a0a0a;
|
||||
--accent-purple: #6a0dad;
|
||||
--player-green: #00ff88;
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; font-family:system-ui, sans-serif; }
|
||||
body {
|
||||
height:100vh;
|
||||
background:var(--bg-main);
|
||||
color:var(--text-beige);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
#splash {
|
||||
background:var(--box-bg);
|
||||
border:2px solid var(--accent-purple);
|
||||
border-radius:8px;
|
||||
padding:2rem 3rem;
|
||||
min-width:320px;
|
||||
text-align:center;
|
||||
}
|
||||
h1 { margin-bottom:1.5rem; letter-spacing:1px; }
|
||||
.section { margin:1.2rem 0; }
|
||||
input[type=text], button {
|
||||
width:100%;
|
||||
padding:.6rem .8rem;
|
||||
font-size:1rem;
|
||||
border-radius:4px;
|
||||
border:none;
|
||||
}
|
||||
input[type=text] {
|
||||
background:#1a1a1a;
|
||||
border:1px solid var(--accent-purple);
|
||||
color:var(--text-beige);
|
||||
margin-bottom:.6rem;
|
||||
}
|
||||
button {
|
||||
background:var(--accent-purple);
|
||||
color:#fff;
|
||||
font-weight:bold;
|
||||
cursor:pointer;
|
||||
transition:background .2s;
|
||||
}
|
||||
button:hover:not(:disabled) { background:#8a1dbd; }
|
||||
button:disabled { background:#444; cursor:not-allowed; }
|
||||
|
||||
#room-list {
|
||||
max-height:220px;
|
||||
overflow-y:auto;
|
||||
text-align:left;
|
||||
margin-top:.6rem;
|
||||
}
|
||||
.room-row {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding:.4rem .6rem;
|
||||
cursor:pointer;
|
||||
border-radius:3px;
|
||||
}
|
||||
.room-row:hover { background:#222; }
|
||||
.room-name { flex:1; }
|
||||
.room-count { color:var(--player-green); }
|
||||
.no-rooms { color:#888; font-style:italic; }
|
||||
|
||||
/* About overlay */
|
||||
#about-overlay {
|
||||
position:fixed; inset:0;
|
||||
background:rgba(0,0,0,.75);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
padding:1rem;
|
||||
}
|
||||
#about-box {
|
||||
background:var(--box-bg);
|
||||
border:2px solid var(--accent-purple);
|
||||
border-radius:8px;
|
||||
padding:2rem 2.5rem;
|
||||
max-width:640px;
|
||||
color:var(--text-beige);
|
||||
line-height:1.45;
|
||||
}
|
||||
#about-box h3 { margin-top:0; margin-bottom:1rem; }
|
||||
#about-box p { margin:.6rem 0; }
|
||||
#about-box ul { margin:.6rem 0 1rem 1.2rem; }
|
||||
#about-box button {
|
||||
margin-top:1rem; width:auto; padding:.6rem 1.2rem;
|
||||
}
|
||||
.hidden { display:none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="splash">
|
||||
<h2>Y.A.R.N.</h2>
|
||||
<h4>HTML5 Edition</h4>
|
||||
|
||||
<!-- ENTER GAME -->
|
||||
<div class="section">
|
||||
<input id="room-input" type="text" placeholder="Room name..." maxlength="30"/>
|
||||
<button id="enter-btn">Enter Game</button>
|
||||
</div>
|
||||
|
||||
<!-- FIND GAME -->
|
||||
<div class="section">
|
||||
<button id="find-btn">Find Games</button>
|
||||
<div id="room-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<div class="section">
|
||||
<button id="about-btn">About Y.A.R.N.</button>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT OVERLAY -->
|
||||
<div id="about-overlay" class="hidden">
|
||||
<div id="about-box">
|
||||
<h3>What is Y.A.R.N HTML5?</h3>
|
||||
<p>Y.A.R.N was a collaborative story-writing "parlor game" originally included in GameSpy Arcade in the early 2000s, but removed shortly thereafter due to security issues that were never resolved.</p>
|
||||
<p><strong>Y.A.R.N. HTML5</strong> is a modern remake of (what I can remember from) the original, designed to run in-browser, and with extra features such as (optional) LLM-based bots.</p>
|
||||
<p><strong>The rules are simple:</strong></p>
|
||||
<ul>
|
||||
<li>Players have a limited amount of time to write a sentence, selected by the host at game start.</li>
|
||||
<li>Once all players have submitted their sentences, players have 30 seconds to vote for their favorite.</li>
|
||||
<li>The player whose sentence is chosen receives 5 points, plus one point for each vote they received.</li>
|
||||
<li>When a player reaches the point limit, they win the game.</li>
|
||||
</ul>
|
||||
<p>Enjoy the story-writing!<br><br>
|
||||
Report any bugs/comments/questions/concerns in the <a href="https://discord.gg/nvP92Mc">Juke Gaming Network Discord</a> or message the author <strong>@juke420</strong>.</p>
|
||||
<button id="close-about">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const roomInput = document.getElementById('room-input');
|
||||
const enterBtn = document.getElementById('enter-btn');
|
||||
const findBtn = document.getElementById('find-btn');
|
||||
const roomListBox = document.getElementById('room-list');
|
||||
const aboutBtn = document.getElementById('about-btn');
|
||||
const aboutBox = document.getElementById('about-overlay');
|
||||
const closeAbout = document.getElementById('close-about');
|
||||
|
||||
let findActive = false;
|
||||
let pollId = null;
|
||||
|
||||
function toggleAbout(show){
|
||||
aboutBox.classList.toggle('hidden',!show);
|
||||
}
|
||||
aboutBtn.addEventListener('click', () => toggleAbout(true));
|
||||
closeAbout.addEventListener('click', () => toggleAbout(false));
|
||||
aboutBox.addEventListener('click', e => { if (e.target===aboutBox) toggleAbout(false); });
|
||||
|
||||
/* sanitize helper */
|
||||
const esc = str => {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = str;
|
||||
return d.innerHTML;
|
||||
};
|
||||
|
||||
/* ENTER GAME */
|
||||
function goToRoom() {
|
||||
const name = roomInput.value.trim().toLowerCase().replace(/[^a-z0-9-_]/g,'');
|
||||
if (!name) { alert('Please enter a room name.'); return; }
|
||||
window.location.href = '/game/' + encodeURIComponent(name);
|
||||
}
|
||||
enterBtn.addEventListener('click', goToRoom);
|
||||
roomInput.addEventListener('keydown', e => { if (e.key==='Enter') goToRoom(); });
|
||||
|
||||
/* FIND GAME */
|
||||
async function fetchRooms() {
|
||||
try {
|
||||
const r = await fetch('/api/rooms');
|
||||
if (!r.ok) throw new Error();
|
||||
const data = await r.json(); // {rooms:[{name,playerCount},...]}
|
||||
renderRooms(data.rooms || []);
|
||||
} catch {
|
||||
renderRooms([]);
|
||||
}
|
||||
}
|
||||
|
||||
function renderRooms(list) {
|
||||
if (!list.length) {
|
||||
roomListBox.innerHTML = '<div class="no-rooms">No open rooms right now.</div>';
|
||||
return;
|
||||
}
|
||||
roomListBox.innerHTML = list.map(r => `
|
||||
<div class="room-row" data-room="${esc(r.name)}">
|
||||
<span class="room-name">${esc(r.name)}</span>
|
||||
<span class="room-count">${r.playerCount} player${r.playerCount===1?'':'s'}</span>
|
||||
</div>`).join('');
|
||||
|
||||
roomListBox.querySelectorAll('.room-row').forEach(row => {
|
||||
row.addEventListener('click', () => {
|
||||
window.location.href = '/game/' + encodeURIComponent(row.dataset.room);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toggleFind() {
|
||||
findActive = !findActive;
|
||||
if (findActive) {
|
||||
findBtn.textContent = 'Stop Refresh';
|
||||
fetchRooms();
|
||||
pollId = setInterval(fetchRooms, 2000);
|
||||
} else {
|
||||
findBtn.textContent = 'Find Game';
|
||||
clearInterval(pollId);
|
||||
roomListBox.innerHTML = '';
|
||||
}
|
||||
}
|
||||
findBtn.addEventListener('click', toggleFind);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -344,8 +344,12 @@ function getOrCreateGame(roomName) {
|
|||
}
|
||||
|
||||
// Route for game rooms
|
||||
app.get('/:roomName', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'index.html'));
|
||||
app.get('/game/:roomName', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'game.html'));
|
||||
});
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'public', 'menu.html'));
|
||||
});
|
||||
|
||||
// Socket.IO connection handling
|
||||
|
|
|
|||
Loading…
Reference in New Issue