From 224980d232033d291b39db72b69c4db57cf3bba1 Mon Sep 17 00:00:00 2001
From: angelicatesvara07-crypto <angelicatesvara07@gmail.com>
Date: Mon, 1 Dec 2025 00:04:49 +0700
Subject: [PATCH] menambahkan kesalahan

---
 Sudoku.html | 460 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 272 insertions(+), 188 deletions(-)
diff --git a/Sudoku.html b/Sudoku.html
index b05600e..d2c7408 100644
--- a/Sudoku.html
+++ b/Sudoku.html
@@ -2,31 +2,15 @@
 <head>
     <title>Sudoku</title>
     <style>
-        /*PENGATURAN WARNA DENGAN HURUF*/
         :root {
-            /*Warna Utama*/
             --primary-color: dodgerblue;
-
-            /*Warna Latar Belakang*/
             --bg-color: whitesmoke;
-
-            /*Warna Papan*/
             --board-bg: white;
-
-            /* Warna Garis */
             --border-color: lightgray;
             --thick-border: darkslategray;
-
-            /*Warna Teks*/
             --text-color: black;
-
-            /*Warna Sorot Angka Sama*/
             --same-highlight: lightblue;
-
-            /*Warna Kotak Terpilih*/
             --selected-border: blue;
-
-            /*Warna Error/Salah*/
             --error-bg: pink;
             --error-text: red;
         }
@@ -44,7 +28,6 @@
             overflow: hidden;
         }
 
-        /*SCREEN CONTAINER*/
         .screen {
             display: none;
             flex-direction: column;
@@ -57,23 +40,13 @@
             animation: fadeIn 0.3s ease-in-out;
         }
 
-        .screen.active {
-            display: flex;
-        }
+        .screen.active { display: flex; }
 
         @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        /*MENU & LEVEL STYLES*/
         .logo-img {
             width: 120px;
             height: 120px;
@@ -104,10 +77,7 @@
             margin-bottom: 15px;
             text-align: center;
         }
-
-        .btn-main:hover {
-            transform: scale(1.05);
-        }
+        .btn-main:hover { transform: scale(1.05); }
 
         .level-title {
             font-size: 24px;
@@ -128,23 +98,11 @@
             transition: 0.2s;
             box-shadow: 0 4px 6px lightgray;
         }
+        .btn-level:hover { transform: translateY(-3px); }
 
-        .btn-level:hover {
-            transform: translateY(-3px);
-        }
-
-        /*Warna Tombol Level menggunakan HURUF*/
-        .lvl-easy {
-            background-color: limegreen;
-        }
-
-        .lvl-medium {
-            background-color: dodgerblue;
-        }
-
-        .lvl-hard {
-            background-color: red;
-        }
+        .lvl-easy { background-color: limegreen; }
+        .lvl-medium { background-color: dodgerblue; }
+        .lvl-hard { background-color: red; }
 
         .btn-cancel {
             margin-top: 20px;
@@ -157,14 +115,13 @@
             font-weight: bold;
         }
 
-        /*GAME STYLES*/
         .game-header {
             width: 100%;
             max-width: 380px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
             padding: 0 10px;
             box-sizing: border-box;
         }
@@ -178,12 +135,31 @@
             padding: 0;
         }
 
+        .header-center {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
         #difficulty-label {
-            font-size: 18px;
+            font-size: 16px;
             font-weight: bold;
             color: var(--primary-color);
             text-transform: uppercase;
-            letter-spacing: 1px;
+        }
+
+        #timer-label {
+            font-size: 20px;
+            font-weight: bold;
+            color: #333;
+            font-family: monospace;
+            margin-top: 2px;
+        }
+
+        #mistake-label {
+            font-size: 14px;
+            font-weight: bold;
+            color: red;
         }
 
         #board-container {
@@ -216,14 +192,8 @@
             box-sizing: border-box;
         }
 
-        /*Garis Tebal menggunakan warna darkslategray*/
-        .tile-border-right {
-            border-right: 2px solid var(--thick-border);
-        }
-
-        .tile-border-bottom {
-            border-bottom: 2px solid var(--thick-border);
-        }
+        .tile-border-right { border-right: 2px solid var(--thick-border); }
+        .tile-border-bottom { border-bottom: 2px solid var(--thick-border); }
 
         .tile-start {
             color: black;
@@ -232,25 +202,11 @@
             font-weight: bold;
         }
 
