Anonymous Matrix Game

I invite you to copy the code of this game and set up your own game page. All that I ask is that you make the code freely available to others, with the expectation that they will also make it freely available. This is not a commercial endeavor.

Here is how you do it. Copy the code. Go to Firebase at Google. You can set up a free database there. Enter the code into Gemini ai (which is right there on the site) and enter in the code. Ask Gemini what changes you need to make to the code for it to work on your web page. It will make the changes. You can then copy the new code and put it on your web page. I use Google Sites because it is free but you could put it on any web page. Once this is done, BINGO! you have your own working game. It is just that easy.

Chris Engle 2/12/2026

I'm including the code for the other three games here as well. Scroll down to find it.

<!DOCTYPE html>

<head>

<title>Anonymous Game</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

padding: 20px;

max-width: 600px;

margin: 0 auto;

background-color: #f5f5f5;

}

h1 {

text-align: center;

margin-bottom: 20px;

color: #333;

}

.section {

background-color: white;

padding: 15px;

margin-bottom: 15px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

.section-title {

font-weight: bold;

margin-bottom: 10px;

color: #555;

font-size: 16px;

}

.section-content {

min-height: 50px;

color: #333;

line-height: 1.5;

white-space: pre-wrap;

word-wrap: break-word;

}

.button-container {

display: flex;

flex-direction: column;

gap: 10px;

margin-top: 20px;

}

button {

padding: 12px;

font-size: 16px;

border: none;

border-radius: 8px;

cursor: pointer;

background-color: #4CAF50;

color: white;

font-weight: bold;

}

button:active {

background-color: #45a049;

}

.challenge-btn {

background-color: #ff9800;

}

.challenge-btn:active {

background-color: #e68900;

}

/* Modal styles */

.modal {

display: none;

position: fixed;

z-index: 1000;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.5);

}

.modal-content {

background-color: white;

margin: 10% auto;

padding: 20px;

border-radius: 8px;

width: 90%;

max-width: 500px;

}

.modal-title {

font-weight: bold;

margin-bottom: 10px;

font-size: 18px;

}

textarea {

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 14px;

font-family: Arial, sans-serif;

resize: vertical;

}

.char-count {

text-align: right;

font-size: 12px;

color: #666;

margin-top: -10px;

margin-bottom: 10px;

}

.strikethrough {

text-decoration: line-through;

}

</style>

</head>

<body>

<h1>Anonymous Game</h1>

<div class="section-title">Old Games</div>

</div>

<div class="section-title">Current Game</div>

</div>

<div class="section-title">Judge Move</div>

</div>

Challenges (<span id="challenge-count">0</span>)

</button>

<button onclick="showNextMoveModal()">What happens next?</button>

<button onclick="showNewGameModal()">Start a new game</button>

</div>

<div class="modal-title">Title and Scenario</div>

<button onclick="submitNewGame()">Submit Game</button>

</div>

<div class="modal-title">Say what happens next</div>

<button onclick="submitNextMove()">Submit move</button>

</div>

// ============================================

// FIREBASE CONFIGURATION

// ============================================

// Your web app's Firebase configuration

const firebaseConfig = {

apiKey: "AIzaSyCVm62bHH5FhWj-4Iz5xuLqb1bNMnowBsc",

authDomain: "anonymous-game-1d4a6.firebaseapp.com",

databaseURL: "https://anonymous-game-1d4a6-default-rtdb.firebaseio.com",

projectId: "anonymous-game-1d4a6",

storageBucket: "anonymous-game-1d4a6.firebasestorage.app",

messagingSenderId: "752701864266",

appId: "1:752701864266:web:f7fe776bbf3587d996e9b3",

measurementId: "G-LS4L404L10"

};

// Initialize Firebase

firebase.initializeApp(firebaseConfig);

const database = firebase.database();

const gameStateRef = database.ref('game_state');

// ============================================

// INITIALIZE GAME STATE

// ============================================

function initializeGameState() {

gameStateRef.once('value').then((snapshot) => {

if (!snapshot.exists()) {

gameStateRef.set({

old_games: '',

current_game: '',

judge_move: '',

challenge_count: 0,

time_end_time: 0

});

}

});

}

// ============================================

// REAL-TIME LISTENERS

// ============================================

gameStateRef.on('value', (snapshot) => {

const data = snapshot.val();

if (data) {

document.getElementById('old-games').innerHTML = formatText(data.old_games || '');

document.getElementById('current-game').innerHTML = formatText(data.current_game || '');

document.getElementById('judge-move').innerHTML = formatText(data.judge_move || '');

document.getElementById('challenge-count').textContent = data.challenge_count || 0;

// Update challenge button state

const challengeBtn = document.getElementById('challenge-btn');

challengeBtn.disabled = !data.judge_move;

}

});

// ============================================

// TIMER MANAGEMENT

// ============================================

let timerInterval;

