feat: Port 'War Card Game' to the Web App

Author: nishtha-agarwal-211

README.md

@@ -4,7 +4,7 @@
 
 # 🎮 Python Mini Projects Collection 🎯
 
-### *Learn Python by Building Fun, Interactive Games & Tools!*
+### _Learn Python by Building Fun, Interactive Games & Tools!_
 
 [![Python Version](https://img.shields.io/badge/python-3.10%2B-blue.svg)](https://www.python.org/downloads/)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
@@ -53,7 +53,6 @@
 - [📝 License](#-license)
 - [💬 Connect & Share](#-connect--share)
 
-
 ## 🎯 Repo Introduction
 
 This repository is a collection of small Python games and utility projects built to make learning Python more practical and engaging. It includes both command-line projects and a browser-based web app for trying the projects online.
@@ -110,18 +109,21 @@ cd python-mini-project
 #### 2. Create a Virtual Environment
 
 For Linux/macOS:
+
 ```bash
 python3 -m venv venv
 source venv/bin/activate
 ```
 
 For Windows (Command Prompt):
+
 ```bash
 python -m venv venv
 venv\Scripts\activate
 ```
 
 For Windows (PowerShell):
+
 ```bash
 python -m venv venv
 venv\Scripts\Activate.ps1
@@ -166,6 +168,7 @@ The web application provides a browser-based interface for all projects.
 #### Prerequisites for Web App
 
 The web app requires Node.js and npm:
+
 - Download from https://nodejs.org/ (v16 or higher recommended)
 - Verify installation: `node --version && npm --version`
 
@@ -188,6 +191,7 @@ pytest tests/ -v
 ```
 
 For specific test file:
+
 ```bash
 pytest tests/test_armstrong.py -v
 ```
@@ -212,6 +216,7 @@ pytest tests/test_armstrong.py -v
 #### Virtual Environment Reminder
 
 Always activate your virtual environment before working:
+
 ```bash
 # Linux/macOS
 source venv/bin/activate
@@ -221,6 +226,7 @@ venv\Scripts\activate
 ```
 
 Deactivate when done:
+
 ```bash
 deactivate
 ```
@@ -237,6 +243,7 @@ deactivate
 The browser app currently exposes 38 projects:
 
 ### Games
+
 - 2048 Game
 - BlackJack21
 - Coin Flip
@@ -255,8 +262,10 @@ The browser app currently exposes 38 projects:
 - Whack-a-Mole
 - Word Scramble
 - Spot the Difference
+- War Card Game
 
 ### Math
+
 - AP/GP/AGP/HP Recognizer
 - Armstrong Numbers
 - Binary Search
@@ -272,6 +281,7 @@ The browser app currently exposes 38 projects:
 - Progress Tracker
 
 ### Utilities
+
 - AI Resume Analyzer
 - Color Palette Suggestor
 - Morse Code
@@ -286,7 +296,6 @@ These standalone Python project files do not have a browser counterpart yet and
 
 - [games/Number-Sliding-Puzzle/Number-Sliding-Puzzle.py](games/Number-Sliding-Puzzle/Number-Sliding-Puzzle.py)
 - [games/Reverse-Hangman-Game/Reverse-Hangman-Game.py](games/Reverse-Hangman-Game/Reverse-Hangman-Game.py)
-- [games/War-Card-Game/War-Card-Game.py](games/War-Card-Game/War-Card-Game.py)
 - [math/Happy-Number/Happy-Number.py](math/Happy-Number/Happy-Number.py)
 - [math/Matrix-Calculator/Matrix-Calculator.py](math/Matrix-Calculator/Matrix-Calculator.py)
 - [math/Quadratic-Solver/Quadratic-Solver.py](math/Quadratic-Solver/Quadratic-Solver.py)
@@ -1159,7 +1168,7 @@ Found this helpful? Show some love!
 
 **Made with ❤️ for Python learners everywhere**
 
-*If you learned something new, don't forget to star the repo! ⭐*
+_If you learned something new, don't forget to star the repo! ⭐_
 
 [⬆ Back to Top](#-python-mini-projects-collection-)
 

web-app/index.html

@@ -872,6 +872,7 @@ <h3>Legal</h3>
     <script defer src="js/playground.js"></script>
     <script defer type="module" src="js/main.js"></script>
     <script defer src="js/hero-canvas.js"></script>
+    <script defer src="js/projects/war-card-game.js"></script>
     <script>
       lucide.createIcons();
     </script>
@@ -997,6 +998,13 @@ <h3>Legal</h3>
             desc: "Friendship relationship calculator",
             tags: "game,relationship",
           },
+          {
+            project: "war-card-game",
+            title: "War Card Game",
+            category: "games",
+            desc: "A classic two-player card game based on comparing rank values",
+            tags: "game,cards,multiplayer,war",
+          },
 
           // MATH (15+)
           {

web-app/js/projects.js

@@ -1,4 +1,4 @@
-// Project Registry
+// Project Registry
 // Each project's HTML and logic lives in its own file under js/projects/
 
 function getProjectHTML(projectName) {
@@ -1595,6 +1595,17 @@ function getProjectHTML(projectName) {
 
 const projectInstructions = {
   // GAMES
+  "war-card-game": {
+    title: "⚔️ How to Play War Card Game",
+    steps: [
+      "Enter names or check the option to play against the CPU.",
+      "Each player starts with a deck of 26 cards.",
+      "Click 'Draw / Battle' to draw the top card from both decks.",
+      "The player with the higher card rank wins the round and gets a point.",
+      "Ace is the highest, 2 is the lowest.",
+      "Play continues until all cards are drawn. The player with the most points wins!"
+    ]
+  },
   "2048-game": {
     title: "🎮 How to Play 2048",
     steps: [
@@ -3127,7 +3138,8 @@ function initializeProject(projectName) {
     "color-palette": "initColorPalette",
     "math-quiz": "initMathQuiz",
     "resume-analyzer": "initResumeAnalyzer",
-    "caesar-cipher": "initCaesarCipher"
+    "caesar-cipher": "initCaesarCipher",
+    "war-card-game": "initWarCardGame"
   };
 
   const initializerName = initializers[projectName];