mwk28 · mwk28 · Feb 6, 2026
diff --git a/README.md b/README.md
@@ -1,2 +1,40 @@
-# Code-kingdom
-A coding related game
+# Code Kingdom
+
+Code Kingdom is a web strategy game concept inspired by Clash of Clans and coding practice platforms.
+
+## Core Idea
+- Every player is a ruler.
+- Every solved problem becomes military power.
+- Every shared explanation improves collective knowledge.
+- Academic life and mental health are visible game systems.
+
+## Kingdom Attributes
+- **Walls** → study consistency
+- **Tower** → coding skill
+- **Library** → shared knowledge
+- **Army** → number and quality of solved problems
+- **Morale** → mental health
+
+## Attack System
+To attack a rival kingdom, players solve coding tasks:
+- **Easy problem** → Soldiers
+- **Medium problem** → Tanks
+- **Hard problem** → Air units
+- **Explain solution** → Healing/morale + knowledge boost
+
+Defence strength is based on:
+- streak consistency,
+- solved-problem strength,
+- shared solutions,
+- morale/mental health.
+
+## MVP Included in This Repo
+This repository now includes a playable browser MVP with:
+- kingdom stats,
+- action buttons for coding/study events,
+- rival generation,
+- attack simulation,
+- battle chronicle log.
+
+## Run locally
+Open `index.html` directly in your browser.
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Kingdom</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header class="hero">
+      <h1>⚔️ Code Kingdom</h1>
+      <p>
+        Every player is a ruler. Every solution is power. Every shared idea changes the world.
+      </p>
+    </header>
+
+    <main class="layout">
+      <section class="panel">
+        <h2>Your Kingdom</h2>
+        <div class="stats-grid" id="kingdomStats"></div>
+        <div class="streak-box">
+          <strong>Defence Streak:</strong>
+          <span id="streakValue">0</span> days
+        </div>
+      </section>
+
+      <section class="panel">
+        <h2>Battle Actions</h2>
+        <p class="subtext">Solve coding challenges to generate units for your next attack.</p>
+
+        <div class="actions">
+          <button data-action="easy">Solve Easy (+5 Soldiers)</button>
+          <button data-action="medium">Solve Medium (+2 Tanks)</button>
+          <button data-action="hard">Solve Hard (+1 Air Unit)</button>
+          <button data-action="explain">Explain Solution (+12 Morale, +10 Library)</button>
+          <button data-action="study">Study Session (+8 Walls, +1 Streak)</button>
+        </div>
+
+        <div class="army-block">
+          <h3>Attack Force</h3>
+          <ul>
+            <li>Soldiers: <span id="soldiers">0</span></li>
+            <li>Tanks: <span id="tanks">0</span></li>
+            <li>Air Units: <span id="air">0</span></li>
+          </ul>
+        </div>
+      </section>
+
+      <section class="panel enemy-panel">
+        <h2>Rival Kingdom</h2>
+        <div id="enemyStats" class="stats-grid"></div>
+        <button id="attackBtn" class="attack-btn">Launch Attack</button>
+        <button id="refreshEnemyBtn" class="ghost-btn">Scout New Rival</button>
+      </section>
+    </main>
+
+    <section class="panel log-panel">
+      <h2>Kingdom Chronicle</h2>
+      <p class="subtext">Track your rise and see how coding consistency wins wars.</p>
+      <ul id="battleLog"></ul>
+    </section>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,171 @@
+const state = {
+  player: {
+    walls: 60,
+    tower: 40,
+    library: 20,
+    armyPower: 10,
+    morale: 75,
+    streak: 0,
+    solved: 0,
+    shared: 0,
+  },
+  enemy: null,
+  force: {
+    soldiers: 0,
+    tanks: 0,
+    air: 0,
+  },
+};
+
+const kingdomStats = document.getElementById("kingdomStats");
+const enemyStats = document.getElementById("enemyStats");
+const battleLog = document.getElementById("battleLog");
+const streakValue = document.getElementById("streakValue");
+
+function clamp(value) {
+  return Math.max(0, Math.min(100, value));
+}
+
+function generateEnemy() {
+  const base = 30 + Math.floor(Math.random() * 45);
+  state.enemy = {
+    walls: base,
+    tower: base + Math.floor(Math.random() * 20),
+    library: base - 10 + Math.floor(Math.random() * 25),
+    armyPower: base + Math.floor(Math.random() * 20),
+    morale: base + Math.floor(Math.random() * 20),
+    streak: 1 + Math.floor(Math.random() * 15),
+  };
+  render();
+  addLog("🛰️ You scouted a new rival kingdom.");
+}
+
+function makeStatCard(label, value) {
+  return `<div class="stat"><small>${label}</small><strong>${value}</strong></div>`;
+}
+
+function render() {
+  const { player, enemy, force } = state;
+
+  kingdomStats.innerHTML = [
+    makeStatCard("Walls (Study Consistency)", player.walls),
+    makeStatCard("Tower (Coding Skill)", player.tower),
+    makeStatCard("Library (Shared Knowledge)", player.library),
+    makeStatCard("Army (Problems Solved)", player.armyPower),
+    makeStatCard("Morale (Mental Health)", player.morale),
+    makeStatCard("Shared Solutions", player.shared),
+  ].join("");
+
+  if (enemy) {
+    enemyStats.innerHTML = [
+      makeStatCard("Walls", enemy.walls),
+      makeStatCard("Tower", enemy.tower),
+      makeStatCard("Library", enemy.library),
+      makeStatCard("Army", enemy.armyPower),
+      makeStatCard("Morale", enemy.morale),
+      makeStatCard("Streak", enemy.streak),
+    ].join("");
+  }
+
+  document.getElementById("soldiers").textContent = force.soldiers;
+  document.getElementById("tanks").textContent = force.tanks;
+  document.getElementById("air").textContent = force.air;
+  streakValue.textContent = player.streak;
+}
+
+function addLog(message) {
+  const item = document.createElement("li");
+  item.textContent = message;
+  battleLog.prepend(item);
+
+  while (battleLog.children.length > 8) {
+    battleLog.removeChild(battleLog.lastChild);
+  }
+}
+
+function applyAction(action) {
+  const { player, force } = state;
+
+  if (action === "easy") {
+    force.soldiers += 5;
+    player.armyPower = clamp(player.armyPower + 3);
+    player.solved += 1;
+    addLog("✅ Easy challenge solved: +5 soldiers.");
+  } else if (action === "medium") {
+    force.tanks += 2;
+    player.tower = clamp(player.tower + 2);
+    player.armyPower = clamp(player.armyPower + 4);
+    player.solved += 1;
+    addLog("💡 Medium challenge solved: +2 tanks.");
+  } else if (action === "hard") {
+    force.air += 1;
+    player.tower = clamp(player.tower + 4);
+    player.armyPower = clamp(player.armyPower + 6);
+    player.solved += 1;
+    addLog("🚀 Hard challenge solved: +1 air unit.");
+  } else if (action === "explain") {
+    player.library = clamp(player.library + 10);
+    player.morale = clamp(player.morale + 12);
+    player.shared += 1;
+    addLog("📚 You shared an explanation. Library and morale boosted.");
+  } else if (action === "study") {
+    player.walls = clamp(player.walls + 8);
+    player.streak += 1;
+    addLog("🧠 Study session complete. Walls reinforced and streak increased.");
+  }
+
+  render();
+}
+
+function launchAttack() {
+  const { player, enemy, force } = state;
+
+  if (!enemy) {
+    addLog("No enemy selected.");
+    return;
+  }
+
+  const offense =
+    force.soldiers * 1 +
+    force.tanks * 4 +
+    force.air * 7 +
+    player.tower * 0.3 +
+    player.armyPower * 0.4 +
+    player.library * 0.2;
+
+  const defense =
+    enemy.walls * 0.6 +
+    enemy.tower * 0.5 +
+    enemy.armyPower * 0.4 +
+    enemy.library * 0.25 +
+    enemy.morale * 0.25 +
+    enemy.streak * 1.8;
+
+  if (offense > defense) {
+    addLog("🏆 Victory! Your coding force overpowered the rival kingdom.");
+    player.morale = clamp(player.morale + 6);
+    player.walls = clamp(player.walls + 4);
+  } else {
+    addLog("🛡️ Defeat. Rival defenses held. Build streak, morale, and skills.");
+    player.morale = clamp(player.morale - 8);
+    player.walls = clamp(player.walls - 4);
+  }
+
+  force.soldiers = 0;
+  force.tanks = 0;
+  force.air = 0;
+  generateEnemy();
+}
+
+document.querySelectorAll("[data-action]").forEach((button) => {
+  button.addEventListener("click", () => {
+    applyAction(button.dataset.action);
+  });
+});
+
+document.getElementById("attackBtn").addEventListener("click", launchAttack);
+document.getElementById("refreshEnemyBtn").addEventListener("click", generateEnemy);
+
+generateEnemy();
+render();
+addLog("👑 Welcome ruler. Build your kingdom through coding and consistency.");