function startTimer() {

const startTime = Date.now();

gameStateRef.update({ time_end_time: startTime });

if (timerInterval) clearInterval(timerInterval);

timerInterval = setInterval(() => {

gameStateRef.once('value').then((snapshot) => {

const data = snapshot.val();

if (data && data.time_end_time) {

const elapsed = Date.now() - data.time_end_time;

const twentyFourHours = 24 * 60 * 60 * 1000;

if (elapsed >= twentyFourHours) {

handleTimeout();

clearInterval(timerInterval);

}

});

}, 60000); // Check every minute

}

function handleTimeout() {

gameStateRef.once('value').then((snapshot) => {

const data = snapshot.val();

if (data) {

const timeoutMessage = 'The game has timed out. Please start a new game.';

const updatedCurrent = (data.current_game || '') + '\n' + timeoutMessage;

const updatedOld = (data.old_games || '') + '\n' + updatedCurrent;

gameStateRef.update({

old_games: updatedOld,

current_game: '',

time_end_time: 0

});

}

});

}

// ============================================

// TEXT FORMATTING

// ============================================

function formatText(text) {

if (!text) return '';

// Preserve HTML formatting that's already in the database

return text;

}

function addStrikethrough(text) {

return '<span class="strikethrough">' + text + '</span>';

}

// ============================================

// MODAL FUNCTIONS

// ============================================

function showNewGameModal() {

document.getElementById('new-game-modal').style.display = 'block';

document.getElementById('game-scenario').value = '';

document.getElementById('scenario-count').textContent = '0';

}

function showNextMoveModal() {

document.getElementById('next-move-modal').style.display = 'block';

document.getElementById('next-move').value = '';

document.getElementById('move-count').textContent = '0';

}

function closeModals() {

document.getElementById('new-game-modal').style.display = 'none';

document.getElementById('next-move-modal').style.display = 'none';

}

// Character counters

document.getElementById('game-scenario').addEventListener('input', function() {

document.getElementById('scenario-count').textContent = this.value.length;

});

document.getElementById('next-move').addEventListener('input', function() {

document.getElementById('move-count').textContent = this.value.length;

});

// Close modal when clicking outside

window.onclick = function(event) {

if (event.target.classList.contains('modal')) {

closeModals();

}

// ============================================

// GAME LOGIC FUNCTIONS

// ============================================

function submitNewGame() {

const scenario = document.getElementById('game-scenario').value.trim();

if (!scenario) {

alert('Please enter a title and scenario');

return;

}

gameStateRef.once('value').then((snapshot) => {

const data = snapshot.val();

let updatedOld = data.old_games || '';

// Add current game to old games if it exists

if (data.current_game) {

updatedOld = updatedOld ? updatedOld + '\n\n' + data.current_game : data.current_game;

}

// Create new current game with bold scenario and prompt

const newCurrent = '<strong>' + scenario + '</strong>\n\nA new game has begun. What happens next?';

gameStateRef.update({

old_games: updatedOld,

current_game: newCurrent,

judge_move: '',

challenge_count: 0

});

startTimer();

closeModals();

});

}

function submitNextMove() {

const move = document.getElementById('next-move').value.trim();

if (!move) {

alert('Please enter what happens next');

return;

}

gameStateRef.once('value').then((snapshot) => {

const data = snapshot.val();

let updatedCurrent = data.current_game || '';

// Add challenge count and judge move to current game

if (data.judge_move) {

const challengeText = '\n\n' + data.challenge_count;

updatedCurrent = updatedCurrent + challengeText + '\n' + data.judge_move;

}

gameStateRef.update({

current_game: updatedCurrent,

judge_move: move,

challenge_count: 0

});

closeModals();

});

}

function handleChallenge() {

gameStateRef.once('value').then((snapshot) => {

const data = snapshot.val();

if (!data.judge_move) {

return; // Can't challenge if there's no judge move

}

const newCount = (data.challenge_count || 0) + 1;

// Generate random number between 1 and 100

const roll = Math.floor(Math.random() * 100) + 1;

if (roll <= 10) {

// Challenge successful - strikethrough the judge move

const struckMove = addStrikethrough(data.judge_move) + '\n\nThis move was successfully challenged.';

gameStateRef.update({

judge_move: struckMove,

challenge_count: newCount

});

} else {

// Challenge failed - just increment count

gameStateRef.update({

challenge_count: newCount

});

}

});

}

// ============================================

// INITIALIZATION

// ============================================

initializeGameState();

</script>

</body>

</html>

Below is the code for Social Matrix Games.

<!DOCTYPE html>

<head>

<title>Social Matrix Game</title>

<style>

:root {

--bg: #0a0a0a;

--surface: #111111;

--surface2: #1a1a1a;

--border: #2a2a2a;

--border-bright: #444;

--gold: #c9a84c;

--gold-dim: #7a6030;

--gold-bright: #e8c96a;

--crimson: #8b1a1a;

--crimson-bright: #c0392b;

--sage: #2d5a3d;

--sage-bright: #3d7a52;

--ice: #1a3a5c;

--ice-bright: #2a5a8c;

--text: #e8e0d0;

--text-dim: #8a8070;

--text-muted: #504840;

--radius: 4px;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {

font-family: 'Crimson Pro', Georgia, serif;

background: var(--bg);

color: var(--text);

min-height: 100dvh;

display: flex;

flex-direction: column;

padding: 10px;

gap: 10px;

overflow-x: hidden;

background-image:

radial-gradient(ellipse at 20% 0%, rgba(201,168,76,0.04) 0%, transparent 60%),

radial-gradient(ellipse at 80% 100%, rgba(139,26,26,0.04) 0%, transparent 60%);

}

/* ── Header ── */

header {

text-align: center;

padding: 12px 0 6px;

border-bottom: 1px solid var(--gold-dim);

position: relative;

}

header::before {

content: '✦ ✦ ✦';

display: block;

font-size: 0.5rem;

color: var(--gold-dim);

letter-spacing: 0.5em;

margin-bottom: 6px;

}

header h1 {

font-family: 'Cinzel', serif;

font-size: 1.3rem;

font-weight: 900;

color: var(--gold);

letter-spacing: 0.15em;

text-transform: uppercase;

text-shadow: 0 0 30px rgba(201,168,76,0.3);

}

.status-row {

display: flex;

justify-content: center;

gap: 12px;

margin-top: 6px;

font-size: 0.72rem;

color: var(--text-dim);

font-family: 'Cinzel', serif;

letter-spacing: 0.08em;

}

.status-pip {

display: flex;

align-items: center;

gap: 5px;

}

.pip-dot {

width: 6px; height: 6px;

border-radius: 50%;

background: var(--gold-dim);

}

.pip-dot.live { background: var(--sage-bright); animation: blink 2s infinite; }

.pip-dot.dead { background: var(--crimson-bright); }

@keyframes blink {

0%,100% { opacity:1; } 50% { opacity:0.3; }

}

/* ── Panels ── */

.panel {

background: var(--surface);

border: 1px solid var(--border);

border-radius: var(--radius);

overflow: hidden;

position: relative;

}

.panel::before {

content: '';

position: absolute;

top: 0; left: 0; right: 0;

height: 1px;

background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);

}

.panel-title {

font-family: 'Cinzel', serif;

font-size: 0.65rem;

font-weight: 700;

letter-spacing: 0.18em;

text-transform: uppercase;

color: var(--gold);

padding: 7px 12px 6px;

background: rgba(201,168,76,0.04);

border-bottom: 1px solid var(--border);

display: flex;

align-items: center;

gap: 8px;

}

.panel-title .title-icon { font-size: 0.8rem; }

.scroll-box {

height: 180px;

overflow-y: auto;

padding: 10px 12px;

font-size: 0.92rem;

line-height: 1.65;

word-break: break-word;

scrollbar-width: thin;

scrollbar-color: var(--border-bright) transparent;

}

.scroll-box::-webkit-scrollbar { width: 3px; }

.scroll-box::-webkit-scrollbar-track { background: transparent; }

.scroll-box::-webkit-scrollbar-thumb { background: var(--border-bright); }

/* Old Games panel gets a taller scroll box */

.scroll-box-tall {

height: 260px;

overflow-y: auto;

padding: 10px 12px;

font-size: 0.92rem;

line-height: 1.65;

word-break: break-word;

scrollbar-width: thin;

scrollbar-color: var(--border-bright) transparent;

}

.scroll-box-tall::-webkit-scrollbar { width: 3px; }

.scroll-box-tall::-webkit-scrollbar-track { background: transparent; }

.scroll-box-tall::-webkit-scrollbar-thumb { background: var(--border-bright); }

.empty-state {

color: var(--text-muted);

font-style: italic;

font-size: 0.82rem;

text-align: center;

padding: 18px 0;

font-family: 'Crimson Pro', serif;

}

/* Log entry styles */

.log-entry {

padding: 6px 0;

border-bottom: 1px solid rgba(255,255,255,0.04);

}

.log-entry:last-child { border-bottom: none; }

.log-scenario {

font-family: 'Cinzel', serif;

font-size: 0.82rem;

font-weight: 700;

color: var(--gold-bright);

letter-spacing: 0.05em;

}

.log-tally {

font-size: 0.78rem;

color: var(--text-muted);

font-style: italic;

margin-top: 2px;

}

.log-timeout {

color: var(--crimson-bright);

font-style: italic;

font-size: 0.82rem;

}

/* Old game divider */

.old-game-divider {

border: none;

border-top: 1px solid var(--gold-dim);

margin: 10px 0;

opacity: 0.5;

}

.text-struck { text-decoration: line-through; opacity: 0.55; }

.text-blue { color: #6ab0e8; }

.text-green { color: #6ac98a; }

.text-challenged { color: var(--crimson-bright); font-style: italic; font-size: 0.8rem; }

.text-replaced { color: var(--gold); font-style: italic; font-size: 0.8rem; }

.text-replace-fail { color: #e8c46a; font-style: italic; font-size: 0.8rem; }

/* ── Button grid ── */

.btn-grid {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 7px;

}

.btn {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 3px;

padding: 11px 6px;

border-radius: var(--radius);

border: 1px solid transparent;

font-family: 'Cinzel', serif;

font-size: 0.62rem;

font-weight: 700;

letter-spacing: 0.1em;

text-transform: uppercase;

cursor: pointer;

transition: all 0.12s;

-webkit-tap-highlight-color: transparent;

position: relative;

overflow: hidden;

}

.btn:active { transform: scale(0.95); }

.btn-sub {

font-family: 'Crimson Pro', serif;

font-size: 0.72rem;

font-weight: 400;

letter-spacing: 0;

text-transform: none;

font-style: italic;

opacity: 0.8;

}

.btn-gold {

background: linear-gradient(160deg, #2a2010, #1a1508);

border-color: var(--gold-dim);

color: var(--gold);

}

.btn-gold:active { background: linear-gradient(160deg, #3a3020, #2a2010); }

.btn-crimson {

background: linear-gradient(160deg, #2a0808, #1a0505);

border-color: #5a1515;

color: #e88080;

}

.btn-crimson:active { background: linear-gradient(160deg, #3a1010, #2a0808); }

.btn-sage {

background: linear-gradient(160deg, #0a1f12, #061208);

border-color: #1a4a28;

color: #6ac98a;

}

.btn-sage:active { background: linear-gradient(160deg, #102a18, #0a1f12); }

.btn-ice {

background: linear-gradient(160deg, #0a1520, #060e15);

border-color: #1a3a5c;

color: #6ab0e8;

}

.btn-ice:active { background: linear-gradient(160deg, #102030, #0a1520); }

.btn-dim {

background: var(--surface2);

border-color: var(--border);

color: var(--text-dim);

}

.badge {

display: inline-flex;

align-items: center;

justify-content: center;

min-width: 20px;

height: 20px;

background: rgba(201,168,76,0.15);

border: 1px solid var(--gold-dim);

border-radius: 10px;

font-size: 0.68rem;

font-weight: 900;

color: var(--gold);

padding: 0 4px;

font-family: 'Cinzel', serif;

}

.timer-tag {

font-size: 0.62rem;

background: rgba(106,176,232,0.1);

border: 1px solid #1a3a5c;

border-radius: 3px;

padding: 1px 5px;

color: #6ab0e8;

font-family: 'Cinzel', serif;

font-variant-numeric: tabular-nums;

}

/* ── Modals ── */

.overlay {

display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.85);

backdrop-filter: blur(6px);

z-index: 100;

align-items: center;

justify-content: center;

padding: 14px;

}

.overlay.open { display: flex; }

.modal {

background: var(--surface);

border: 1px solid var(--border-bright);

border-radius: 6px;

padding: 18px 16px;

width: 100%;

max-width: 400px;

display: flex;

flex-direction: column;

gap: 13px;

animation: riseIn 0.18s ease;

position: relative;

}

.modal::before {

content: '';

position: absolute;

top: 0; left: 10%; right: 10%;

height: 1px;

background: linear-gradient(90deg, transparent, var(--gold), transparent);

}

@keyframes riseIn {

from { transform: translateY(16px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

}

.modal-heading {

font-family: 'Cinzel', serif;

font-size: 0.9rem;

font-weight: 700;

color: var(--gold);

letter-spacing: 0.08em;

}

.modal-sub {

font-size: 0.82rem;

color: var(--text-dim);

margin-top: 2px;

font-style: italic;

}

.field-label {

font-family: 'Cinzel', serif;

font-size: 0.6rem;

font-weight: 700;

letter-spacing: 0.15em;

text-transform: uppercase;

color: var(--text-muted);

margin-bottom: 4px;

}

textarea {

width: 100%;

background: #0d0d0d;

border: 1px solid var(--border-bright);

border-radius: var(--radius);

color: var(--text);

font-family: 'Crimson Pro', serif;

font-size: 0.92rem;

line-height: 1.5;

padding: 9px 11px;

resize: none;

outline: none;

transition: border-color 0.15s;

}

textarea:focus { border-color: var(--gold-dim); }

textarea::placeholder { color: var(--text-muted); font-style: italic; }

.char-count {

font-size: 0.68rem;

color: var(--text-muted);

text-align: right;

margin-top: 3px;

font-family: 'Cinzel', serif;

}

.char-count.near { color: var(--gold-dim); }

.char-count.full { color: var(--crimson-bright); }

.modal-body-text {

font-size: 0.9rem;

line-height: 1.6;

color: var(--text);

}

.big-timer {

font-family: 'Cinzel', serif;

font-size: 2rem;

font-weight: 700;

text-align: center;

color: var(--gold);

letter-spacing: 0.1em;

font-variant-numeric: tabular-nums;

}

.btn-row {

display: flex;

gap: 8px;

}

.mbtn {

flex: 1;

padding: 9px 12px;

border-radius: var(--radius);

border: 1px solid transparent;

font-family: 'Cinzel', serif;

font-size: 0.62rem;

font-weight: 700;

letter-spacing: 0.1em;

text-transform: uppercase;

cursor: pointer;

transition: all 0.12s;

-webkit-tap-highlight-color: transparent;

}

.mbtn:active { transform: scale(0.96); }

.mbtn-gold {

background: linear-gradient(135deg, #2a2010, #1a1508);

border-color: var(--gold-dim);

color: var(--gold);

}

.mbtn-crimson {

background: linear-gradient(135deg, #2a0808, #1a0505);

border-color: #5a1515;

color: #e88080;

}

.mbtn-sage {

background: linear-gradient(135deg, #0a1f12, #061208);

border-color: #1a4a28;

color: #6ac98a;

}

.mbtn-ice {

background: linear-gradient(135deg, #0a1520, #060e15);

border-color: #1a3a5c;

color: #6ab0e8;

}

.mbtn-dim {

background: var(--surface2);

border-color: var(--border);

color: var(--text-dim);

}

/* Replace timer bar */

.rbar-wrap {

height: 3px;

background: var(--border);

border-radius: 2px;

overflow: hidden;

}

.rbar-fill {

height: 100%;

background: linear-gradient(90deg, var(--sage-bright), var(--gold), var(--crimson-bright));

transition: width 1s linear;

}

.rbar-label {

font-family: 'Cinzel', serif;

font-size: 0.62rem;

color: var(--text-muted);

text-align: center;

letter-spacing: 0.08em;

margin-top: 3px;

}

/* Toast */

.toast {

position: fixed;

bottom: 18px;

left: 50%;

transform: translateX(-50%) translateY(16px);

background: var(--surface2);

border: 1px solid var(--gold-dim);

border-radius: 20px;

padding: 7px 18px;

font-family: 'Cinzel', serif;

font-size: 0.68rem;

letter-spacing: 0.08em;

color: var(--gold);

z-index: 999;

opacity: 0;

transition: all 0.22s;

pointer-events: none;

white-space: nowrap;

}

.toast.show {

opacity: 1;

transform: translateX(-50%) translateY(0);

}

</style>

</head>

<body>

<h1>Social Matrix</h1>

<span id="connLabel">Connecting</span>

</div>

</div>

</header>

<div class="empty-state">No game in progress. Start a new game to begin.</div>

</div>

<div class="panel-title"><span class="title-icon">⚖️</span> Judge Move</div>

<div class="empty-state">No move submitted yet.</div>

</div>

<span>Replace</span>

</button>

<span>Challenge</span>

</button>

<span>Comment</span>

</button>

<span>Summarize</span>

</button>

</button>

</button>

</div>

<div class="panel-title"><span class="title-icon">🗃️</span> Old Games</div>

<div class="empty-state">No previous games yet.</div>

</div>

<div>

<div class="modal-heading">Start a New Game</div>

<div class="modal-sub">Describe the scenario for players to navigate</div>

</div>

<div>

<div class="field-label">Title / Scenario Problem</div>

<textarea id="scenarioTA" rows="5" maxlength="500"

placeholder="Describe the opening scenario… (up to 500 characters)"

oninput="countChars(this,'scenarioCount',500)"></textarea>

</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('newGameOverlay')">Cancel</button>

<button class="mbtn mbtn-gold" onclick="submitNewGame()">Submit New Game</button>

</div>

<div>

<div class="modal-sub">What does your character do?</div>

</div>

<div>

<div class="field-label">Write a Move</div>

<textarea id="moveTA" rows="4" maxlength="200"

placeholder="Describe your action… (up to 200 characters)"

oninput="countChars(this,'moveCount',200)"></textarea>

</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('makeMoveOverlay')">Cancel</button>

<button class="mbtn mbtn-sage" onclick="submitMove()">Submit Move</button>

</div>

<div class="modal-body-text">You can't make a new move until the timer runs out.</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('timerBlockOverlay')">Return to the Game</button>

</div>

<div>

<div class="modal-heading">Summarize</div>

<div class="modal-sub">Condense the current judge move</div>

</div>

<div>

<div class="field-label">Summarize the move in fewer words</div>

<textarea id="summaryTA" rows="3" maxlength="50"

placeholder="Short summary… (up to 50 characters)"

oninput="countChars(this,'summaryCount',50)"></textarea>

</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('summarizeOverlay')">Cancel</button>

<button class="mbtn mbtn-ice" onclick="submitSummary()">Submit Summary</button>

</div>

<div>

<div class="modal-heading">Add a Comment</div>

<div class="modal-sub">Your comment appears in green</div>

</div>

<div>

<div class="field-label">Write a Comment</div>

<textarea id="commentTA" rows="3" maxlength="100"

placeholder="Your comment… (up to 100 characters)"

oninput="countChars(this,'commentCount',100)"></textarea>

</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('commentOverlay')">Cancel</button>

<button class="mbtn mbtn-sage" onclick="submitComment()">Submit Comment</button>

</div>

<div class="modal-heading" id="chalResultTitle">Challenge Result</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('challengeResultOverlay')">Return to the Game</button>

</div>

<div class="modal-heading">⛔ Cannot Replace</div>

<div class="modal-body-text">This move has already been challenged so it cannot be replaced.</div>

<button class="mbtn mbtn-dim" onclick="closeOverlay('alreadyChallengedOverlay')">Return to the Game</button>

</div>

<div>

<div class="modal-heading">Replace the Move</div>

<div class="modal-sub">You have 1 minute to propose a replacement</div>

</div>

</div>

<div class="rbar-label" id="rbarLabel">1:00 remaining</div>

<div>

<div class="field-label">Write what happens instead</div>

<textarea id="replaceTA" rows="3" maxlength="100"

placeholder="What happens instead? (up to 100 characters)"

oninput="countChars(this,'replaceCount',100)"></textarea>

</div>

<button class="mbtn mbtn-dim" onclick="cancelReplace()">Cancel</button>

<button class="mbtn mbtn-crimson" onclick="submitReplacement()">Submit Replacement</button>

</div>

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";

import { getDatabase, ref, onValue, set, update } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js";

const firebaseConfig = {

apiKey: "AIzaSyAw97JWLLBMpznRcYnrYpFOXNyVDQgXyAc",

authDomain: "social-matrix-game.firebaseapp.com",

databaseURL: "https://social-matrix-game-default-rtdb.firebaseio.com",

projectId: "social-matrix-game",

storageBucket: "social-matrix-game.firebasestorage.app",

messagingSenderId: "324499539002",

appId: "1:324499539002:web:4b519896394e5cd617a103"

};

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

const gRef = ref(db, 'game_state');

// ── State ──────────────────────────────────────────

let S = {

game_log: '', judge_move: '',

challenge_counter: 0,

game_timer: null, turn_timer: null, replace_timer: null,

old_games: ''

};

// Interval handles

let gameTimerIv = null, turnTimerIv = null, replaceTimerIv = null;

let replaceSecsLeft = 0;

// ── DOM ────────────────────────────────────────────

const $gameLog = document.getElementById('gameLog');

const $judgeMove = document.getElementById('judgeMove');

const $oldGames = document.getElementById('oldGamesLog');

const $chalBadge = document.getElementById('challengeBadge');

const $turnTag = document.getElementById('turnTimerTag');

const $blockTimer = document.getElementById('blockTimerVal');

const $gameTimerV = document.getElementById('gameTimerVal');

const $gameTimerP = document.getElementById('gameTimerPip');

const $connDot = document.getElementById('connDot');

const $connLabel = document.getElementById('connLabel');

// ── Helpers ────────────────────────────────────────

function esc(s){

return String(s)

.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')

.replace(/"/g,'"').replace(/'/g,''');

}

function fmt(sec){

const h=Math.floor(sec/3600), m=Math.floor((sec%3600)/60), s=sec%60;

if(h>0) return `${h}:${pad(m)}:${pad(s)}`;

return `${m}:${pad(s)}`;

}

function pad(n){ return String(n).padStart(2,'0'); }

function toast(msg, dur=2400){

const t=document.getElementById('toast');

t.textContent=msg; t.classList.add('show');

setTimeout(()=>t.classList.remove('show'), dur);

}

window.openOverlay = id => document.getElementById(id).classList.add('open');

window.closeOverlay = id => document.getElementById(id).classList.remove('open');

window.countChars = (el, countId, max) => {

const n = el.value.length;

const c = document.getElementById(countId);

c.textContent = `${n} / ${max}`;

c.className = 'char-count' + (n>=max?' full': n>=max*0.85?' near':'');

};

function renderBox(el, html, emptyMsg){

el.innerHTML = (html && html.trim())

? html

: `<div class="empty-state">${emptyMsg}</div>`;

}

// ── Firebase listener ──────────────────────────────

onValue(gRef, snap => {

$connDot.classList.remove('dead'); $connDot.classList.add('live');

$connLabel.textContent = 'Live';

const d = snap.val() || {};

S = {

game_log: d.game_log || '',

judge_move: d.judge_move || '',

challenge_counter: d.challenge_counter || 0,

game_timer: d.game_timer || null,

turn_timer: d.turn_timer || null,

replace_timer: d.replace_timer || null,

old_games: d.old_games || ''

};

renderBox($gameLog, S.game_log, 'No game in progress. Start a new game to begin.');

renderBox($judgeMove, S.judge_move, 'No move submitted yet.');

renderBox($oldGames, S.old_games, 'No previous games yet.');

$chalBadge.textContent = S.challenge_counter;

$gameLog.scrollTop = $gameLog.scrollHeight;

$judgeMove.scrollTop = $judgeMove.scrollHeight;

// Old games: scroll to top so most recent is visible

$oldGames.scrollTop = 0;

syncGameTimer(S.game_timer);

syncTurnTimer(S.turn_timer);

}, err => {

$connDot.classList.remove('live'); $connDot.classList.add('dead');

$connLabel.textContent = 'Disconnected';

console.error(err);

});

// ── Game timer ─────────────────────────────────────

function syncGameTimer(start){

clearInterval(gameTimerIv);

if(!start){ $gameTimerP.style.display='none'; return; }

$gameTimerP.style.display='flex';

const total = 4*60*60;

function tick(){

const elapsed = Math.floor((Date.now()-start)/1000);

const left = Math.max(0, total-elapsed);

$gameTimerV.textContent = fmt(left);

if(left<=0){ clearInterval(gameTimerIv); fireGameTimeout(); }

}

tick(); gameTimerIv=setInterval(tick,1000);

}

function fireGameTimeout(){

if(S.game_log && S.game_log.includes('game has timed out')) return;

const msg = `<div class="log-entry log-timeout">⌛ The game has timed out. Please start a new game.</div>`;

update(gRef, { game_log: S.game_log + msg, game_timer: null });

}

// ── Turn timer ─────────────────────────────────────

function syncTurnTimer(start){

clearInterval(turnTimerIv);

if(!start){ $turnTag.textContent='—'; $blockTimer.textContent='—'; return; }

const total = 3*60;

function tick(){

const elapsed = Math.floor((Date.now()-start)/1000);

const left = Math.max(0, total-elapsed);

const d = fmt(left);

$turnTag.textContent = d;

$blockTimer.textContent = d;

if(left<=0){ clearInterval(turnTimerIv); $turnTag.textContent='—'; update(gRef,{turn_timer:null}); }

}

tick(); turnTimerIv=setInterval(tick,1000);

}

// ── NEW GAME ───────────────────────────────────────

window.submitNewGame = async () => {

const text = document.getElementById('scenarioTA').value.trim();

if(!text){ toast('Please write a scenario first.'); return; }

// Archive current game_log to old_games before starting a new game

let newOldGames = S.old_games;

if(S.game_log && S.game_log.trim()){

const timestamp = new Date().toLocaleString(undefined, {

month: 'short', day: 'numeric', year: 'numeric',

hour: '2-digit', minute: '2-digit'

});

const divider = `<hr class="old-game-divider"><div class="log-entry log-tally">📅 Game ended ${timestamp}</div>`;

// Prepend so newest archived game appears at top

newOldGames = divider + S.game_log + newOldGames;

}

const scenarioHtml =

`<div class="log-entry log-scenario">📌 ${esc(text)}</div>`;

await set(gRef, {

game_log: scenarioHtml,

judge_move: '',

challenge_counter: 0,

game_timer: Date.now(),

turn_timer: null,

replace_timer: null,

old_games: newOldGames

});

document.getElementById('scenarioTA').value = '';

countChars(document.getElementById('scenarioTA'),'scenarioCount',500);

closeOverlay('newGameOverlay');

toast('New game started!');

};

// ── MAKE A MOVE ────────────────────────────────────

window.doMakeMove = () => {

if(S.turn_timer){

const elapsed = Math.floor((Date.now()-S.turn_timer)/1000);

if((3*60)-elapsed > 0){ openOverlay('timerBlockOverlay'); return; }

}

document.getElementById('moveTA').value='';

countChars(document.getElementById('moveTA'),'moveCount',200);

openOverlay('makeMoveOverlay');

};

window.submitMove = async () => {

const text = document.getElementById('moveTA').value.trim();

if(!text){ toast('Please write a move first.'); return; }

let newLog = S.game_log;

// 1. Copy current judge_move into game_log (preserving all HTML/formatting)

if(S.judge_move && S.judge_move.trim()){

newLog += S.judge_move;

// 2. Print challenge_counter tally below it

const plural = S.challenge_counter !== 1 ? 's' : '';

newLog += `<div class="log-entry log-tally">🗳 ${S.challenge_counter} Challenge${plural}</div>`;

}

// 3. New move goes into judge_move; reset counter; start turn timer

const moveHtml = `<div class="log-entry">${esc(text)}</div>`;

await update(gRef, {

game_log: newLog,

judge_move: moveHtml,

turn_timer: Date.now(),

challenge_counter: 0

});

document.getElementById('moveTA').value='';

countChars(document.getElementById('moveTA'),'moveCount',200);

closeOverlay('makeMoveOverlay');

toast('Move submitted!');

};

// ── SUMMARIZE ──────────────────────────────────────

window.doSummarize = () => {

document.getElementById('summaryTA').value='';

countChars(document.getElementById('summaryTA'),'summaryCount',50);

openOverlay('summarizeOverlay');

};

window.submitSummary = async () => {

const text = document.getElementById('summaryTA').value.trim();

if(!text){ toast('Please write a summary first.'); return; }

const html = `<div class="log-entry text-blue">📝 ${esc(text)}</div>`;

await update(gRef, { judge_move: S.judge_move + html });

document.getElementById('summaryTA').value='';

countChars(document.getElementById('summaryTA'),'summaryCount',50);

closeOverlay('summarizeOverlay');

toast('Summary added!');

};

// ── COMMENT ────────────────────────────────────────

window.doComment = () => {

document.getElementById('commentTA').value='';

countChars(document.getElementById('commentTA'),'commentCount',100);

openOverlay('commentOverlay');

};

window.submitComment = async () => {

const text = document.getElementById('commentTA').value.trim();

if(!text){ toast('Please write a comment first.'); return; }

const html = `<div class="log-entry text-green">💬 ${esc(text)}</div>`;

await update(gRef, { judge_move: S.judge_move + html });

document.getElementById('commentTA').value='';

countChars(document.getElementById('commentTA'),'commentCount',100);

closeOverlay('commentOverlay');

toast('Comment added!');

};

// ── CHALLENGE ──────────────────────────────────────

window.doChallenge = async () => {

if(!S.judge_move || !S.judge_move.trim()){ toast('No move to challenge yet.'); return; }

const newCount = S.challenge_counter + 1;

const roll = Math.floor(Math.random()*100)+1;

if(roll<=10){

// Success — strike through, add note, archive to game_log, clear judge_move

const struck = `<div style="text-decoration:line-through;opacity:0.55">${S.judge_move}</div>`;

const note = `<div class="log-entry text-challenged">⚔️ This move was successfully challenged. (roll: ${roll})</div>`;

const newLog = S.game_log + struck + note;

await update(gRef, {

challenge_counter: newCount,

judge_move: '',

game_log: newLog

});

document.getElementById('chalResultTitle').textContent = '⚔️ Challenge Succeeded!';

document.getElementById('chalResultBody').innerHTML =

`<span style="color:#6ac98a">Roll: ${roll} / 100 — needed 1–10.</span><br><br>The move was struck through and archived to the Game Log.`;

} else {

// Fail — just increment

await update(gRef, { challenge_counter: newCount });

document.getElementById('chalResultTitle').textContent = '🛡 Challenge Failed';

document.getElementById('chalResultBody').innerHTML =

`<span style="color:var(--text-dim)">Roll: ${roll} / 100 — needed 1–10.</span><br><br>The move stands.`;

}

openOverlay('challengeResultOverlay');

};

// ── REPLACE ────────────────────────────────────────

window.doReplace = () => {

if(!S.judge_move || !S.judge_move.trim()){ toast('No move to replace yet.'); return; }

if(S.challenge_counter > 0){ openOverlay('alreadyChallengedOverlay'); return; }

document.getElementById('replaceTA').value='';

document.getElementById('replaceTA').disabled=false;

countChars(document.getElementById('replaceTA'),'replaceCount',100);

openOverlay('replaceOverlay');

startReplaceTimer();

};

window.cancelReplace = () => {

clearInterval(replaceTimerIv);

document.getElementById('replaceTA').disabled=false;

closeOverlay('replaceOverlay');

};

function startReplaceTimer(){

clearInterval(replaceTimerIv);

replaceSecsLeft = 60;

document.getElementById('rbarFill').style.width='100%';

document.getElementById('rbarLabel').textContent='1:00 remaining';

replaceTimerIv = setInterval(()=>{

replaceSecsLeft--;

const pct = Math.max(0,(replaceSecsLeft/60)*100);

document.getElementById('rbarFill').style.width = pct+'%';

document.getElementById('rbarLabel').textContent = fmt(replaceSecsLeft)+' remaining';

if(replaceSecsLeft<=0){

clearInterval(replaceTimerIv);

const ta = document.getElementById('replaceTA');

ta.value="You've run out of time.";

ta.disabled=true;

countChars(ta,'replaceCount',100);

}

},1000);

}

window.submitReplacement = async () => {

const ta = document.getElementById('replaceTA');

const text = ta.value.trim();

if(!text || text==="You've run out of time."){ toast("Can't submit — no text or time expired."); return; }

clearInterval(replaceTimerIv);

ta.disabled=false;

const roll = Math.floor(Math.random()*2)+1;

if(roll===1){

// Success — strike old move, add note, archive; put replacement in judge_move

const struck = `<div style="text-decoration:line-through;opacity:0.55">${S.judge_move}</div>`;

const note = `<div class="log-entry text-replaced">🔄 This move was successfully replaced.</div>`;

const newLog = S.game_log + struck + note;

const newMove = `<div class="log-entry">${esc(text)}</div>`;

await update(gRef, { game_log: newLog, judge_move: newMove });

toast('Replacement succeeded!');

} else {

// Fail — strike proposed text, add note, append both to judge_move

const struckProp = `<div class="log-entry text-struck">${esc(text)}</div>`;

const failNote = `<div class="log-entry text-replace-fail">🚫 Someone tried unsuccessfully to replace this move.</div>`;

const newMove = S.judge_move + struckProp + failNote;

await update(gRef, { judge_move: newMove });

toast('Replacement failed — original stands.');

}

ta.value='';

countChars(ta,'replaceCount',100);

closeOverlay('replaceOverlay');

};

// ── Connection timeout fallback ────────────────────

setTimeout(()=>{

if($connLabel.textContent==='Connecting'){

$connDot.classList.add('dead');

$connLabel.textContent='Check connection';

}

},5000);

</script>

</body>

</html>

Below is the code for the Round Robin Game.

<!DOCTYPE html>

<head>

<title>Round Robin — The Argument Game</title>

<style>

:root {

--bg: #0d0d0d;

--card: #161616;

--border: #2a2a2a;

--accent: #c8a84b;

--accent2: #e05c3a;

--text: #e8e2d4;

--muted: #888;

--success: #4caf50;

--radius: 4px;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {

background: var(--bg);

color: var(--text);

font-family: 'IBM Plex Mono', monospace;

font-size: 13px;

line-height: 1.6;

padding: 12px;

min-height: 100vh;

}

h1 {

font-family: 'Playfair Display', serif;

font-size: 28px;

font-weight: 900;

color: var(--accent);

letter-spacing: -0.5px;

text-align: center;

margin-bottom: 4px;

}

.tagline {

text-align: center;

color: var(--muted);

font-size: 11px;

letter-spacing: 2px;

text-transform: uppercase;

margin-bottom: 16px;

}

.card {

background: var(--card);

border: 1px solid var(--border);

border-radius: var(--radius);

margin-bottom: 10px;

overflow: hidden;

}

.card-label {

background: var(--border);

color: var(--accent);

font-size: 10px;

letter-spacing: 2px;

text-transform: uppercase;

padding: 4px 10px;

font-weight: 500;

}

.card-body {

padding: 10px;

}

.scroll-block {

height: 120px;

overflow-y: auto;

white-space: pre-wrap;

word-break: break-word;

color: var(--text);

font-size: 12px;

line-height: 1.7;

scrollbar-width: thin;

scrollbar-color: var(--accent) var(--card);

}

.scroll-block::-webkit-scrollbar { width: 4px; }

.scroll-block::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.info-block {

white-space: pre-wrap;

word-break: break-word;

color: var(--text);

font-size: 12px;

min-height: 28px;

}

.who-next {

display: flex;

align-items: center;

gap: 10px;

padding: 12px;

background: var(--card);

border: 1px solid var(--border);

border-radius: var(--radius);

margin-bottom: 10px;

}

.who-next-label {

color: var(--muted);

font-size: 11px;

letter-spacing: 1px;

text-transform: uppercase;

flex: 1;

}

.player-num {

font-family: 'Playfair Display', serif;

font-size: 36px;

font-weight: 900;

color: var(--accent);

line-height: 1;

}

.player-num-label {

color: var(--muted);

font-size: 10px;

letter-spacing: 1px;

text-transform: uppercase;

}

.section-title {

color: var(--muted);

font-size: 10px;

letter-spacing: 2px;

text-transform: uppercase;

text-align: center;

padding: 6px 0;

border-top: 1px solid var(--border);

border-bottom: 1px solid var(--border);

margin-bottom: 10px;

}

btn, .btn {

display: block;

width: 100%;

padding: 12px 16px;

margin-bottom: 8px;

border: none;

border-radius: var(--radius);

font-family: 'IBM Plex Mono', monospace;

font-size: 12px;

font-weight: 500;

letter-spacing: 0.5px;

cursor: pointer;

transition: all 0.15s ease;

text-align: center;

}

.btn-primary {

background: var(--accent);

color: #0d0d0d;

}

.btn-primary:hover { background: #d4b455; }

.btn-danger {

background: var(--accent2);

color: #fff;

}

.btn-danger:hover { background: #e8694a; }

.btn-secondary {

background: transparent;

color: var(--accent);

border: 1px solid var(--accent);

}

.btn-secondary:hover { background: rgba(200,168,75,0.08); }

.btn-ghost {

background: transparent;

color: var(--muted);

border: 1px solid var(--border);

}

.btn-ghost:hover { border-color: var(--muted); color: var(--text); }

.btn-sm {

padding: 8px 12px;

font-size: 11px;

margin-bottom: 6px;

}

/* MODALS */

.overlay {

display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.85);

z-index: 100;

overflow-y: auto;

padding: 20px 12px;

}

.overlay.active { display: block; }

.modal {

background: #1a1a1a;

border: 1px solid var(--border);

border-radius: 6px;

padding: 16px;

max-width: 480px;

margin: 0 auto;

animation: modalIn 0.2s ease;

}

@keyframes modalIn {

from { transform: translateY(16px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

}

.modal-title {

font-family: 'Playfair Display', serif;

font-size: 18px;

color: var(--accent);

margin-bottom: 14px;

font-weight: 700;

}

.modal-text {

color: var(--muted);

font-size: 12px;

margin-bottom: 12px;

line-height: 1.7;

}

input[type="text"], textarea {

display: block;

width: 100%;

background: #111;

border: 1px solid var(--border);

border-radius: var(--radius);

color: var(--text);

font-family: 'IBM Plex Mono', monospace;

font-size: 12px;

padding: 10px;

margin-bottom: 10px;

resize: vertical;

outline: none;

transition: border-color 0.15s;

}

input[type="text"]:focus, textarea:focus {

border-color: var(--accent);

}

.field-label {

color: var(--accent);

font-size: 10px;

letter-spacing: 1px;

text-transform: uppercase;

margin-bottom: 4px;

}

input[type="number"] {

display: block;

width: 100%;

background: #111;

border: 1px solid var(--border);

border-radius: var(--radius);

color: var(--text);

font-family: 'IBM Plex Mono', monospace;

font-size: 24px;

padding: 10px;

margin-bottom: 10px;

outline: none;

text-align: center;

font-weight: 700;

}

input[type="number"]:focus { border-color: var(--accent); }

.divider {

border: none;

border-top: 1px solid var(--border);

margin: 10px 0;

}

.strikethrough { text-decoration: line-through; color: var(--muted); }

.status-dot {

display: inline-block;

width: 6px;

height: 6px;

border-radius: 50%;

background: var(--success);

margin-right: 6px;

animation: pulse 2s infinite;

}

@keyframes pulse {

0%, 100% { opacity: 1; }

50% { opacity: 0.3; }

}

.live-label {

font-size: 10px;

color: var(--muted);

letter-spacing: 1px;

text-transform: uppercase;

text-align: right;

margin-bottom: 10px;

}

</style>

</head>

<body>

<h1>Round Robin</h1>

<div class="tagline">The Argument Game</div>

</div>

<div class="who-next-label">Who goes next?<br>Player number:</div>

<div class="player-num-label">current</div>

</div>

<button class="btn btn-primary" onclick="openMakeArgument()">Click here to make your argument.</button>

<div class="section-title">The current argument</div>

<div class="card-label">Action</div>

</div>

<div class="card-label">Result</div>

</div>

<div class="card-label">First Reason</div>

</div>

<div class="card-label">Second Reason</div>

</div>

<div class="card-label">Third Reason</div>

</div>

<button class="btn btn-danger" onclick="openReferee()">Referee Judgement</button>

<button class="btn btn-secondary" onclick="openPlayerComment()">Make a player comment.</button>

<div class="card-label">Player Comments</div>

</div>

<div class="card-label">Referee Comments</div>

</div>

<button class="btn btn-ghost" onclick="openNewGame()">Start a New Game.</button>

<div class="card-label">Old Games</div>

</div>

<button class="btn btn-secondary" onclick="openJoin()">Join the game as a player</button>

<button class="btn btn-ghost" onclick="openLeave()">Leave the game</button>

<div class="modal-title">Start a New Game</div>

<div class="field-label">Title Scenario</div>

<button class="btn btn-primary" onclick="submitNewGame()">Submit New Game</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovNewGame')">Cancel</button>

</div>

<div class="field-label">Write your name here.</div>

<button class="btn btn-primary" onclick="submitJoin()">Submit name</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovJoin')">Cancel</button>

</div>

<div class="modal-text">I'm sorry. The game is full.</div>

<button class="btn btn-ghost" onclick="closeOverlay('ovFull');closeOverlay('ovJoin')">Return to the game.</button>

</div>

<div class="modal-title">Leave the Game</div>

<div class="modal-text">Which player are you?</div>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(1)">Player One</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(2)">Player Two</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(3)">Player Three</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(4)">Player Four</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(5)">Player Five</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(6)">Player Six</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(7)">Player Seven</button>

<button class="btn btn-ghost btn-sm" onclick="leavePlayer(8)">Player Eight</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovLeave')">Cancel</button>

</div>

<div class="modal-title">Make Your Argument</div>

<button class="btn btn-primary" onclick="closeOverlay('ovArgType');openStandalone()">Make a stand alone argument</button>

<button class="btn btn-secondary" onclick="closeOverlay('ovArgType');openCounterType()">Counter argue the last argument.</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovArgType')">Cancel</button>

</div>

<div class="modal-title">Counter Argue</div>

<button class="btn btn-danger" onclick="closeOverlay('ovCounterType');openArgForm('noactually')">No Actually</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovCounterType')">Cancel</button>

</div>

<div class="field-label">Action: What do people do?</div>

<div class="field-label">Result: What happens because of the action?</div>

<div class="field-label">Reason One</div>

<div class="field-label">Reason Two</div>

<div class="field-label">Reason Three</div>

<button class="btn btn-primary" onclick="submitArgForm()">Submit argument</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovArgForm')">Cancel</button>

</div>

<div class="modal-title">Referee Judgement</div>

<div class="field-label">Pick a number between 1 and 100.<br>This is the argument's % chance to happen.</div>

<button class="btn btn-primary btn-sm" onclick="submitRating()">Submit Rating</button>

<button class="btn btn-secondary btn-sm" onclick="openRefComment()">Referee Comment</button>

<button class="btn btn-danger btn-sm" onclick="resolveTurn()">Resolve Turn</button>

<button class="btn btn-ghost btn-sm" onclick="closeOverlay('ovReferee')">Cancel</button>

</div>

<div class="modal-title">Referee Comment</div>

<div class="field-label">Explain your ruling.</div>

<button class="btn btn-primary" onclick="submitRefComment()">Submit Referee Comment</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovRefComment')">Cancel</button>

</div>

<div class="modal-title">Player Comment</div>

<div class="field-label">Write your comment here.</div>

<button class="btn btn-primary" onclick="submitPlayerComment()">Submit Comment</button>

<button class="btn btn-ghost" onclick="closeOverlay('ovPlayerComment')">Cancel</button>

</div>

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";

import { getFirestore, doc, getDoc, setDoc, onSnapshot, updateDoc } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";

const firebaseConfig = {

apiKey: "AIzaSyA92SdKNL-GGZpyMtE768X_iUm0B0Hk6p0",

authDomain: "round-robin-game.firebaseapp.com",

projectId: "round-robin-game",

storageBucket: "round-robin-game.firebasestorage.app",

messagingSenderId: "635912071680",

appId: "1:635912071680:web:55f424bc828cfd327dc6e5"

};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

const gameRef = doc(db, "game_state", "main");

// Local state mirror

let gs = {};

// --- REALTIME LISTENER ---

onSnapshot(gameRef, (snap) => {

if (snap.exists()) {

gs = snap.data();

} else {

gs = {};

}

renderAll();

});

function renderAll() {

setText('gameLog', gs.game_log || '');

setText('playerCounter', gs.player_counter || '1');

setText('actionOne', gs.action_one || '');

setText('resultOne', gs.result_one || '');

setText('reasonOne', gs.reason_one || '');

setText('reasonTwo', gs.reason_two || '');

setText('reasonThree', gs.reason_three || '');

setText('playerComments', gs.player_comments || '');

setText('refereeComments', gs.referee_comments || '');

setText('oldGames', gs.old_games || '');

}

function setText(id, val) {

const el = document.getElementById(id);

if (el) el.textContent = val;

}

async function update(data) {

try {

const snap = await getDoc(gameRef);

if (snap.exists()) {

await updateDoc(gameRef, data);

} else {

await setDoc(gameRef, { ...defaultState(), ...data });

}

} catch(e) { console.error(e); alert('Firebase error: ' + e.message); }

}

function defaultState() {

return {

old_games: '', game_log: '', current_argument: '', action_one: '', result_one: '',

reason_one: '', reason_two: '', reason_three: '', player_counter: 1,

player_comments: '', referee_comments: '', argument_strength: 50,

Player_1: '', player_2: '', player_3: '', Player_4: '', player_5: '',

player_6: '', player_7: '', player_8: ''

};

}

function appendLog(existing, text) {

return existing ? existing + '\n' + text : text;

}

// ---- EXPOSE TO WINDOW ----

window.openMakeArgument = () => openOverlay('ovArgType');

window.openNewGame = () => openOverlay('ovNewGame');

window.openJoin = () => openOverlay('ovJoin');

window.openLeave = () => openOverlay('ovLeave');

window.openCounterType = () => openOverlay('ovCounterType');

window.openReferee = () => openOverlay('ovReferee');

window.openRefComment = () => openOverlay('ovRefComment');

window.openPlayerComment = () => openOverlay('ovPlayerComment');

window.closeOverlay = closeOverlay;

window.openStandalone = () => {

document.getElementById('argFormTitle').textContent = 'Stand Alone Argument';

document.getElementById('argFormSubtitle').textContent = 'Write your argument for what happens next here.';

document.getElementById('argAction').value = '';

document.getElementById('argAction').readOnly = false;

document.getElementById('argResult').value = '';

document.getElementById('argReason1').value = '';

document.getElementById('argReason2').value = '';

document.getElementById('argReason3').value = '';

window._argMode = 'standalone';

openOverlay('ovArgForm');

};

window.openArgForm = (mode) => {

window._argMode = mode;

const titles = {

yesand: ['Yes And', 'The last argument happened. Say what happens next.'],

yesbut: ['Yes But', 'The last action happens but there is a different result. What is it?'],

noactually: ['No Actually', "The previous argument doesn't happen. Instead this happens."]

};

const [title, sub] = titles[mode];

document.getElementById('argFormTitle').textContent = title;

document.getElementById('argFormSubtitle').textContent = sub;

document.getElementById('argAction').value = mode === 'yesbut' ? 'The last action happens. The result is changed.' : '';

document.getElementById('argAction').readOnly = mode === 'yesbut';

document.getElementById('argResult').value = '';

document.getElementById('argReason1').value = '';

document.getElementById('argReason2').value = '';

document.getElementById('argReason3').value = '';

openOverlay('ovArgForm');

};

window.submitArgForm = async () => {

const action = document.getElementById('argAction').value.trim();

const result = document.getElementById('argResult').value.trim();

const r1 = document.getElementById('argReason1').value.trim();

const r2 = document.getElementById('argReason2').value.trim();

const r3 = document.getElementById('argReason3').value.trim();

const updateData = {

action_one: action,

result_one: result,

reason_one: r1,

reason_two: r2,

reason_three: r3

};

if (window._argMode === 'noactually') {

const snap = await getDoc(gameRef);

const d = snap.exists() ? snap.data() : {};

const prefix = 'The previous action was over written. This is what actually happened.';

updateData.action_one = prefix + ' ' + action;

}

await update(updateData);

closeOverlay('ovArgForm');

};

window.passTurn = async () => {

const snap = await getDoc(gameRef);

const d = snap.exists() ? snap.data() : {};

const cur = parseInt(d.player_counter) || 1;

await update({ player_counter: cur + 1 });

};

window.submitNewGame = async () => {

const title = document.getElementById('newGameTitle').value.trim();

const snap = await getDoc(gameRef);

const d = snap.exists() ? snap.data() : {};

let logAccum = '';

const append = (t) => { if (t) logAccum += (logAccum ? '\n' : '') + t; };

append(d.action_one); append(d.result_one);

append(d.reason_one); append(d.reason_two); append(d.reason_three);

const newOldGames = d.old_games ? d.old_games + '\n' + (logAccum || '') : (logAccum || '');

await update({

action_one: '', result_one: '', reason_one: '', reason_two: '', reason_three: '',

game_log: title,

old_games: newOldGames,

player_counter: 1,

Player_1: '', player_2: '', player_3: '', Player_4: '',

player_5: '', player_6: '', player_7: '', player_8: ''

});

document.getElementById('newGameTitle').value = '';

closeOverlay('ovNewGame');

};

window.submitJoin = async () => {

const name = document.getElementById('joinName').value.trim();

if (!name) return;

const snap = await getDoc(gameRef);

const d = snap.exists() ? snap.data() : {};

const slots = ['Player_1','player_2','player_3','Player_4','player_5','player_6','player_7','player_8'];

let found = false;

for (const slot of slots) {

if (!d[slot]) {

await update({ [slot]: name });

found = true;

document.getElementById('joinName').value = '';

closeOverlay('ovJoin');

break;

}

if (!found) openOverlay('ovFull');

};

window.leavePlayer = async (num) => {

const slotMap = {1:'Player_1',2:'player_2',3:'player_3',4:'Player_4',5:'player_5',6:'player_6',7:'player_7',8:'player_8'};

const slot = slotMap[num];

const snap = await getDoc(gameRef);

const d = snap.exists() ? snap.data() : {};

const name = d[slot] || 'Unknown';

const newLog = appendLog(d.game_log || '', name + ' has left the game.');

await update({ [slot]: '', game_log: newLog });

closeOverlay('ovLeave');

};

window.submitRating = async () => {

const val = parseInt(document.getElementById('argStrengthInput').value);

if (isNaN(val)) return;

await update({ argument_strength: val });

};

window.submitRefComment = async () => {

const text = document.getElementById('refCommentText').value.trim();

await update({ referee_comments: text });

document.getElementById('refCommentText').value = '';

closeOverlay('ovRefComment');

};

window.submitPlayerComment = async () => {

const text = document.getElementById('playerCommentText').value.trim();

await update({ player_comments: text });

document.getElementById('playerCommentText').value = '';

closeOverlay('ovPlayerComment');

};

window.resolveTurn = async () => {

const snap = await getDoc(gameRef);

const d = snap.exists() ? snap.data() : {};

const strength = parseInt(d.argument_strength) || 50;

const roll = Math.floor(Math.random() * 100) + 1;

const cur = parseInt(d.player_counter) || 1;

let newLog = d.game_log || '';

const append = (t) => { if (t) newLog += (newLog ? '\n' : '') + t; };

if (roll <= strength) {

// SUCCESS

append(d.action_one); append(d.result_one);

append(d.reason_one); append(d.reason_two); append(d.reason_three);

append('Argument Strength: ' + strength);

append(d.player_comments); append(d.referee_comments);

await update({

game_log: newLog,

action_one: '', result_one: '', reason_one: '', reason_two: '', reason_three: '',

player_counter: cur + 1,

player_comments: '', referee_comments: ''

});

} else {

// FAIL — strikethrough via unicode combining

const strike = (s) => s ? s.split('').map(c => c + '\u0336').join('') : '';

const argText = [d.action_one, d.result_one, d.reason_one, d.reason_two, d.reason_three].filter(Boolean).join('\n');

const struck = strike(argText);

let current_argument = (d.current_argument || '') + (d.current_argument ? '\n' : '') + struck;

append('The argument failed');

append(struck);

append('Argument Strength: ' + strength);

append(d.player_comments); append(d.referee_comments);

await update({

game_log: newLog,

current_argument,

action_one: '', result_one: '', reason_one: '', reason_two: '', reason_three: '',

player_counter: cur + 1,

player_comments: '', referee_comments: ''

});

}

closeOverlay('ovReferee');

};

// OVERLAY HELPERS

function openOverlay(id) {

document.getElementById(id).classList.add('active');

}

function closeOverlay(id) {

document.getElementById(id).classList.remove('active');

}

</script>

</body>

</html>

Below is the code for the Three Options Game.

<!DOCTYPE html>

<head>

<title>Three Options Game</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=VT323&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--bg-primary: #0a0e27;

--bg-secondary: #151933;

--bg-tertiary: #1a1f3a;

--accent-primary: #00ff88;

--accent-secondary: #ff0080;

--accent-tertiary: #00d4ff;

--text-primary: #e0e6ff;

--text-secondary: #8b92b8;

--border-color: #2a3150;

--shadow-glow: rgba(0, 255, 136, 0.3);

}

body {

font-family: 'Courier Prime', monospace;

background: var(--bg-primary);

color: var(--text-primary);

line-height: 1.6;

min-height: 100vh;

overflow-x: hidden;

position: relative;

}

body::before {

content: '';

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background:

radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.05) 0%, transparent 50%),

radial-gradient(circle at 80% 70%, rgba(255, 0, 128, 0.05) 0%, transparent 50%);

pointer-events: none;

z-index: 0;

}

.container {

max-width: 800px;

margin: 0 auto;

padding: 20px;

position: relative;

z-index: 1;

}

.header {

text-align: center;

margin-bottom: 30px;

padding: 20px;

background: var(--bg-secondary);

border: 2px solid var(--border-color);

border-radius: 8px;

box-shadow: 0 0 20px var(--shadow-glow);

}

.header h1 {

font-family: 'VT323', monospace;

font-size: 2.5rem;

color: var(--accent-primary);

text-shadow: 0 0 10px var(--shadow-glow);

letter-spacing: 2px;

margin-bottom: 10px;

}

.turn-counter {

font-size: 1.2rem;

color: var(--accent-tertiary);

font-weight: bold;

}

.game-events {

background: var(--bg-secondary);

border: 2px solid var(--border-color);

border-radius: 8px;

padding: 20px;

margin-bottom: 20px;

min-height: 150px;

max-height: 400px;

overflow-y: auto;

white-space: pre-wrap;

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

position: relative;

}

.game-events::-webkit-scrollbar {

width: 10px;

}

.game-events::-webkit-scrollbar-track {

background: var(--bg-tertiary);

border-radius: 5px;

}

.game-events::-webkit-scrollbar-thumb {

background: var(--accent-primary);

border-radius: 5px;

}

.game-events::-webkit-scrollbar-thumb:hover {

background: var(--accent-tertiary);

}

.game-events::before {

content: '> GAME LOG';

position: absolute;

top: -12px;

left: 15px;

background: var(--bg-primary);

padding: 0 10px;

color: var(--accent-primary);

font-size: 0.85rem;

font-weight: bold;

}

.action-buttons {

display: flex;

gap: 10px;

margin-bottom: 30px;

flex-wrap: wrap;

}

.btn {

flex: 1;

min-width: 120px;

padding: 12px 20px;

background: var(--bg-tertiary);

color: var(--text-primary);

border: 2px solid var(--border-color);

border-radius: 6px;

font-family: 'Courier Prime', monospace;

font-size: 1rem;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 1px;

}

.btn:hover {

background: var(--accent-primary);

color: var(--bg-primary);

border-color: var(--accent-primary);

transform: translateY(-2px);

box-shadow: 0 5px 15px var(--shadow-glow);

}

.btn:active {

transform: translateY(0);

}

.btn.admin-btn {

background: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));

}

.btn.admin-btn:hover {

box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4);

}

.option-card {

background: var(--bg-secondary);

border: 2px solid var(--border-color);

border-radius: 8px;

padding: 20px;

margin-bottom: 20px;

transition: all 0.3s ease;

}

.option-card:hover {

border-color: var(--accent-primary);

box-shadow: 0 0 15px var(--shadow-glow);

}

.option-header {

font-family: 'VT323', monospace;

font-size: 1.5rem;

color: var(--accent-tertiary);

margin-bottom: 10px;

display: flex;

justify-content: space-between;

align-items: center;

}

.rating-badge {

padding: 5px 12px;

border-radius: 4px;

font-size: 0.9rem;

font-weight: bold;

}

.rating-badge.strong {

background: var(--accent-primary);

color: var(--bg-primary);

}

.rating-badge.weak {

background: var(--accent-secondary);

color: var(--text-primary);

}

.option-text {

min-height: 60px;

margin-bottom: 15px;

white-space: pre-wrap;

line-height: 1.8;

}

.option-controls {

display: flex;

gap: 10px;

flex-wrap: wrap;

align-items: center;

}

.vote-btn {

padding: 8px 15px;

background: var(--bg-tertiary);

border: 2px solid var(--border-color);

border-radius: 4px;

color: var(--text-primary);

cursor: pointer;

font-size: 1.2rem;

transition: all 0.2s ease;

}

.vote-btn:hover {

transform: scale(1.1);

}

.vote-btn.thumbs-up:hover {

background: var(--accent-primary);

border-color: var(--accent-primary);

}

.vote-btn.thumbs-down:hover {

background: var(--accent-secondary);

border-color: var(--accent-secondary);

}

.vote-count {

padding: 8px 12px;

background: var(--bg-tertiary);

border-radius: 4px;

font-weight: bold;

color: var(--accent-tertiary);

}

.small-btn {

padding: 8px 15px;

background: var(--bg-tertiary);

border: 2px solid var(--border-color);

border-radius: 4px;

color: var(--text-primary);

cursor: pointer;

font-size: 0.9rem;

transition: all 0.2s ease;

font-family: 'Courier Prime', monospace;

font-weight: bold;

}

.small-btn:hover {

background: var(--accent-tertiary);

border-color: var(--accent-tertiary);

color: var(--bg-primary);

}

/* Modal Styles */

.modal {

display: none;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(10, 14, 39, 0.95);

z-index: 1000;

justify-content: center;

align-items: center;

padding: 20px;

backdrop-filter: blur(5px);

}

.modal.active {

display: flex;

}

.modal-content {

background: var(--bg-secondary);

border: 2px solid var(--accent-primary);

border-radius: 8px;

padding: 30px;

max-width: 500px;

width: 100%;

box-shadow: 0 0 30px var(--shadow-glow);

animation: modalSlideIn 0.3s ease;

}

@keyframes modalSlideIn {

from {

transform: translateY(-50px);

opacity: 0;

}

to {

transform: translateY(0);

opacity: 1;

}

.modal-header {

font-family: 'VT323', monospace;

font-size: 1.8rem;

color: var(--accent-primary);

margin-bottom: 20px;

text-align: center;

}

.modal-text {

font-size: 1.1rem;

color: var(--text-primary);

margin-bottom: 20px;

text-align: center;

line-height: 1.6;

}

.modal-textarea {

width: 100%;

min-height: 120px;

padding: 15px;

background: var(--bg-tertiary);

border: 2px solid var(--border-color);

border-radius: 6px;

color: var(--text-primary);

font-family: 'Courier Prime', monospace;

font-size: 1rem;

resize: vertical;

margin-bottom: 15px;

}

.modal-textarea:focus {

outline: none;

border-color: var(--accent-primary);

box-shadow: 0 0 10px var(--shadow-glow);

}

.char-counter {

text-align: right;

color: var(--text-secondary);

font-size: 0.85rem;

margin-bottom: 15px;

}

.modal-buttons {

display: flex;

gap: 10px;

}

.rating-buttons {

display: flex;

gap: 10px;

margin-bottom: 20px;

}

.rating-btn {

flex: 1;

padding: 15px;

font-size: 1.2rem;

font-weight: bold;

border: 2px solid var(--border-color);

border-radius: 6px;

cursor: pointer;

transition: all 0.2s ease;

font-family: 'VT323', monospace;

}

.rating-btn.strong {

background: var(--accent-primary);

color: var(--bg-primary);

}

.rating-btn.weak {

background: var(--accent-secondary);

color: var(--text-primary);

}

.rating-btn:hover {

transform: scale(1.05);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

}

/* Mobile optimizations */

@media (max-width: 600px) {

.container {

padding: 15px;

}

.header h1 {

font-size: 2rem;

}

.option-controls {

justify-content: space-between;

}

.modal-content {

padding: 20px;

}

/* Loading indicator */

.loading {

text-align: center;

color: var(--accent-primary);

padding: 20px;

font-size: 1.2rem;

}

.loading::after {

content: '...';

animation: dots 1.5s steps(4, end) infinite;

}

@keyframes dots {

0%, 20% { content: '.'; }

40% { content: '..'; }

60%, 100% { content: '...'; }

}

</style>

</head>

<body>

<h1>⚡ THREE OPTIONS GAME ⚡</h1>

</div>

<div class="loading">Connecting to game server</div>

</div>

</div>

<span>[ OPTION A ]</span>

</div>

<span class="vote-count"><span id="aLikes">0</span> likes</span>

<span class="vote-count"><span id="aDislikes">0</span> dislikes</span>

<button class="small-btn" onclick="openCommentModal('A')">Comment</button>

<button class="small-btn" onclick="openAdminModal('A')">Admin</button>

</div>

<span>[ OPTION B ]</span>

</div>

<span class="vote-count"><span id="bLikes">0</span> likes</span>

<span class="vote-count"><span id="bDislikes">0</span> dislikes</span>

<button class="small-btn" onclick="openCommentModal('B')">Comment</button>

<button class="small-btn" onclick="openAdminModal('B')">Admin</button>

</div>

<span>[ OPTION C ]</span>

</div>

<span class="vote-count"><span id="cLikes">0</span> likes</span>

<span class="vote-count"><span id="cDislikes">0</span> dislikes</span>

<button class="small-btn" onclick="openCommentModal('C')">Comment</button>

<button class="small-btn" onclick="openAdminModal('C')">Admin</button>

</div>

<button class="btn admin-btn" onclick="openNewAdminModal()">New Admin</button>

<button class="btn admin-btn" onclick="openResolveTurnModal()">Resolve Turn</button>

</div>

<div class="modal-header">START NEW GAME</div>

<button class="btn" onclick="startNewGame()">Start New Game</button>

<button class="btn" onclick="closeModal('newAdminModal')">Cancel</button>

</div>

<div class="modal-header">SUBMIT YOUR MOVE</div>

<button class="btn" onclick="submitMove()">Submit Move</button>

<button class="btn" onclick="closeModal('makeMoveModal')">Cancel</button>

</div>

<div class="modal-header">ADD COMMENT</div>

<button class="btn" onclick="submitComment()">Submit Comment</button>

<button class="btn" onclick="closeModal('commentModal')">Cancel</button>

</div>

<div class="modal-header">ADMIN CONTROLS</div>

<button class="rating-btn strong" onclick="setRating('Strong')">STRONG</button>

</div>

<button class="btn" onclick="submitRefereeComment()">Submit Comment</button>

<button class="btn" onclick="closeModal('adminModal')">Return</button>

</div>

<div class="modal-header">RESOLVE TURN</div>

<div class="modal-text">Has the referee marked the strongest option and the weakest option?</div>

</div>

// Firebase configuration

const firebaseConfig = {

apiKey: "AIzaSyBt-a_veb_XSzHA1ffl9MHjBuJfH3AItIY",

authDomain: "three-option-game.firebaseapp.com",

databaseURL: "https://three-option-game-default-rtdb.firebaseio.com",

projectId: "three-option-game",

storageBucket: "three-option-game.firebasestorage.app",

messagingSenderId: "282784686881",

appId: "1:282784686881:web:4d92a6fe06ffc2543ed460",

measurementId: "G-G2WH1ZCK4H"

};

// Import Firebase modules

import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';

import { getDatabase, ref, onValue, set, get, update } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js';

// Initialize Firebase

const app = initializeApp(firebaseConfig);

const database = getDatabase(app);

// Global variables

let currentOption = null; // For comment and admin modals

// Character counters

document.getElementById('scenarioText').addEventListener('input', (e) => {

document.getElementById('scenarioCounter').textContent = e.target.value.length;

});

document.getElementById('moveText').addEventListener('input', (e) => {

document.getElementById('moveCounter').textContent = e.target.value.length;

});

document.getElementById('commentText').addEventListener('input', (e) => {

document.getElementById('commentCounter').textContent = e.target.value.length;

});

document.getElementById('refCommentText').addEventListener('input', (e) => {

document.getElementById('refCommentCounter').textContent = e.target.value.length;

});

// Initialize game state listener

function initializeGameState() {

const gameStateRef = ref(database, 'Game_state');

onValue(gameStateRef, (snapshot) => {

const data = snapshot.val();

if (data) {

updateUI(data);

} else {

// Initialize game state if doesn't exist

initializeFirstState();

}

});

}

function initializeFirstState() {

const initialState = {

Turn_counter: 1,

Game_event: "Waiting for admin to start the game...",

Option_A: "",

Alikes_count: 0,

Adislikes_count: 0,

A_rating: "",

A_comments: "",

A_admin: "",

Option_B: "",

Blikes_count: 0,

Bdislikes_count: 0,

B_rating: "",

B_comments: "",

B_admin: "",

Option_C: "",

Clikes_count: 0,

Cdislikes_count: 0,

C_rating: "",

C_comments: "",

C_admin: "",

New_game: ""

};

set(ref(database, 'Game_state'), initialState);

}

function updateUI(data) {

// Update turn counter

document.getElementById('turnNumber').textContent = data.Turn_counter || 1;

// Update game events

document.getElementById('gameEvents').innerHTML = formatText(data.Game_event || "Waiting for game to start...");

// Update Option A

document.getElementById('optionAText').innerHTML = formatText(data.Option_A || "");

document.getElementById('aLikes').textContent = data.Alikes_count || 0;

document.getElementById('aDislikes').textContent = data.Adislikes_count || 0;

updateRatingBadge('A', data.A_rating);

// Update Option B

document.getElementById('optionBText').innerHTML = formatText(data.Option_B || "");

document.getElementById('bLikes').textContent = data.Blikes_count || 0;

document.getElementById('bDislikes').textContent = data.Bdislikes_count || 0;

updateRatingBadge('B', data.B_rating);

// Update Option C

document.getElementById('optionCText').innerHTML = formatText(data.Option_C || "");

document.getElementById('cLikes').textContent = data.Clikes_count || 0;

document.getElementById('cDislikes').textContent = data.Cdislikes_count || 0;

updateRatingBadge('C', data.C_rating);

}

function formatText(text) {

if (!text) return "";

// Preserve formatting markers and convert to HTML

return text.replace(/\n/g, '<br>');

}

function updateRatingBadge(option, rating) {

const badge = document.getElementById('rating' + option);

if (rating === "Strong" || rating === "Weak") {

badge.textContent = rating.toUpperCase();

badge.className = 'rating-badge ' + rating.toLowerCase();

badge.style.display = 'inline-block';

} else {

badge.style.display = 'none';

}

// Modal functions

window.openNewAdminModal = function() {

document.getElementById('newAdminModal').classList.add('active');

document.getElementById('scenarioText').value = '';

document.getElementById('scenarioCounter').textContent = '0';

};

window.openMakeMoveModal = function() {

document.getElementById('makeMoveModal').classList.add('active');

document.getElementById('moveText').value = '';

document.getElementById('moveCounter').textContent = '0';

};

window.openCommentModal = function(option) {

currentOption = option;

document.getElementById('commentModal').classList.add('active');

document.getElementById('commentText').value = '';

document.getElementById('commentCounter').textContent = '0';

};

window.openAdminModal = function(option) {

currentOption = option;

document.getElementById('adminModal').classList.add('active');

document.getElementById('refCommentText').value = '';

document.getElementById('refCommentCounter').textContent = '0';

};

window.openResolveTurnModal = function() {

document.getElementById('resolveTurnModal').classList.add('active');

};

window.closeModal = function(modalId) {

document.getElementById(modalId).classList.remove('active');

};

// Start new game

window.startNewGame = async function() {

const scenarioText = document.getElementById('scenarioText').value.trim();

if (!scenarioText) {

alert("Please enter a scenario!");

return;

}

const boldScenario = '<b>' + scenarioText + '</b>';

const gameStateRef = ref(database, 'Game_state');

await update(gameStateRef, {

Game_event: boldScenario,

Turn_counter: 1

});

closeModal('newAdminModal');

};

// Submit move

window.submitMove = async function() {

const moveText = document.getElementById('moveText').value.trim();

if (!moveText) {

alert("Please enter a move!");

return;

}

try {

const gameStateRef = ref(database, 'Game_state');

const snapshot = await get(gameStateRef);

const data = snapshot.val();

if (!data) {

alert("Game state not found. Please initialize the game first.");

return;

}

if (!data.Option_A || data.Option_A === "") {

await update(gameStateRef, { Option_A: moveText });

} else if (!data.Option_B || data.Option_B === "") {

await update(gameStateRef, { Option_B: moveText });

} else if (!data.Option_C || data.Option_C === "") {

await update(gameStateRef, { Option_C: moveText });

} else {

// All options filled

alert("The options are already filled. Try again next turn.");

closeModal('makeMoveModal');

return;

}

document.getElementById('moveText').value = '';

document.getElementById('moveCounter').textContent = '0';

closeModal('makeMoveModal');

} catch (error) {

console.error("Error in submitMove:", error);

alert("Error submitting move: " + error.message);

}

};

// Vote function

window.vote = async function(option, type) {

const gameStateRef = ref(database, 'Game_state');

const snapshot = await get(gameStateRef);

const data = snapshot.val();

const field = option + (type === 'like' ? 'likes_count' : 'dislikes_count');

const currentCount = data[field] || 0;

const updates = {};

updates[field] = currentCount + 1;

await update(gameStateRef, updates);

};

// Submit comment

window.submitComment = async function() {

const commentText = document.getElementById('commentText').value.trim();

if (!commentText) {

alert("Please enter a comment!");

return;

}

const italicComment = '<i>' + commentText + '</i>';

const gameStateRef = ref(database, 'Game_state');

const snapshot = await get(gameStateRef);

const data = snapshot.val();

const optionField = 'Option_' + currentOption;

const currentText = data[optionField] || "";

const newText = currentText + (currentText ? '\n' : '') + italicComment;

const updates = {};

updates[optionField] = newText;

await update(gameStateRef, updates);

closeModal('commentModal');

};

// Set rating

window.setRating = async function(rating) {

const gameStateRef = ref(database, 'Game_state');

const updates = {};

updates[currentOption + '_rating'] = rating;

await update(gameStateRef, updates);

};

// Submit referee comment

window.submitRefereeComment = async function() {

const refCommentText = document.getElementById('refCommentText').value.trim();

if (!refCommentText) {

alert("Please enter a comment!");

return;

}

const redComment = '<span style="color: var(--accent-secondary);">' + refCommentText + '</span>';

const gameStateRef = ref(database, 'Game_state');

const snapshot = await get(gameStateRef);

const data = snapshot.val();

const optionField = 'Option_' + currentOption;

const currentText = data[optionField] || "";

const newText = currentText + (currentText ? '\n' : '') + redComment;

const updates = {};

updates[optionField] = newText;

await update(gameStateRef, updates);

document.getElementById('refCommentText').value = '';

document.getElementById('refCommentCounter').textContent = '0';

};

// Confirm and resolve turn with new logic

window.confirmResolveTurn = async function() {

closeModal('resolveTurnModal');

const gameStateRef = ref(database, 'Game_state');

const snapshot = await get(gameStateRef);

const data = snapshot.val();

// Generate random number 1-10

const randomNum = Math.floor(Math.random() * 10) + 1;

// Determine winner based on the new logic

let winner = null;

const ratings = {

A: data.A_rating,

B: data.B_rating,

C: data.C_rating

};

if (randomNum >= 1 && randomNum <= 6) {

// Look for Strong rating

if (ratings.A === 'Strong') {

winner = 'A';

} else if (ratings.B === 'Strong') {

winner = 'B';

} else if (ratings.C === 'Strong') {

winner = 'C';

}

} else if (randomNum >= 7 && randomNum <= 9) {

// Look for empty rating

if (!ratings.A || ratings.A === '') {

winner = 'A';

} else if (!ratings.B || ratings.B === '') {

winner = 'B';

} else if (!ratings.C || ratings.C === '') {

winner = 'C';

}

} else if (randomNum === 10) {

// Look for Weak rating

if (ratings.A === 'Weak') {

winner = 'A';

} else if (ratings.B === 'Weak') {

winner = 'B';

} else if (ratings.C === 'Weak') {

winner = 'C';

}

// Default to A if no winner found

if (!winner) {

winner = 'A';

}

// Add "This move won." to the winning option

let optionAText = data.Option_A || "";

let optionBText = data.Option_B || "";

let optionCText = data.Option_C || "";

if (winner === 'A') {

optionAText += '\nThis move won.';

} else if (winner === 'B') {

optionBText += '\nThis move won.';

} else if (winner === 'C') {

optionCText += '\nThis move won.';

}

// Build game event text with current game event

let gameEvent = data.Game_event || "";

// Add Option A

if (optionAText) {

gameEvent += '\n\n' + optionAText;

gameEvent += '\n' + (data.Alikes_count || 0) + ' Likes';

gameEvent += '\n' + (data.Adislikes_count || 0) + ' Dislikes';

}

// Add Option B

if (optionBText) {

gameEvent += '\n\n' + optionBText;

gameEvent += '\n' + (data.Blikes_count || 0) + ' Likes';

gameEvent += '\n' + (data.Bdislikes_count || 0) + ' Dislikes';

}

// Add Option C

if (optionCText) {

gameEvent += '\n\n' + optionCText;

gameEvent += '\n' + (data.Clikes_count || 0) + ' Likes';

gameEvent += '\n' + (data.Cdislikes_count || 0) + ' Dislikes';

}

// Update game state: increment turn counter, update game event, and reset options

await update(gameStateRef, {

Turn_counter: (data.Turn_counter || 1) + 1,

Game_event: gameEvent,

Option_A: "",

Option_B: "",

Option_C: "",

Alikes_count: 0,

Adislikes_count: 0,

Blikes_count: 0,

Bdislikes_count: 0,

Clikes_count: 0,

Cdislikes_count: 0,

A_rating: "",

B_rating: "",

C_rating: ""

});

};

// Initialize on load

initializeGameState();

</script>

</body>

</html>