|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="NOT ME - A voice deduction game powered by AI">
|
|
|
|
<title>NOT ME - Voice Deduction Game</title>
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
|
|
<link rel="stylesheet" href="static/css/styles.css">
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="webgl-background"></canvas>
|
|
|
|
|
|
<button id="settings-button" class="settings-button hidden">
|
|
<span class="settings-icon">⚙️</span>
|
|
</button>
|
|
|
|
|
|
<div id="game-container">
|
|
|
|
<div id="landing-page" class="game-page active">
|
|
<h1 class="game-title">
|
|
NOT <span class="title-emphasis">ME</span>
|
|
</h1>
|
|
<button id="play-button" class="button primary-button">PLAY</button>
|
|
</div>
|
|
|
|
|
|
<div id="setup-page" class="game-page">
|
|
<h2 class="page-title">Player Setup</h2>
|
|
<div id="player-list" class="player-grid"></div>
|
|
<div class="setup-controls">
|
|
<button id="add-player-button" class="button secondary-button">Add Player</button>
|
|
<button id="start-button" class="button primary-button" disabled>Start Game</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="recording-page" class="game-page">
|
|
<div id="timer-display" class="timer"></div>
|
|
<div id="question-display" class="question-box"></div>
|
|
|
|
|
|
<div class="recording-controls">
|
|
<canvas id="recording-visualizer" class="visualizer"></canvas>
|
|
<button id="record-button" class="button record-button">Start Recording</button>
|
|
<div class="recording-time"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="listening-page" class="game-page">
|
|
<div id="timer-display" class="timer"></div>
|
|
<h2 class="page-title">Listen to Responses</h2>
|
|
<div id="recordings-list" class="recordings-grid">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="voting-page" class="game-page">
|
|
<div id="timer-display" class="timer"></div>
|
|
<h2 class="page-title">Vote for the Impostor</h2>
|
|
<div id="voting-options" class="voting-grid">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="results-page" class="game-page">
|
|
<h2 class="page-title">Round Results</h2>
|
|
<div id="results-content" class="results-container">
|
|
|
|
</div>
|
|
<button id="next-round-button" class="button primary-button">Next Round</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="loading-overlay" class="overlay">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-message">Loading...</div>
|
|
</div>
|
|
|
|
<div id="error-overlay" class="overlay">
|
|
<div class="error-message"></div>
|
|
</div>
|
|
|
|
<div id="settings-overlay" class="overlay">
|
|
<div class="settings-panel">
|
|
<h3>Game Settings</h3>
|
|
<div class="settings-options">
|
|
<div class="setting-item">
|
|
<label for="dark-mode">Dark Mode</label>
|
|
<input type="checkbox" id="dark-mode" checked>
|
|
</div>
|
|
<div class="setting-item">
|
|
<label for="sound-effects">Sound Effects</label>
|
|
<input type="checkbox" id="sound-effects" checked>
|
|
</div>
|
|
</div>
|
|
<button id="exit-game" class="button secondary-button">Exit Game</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="module" src="static/js/background.js"></script>
|
|
<script type="module" src="static/js/audio.js"></script>
|
|
<script type="module" src="static/js/ui.js"></script>
|
|
<script type="module" src="static/js/game.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
document.addEventListener('click', function initAudioContext() {
|
|
if (!window.audioContext) {
|
|
window.audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
}
|
|
document.removeEventListener('click', initAudioContext);
|
|
}, { once: true });
|
|
</script>
|
|
</body>
|
|
</html> |
