Spaces:

Mistral-AI-Game-Jam
/

team_16trial

Running

App Files Files Community

team_16trial / templates /index.html

dcrey7

Update templates/index.html

8e5f40f verified 3 months ago

raw

history blame contribute delete

5.59 kB

	<!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>

	<!-- Import the Pixelify Sans font for our game's unique style -->
	<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

	<!-- Main stylesheet -->
	<link rel="stylesheet" href="static/css/styles.css">

	<!-- Socket.IO client for real-time communication -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>

	<!-- Three.js for background animations -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	</head>
	<body>
	<!-- WebGL background container for particle effects -->
	<canvas id="webgl-background"></canvas>

	<!-- Settings button that appears after game starts -->
	<button id="settings-button" class="settings-button hidden">
	<span class="settings-icon">⚙️</span>
	</button>

	<!-- Main game container -->
	<div id="game-container">
	<!-- Landing Page -->
	<div id="landing-page" class="game-page active">
	<h1 class="game-title">
	<span class="title-not">NOT</span>
	<span class="title-emphasis">ME</span>
	</h1>
	<a href="https://kzmfxhmwlhhk4744jex5.lite.vusercontent.net/">
	<button id="play-button" class="button primary-button">PLAY</button>
	</div>

	<!-- Player Setup Page -->
	<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>

	<!-- Game Page (Recording Phase) -->
	<div id="recording-page" class="game-page">
	<div id="timer-display" class="timer"></div>
	<div id="question-display" class="question-box"></div>

	<!-- Recording interface -->
	<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>

	<!-- Listening Phase -->
	<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">
	<!-- Recording playback buttons will be dynamically added here -->
	</div>
	</div>

	<!-- Voting Phase -->
	<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">
	<!-- Voting buttons will be dynamically added here -->
	</div>
	</div>

	<!-- Results Page -->
	<div id="results-page" class="game-page">
	<h2 class="page-title">Round Results</h2>
	<div id="results-content" class="results-container">
	<!-- Results will be dynamically added here -->
	</div>
	<button id="next-round-button" class="button primary-button">Next Round</button>
	</div>
	</div>

	<!-- Overlay containers -->
	<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>

	<!-- Game scripts -->
	<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>

	<!-- Audio context initialization script -->
	<script>
	// Initialize audio context on user interaction
	document.addEventListener('click', function initAudioContext() {
	if (!window.audioContext) {
	window.audioContext = new (window.AudioContext \|\| window.webkitAudioContext)();
	}
	document.removeEventListener('click', initAudioContext);
	}, { once: true });
	</script>
	</body>
	</html>