-        .tile-user {
-            color: var(--primary-color);
-        }
+        .tile-user { color: var(--primary-color); }
+        .tile-highlight-same { background-color: var(--same-highlight) !important; }
+        .tile-selected { border: 3px solid var(--selected-border) !important; z-index: 10; }
+        .tile-error { background-color: var(--error-bg) !important; color: var(--error-text) !important; }
 
-        .tile-highlight-same {
-            background-color: var(--same-highlight) !important;
-        }
-
-        .tile-selected {
-            border: 3px solid var(--selected-border) !important;
-            z-index: 10;
-        }
-
-        .tile-error {
-            background-color: var(--error-bg) !important;
-            color: var(--error-text) !important;
-        }
-
-        /*Numpad & Tools*/
         #numpad-row {
             display: flex;
             flex-wrap: nowrap;
@@ -274,27 +230,10 @@
             box-shadow: 0 2px 5px lightgray;
             transition: transform 0.1s;
         }
-
-        .number:active {
-            transform: scale(0.95);
-            background-color: aliceblue;
-        }
-
-        .main-num {
-            font-size: 22px;
-            font-weight: bold;
-        }
-
-        .count-num {
-            font-size: 10px;
-            color: gray;
-            margin-top: 2px;
-        }
-
-        .hidden-key {
-            opacity: 0;
-            pointer-events: none;
-        }
+        .number:active { transform: scale(0.95); background-color: aliceblue; }
+        .main-num { font-size: 22px; font-weight: bold; }
+        .count-num { font-size: 10px; color: gray; margin-top: 2px; }
+        .hidden-key { opacity: 0; pointer-events: none; }
 
         #tools-row {
             margin-top: 15px;
@@ -321,24 +260,9 @@
             transition: 0.2s;
             flex: 1;
         }
-
-        .tool-btn:active {
-            transform: scale(0.95);
-        }
-
-        /*Tombol Hapus*/
-        .btn-delete {
-            color: red;
-            border-color: pink;
-        }
-
-        /*Tombol Bantuan*/
-        .btn-hint {
-            color: darkorange;
-            border-color: orange;
-        }
-
-        /* Style untuk tombol disabled (ketika bantuan habis) */
+        .tool-btn:active { transform: scale(0.95); }
+        .btn-delete { color: red; border-color: pink; }
+        .btn-hint { color: darkorange; border-color: orange; }
         .btn-disabled {
             background-color: lightgray !important;
             color: gray !important;
@@ -348,50 +272,99 @@
         }
 
         #game-msg {
-            height: 25px;
-            color: green;
-            font-weight: bold;
-            margin-bottom: 10px;
-            font-size: 16px;
-            text-align: center;
+            height: 20px;
+            margin-bottom: 5px;
         }
 
-        /*FITUR MENANG*/
-        #win-controls {
+        .modal-overlay {
             display: none;
-            margin-top: 15px;
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6);
+            z-index: 100;
             justify-content: center;
+            align-items: center;
+            animation: fadeIn 0.3s;
         }
 
