Spaces:

Renday
/

Rengarace

Sleeping

App Files Files Community

Renday commited on Jan 26

Commit

40208b1

verified ·

1 Parent(s): 29704a2

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +161 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ren-Ga Racing Internal</title>
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
+        body { font-family: 'Inter', sans-serif; background: transparent; margin: 0; color: white; }
+        .horse-track {
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 999px;
+            height: 40px;
+            position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            overflow: hidden;
+        }
+        .horse-icon {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            transition: left 0.1s linear;
+            font-size: 24px;
+            filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
+        }
+        .poker-card {
+            background: linear-gradient(145deg, #1e293b, #0f172a);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        #login-screen {
+            background: radial-gradient(circle at center, #1a1c2c 0%, #0a0a0a 100%);
+        }
+    </style>
+</head>
+<body class="overflow-hidden">
+    <div id="login-area" class="fixed inset-0 z-50 flex items-center justify-center p-6">
+        <div class="w-full max-w-sm text-center p-8 rounded-[2.5rem] bg-gray-900 border border-yellow-500/30 shadow-2xl">
+            <h1 class="text-4xl font-black text-yellow-500 mb-2 italic uppercase">Join Race</h1>
+            <p class="text-gray-400 text-[10px] tracking-widest uppercase mb-8">GamerJam Casino Login</p>
+            <input type="email" id="email" placeholder="E-Mail Adresse"
+                class="w-full bg-gray-800 border border-gray-700 text-white px-6 py-4 rounded-2xl mb-4 outline-none focus:border-yellow-500 text-center transition-all">
+            <button onclick="doLogin()" class="bg-red-600 hover:bg-red-500 w-full py-4 rounded-2xl font-black uppercase tracking-widest transition-all active:scale-95 shadow-lg">
+                An den Tisch
+            </button>
+        </div>
+    </div>
+    <div id="game-area" class="hidden min-h-screen p-4 flex flex-col">
+        <header class="flex justify-between items-center bg-black/40 p-4 rounded-3xl border border-white/5 mb-6">
+            <div class="flex gap-8">
+                <div>
+                    <span class="block text-[8px] text-gray-500 uppercase font-black tracking-widest">Bankroll</span>
+                    <span id="user-coins" class="text-xl font-black text-green-400">0 $</span>
+                </div>
+                <div>
+                    <span class="block text-[8px] text-yellow-500 uppercase font-black tracking-widest">Gesamtpott</span>
+                    <span id="display-pott" class="text-xl font-black text-white">0 $</span>
+                </div>
+            </div>
+            <div class="text-right">
+                <span class="block text-[8px] text-gray-500 uppercase font-black tracking-widest">Status</span>
+                <span id="status-text" class="text-[10px] font-black uppercase text-yellow-500 animate-pulse">Warten auf Einsätze...</span>
+            </div>
+        </header>
+        <div id="race-track-container" class="space-y-3 bg-black/20 p-6 rounded-[2rem] border border-white/5 mb-6">
+            </div>
+        <div id="betting-area" class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            </div>
+        <button id="admin-btn" onclick="startRace()" class="hidden mt-6 bg-yellow-500 hover:bg-yellow-400 text-black py-4 rounded-2xl font-black uppercase tracking-widest transition-all active:scale-95 shadow-xl">
+            Rennen Starten
+        </button>
+    </div>
+    <script>
+        const socket = io(); // Connects to the HF server automatically
+        let myEmail = "";
+        async function doLogin() {
+            myEmail = document.getElementById('email').value;
+            if(!myEmail.includes('@')) return alert("Gültige E-Mail erforderlich!");
+            const res = await fetch('/login', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({email: myEmail})
+            });
+            const data = await res.json();
+            document.getElementById('login-area').classList.add('hidden');
+            document.getElementById('game-area').classList.remove('hidden');
+            if(data.stats.is_admin) {
+                document.getElementById('admin-btn').classList.remove('hidden');
+            }
+            socket.emit('join_game', {email: myEmail});
+        }
+        socket.on('update_table', (data) => {
+            // Render Race Tracks
+            const trackContainer = document.getElementById('race-track-container');
+            trackContainer.innerHTML = data.game.horses.map(h => `
+                <div class="horse-track">
+                    <div id="horse-${h.id}" class="horse-icon" style="left: ${h.pos}%">🐎</div>
+                </div>
+            `).join('');
+            // Render Bet Buttons
+            const betArea = document.getElementById('betting-area');
+            betArea.innerHTML = data.game.horses.map(h => `
+                <button onclick="placeBet(${h.id})" class="p-4 rounded-2xl border border-white/10 hover:border-yellow-500 transition-all text-center bg-white/5">
+                    <div class="w-3 h-3 rounded-full mx-auto mb-2 shadow-lg" style="background: ${h.color}"></div>
+                    <span class="text-[9px] font-black uppercase tracking-widest">${h.name}</span>
+                </button>
+            `).join('');
+            // Update Stats
+            const me = data.players.find(p => p.email === myEmail);
+            if(me) {
+                document.getElementById('user-coins').innerText = me.coins + " $";
+            }
+            document.getElementById('display-pott').innerText = data.game.pott + " $";
+        });
+        function placeBet(horse_id) {
+            socket.emit('place_bet', {email: myEmail, horse_id: horse_id});
+            document.getElementById('status-text').innerText = "Wette platziert!";
+        }
+        function startRace() {
+            socket.emit('start_round', {email: myEmail});
+        }
+        socket.on('race_progress', (data) => {
+            document.getElementById('status-text').innerText = "RENNEN LÄUFT!";
+            data.horses.forEach(h => {
+                const el = document.getElementById(`horse-${h.id}`);
+                if(el) el.style.left = h.pos + "%";
+            });
+        });
+        socket.on('race_over', (data) => {
+            document.getElementById('status-text').innerText = "RENNEN BEENDET!";
+            alert("RUNDENENDE: " + data.winner + " hat gewonnen!");
+        });
+    </script>
+</body>
+</html>