diff --git a/README.md b/README.md index eff1d08..e2df681 100644 --- 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 new file mode 100644 index 0000000..de4ec10 --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + Code Kingdom + + + +
+

⚔️ Code Kingdom

+

+ Every player is a ruler. Every solution is power. Every shared idea changes the world. +

+
+ +
+
+

Your Kingdom

+
+
+ Defence Streak: + 0 days +
+
+ +
+

Battle Actions

+

Solve coding challenges to generate units for your next attack.

+ +
+ + + + + +
+ +
+

Attack Force

+
    +
  • Soldiers: 0
    • +
  • Tanks: 0
    • +
  • Air Units: 0
    • +
+
+
+ +
+

Rival Kingdom

+
+ + +
+
+ +
+

Kingdom Chronicle

+

Track your rise and see how coding consistency wins wars.

+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..c6882ef --- /dev/null +++ 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 `
${label}${value}
`; +} + +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."); diff --git a/style.css b/style.css new file mode 100644 index 0000000..fc53992 --- /dev/null +++ b/style.css @@ -0,0 +1,134 @@ +:root { + --bg: #0b1020; + --panel: #131a30; + --accent: #5eead4; + --accent-2: #f59e0b; + --text: #e2e8f0; + --danger: #ef4444; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Inter, Segoe UI, Roboto, sans-serif; + color: var(--text); + background: radial-gradient(circle at top, #182340 0, var(--bg) 60%); + min-height: 100vh; +} + +.hero { + text-align: center; + padding: 2rem 1rem 1rem; +} + +.hero h1 { + margin: 0; + font-size: 2.2rem; +} + +.hero p { + margin: 0.8rem auto 0; + max-width: 700px; + opacity: 0.9; +} + +.layout { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + padding: 1rem; +} + +.panel { + background: linear-gradient(180deg, #151d36 0, var(--panel) 100%); + border: 1px solid #27314f; + border-radius: 14px; + padding: 1rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.6rem; +} + +.stat { + border: 1px solid #2d3a60; + border-radius: 10px; + padding: 0.7rem; + background: #10172b; +} + +.stat strong { + display: block; + color: var(--accent); +} + +.subtext { + opacity: 0.8; + font-size: 0.9rem; +} + +.actions { + display: grid; + gap: 0.6rem; +} + +button { + border: none; + border-radius: 10px; + padding: 0.7rem; + font-weight: 600; + cursor: pointer; + transition: transform 0.15s ease, opacity 0.15s ease; +} + +button:hover { + transform: translateY(-1px); +} + +.actions button { + background: #1f2a48; + color: var(--text); + border: 1px solid #34456f; +} + +.attack-btn { + width: 100%; + margin-top: 1rem; + background: var(--danger); + color: white; +} + +.ghost-btn { + width: 100%; + margin-top: 0.5rem; + background: transparent; + border: 1px solid #3d4a70; + color: var(--text); +} + +.streak-box { + margin-top: 1rem; + padding: 0.8rem; + border: 1px solid #33456b; + border-radius: 10px; + background: #0f1630; +} + +.army-block ul, +#battleLog { + padding-left: 1rem; +} + +.log-panel { + margin: 0 1rem 1rem; +} + +#battleLog li { + margin: 0.4rem 0; +}