-        .btn-play-again {
+        .modal-content {
+            background-color: white;
+            width: 80%;
+            max-width: 300px;
+            padding: 30px;
+            border-radius: 20px;
+            text-align: center;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        .modal-icon {
+            font-size: 50px;
+            margin-bottom: 10px;
+        }
+        
+        .modal-title {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        .modal-desc {
+            font-size: 14px;
+            color: gray;
+            margin-bottom: 25px;
+            line-height: 1.5;
+        }
+
+        .win-stats {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 25px;
+            background-color: #f0f8ff;
+            padding: 10px;
+            border-radius: 10px;
+        }
+        .stat-item { display: flex; flex-direction: column; }
+        .stat-label { font-size: 10px; color: gray; text-transform: uppercase; }
+        .stat-value { font-size: 18px; font-weight: bold; color: var(--primary-color); }
+
+        .btn-modal {
+            display: block;
+            width: 100%;
+            padding: 12px 0;
+            border-radius: 25px;
+            font-size: 16px;
+            font-weight: bold;
+            border: none;
+            cursor: pointer;
+            margin-bottom: 10px;
+            transition: 0.2s;
+        }
+
+        .btn-primary-modal {
             background-color: var(--primary-color);
             color: white;
-            padding: 15px 40px;
-            border: none;
-            border-radius: 30px;
-            font-size: 16px;
-            font-weight: bold;
-            cursor: pointer;
-            box-shadow: 0 4px 10px lightgray;
-            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            box-shadow: 0 4px 10px rgba(30, 144, 255, 0.4);
         }
-
-        .btn-play-again:hover {
-            background-color: deepskyblue;
+        .btn-secondary-modal {
+            background-color: white;
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+        }
+        .btn-grey-modal {
+            background-color: #e0e0e0;
+            color: #555;
         }
 
         @keyframes popIn {
-            from {
-                transform: scale(0);
-                opacity: 0;
-            }
-
-            to {
-                transform: scale(1);
-                opacity: 1;
-            }
+            from { transform: scale(0.8); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
         }
+
     </style>
 </head>
 
@@ -405,20 +378,22 @@
 
     <div id="screen-level" class="screen">
         <div class="level-title">Pilih Tingkat Kesulitan</div>
-        <button class="btn-level lvl-easy" onclick="startLevel('easy')">MUDAH<div
-                style="font-size: 12px; font-weight: normal; margin-top: 5px;">Santai & Cepat</div></button>
-        <button class="btn-level lvl-medium" onclick="startLevel('medium')">MEDIUM<div
-                style="font-size: 12px; font-weight: normal; margin-top: 5px;">Tantangan Standar</div></button>
-        <button class="btn-level lvl-hard" onclick="startLevel('hard')">SULIT<div
-                style="font-size: 12px; font-weight: normal; margin-top: 5px;">Butuh Logika Ekstra</div></button>
+        <button class="btn-level lvl-easy" onclick="startLevel('easy')">MUDAH<div style="font-size: 12px; font-weight: normal; margin-top: 5px;">Santai & Cepat</div></button>
+        <button class="btn-level lvl-medium" onclick="startLevel('medium')">MEDIUM<div style="font-size: 12px; font-weight: normal; margin-top: 5px;">Tantangan Standar</div></button>
+        <button class="btn-level lvl-hard" onclick="startLevel('hard')">SULIT<div style="font-size: 12px; font-weight: normal; margin-top: 5px;">Butuh Logika Ekstra</div></button>
         <button class="btn-cancel" onclick="showMenuScreen()">Batal</button>
     </div>
 
     <div id="screen-game" class="screen">
         <div class="game-header">
-            <button class="btn-back-icon" onclick="showMenuScreen()">&#8592;</button>
-            <div id="difficulty-label">MEDIUM</div>
-            <div style="width: 28px;"></div>
+            <button class="btn-back-icon" onclick="backToMenu()">&#8592;</button>
+            
+            <div class="header-center">
+                <div id="difficulty-label">MEDIUM</div>
+                <div id="timer-label">00:00</div>
+            </div>
+
+            <div id="mistake-label">Salah: 0/3</div>
         </div>
 
         <div id="game-msg"></div>
@@ -440,13 +415,45 @@
         </div>
 
         <div id="tools-row">
-            <div class="tool-btn btn-delete" onclick="deleteNumber()"><span>🗑️</span> HAPUS</div>
+            <div class="tool-btn btn-delete" onclick="deleteNumber()"><span>🗑</span> HAPUS</div>
             <div id="btn-hint" class="tool-btn btn-hint" onclick="getHint()"><span>💡</span> BANTUAN (3)</div>
         </div>
-
-        <div id="win-controls">
-            <button class="btn-play-again" onclick="showLevelScreen()">Main Lagi</button>
+        
+        <div id="modal-game-over" class="modal-overlay">
+            <div class="modal-content">
+                <div class="modal-icon">😢</div>
+                <div class="modal-title">Permainan Berakhir</div>
+                <div class="modal-desc">
+                    Kesempatan habis! Anda telah melakukan 3 kesalahan.
+                </div>
+                <button class="btn-modal btn-secondary-modal" onclick="restartCurrentLevel()">Coba Lagi (Acak Ulang)</button>
+                <button class="btn-modal btn-grey-modal" onclick="showLevelScreen()">Menu Utama</button>
+            </div>
         </div>
+
+        <div id="modal-win" class="modal-overlay">
+            <div class="modal-content">
+                <div class="modal-icon">🏆</div>
+                <div class="modal-title">Luar Biasa!</div>
+                <div class="modal-desc">
+                    Anda berhasil menyelesaikan puzzle ini.
+                </div>
+                
+                <div class="win-stats">
+                    <div class="stat-item">
+                        <span class="stat-label">Tingkat</span>
+                        <span class="stat-value" id="win-difficulty">MEDIUM</span>
+                    </div>
+                    <div class="stat-item">
+                        <span class="stat-label">Waktu</span>
+                        <span class="stat-value" id="win-time">05:30</span>
+                    </div>
+                </div>
+
+                <button class="btn-modal btn-primary-modal" onclick="showLevelScreen()">Permainan Baru</button>
+            </div>
+        </div>
+
     </div>
 
     <script>
@@ -454,20 +461,35 @@
         var tileSelected = null;
         var board = [];
         var solution = [];
-        var hintsRemaining = 3; // Variabel untuk menyimpan sisa bantuan
+        var hintsRemaining = 3; 
+        var mistakes = 0; 
+        var currentDifficulty = 'easy';
+
+        var timerInterval;
+        var secondsElapsed = 0;
 
         function switchScreen(screenId) {
             document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
             document.getElementById(screenId).classList.add('active');
+            
+            document.querySelectorAll('.modal-overlay').forEach(m => m.style.display = 'none');
+        }
+        
+        function showMenuScreen() { switchScreen('screen-menu'); stopTimer(); }
+        function showLevelScreen() { switchScreen('screen-level'); stopTimer(); }
+        
+        function backToMenu() {
+            stopTimer();
+            showMenuScreen();
         }
-        function showMenuScreen() { switchScreen('screen-menu'); }
-        function showLevelScreen() { switchScreen('screen-level'); }
 
         function startLevel(difficulty) {
+            currentDifficulty = difficulty;
             let holes = 30;
             let label = "MUDAH";
             if (difficulty === 'medium') { holes = 40; label = "MEDIUM"; }
             else if (difficulty === 'hard') { holes = 50; label = "SULIT"; }
+            
             document.getElementById('difficulty-label').innerText = label;
             switchScreen('screen-game');
             newGame(holes);
@@ -478,19 +500,55 @@
             board = JSON.parse(JSON.stringify(solution));
             removeNumbers(board, holesCount);
 
-            // Reset sisa bantuan ke 3 setiap game baru
             hintsRemaining = 3;
             updateHintButton();
 
+            mistakes = 0;
+            document.getElementById("mistake-label").innerText = "Salah: 0/3";
+
             document.getElementById("tools-row").style.display = "flex";
             document.getElementById("numpad-row").style.display = "flex";
-            document.getElementById("win-controls").style.display = "none";
+            document.querySelectorAll('.modal-overlay').forEach(m => m.style.display = 'none');
+            
             document.getElementById("game-msg").innerText = "";
 
+            startTimer();
+
             setGame();
             updateRemainingCounts();
         }
 
+        function restartCurrentLevel() {
+            let holes = 30;
+            if (currentDifficulty === 'medium') { holes = 40; }
+            else if (currentDifficulty === 'hard') { holes = 50; }
+            newGame(holes);
+        }
+
+        function startTimer() {
+            stopTimer();
+            secondsElapsed = 0;
+            document.getElementById("timer-label").innerText = "00:00";
+            
+            timerInterval = setInterval(function() {
+                secondsElapsed++;
+                document.getElementById("timer-label").innerText = formatTime(secondsElapsed);
+            }, 1000);
+        }
+
+        function stopTimer() {
+            clearInterval(timerInterval);
+        }
+
+        function formatTime(totalSeconds) {
+            let m = Math.floor(totalSeconds / 60);
+            let s = totalSeconds % 60;
+            let mStr = m < 10 ? "0" + m : m;
+            let sStr = s < 10 ? "0" + s : s;
+            return mStr + ":" + sStr;
+        }
+        // --------------------
+
         function setGame() {
             document.getElementById("board").innerHTML = "";
             tileSelected = null;
@@ -519,17 +577,11 @@
             }
         }
 
-        // Fungsi untuk update tampilan tombol bantuan
         function updateHintButton() {
             let btnHint = document.getElementById("btn-hint");
             btnHint.innerHTML = `<span>💡</span> BANTUAN (${hintsRemaining})`;
-            
-            // Jika habis, ganti tampilan jadi disabled
-            if(hintsRemaining <= 0) {
-                btnHint.classList.add("btn-disabled");
-            } else {
-                btnHint.classList.remove("btn-disabled");
-            }
+            if(hintsRemaining <= 0) btnHint.classList.add("btn-disabled");
+            else btnHint.classList.remove("btn-disabled");
         }
 
         function updateRemainingCounts() {
@@ -540,7 +592,7 @@
                     if (val !== 0) counts[val]++;
                 }
             }
-            let digitButtons = document.querySelectorAll(".number");
+            let digitButtons = querySelectorAll(".number");
             digitButtons.forEach(btn => {
                 let num = parseInt(btn.getAttribute("data-num"));
                 let remaining = 9 - counts[num];
@@ -568,6 +620,9 @@
         }
 
         function selectTile() {
+            if (document.querySelector(".modal-overlay[style*='flex']")) return; 
+            if (document.getElementById("game-msg").innerText.includes("MENANG")) return;
+
             if (tileSelected != null) { tileSelected.classList.remove("tile-selected"); }
             tileSelected = this;
             tileSelected.classList.add("tile-selected");
@@ -575,6 +630,8 @@
         }
 
         function selectNumber() {
+            if (document.querySelector(".modal-overlay[style*='flex']")) return;
+
             let mainNumSpan = this.querySelector(".main-num");
             let numberValue = mainNumSpan.innerText;
             fillTile(numberValue);
@@ -582,21 +639,34 @@
 
         function fillTile(numberValue) {
             if (tileSelected && !tileSelected.classList.contains("tile-start")) {
-                tileSelected.innerText = numberValue;
                 let coords = tileSelected.id.split("-");
                 let r = parseInt(coords[0]);
                 let c = parseInt(coords[1]);
                 let val = parseInt(numberValue);
+                
+                tileSelected.innerText = numberValue;
                 board[r][c] = val;
-                if (val !== solution[r][c]) { tileSelected.classList.add("tile-error"); }
-                else { tileSelected.classList.remove("tile-error"); }
-                highlightSameNumbers(numberValue);
-                updateRemainingCounts();
-                checkIfWin();
+
+                if (val !== solution[r][c]) {
+                    tileSelected.classList.add("tile-error");
+                    mistakes++;
+                    document.getElementById("mistake-label").innerText = "Salah: " + mistakes + "/3";
+
+                    if (mistakes >= 3) {
+                        gameOver();
+                    }
+                } else {
+                    tileSelected.classList.remove("tile-error");
+                    highlightSameNumbers(numberValue);
+                    updateRemainingCounts();
+                    checkIfWin();
+                }
             }
         }
 
         function deleteNumber() {
+            if (document.querySelector(".modal-overlay[style*='flex']")) return;
+
             if (tileSelected && !tileSelected.classList.contains("tile-start")) {
                 tileSelected.innerText = "";
                 let coords = tileSelected.id.split("-");
@@ -608,8 +678,7 @@
         }
 
         function getHint() {
-            // Cek apakah sisa bantuan masih ada
-            if(hintsRemaining <= 0) return; 
+            if(hintsRemaining <= 0 || document.querySelector(".modal-overlay[style*='flex']")) return; 
 
             if (!tileSelected) return;
             if (tileSelected.classList.contains("tile-start")) return;
@@ -623,25 +692,40 @@
             tileSelected.innerText = correctNum;
             tileSelected.classList.remove("tile-error");
             
-            // Kurangi sisa bantuan
             hintsRemaining--;
-            updateHintButton(); // Update tampilan tombol
+            updateHintButton();
             
             highlightSameNumbers(correctNum.toString());
             updateRemainingCounts();
             checkIfWin();
         }
 
+        function gameOver() {
+            stopTimer();
+            document.getElementById("modal-game-over").style.display = "flex";
+            document.getElementById("tools-row").style.display = "none";
+            document.getElementById("numpad-row").style.display = "none";
+        }
+
         function checkIfWin() {
             for (let r = 0; r < 9; r++) {
                 for (let c = 0; c < 9; c++) {
                     if (board[r][c] !== solution[r][c]) return false;
                 }
             }
-            document.getElementById("game-msg").innerText = "SELAMAT! ANDA MENANG!";
+            
+            stopTimer();
+            
+            let diffText = document.getElementById('difficulty-label').innerText;
+            let timeText = document.getElementById("timer-label").innerText;
+            
+            document.getElementById("win-difficulty").innerText = diffText;
+            document.getElementById("win-time").innerText = timeText;
+
+            document.getElementById("modal-win").style.display = "flex";
+            
             document.getElementById("tools-row").style.display = "none";
             document.getElementById("numpad-row").style.display = "none";
-            document.getElementById("win-controls").style.display = "flex";
             return true;
         }
 
