Spaces:

Renday
/

Spiel31

Running

App Files Files Community

Renday commited on Jan 18

Commit

78d0746

verified ·

1 Parent(s): 3fa5cc1

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +87 -64

templates/index.html CHANGED Viewed

@@ -7,104 +7,127 @@
     <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        .card { transition: all 0.2s; cursor: pointer; aspect-ratio: 2/3; width: 22vw; max-width: 90px; }
-        .card.selected { border: 3px solid #f59e0b; transform: translateY(-10px); box-shadow: 0 10px 20px rgba(245, 158, 11, 0.4); }
-        .poker-bg { background: radial-gradient(circle, #1a1a1a 0%, #000 100%); }
-        .suit-red { color: #ef4444; }
-        * { user-select: none; -webkit-tap-highlight-color: transparent; }
     </style>
 </head>
-<body class="poker-bg text-white min-h-screen flex flex-col items-center p-4">
-    <div id="login-area" class="mt-20 text-center">
-        <h1 class="text-6xl font-black text-yellow-500 italic mb-8 tracking-tighter">31 CARD</h1>
-        <input type="email" id="email" placeholder="E-Mail Adresse" class="bg-gray-800 p-4 rounded-xl w-64 text-center outline-none border border-gray-700 focus:border-yellow-500 mb-4 block mx-auto">
-        <button onclick="doLogin()" class="bg-yellow-600 hover:bg-yellow-500 px-12 py-4 rounded-xl font-bold uppercase transition-all">Beitreten</button>
-    </div>
-    <div id="game-area" class="hidden w-full max-w-md">
-        <div id="admin-panel" class="hidden bg-yellow-500/10 p-3 rounded-xl border border-yellow-500/20 mb-4 flex justify-between items-center">
-            <span class="text-[10px] font-bold text-yellow-500 uppercase">Admin Dealer</span>
-            <button onclick="startRound()" class="bg-yellow-500 text-black px-4 py-1 rounded-lg text-[10px] font-bold uppercase italic">Spiel Starten</button>
         </div>
-        <div id="status-text" class="text-center text-[10px] tracking-widest text-gray-500 mb-6 uppercase italic font-bold">Verbinde zum Tisch...</div>
-        <div id="middle-cards" class="flex justify-center gap-2 mb-10 min-h-[100px]"></div>
-        <div class="bg-gray-900/50 p-6 rounded-[2.5rem] border border-white/5 relative shadow-2xl">
-            <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-yellow-500 text-black px-4 py-0.5 rounded-full text-[10px] font-bold">DEIN SCORE: <span id="score">0</span></div>
-            <div id="player-hand" class="flex justify-center gap-2 mb-6"></div>
-            <div class="flex gap-2">
-                <button onclick="action('swap_all')" class="bg-gray-800 hover:bg-gray-700 flex-1 py-4 rounded-xl text-[10px] font-bold uppercase">Alles Tauschen</button>
-                <button onclick="action('knock')" class="bg-red-900 text-red-100 flex-1 py-4 rounded-xl text-[10px] font-bold uppercase shadow-lg shadow-red-900/20">Klopfen</button>
             </div>
         </div>
     </div>
     <script>
-        const socket = io(window.location.origin);
-        let myEmail = "", selHandIdx = null, myCurrentHand = [];
         async function doLogin() {
-            myEmail = document.getElementById('email').value.trim();
-            if(!myEmail.includes('@')) return alert("Bitte gültige E-Mail eingeben!");
-            const res = await fetch('/login', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({email: myEmail})
             });
             const data = await res.json();
-            if(data.stats && data.stats.is_admin) document.getElementById('admin-panel').classList.remove('hidden');
             document.getElementById('login-area').classList.add('hidden');
             document.getElementById('game-area').classList.remove('hidden');
             socket.emit('join_game', {email: myEmail});
         }
-        function getCardHTML(c, onClick, isSelected) {
-            if(!c) return `<div class="card bg-gray-800 rounded-xl border border-white/5"></div>`;
-            const isRed = (c.suit === 'Herz' || c.suit === 'Karo');
-            const icons = {'Herz':'♥','Karo':'♦','Pik':'♠','Kreuz':'♣'};
-            return `
-                <div onclick="${onClick}" class="card bg-white rounded-xl flex flex-col items-center justify-between p-2 text-black font-bold ${isSelected ? 'selected' : ''}">
-                    <div class="self-start text-xs ${isRed ? 'suit-red' : ''}">${c.rank}</div>
-                    <div class="text-3xl ${isRed ? 'suit-red' : ''}">${icons[c.suit]}</div>
-                    <div class="self-end text-xs rotate-180 ${isRed ? 'suit-red' : ''}">${c.rank}</div>
-                </div>`;
-        }
         socket.on('update_table', (data) => {
             const me = data.players.find(p => p.email === myEmail);
-            const activePlayer = data.players[data.turn_idx];
-            const isMyTurn = activePlayer?.email === myEmail;
-            document.getElementById('status-text').innerText = isMyTurn ? "DU BIST DRAN!" : `WARTE AUF ${activePlayer ? activePlayer.email.split('@')[0] : 'SPIELER'}...`;
-            document.getElementById('status-text').className = isMyTurn ? "text-green-500 text-center text-[10px] tracking-widest mb-6 uppercase font-bold animate-pulse" : "text-gray-500 text-center text-[10px] tracking-widest mb-6 uppercase font-bold";
-            document.getElementById('middle-cards').innerHTML = data.middle.map((c, i) => getCardHTML(c, `swap(${i})`, false)).join('');
             if(me) {
-                document.getElementById('score').innerText = me.score;
-                myCurrentHand = me.hand;
-                document.getElementById('player-hand').innerHTML = myCurrentHand.map((c, i) => getCardHTML(c, `selectHand(${i})`, selHandIdx === i)).join('');
             }
         });
-        function selectHand(i) { selHandIdx = (selHandIdx === i) ? null : i; renderHand(); }
-        function renderHand() {
-            document.getElementById('player-hand').innerHTML = myCurrentHand.map((c, i) => getCardHTML(c, `selectHand(${i})`, selHandIdx === i)).join('');
-        }
         function swap(mIdx) {
-            if(selHandIdx === null) return alert("Wähle zuerst eine deiner Karten aus!");
             socket.emit('player_action', {email: myEmail, type: 'swap_one', h_idx: selHandIdx, m_idx: mIdx});
             selHandIdx = null;
         }
-        function startRound() { socket.emit('start_round', {email: myEmail}); }
         function action(t) { socket.emit('player_action', {email: myEmail, type: t}); }
     </script>
 </body>
 </html>

     <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        .card { transition: all 0.2s; cursor: pointer; aspect-ratio: 2/3; min-width: 70px; max-width: 100px; }
+        .card.selected { border: 3px solid #d4af37; box-shadow: 0 0 15px #d4af37; transform: translateY(-10px); }
+        .poker-bg { background: radial-gradient(circle, #1a1a1a 0%, #0a0a0a 100%); }
     </style>
 </head>
+<body class="poker-bg text-white min-h-screen flex items-center justify-center p-2 sm:p-4 font-sans overflow-x-hidden">
+    <div class="w-full max-w-4xl bg-gray-900/90 backdrop-blur-xl rounded-3xl shadow-2xl p-4 sm:p-8 border border-white/10">
+        <div id="login-area" class="text-center py-12">
+            <h1 class="text-6xl font-black text-yellow-500 mb-2 italic">31 CARD</h1>
+            <p class="mb-8 text-gray-500 uppercase tracking-widest text-xs">52 Cards • Responsive</p>
+            <div class="max-w-xs mx-auto space-y-4">
+                <input type="email" id="email" placeholder="Deine E-Mail" class="bg-gray-800 border border-gray-700 text-white px-4 py-3 rounded-xl w-full outline-none focus:border-yellow-500 text-center">
+                <button onclick="doLogin()" class="bg-red-600 hover:bg-red-500 w-full py-4 rounded-xl font-bold uppercase tracking-widest transition-all">Anmelden</button>
+            </div>
         </div>
+        <div id="game-area" class="hidden">
+            <header class="flex justify-between items-center border-b border-gray-800 pb-4 mb-6">
+                <div>
+                    <h2 id="status-text" class="text-xs font-bold uppercase tracking-widest text-gray-500 italic">Warte auf Start...</h2>
+                </div>
+                <div class="flex items-center gap-4">
+                    <div class="text-right">
+                        <p class="text-[10px] text-gray-500 uppercase font-black">Bankroll</p>
+                        <p id="user-coins" class="text-xl font-black text-green-500">0 $</p>
+                    </div>
+                    <button onclick="doLogout()" class="text-red-500 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
+                    </button>
+                </div>
+            </header>
+            <div id="admin-panel" class="hidden bg-yellow-500/5 p-4 rounded-2xl border border-yellow-500/20 mb-6 flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <p class="text-[10px] font-black text-yellow-500 uppercase">Admin Dealer</p>
+                    <p class="text-[10px] text-gray-500">Starteinsatz festlegen</p>
+                </div>
+                <div class="flex gap-2">
+                    <input type="number" id="bet-input" value="50" class="bg-gray-800 w-16 px-2 py-1 rounded text-sm outline-none border border-gray-700">
+                    <button onclick="setBet()" class="bg-yellow-600 text-black px-3 py-1 rounded text-[10px] font-bold uppercase">Save</button>
+                    <button onclick="startRound()" class="bg-green-600 px-4 py-1 rounded text-[10px] font-black uppercase italic">Start</button>
+                </div>
+            </div>
+            <div id="middle-cards" class="flex justify-center gap-2 sm:gap-4 mb-10 overflow-x-auto pb-4"></div>
+            <div class="bg-black/40 p-6 rounded-[2rem] border border-white/5 relative">
+                <div class="text-center mb-6">
+                    <span class="text-[10px] text-gray-500 uppercase font-black tracking-widest">Deine Punkte:</span>
+                    <span id="score" class="text-yellow-500 font-black ml-2 text-xl">0</span>
+                </div>
+                <div id="player-hand" class="flex justify-center gap-2 sm:gap-4 mb-8"></div>
+                <div class="flex justify-center gap-4">
+                    <button onclick="action('swap_all')" class="bg-gray-800 px-6 py-3 rounded-xl font-bold text-[10px] uppercase">Alle Tauschen</button>
+                    <button onclick="action('knock')" class="bg-red-600 px-8 py-3 rounded-xl font-black text-[10px] uppercase shadow-lg shadow-red-900/40">Klopfen</button>
+                </div>
             </div>
         </div>
     </div>
     <script>
+        const SPACE_URL = "https://renday-spiel31.hf.space";
+        const socket = io(SPACE_URL, { transports: ['websocket'] });
+        let myEmail = "", selHandIdx = null;
         async function doLogin() {
+            myEmail = document.getElementById('email').value;
+            if(!myEmail.includes('@')) return alert("E-Mail!");
+            const res = await fetch(`${SPACE_URL}/login`, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({email: myEmail})
             });
             const data = await res.json();
+            document.getElementById('user-coins').innerText = data.stats.coins + " $";
+            if(data.stats.is_admin) document.getElementById('admin-panel').classList.remove('hidden');
             document.getElementById('login-area').classList.add('hidden');
             document.getElementById('game-area').classList.remove('hidden');
             socket.emit('join_game', {email: myEmail});
         }
+        function doLogout() { if(confirm("Abmelden?")) { socket.emit('leave_game', {email: myEmail}); location.reload(); } }
+        function setBet() { socket.emit('admin/set_bet', {bet: document.getElementById('bet-input').value}); }
+        function startRound() { socket.emit('start_round', {email: myEmail}); }
         socket.on('update_table', (data) => {
             const me = data.players.find(p => p.email === myEmail);
+            const isMyTurn = data.players[data.turn_idx]?.email === myEmail;
+            document.getElementById('status-text').innerText = isMyTurn ? "DU BIST DRAN" : `WARTEN...`;
+            document.getElementById('status-text').className = isMyTurn ? "text-green-400 font-black animate-pulse" : "text-gray-500";
+            const cardHTML = (c, onClick, sel = false) => `
+                <div onclick="${onClick}" class="card bg-white rounded-xl flex flex-col items-center justify-between p-2 sm:p-3 shadow-2xl text-black ${sel ? 'selected' : ''}">
+                    <div class="self-start font-black text-sm sm:text-lg leading-none ${getColor(c.suit)}">${c.rank}</div>
+                    <div class="text-2xl sm:text-4xl">${getSymbol(c.suit)}</div>
+                    <div class="self-end font-black text-sm sm:text-lg leading-none rotate-180 ${getColor(c.suit)}">${c.rank}</div>
+                </div>`;
+            document.getElementById('middle-cards').innerHTML = data.middle.map((c, i) => cardHTML(c, `swap(${i})`)).join('');
             if(me) {
+                document.getElementById('user-coins').innerText = me.coins + " $";
+                if(me.hand.length > 0) {
+                    document.getElementById('score').innerText = me.score;
+                    document.getElementById('player-hand').innerHTML = me.hand.map((c, i) => cardHTML(c, `selectHand(${i})`, selHandIdx === i)).join('');
+                }
             }
         });
+        function getSymbol(s) { return { 'Herz': '♥', 'Karo': '♦', 'Pik': '♠', 'Kreuz': '♣' }[s] || s; }
+        function getColor(s) { return (s === 'Herz' || s === 'Karo') ? 'text-red-600' : 'text-gray-900'; }
+        function selectHand(i) { selHandIdx = (selHandIdx === i) ? null : i; socket.emit('join_game', {email: myEmail}); }
         function swap(mIdx) {
+            if(selHandIdx === null) return;
             socket.emit('player_action', {email: myEmail, type: 'swap_one', h_idx: selHandIdx, m_idx: mIdx});
             selHandIdx = null;
         }
         function action(t) { socket.emit('player_action', {email: myEmail, type: t}); }
+        socket.on('game_over', (d) => alert("Winner: " + d.winner));
     </script>
 </body>
 </html>