Merge pull request steam-bell-92#1181 from nishtha-agarwal-211/feat-port-war-card-game

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

Author: steam-bell-92

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 39 projects:
 
 ### Games
+
 - 2048 Game
 - BlackJack21
 - Coin Flip
@@ -255,9 +262,11 @@ The browser app currently exposes 39 projects:
 - Whack-a-Mole
 - Word Scramble
 - Spot the Difference
+- War Card Game
 - Number Sliding Puzzle
 
 ### Math
+
 - AP/GP/AGP/HP Recognizer
 - Armstrong Numbers
 - Binary Search
@@ -273,6 +282,7 @@ The browser app currently exposes 39 projects:
 - Progress Tracker
 
 ### Utilities
+
 - AI Resume Analyzer
 - Color Palette Suggestor
 - Morse Code
@@ -286,7 +296,6 @@ The browser app currently exposes 39 projects:
 These standalone Python project files do not have a browser counterpart yet and are good future-port candidates:
 
 - [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 defer src="js/projects/number-sliding-puzzle.js"></script>
     <script>
       lucide.createIcons();
@@ -1005,6 +1006,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

@@ -1595,6 +1595,15 @@ 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!"
   "number-sliding-puzzle": {
     title: "🧩 How to Play Number Sliding Puzzle",
     steps: [
@@ -3167,6 +3176,7 @@ function initializeProject(projectName) {
     "math-quiz": "initMathQuiz",
     "resume-analyzer": "initResumeAnalyzer",
     "caesar-cipher": "initCaesarCipher",
+    "war-card-game": "initWarCardGame"
     "number-sliding-puzzle": "initNumberSlidingPuzzle"
   };