wad-lab 1.0.5 → 1.0.7

package/bin/index.js

@@ -28,7 +28,15 @@ function copyDirRecursive(src, dest) {
 }
 
 const templates = [
-  { name: 'all (Unpack All 17 Templates)', value: 'all' },
+  { name: 'all (Unpack All 27 Templates)', value: 'all' },
+  { name: 'game-rock-paper-scissors (Player vs Computer RPS)', value: 'game-rock-paper-scissors' },
+  { name: 'game-tic-tac-toe (3x3 Turn Grid with Win Check)', value: 'game-tic-tac-toe' },
+  { name: 'game-whack-a-mole (3x3 Mole Whack with Timer)', value: 'game-whack-a-mole' },
+  { name: 'game-memory-cards (3x4 Flashcard Matching Game)', value: 'game-memory-cards' },
+  { name: 'vue-memory-game (Vue 3 + Pinia Flashcard Matching)', value: 'vue-memory-game' },
+  { name: 'vue-todo-pinia (Vue 3 + Pinia Task Manager)', value: 'vue-todo-pinia' },
+  { name: 'vue-todo-router (Vue 3 + Router Multi-View Tasks)', value: 'vue-todo-router' },
+  { name: 'vue-cart-router-pinia (Vue 3 + Router + Pinia Shopping Cart)', value: 'vue-cart-router-pinia' },
   { name: 'html-css-js (Form Validation & DOM)', value: 'html-css-js' },
   { name: 'servlet-basic (Tomcat GET + POST)', value: 'servlet-basic' },
   { name: 'servlet-jdbc (Tomcat + MySQL JDBC)', value: 'servlet-jdbc' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wad-lab",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Interactive CLI for WAD Lab starter templates compatible with Node 12+",
   "bin": {
     "wad-lab": "./bin/index.js"

package/templates/game-memory-cards/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Card Game</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div class="game-container">
+        <h1>Memory Card Game</h1>
+
+        <div class="stats-bar">
+            <div>Moves: <span id="moves">0</span></div>
+            <div>Matches: <span id="matches">0</span> / 6</div>
+        </div>
+
+        <button type="button" class="btn-restart" onclick="initGame()">Restart Game</button>
+
+        <div class="card-grid" id="cardGrid"></div>
+    </div>
+</body>
+</html>

package/templates/game-memory-cards/script.js

@@ -0,0 +1,90 @@
+const symbols = ["🐶", "🐱", "🐭", "🐹", "🐰", "🦊"];
+let cards = [];
+let flippedCards = [];
+let matchedCount = 0;
+let moves = 0;
+let lockBoard = false;
+
+document.addEventListener("DOMContentLoaded", function () {
+    initGame();
+});
+
+function initGame() {
+    const grid = document.getElementById("cardGrid");
+    grid.innerHTML = "";
+
+    cards = [...symbols, ...symbols];
+    cards.sort(function () {
+        return 0.5 - Math.random();
+    });
+
+    flippedCards = [];
+    matchedCount = 0;
+    moves = 0;
+    lockBoard = false;
+
+    document.getElementById("moves").textContent = moves;
+    document.getElementById("matches").textContent = matchedCount;
+
+    cards.forEach(function (symbol, index) {
+        const card = document.createElement("div");
+        card.classList.add("card");
+        card.setAttribute("data-symbol", symbol);
+        card.setAttribute("data-index", index);
+        card.textContent = "?";
+
+        card.addEventListener("click", handleCardClick);
+        grid.appendChild(card);
+    });
+}
+
+function handleCardClick(event) {
+    const clickedCard = event.currentTarget;
+
+    if (lockBoard) return;
+    if (clickedCard.classList.contains("flipped") || clickedCard.classList.contains("matched")) return;
+
+    const symbol = clickedCard.getAttribute("data-symbol");
+    clickedCard.textContent = symbol;
+    clickedCard.classList.add("flipped");
+
+    flippedCards.push(clickedCard);
+
+    if (flippedCards.length === 2) {
+        moves++;
+        document.getElementById("moves").textContent = moves;
+        checkMatch();
+    }
+}
+
+function checkMatch() {
+    const card1 = flippedCards[0];
+    const card2 = flippedCards[1];
+
+    const symbol1 = card1.getAttribute("data-symbol");
+    const symbol2 = card2.getAttribute("data-symbol");
+
+    if (symbol1 === symbol2) {
+        card1.classList.add("matched");
+        card2.classList.add("matched");
+        matchedCount++;
+        document.getElementById("matches").textContent = matchedCount;
+        flippedCards = [];
+
+        if (matchedCount === symbols.length) {
+            setTimeout(function () {
+                alert("Congratulations! You won in " + moves + " moves! 🎉");
+            }, 300);
+        }
+    } else {
+        lockBoard = true;
+        setTimeout(function () {
+            card1.textContent = "?";
+            card2.textContent = "?";
+            card1.classList.remove("flipped");
+            card2.classList.remove("flipped");
+            flippedCards = [];
+            lockBoard = false;
+        }, 800);
+    }
+}

package/templates/game-memory-cards/style.css

@@ -0,0 +1,74 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    background-color: #f4f4f4;
+}
+
+.game-container {
+    text-align: center;
+    background: #ffffff;
+    padding: 25px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+
+.stats-bar {
+    display: flex;
+    justify-content: space-around;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 15px 0;
+}
+
+.btn-restart {
+    padding: 8px 16px;
+    font-size: 15px;
+    background-color: #2980b9;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+.btn-restart:hover {
+    background-color: #1f618d;
+}
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 75px);
+    grid-gap: 10px;
+    justify-content: center;
+}
+
+.card {
+    width: 75px;
+    height: 75px;
+    background-color: #34495e;
+    color: white;
+    font-size: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.card.flipped {
+    background-color: #ecf0f1;
+    color: #2c3e50;
+    cursor: default;
+}
+
+.card.matched {
+    background-color: #2ecc71;
+    color: white;
+    cursor: default;
+}

package/templates/game-rock-paper-scissors/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rock Paper Scissors</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div class="game-container">
+        <h1>Rock Paper Scissors</h1>
+
+        <div class="score-board">
+            <div>Player: <span id="playerScore">0</span></div>
+            <div>Computer: <span id="computerScore">0</span></div>
+            <div>Ties: <span id="tieScore">0</span></div>
+        </div>
+
+        <div class="controls">
+            <button type="button" class="btn" onclick="playGame('Rock')">✊ Rock</button>
+            <button type="button" class="btn" onclick="playGame('Paper')">✋ Paper</button>
+            <button type="button" class="btn" onclick="playGame('Scissors')">✌ Scissors</button>
+        </div>
+
+        <div class="results-box">
+            <p>Your Choice: <strong id="playerChoice">-</strong></p>
+            <p>Computer Choice: <strong id="computerChoice">-</strong></p>
+            <h2 id="roundResult">Choose an option to start!</h2>
+        </div>
+
+        <button type="button" class="btn btn-reset" onclick="resetGame()">Reset Game</button>
+    </div>
+</body>
+</html>

package/templates/game-rock-paper-scissors/script.js

@@ -0,0 +1,49 @@
+let playerScore = 0;
+let computerScore = 0;
+let tieScore = 0;
+
+const choices = ["Rock", "Paper", "Scissors"];
+
+function playGame(playerChoice) {
+    const randomIndex = Math.floor(Math.random() * choices.length);
+    const computerChoice = choices[randomIndex];
+
+    document.getElementById("playerChoice").textContent = playerChoice;
+    document.getElementById("computerChoice").textContent = computerChoice;
+
+    let result = "";
+
+    if (playerChoice === computerChoice) {
+        result = "It's a Tie!";
+        tieScore++;
+        document.getElementById("tieScore").textContent = tieScore;
+    } else if (
+        (playerChoice === "Rock" && computerChoice === "Scissors") ||
+        (playerChoice === "Paper" && computerChoice === "Rock") ||
+        (playerChoice === "Scissors" && computerChoice === "Paper")
+    ) {
+        result = "You Win! 🎉";
+        playerScore++;
+        document.getElementById("playerScore").textContent = playerScore;
+    } else {
+        result = "Computer Wins! 💻";
+        computerScore++;
+        document.getElementById("computerScore").textContent = computerScore;
+    }
+
+    document.getElementById("roundResult").textContent = result;
+}
+
+function resetGame() {
+    playerScore = 0;
+    computerScore = 0;
+    tieScore = 0;
+
+    document.getElementById("playerScore").textContent = "0";
+    document.getElementById("computerScore").textContent = "0";
+    document.getElementById("tieScore").textContent = "0";
+
+    document.getElementById("playerChoice").textContent = "-";
+    document.getElementById("computerChoice").textContent = "-";
+    document.getElementById("roundResult").textContent = "Choose an option to start!";
+}

package/templates/game-rock-paper-scissors/style.css

@@ -0,0 +1,67 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    background-color: #f7f7f7;
+}
+
+.game-container {
+    text-align: center;
+    background: #ffffff;
+    padding: 30px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    width: 360px;
+}
+
+.score-board {
+    display: flex;
+    justify-content: space-around;
+    font-size: 16px;
+    font-weight: bold;
+    margin: 20px 0;
+    padding: 10px;
+    background-color: #eee;
+    border-radius: 4px;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.btn {
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    border-radius: 4px;
+}
+
+.btn:hover {
+    background-color: #f0f0f0;
+}
+
+.btn-reset {
+    background-color: #e74c3c;
+    color: white;
+    border: none;
+    margin-top: 15px;
+}
+
+.btn-reset:hover {
+    background-color: #c0392b;
+}
+
+.results-box {
+    margin: 20px 0;
+    padding: 15px;
+    border: 1px dashed #ccc;
+    border-radius: 4px;
+}

package/templates/game-tic-tac-toe/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div class="game-container">
+        <h1>Tic Tac Toe</h1>
+        <h2 id="status">Player X's Turn</h2>
+
+        <div class="board" id="board">
+            <button type="button" class="cell" data-index="0"></button>
+            <button type="button" class="cell" data-index="1"></button>
+            <button type="button" class="cell" data-index="2"></button>
+            <button type="button" class="cell" data-index="3"></button>
+            <button type="button" class="cell" data-index="4"></button>
+            <button type="button" class="cell" data-index="5"></button>
+            <button type="button" class="cell" data-index="6"></button>
+            <button type="button" class="cell" data-index="7"></button>
+            <button type="button" class="cell" data-index="8"></button>
+        </div>
+
+        <button type="button" class="btn-restart" onclick="restartGame()">Restart Game</button>
+    </div>
+</body>
+</html>

package/templates/game-tic-tac-toe/script.js

@@ -0,0 +1,82 @@
+let board = ["", "", "", "", "", "", "", "", ""];
+let currentPlayer = "X";
+let gameActive = true;
+
+const winningConditions = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+];
+
+document.addEventListener("DOMContentLoaded", function () {
+    const cells = document.querySelectorAll(".cell");
+    cells.forEach(function (cell) {
+        cell.addEventListener("click", handleCellClick);
+    });
+});
+
+function handleCellClick(event) {
+    const clickedCell = event.target;
+    const clickedIndex = parseInt(clickedCell.getAttribute("data-index"), 10);
+
+    if (board[clickedIndex] !== "" || !gameActive) {
+        return;
+    }
+
+    board[clickedIndex] = currentPlayer;
+    clickedCell.textContent = currentPlayer;
+
+    checkResult();
+}
+
+function checkResult() {
+    let roundWon = false;
+
+    for (let i = 0; i < winningConditions.length; i++) {
+        const winCondition = winningConditions[i];
+        const a = board[winCondition[0]];
+        const b = board[winCondition[1]];
+        const c = board[winCondition[2]];
+
+        if (a === "" || b === "" || c === "") {
+            continue;
+        }
+
+        if (a === b && b === c) {
+            roundWon = true;
+            break;
+        }
+    }
+
+    if (roundWon) {
+        document.getElementById("status").textContent = "Player " + currentPlayer + " Wins! 🎉";
+        gameActive = false;
+        return;
+    }
+
+    const roundDraw = !board.includes("");
+    if (roundDraw) {
+        document.getElementById("status").textContent = "Game Draw! 🤝";
+        gameActive = false;
+        return;
+    }
+
+    currentPlayer = currentPlayer === "X" ? "O" : "X";
+    document.getElementById("status").textContent = "Player " + currentPlayer + "'s Turn";
+}
+
+function restartGame() {
+    board = ["", "", "", "", "", "", "", "", ""];
+    gameActive = true;
+    currentPlayer = "X";
+    document.getElementById("status").textContent = "Player X's Turn";
+
+    document.querySelectorAll(".cell").forEach(function (cell) {
+        cell.textContent = "";
+    });
+}

package/templates/game-tic-tac-toe/style.css

@@ -0,0 +1,66 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    background-color: #f5f5f5;
+}
+
+.game-container {
+    text-align: center;
+    background: #ffffff;
+    padding: 30px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+
+#status {
+    margin: 15px 0;
+    color: #333;
+    font-size: 20px;
+}
+
+.board {
+    display: grid;
+    grid-template-columns: repeat(3, 80px);
+    grid-gap: 8px;
+    margin: 20px auto;
+    width: 256px;
+}
+
+.cell {
+    width: 80px;
+    height: 80px;
+    background-color: #f9f9f9;
+    border: 2px solid #555;
+    font-size: 36px;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.cell:hover {
+    background-color: #eee;
+}
+
+.cell:disabled {
+    cursor: not-allowed;
+}
+
+.btn-restart {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-restart:hover {
+    background-color: #555;
+}

package/templates/game-whack-a-mole/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whack A Mole</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div class="game-container">
+        <h1>Whack A Mole</h1>
+
+        <div class="stats-bar">
+            <div>Score: <span id="score">0</span></div>
+            <div>Time Left: <span id="timeLeft">30</span>s</div>
+        </div>
+
+        <button type="button" class="btn-start" id="startBtn" onclick="startGame()">Start Game</button>
+
+        <div class="grid">
+            <div class="hole" data-index="0"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="1"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="2"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="3"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="4"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="5"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="6"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="7"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+            <div class="hole" data-index="8"><div class="mole" onclick="whackMole(this)">🐹</div></div>
+        </div>
+    </div>
+</body>
+</html>

package/templates/game-whack-a-mole/script.js

@@ -0,0 +1,83 @@
+let score = 0;
+let timeLeft = 30;
+let gameInterval = null;
+let moleTimeout = null;
+let lastHole = null;
+let isPlaying = false;
+
+function startGame() {
+    if (isPlaying) return;
+
+    isPlaying = true;
+    score = 0;
+    timeLeft = 30;
+
+    document.getElementById("score").textContent = score;
+    document.getElementById("timeLeft").textContent = timeLeft;
+    document.getElementById("startBtn").disabled = true;
+
+    peepMole();
+
+    gameInterval = setInterval(function () {
+        timeLeft--;
+        document.getElementById("timeLeft").textContent = timeLeft;
+
+        if (timeLeft <= 0) {
+            endGame();
+        }
+    }, 1000);
+}
+
+function getRandomHole() {
+    const holes = document.querySelectorAll(".hole");
+    const randomIndex = Math.floor(Math.random() * holes.length);
+    const selectedHole = holes[randomIndex];
+
+    if (selectedHole === lastHole) {
+        return getRandomHole();
+    }
+
+    lastHole = selectedHole;
+    return selectedHole;
+}
+
+function peepMole() {
+    if (!isPlaying) return;
+
+    const hole = getRandomHole();
+    hole.classList.add("up");
+
+    const stayTime = Math.floor(Math.random() * 500) + 600;
+
+    moleTimeout = setTimeout(function () {
+        hole.classList.remove("up");
+        if (isPlaying) {
+            peepMole();
+        }
+    }, stayTime);
+}
+
+function whackMole(moleElement) {
+    const hole = moleElement.parentElement;
+    if (!isPlaying || !hole.classList.contains("up")) return;
+
+    score++;
+    document.getElementById("score").textContent = score;
+    hole.classList.remove("up");
+
+    clearTimeout(moleTimeout);
+    setTimeout(peepMole, 200);
+}
+
+function endGame() {
+    isPlaying = false;
+    clearInterval(gameInterval);
+    clearTimeout(moleTimeout);
+
+    document.querySelectorAll(".hole").forEach(function (hole) {
+        hole.classList.remove("up");
+    });
+
+    document.getElementById("startBtn").disabled = false;
+    alert("Game Over! Your final score is: " + score);
+}