eaglelandsonce/Git_Game_Example
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>GitQuest Game</title>7 <style>8 body {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 display: flex;11 margin: 0;12 height: 100vh;13 background: linear-gradient(to right, #f7f7f7, #e0ffe4);14 }15 #left-panel, #right-panel {16 width: 50%;17 padding: 40px;18 box-sizing: border-box;19 }20 #left-panel {21 background: #fff;22 border-right: 2px solid #cce5cc;23 display: flex;24 flex-direction: column;25 }26 #right-panel {27 background: #f0fff5;28 display: flex;29 flex-direction: column;30 align-items: center;31 justify-content: center;32 text-align: center;33 }34 h2 {35 color: #2b7a4b;36 }37 #question {38 font-size: 22px;39 margin-bottom: 10px;40 }41 #choices {42 font-size: 14px;43 color: #555;44 margin-bottom: 10px;45 }46 #game-status {47 margin-top: 10px;48 font-weight: bold;49 font-size: 18px;50 }51 #timer {52 margin-top: 10px;53 font-weight: bold;54 font-size: 18px;55 color: #dc3545;56 }57 #game-visual {58 font-size: 120px;59 margin-bottom: 20px;60 }61 #game-description {62 font-size: 18px;63 color: #333;64 }65 #terminal {66 margin-top: 20px;67 }68 #terminal h3 {69 font-size: 18px;70 color: #2b7a4b;71 }72 #input-area {73 display: flex;74 margin-top: 10px;75 }76 #git-input {77 flex-grow: 1;78 padding: 10px;79 border-radius: 5px;80 border: 1px solid #ccc;81 font-size: 16px;82 }83 #run-button, #challenge-button {84 padding: 10px 20px;85 margin-left: 10px;86 background: #2b7a4b;87 border: none;88 color: #fff;89 border-radius: 5px;90 cursor: pointer;91 }92 #run-output, #progress-bar {93 margin-top: 15px;94 font-family: monospace;95 background: #e9f5ec;96 padding: 10px;97 border-radius: 5px;98 white-space: pre-wrap;99 }100 #progress-bar {101 height: 20px;102 width: 100%;103 background: #cdeedc;104 margin-top: 10px;105 position: relative;106 }107 #progress {108 height: 100%;109 width: 0%;110 background: #2b7a4b;111 border-radius: 5px;112 }113 #score {114 margin-top: 10px;115 font-weight: bold;116 font-size: 16px;117 }118 </style>119</head>120<body>121 <div id="left-panel">122 <div>123 <h2>🎮 GitQuest Challenge</h2>124 <button id="challenge-button" onclick="startChallenge()">⚡ Take the Challenge (1 Min)</button>125 <div id="timer"></div>126 <p id="question"></p>127 <div id="choices"></div>128 <div id="game-status"></div>129 <div id="score">Score: 0</div>130 <div id="progress-bar"><div id="progress"></div></div>131 <div id="terminal">132 <h3>💻 Type the Git Command</h3>133 <div id="input-area">134 <input id="git-input" placeholder="Type a Git command…" onkeydown="if(event.key==='Enter'){runCommand()}" />135 <button id="run-button" onclick="runCommand()">Run</button>136 </div>137 <div id="run-output"></div>138 <div id="lesson-container">139 <button id="lesson-button">📚 Mini‑Lesson</button>140 <div id="lesson-box" style="display:none;"></div>141 </div>142 </div>143 </div>144 </div>145 <div id="right-panel">146 <h2>🌱 Git Growth Tracker</h2>147 <div id="game-visual">🌱</div>148 <p id="game-description">Let's begin your Git journey…</p>149 </div>150 151 <!-- Audio -->152 <audio id="correct-sound" src="https://www.soundjay.com/button/beep-07.wav" preload="auto"></audio>153 <audio id="wrong-sound" src="https://www.soundjay.com/button/beep-10.wav" preload="auto"></audio>154 <audio id="win-sound" src="https://www.soundjay.com/human/applause-01.wav" preload="auto"></audio>155 156 <script>157 /* ===================== DATA ===================== */158 const stages = [159 {q: "How do you start tracking your project with Git?", a: "git init", opts: ["git init", "git clone", "git status", "git add"], v: "🌱", d: "Initialized repository. Let’s grow!", l: "`git init` creates a new Git repository by setting up the internal `.git` folder."},160 {q: "How do you check what's happening in your repo?", a: "git status", opts: ["git status", "git log", "git add", "git commit"], v: "🔍", d: "Workspace status displayed.", l: "`git status` shows staged, unstaged, and untracked files."},161 {q: "How do you stage changes for commit?", a: "git add", opts: ["git add", "git commit", "git diff", "git log"], v: "🌿", d: "Changes staged for the next commit.", l: "`git add` moves changes to the staging area."},162 {q: "How do you commit staged changes?", a: "git commit", opts: ["git commit", "git stash", "git push", "git diff"], v: "🌳", d: "Snapshot saved in version history.", l: "`git commit` records the staged snapshot to history."},163 {q: "How do you view the commit history?", a: "git log", opts: ["git log", "git status", "git init", "git add"], v: "📜", d: "List of past commits shown.", l: "`git log` lists commit history with hashes and messages."},164 {q: "How do you preview unstaged file changes?", a: "git diff", opts: ["git diff", "git status", "git restore", "git log"], v: "🔧", d: "Differences revealed.", l: "`git diff` compares working directory to staging area."},165 {q: "How do you preview staged file changes?", a: "git diff --staged",opts:["git diff --staged", "git log", "git commit", "git init"], v:"🧰",d:"Staged changes compared.", l:"`git diff --staged` compares staged files to last commit."},166 {q: "How do you unstage a file or restore changes?", a: "git restore", opts: ["git restore", "git reset", "git log", "git init"], v: "♻️", d: "Working directory refreshed.", l: "`git restore` can discard or unstage changes."},167 {q: "How do you stage parts of files instead of the whole thing?",a: "git add -p", opts: ["git add -p", "git commit", "git stash", "git diff"], v: "🩹", d: "Selective staging complete.", l: "`git add -p` stages chosen hunks interactively."}168 ];169 170 /* ===================== STATE ===================== */171 let idx = 0,172 score = 0,173 lessonVisible = false,174 isChallenge = false,175 start = 0,176 timeLeft = 0,177 countdownInt = null;178 179 /* ===================== HELPERS ===================== */180 const $ = id => document.getElementById(id);181 182 function updateProgress() {183 $("progress").style.width = `${(idx / stages.length) * 100}%`;184 }185 186 function showTimer() {187 $("timer").textContent = isChallenge ? `⏱️ ${timeLeft}s left` : "";188 }189 190 /* ===================== GAME FLOW ===================== */191 function loadStage() {192 const s = stages[idx];193 $("question").textContent = s.q;194 $("choices").textContent = isChallenge ? "" : `Options: ${s.opts.join(" | ")}`;195 $("lesson-box").textContent = s.l;196 $("game-status").textContent = "";197 $("run-output").textContent = "";198 $("lesson-box").style.display = "none";199 lessonVisible = false;200 updateProgress();201 }202 203 function runCommand() {204 const input = $("git-input").value.trim();205 $("run-output").textContent = `$ ${input}`;206 const s = stages[idx];207 208 if (input.toLowerCase() === s.a) {209 $("correct-sound").play();210 $("game-status").style.color = "#28a745";211 $("game-status").textContent = "✅ Correct!";212 $("game-visual").textContent = s.v;213 $("game-description").textContent = s.d;214 score++;215 $("score").textContent = `Score: ${score}`;216 idx++;217 updateProgress();218 if (idx < stages.length) {219 setTimeout(() => {220 $("git-input").value = "";221 loadStage();222 }, 800);223 } else {224 finishGame();225 }226 } else {227 $("wrong-sound").play();228 $("game-status").style.color = "#dc3545";229 $("game-status").textContent = "❌ Try again. That’s not the right command.";230 }231 }232 233 function startChallenge() {234 // reset state235 idx = 0;236 score = 0;237 isChallenge = true;238 $("score").textContent = "Score: 0";239 $("git-input").value = "";240 // timer241 start = Date.now();242 timeLeft = 60;243 showTimer();244 clearInterval(countdownInt);245 countdownInt = setInterval(() => {246 timeLeft--;247 showTimer();248 if (timeLeft <= 0) failGame();249 }, 1000);250 loadStage();251 }252 253 function failGame() {254 clearInterval(countdownInt);255 $("game-status").style.color = "#dc3545";256 $("game-status").textContent = "⏳ Time's up! Click the challenge button to try again.";257 isChallenge = false;258 $("timer").textContent = "";259 }260 261 function finishGame() {262 clearInterval(countdownInt);263 $("win-sound").play();264 const duration = (Date.now() - start) / 1000;265 $("game-status").style.color = "#28a745";266 if (duration <= 30) {267 $("game-status").textContent = "🌟 You are a Superstar!";268 } else if (duration <= 60) {269 $("game-status").textContent = "🎉 Congratulations! You beat the clock!";270 } else {271 $("game-status").textContent = "Git Mastery Complete (but over time).";272 }273 isChallenge = false;274 $("timer").textContent = "";275 }276 277 /* ===================== UI EVENTS ===================== */278 $("lesson-button").addEventListener("click", () => {279 lessonVisible = !lessonVisible;280 $("lesson-box").style.display = lessonVisible ? "block" : "none";281 });282 283 /* ===================== INIT ===================== */284 window.onload = loadStage;285 </script>286</body>287</html>288