Spaces:

ServerX
/

hangman-game

Sleeping

App Files Files Community

ServerX commited on Feb 4

Commit

8254820

verified ·

1 Parent(s): a1c8378

Update index.html

Browse files

Files changed (1) hide show

index.html +91 -232

index.html CHANGED Viewed

@@ -1,232 +1,91 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>Gioco dell'Impiccato</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      touch-action: manipulation;
-    }
-    body {
-      font-family: 'Arial', sans-serif;
-      text-align: center;
-      margin: 0;
-      padding: 15px;
-      background-color: #f5f5f5;
-      line-height: 1.6;
-    }
-    h1 {
-      color: #333;
-      font-size: 1.5rem;
-      margin-bottom: 20px;
-    }
-    #game-container {
-      background-color: #fff;
-      padding: 20px;
-      border-radius: 10px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      max-width: 100%;
-      width: 100%;
-      margin: 0 auto;
-    }
-    #word-display {
-      font-size: 1.8rem;
-      margin-bottom: 20px;
-      font-weight: bold;
-      letter-spacing: 5px;
-    }
-    #word-entry, #guess-input-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 20px;
-    }
-    #word-input, #guess-input {
-      width: 100%;
-      padding: 10px;
-      font-size: 16px;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      text-align: center;
-    }
-    #submit-word-btn, #submit-btn, #reset-btn {
-      width: 100%;
-      padding: 12px;
-      font-size: 16px;
-      cursor: pointer;
-      background-color: #4caf50;
-      color: #fff;
-      border: none;
-      border-radius: 5px;
-      transition: background-color 0.3s;
-      text-transform: uppercase;
-      font-weight: bold;
-    }
-    #submit-word-btn:active, #submit-btn:active, #reset-btn:active {
-      background-color: #45a049;
-    }
-    #result {
-      font-size: 1rem;
-      margin-top: 15px;
-      color: #e74c3c;
-      font-weight: bold;
-    }
-    label {
-      margin-bottom: 10px;
-      font-weight: bold;
-    }
-    @media (max-height: 600px) {
-      body {
-        padding: 10px;
-      }
-      h1 {
-        font-size: 1.2rem;
-        margin-bottom: 10px;
-      }
-      #game-container {
-        padding: 15px;
-      }
-    }
-  </style>
-</head>
-<body>
-  <h1>Benvenuto al Gioco dell'Impiccato!</h1>
-  <span id="myMessage" style="font-size: medium; white-space: pre;">Questo gioco lo potrai giocare solo in locale con un tuo amico e familiare</span>
-  <div id="game-container">
-    <div id="word-entry">
-      <label for="word-input">Inserisci una parola:</label>
-      <input type="password" id="word-input" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">
-      <button id="submit-word-btn" onclick="startGame()">Inizia il gioco</button>
-    </div>
-    <div id="word-display"></div>
-    <div id="guess-input-container">
-      <label for="guess-input">Inserisci una lettera o la risposta completa:</label>
-      <input type="text" id="guess-input" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">
-      <button id="submit-btn" onclick="checkGuess()">Indovina</button>
-    </div>
-    <div id="result"></div>
-    <button id="reset-btn" onclick="resetGame()">Ricomincia</button>
-  </div>
-  <div id="cast-section" style="margin-top: 20px;">
-    <button onclick="generateCastLink()">Genera Link per Visualizzare il Gioco</button>
-    <p id="cast-link"></p>
-  </div>
-  <script>
-    document.getElementById('word-input').addEventListener('keyup', function(event) {
-      if (event.key === 'Enter') {
-        startGame();
-      }
-    });
-    document.getElementById('guess-input').addEventListener('keyup', function(event) {
-      if (event.key === 'Enter') {
-        checkGuess();
-      }
-    });
-    var parolaDaIndovinare = '';
-    var lettereIndovinate = [];
-    var tentativiRimasti = 6;
-    function startGame() {
-      parolaDaIndovinare = document.getElementById('word-input').value.toUpperCase();
-      if (/^[a-zA-Z]+$/.test(parolaDaIndovinare) && parolaDaIndovinare.length > 0) {
-        lettereIndovinate = new Array(parolaDaIndovinare.length).fill('_');
-        displayWord();
-        document.getElementById('word-entry').style.display = 'none';
-      } else {
-        alert('Inserisci una parola valida (almeno un carattere).');
-      }
-    }
-    function displayWord() {
-      document.getElementById('word-display').innerHTML = lettereIndovinate.join(' ');
-    }
-    function checkGuess() {
-      var inputElement = document.getElementById('guess-input');
-      var guess = inputElement.value.toUpperCase();
-      inputElement.value = '';
-      if (guess.length > 1) {
-        if (guess === parolaDaIndovinare) {
-          lettereIndovinate = parolaDaIndovinare.split('');
-          displayWord();
-          document.getElementById('result').textContent = 'Complimenti! Hai indovinato la parola!';
-          disableGuessing();
-        } else {
-          tentativiRimasti -= 2;
-          updateGameStatus();
-        }
-      } else {
-        var letteraTrovata = false;
-        for (var i = 0; i < parolaDaIndovinare.length; i++) {
-          if (parolaDaIndovinare[i] === guess) {
-            lettereIndovinate[i] = guess;
-            letteraTrovata = true;
-          }
-        }
-        displayWord();
-        if (!letteraTrovata) {
-          tentativiRimasti--;
-        }
-        updateGameStatus();
-      }
-    }
-    function updateGameStatus() {
-      document.getElementById('result').textContent = tentativiRimasti > 0 ?
-        'Tentativi rimasti: ' + tentativiRimasti :
-        'Mi dispiace, hai esaurito i tentativi. La parola era: ' + parolaDaIndovinare;
-      if (lettereIndovinate.join('') === parolaDaIndovinare || tentativiRimasti <= 0) {
-        disableGuessing();
-      }
-    }
-    function disableGuessing() {
-      document.getElementById('guess-input').disabled = true;
-      document.getElementById('submit-btn').disabled = true;
-    }
-    function resetGame() {
-      parolaDaIndovinare = '';
-      lettereIndovinate = [];
-      tentativiRimasti = 6;
-      document.getElementById('word-entry').style.display = 'block';
-      document.getElementById('word-input').value = '';
-      document.getElementById('guess-input').disabled = false;
-      document.getElementById('submit-btn').disabled = false;
-      document.getElementById('word-display').innerHTML = '';
-      document.getElementById('result').textContent = '';
-    }
-    // Funzione per generare un link che può essere usato in una rete locale
-    function generateCastLink() {
-      var ipAddress = window.location.hostname; // Ottieni l'IP locale
-      var port = 8080; // Puoi cambiarlo con una porta disponibile
-      var link = 'http://' + ipAddress + ':' + port + '/index.html'; // Aggiungi il percorso del gioco
-      document.getElementById('cast-link').textContent = 'Link per visualizzare il gioco: ' + link;
-    }
-  </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="description" content="Hangman Game - Gradio Interface">
+    <title>Hangman Game - Gradio Interface</title>
+    <!-- Caricamento ottimizzato del CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <!-- Ottimizzazione delle risorse (favicon) -->
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
+    <!-- Preload dei font per migliorare la velocità di rendering -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" as="font" type="font/woff2" crossorigin="anonymous">
+    <!-- Ottimizzazione SEO per migliorare l'indicizzazione -->
+    <meta name="robots" content="index, follow">
+    <meta name="author" content="ServerX">
+</head>
+<body>
+    <header class="container mt-4">
+        <h1 class="text-center">Welcome to Hangman Game</h1>
+    </header>
+    <main class="container">
+        <section id="game-container" class="mt-5">
+            <!-- Display della parola da indovinare -->
+            <div id="word-display" class="text-center mb-3">____</div>
+            <!-- Input per la lettera -->
+            <div class="d-flex justify-content-center mb-3">
+                <input type="text" id="guess-input" class="form-control w-25" placeholder="Enter a letter" aria-label="Enter a letter for the game">
+            </div>
+            <!-- Bottone per fare la guess -->
+            <div class="d-flex justify-content-center">
+                <button id="guess-button" class="btn btn-primary" onclick="makeGuess()">Guess</button>
+            </div>
+            <!-- Status del gioco -->
+            <div id="game-status" class="text-center mt-3">Status: Playing</div>
+        </section>
+        <!-- Modal Game Over -->
+        <div id="game-over-modal" class="text-center mt-5" style="display:none;">
+            <p>Game Over! Would you like to play again?</p>
+            <button class="btn btn-success" onclick="restartGame()">Play Again</button>
+        </div>
+    </main>
+    <footer class="container mt-5 text-center">
+        <p>&copy; 2025 ServerX. All rights reserved.</p>
+    </footer>
+    <!-- Caricamento asincrono di JavaScript -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" async defer></script>
+    <!-- Script di gioco -->
+    <script>
+        let gameStatus = "playing";
+        // Funzione per fare la guess
+        function makeGuess() {
+            let guess = document.getElementById('guess-input').value.toLowerCase();
+            if (guess.length === 1) {
+                console.log(`User guessed: ${guess}`);
+                // Logica di gioco per indovinare la lettera
+                // Implementa qui la logica per aggiornare la parola o il numero di tentativi
+            }
+        }
+        // Funzione per riavviare il gioco
+        function restartGame() {
+            document.getElementById('game-status').innerText = 'Status: Playing';
+            document.getElementById('game-over-modal').style.display = 'none';
+            // Logica per resettare il gioco
+            gameStatus = "playing";
+        }
+        // Abilita l'interazione tramite tasto invio
+        document.getElementById('guess-input').addEventListener('keypress', function(event) {
+            if (event.key === "Enter") {
+                makeGuess();
+            }
+        });
+    </script>
+</body>
+</html>