npm - create-template-html-css - Versions diffs - 1.9.0 → 2.0.1 - Mend

create-template-html-css 1.9.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/CHANGELOG.md +80 -0
package/COMPONENTS-GALLERY.html +735 -747
package/README.md +179 -2
package/bin/cli.js +15 -3
package/package.json +1 -1
package/templates/blackjack/index.html +97 -0
package/templates/blackjack/script.js +381 -0
package/templates/blackjack/style.css +452 -0
package/templates/breakout/index.html +56 -0
package/templates/breakout/script.js +387 -0
package/templates/breakout/style.css +239 -0
package/templates/connect-four/index.html +78 -0
package/templates/connect-four/script.js +413 -0
package/templates/connect-four/style.css +426 -0
package/templates/dice-game/index.html +99 -0
package/templates/dice-game/script.js +291 -0
package/templates/dice-game/style.css +403 -0
package/templates/flappy-bird/index.html +47 -0
package/templates/flappy-bird/script.js +394 -0
package/templates/flappy-bird/style.css +243 -0
package/templates/game-2048/index.html +59 -0
package/templates/game-2048/script.js +269 -0
package/templates/game-2048/style.css +281 -0
package/templates/pong/index.html +90 -0
package/templates/pong/script.js +364 -0
package/templates/pong/style.css +371 -0
package/templates/rock-paper-scissors/index.html +84 -0
package/templates/rock-paper-scissors/script.js +199 -0
package/templates/rock-paper-scissors/style.css +295 -0
package/templates/simon-says/index.html +64 -0
package/templates/simon-says/script.js +206 -0
package/templates/simon-says/style.css +250 -0
package/templates/slot-machine/index.html +112 -0
package/templates/slot-machine/script.js +238 -0
package/templates/slot-machine/style.css +464 -0
package/templates/tetris/index.html +84 -0
package/templates/tetris/script.js +447 -0
package/templates/tetris/style.css +286 -0
package/templates/whack-a-mole/index.html +85 -0
package/templates/whack-a-mole/script.js +172 -0
package/{demo-games/snake-game → templates/whack-a-mole}/style.css +114 -97
package/PUBLISH-GUIDE.md +0 -112
package/create-template-html-css-1.8.0.tgz +0 -0
package/demo-games/guess-number/index.html +0 -71
package/demo-games/guess-number/script.js +0 -216
package/demo-games/guess-number/style.css +0 -337
package/demo-games/memory-game/index.html +0 -50
package/demo-games/memory-game/script.js +0 -216
package/demo-games/memory-game/style.css +0 -288
package/demo-games/snake-game/index.html +0 -61
package/demo-games/snake-game/script.js +0 -360
package/demo-games/tic-tac-toe/index.html +0 -57
package/demo-games/tic-tac-toe/script.js +0 -156
package/demo-games/tic-tac-toe/style.css +0 -244

package/templates/game-2048/index.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - 2048 Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="game-card">
+            <div class="header">
+                <h1>2048</h1>
+                <div class="scores">
+                    <div class="score-box">
+                        <div class="score-label">Score</div>
+                        <div id="score" class="score-value">0</div>
+                    </div>
+                    <div class="score-box">
+                        <div class="score-label">Best</div>
+                        <div id="bestScore" class="score-value">0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="game-intro">
+                <p><strong>How to play:</strong> Use arrow keys to move tiles. Tiles with the same number merge into one when they touch. Add them up to reach <strong>2048!</strong></p>
+            </div>
+            <div class="game-container">
+                <div class="grid-container" id="grid"></div>
+                <div class="game-message" id="gameMessage">
+                    <div class="message-content">
+                        <p id="messageText"></p>
+                        <button id="retryBtn" class="btn btn-retry">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="button-group">
+                <button id="newGameBtn" class="btn btn-primary">New Game</button>
+                <button id="undoBtn" class="btn btn-secondary" disabled>Undo</button>
+            </div>
+            <div class="mobile-controls">
+                <div class="control-row">
+                    <button class="control-btn" id="upBtn">↑</button>
+                </div>
+                <div class="control-row">
+                    <button class="control-btn" id="leftBtn">←</button>
+                    <button class="control-btn" id="downBtn">↓</button>
+                    <button class="control-btn" id="rightBtn">→</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/game-2048/script.js ADDED Viewed

@@ -0,0 +1,269 @@
+// 2048 Game Logic
+const grid = document.getElementById('grid');
+const scoreDisplay = document.getElementById('score');
+const bestScoreDisplay = document.getElementById('bestScore');
+const newGameBtn = document.getElementById('newGameBtn');
+const undoBtn = document.getElementById('undoBtn');
+const retryBtn = document.getElementById('retryBtn');
+const gameMessage = document.getElementById('gameMessage');
+const messageText = document.getElementById('messageText');
+// Mobile controls
+const upBtn = document.getElementById('upBtn');
+const downBtn = document.getElementById('downBtn');
+const leftBtn = document.getElementById('leftBtn');
+const rightBtn = document.getElementById('rightBtn');
+const GRID_SIZE = 4;
+let board = [];
+let score = 0;
+let bestScore = localStorage.getItem('2048BestScore') || 0;
+let previousState = null;
+// Initialize game
+function initGame() {
+    board = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(0));
+    score = 0;
+    previousState = null;
+    updateScore();
+    hideMessage();
+    addRandomTile();
+    addRandomTile();
+    renderBoard();
+    undoBtn.disabled = true;
+}
+// Add random tile (2 or 4)
+function addRandomTile() {
+    const emptyCells = [];
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            if (board[i][j] === 0) {
+                emptyCells.push({ row: i, col: j });
+            }
+        }
+    }
+    if (emptyCells.length > 0) {
+        const { row, col } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
+        board[row][col] = Math.random() < 0.9 ? 2 : 4;
+    }
+}
+// Render board
+function renderBoard() {
+    grid.innerHTML = '';
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const tile = document.createElement('div');
+            tile.className = 'tile';
+            const value = board[i][j];
+            if (value !== 0) {
+                tile.textContent = value;
+                tile.classList.add(`tile-${value}`);
+                tile.classList.add('tile-new');
+            }
+            grid.appendChild(tile);
+        }
+    }
+}
+// Update score
+function updateScore() {
+    scoreDisplay.textContent = score;
+    if (score > bestScore) {
+        bestScore = score;
+        localStorage.setItem('2048BestScore', bestScore);
+    }
+    bestScoreDisplay.textContent = bestScore;
+}
+// Save state for undo
+function saveState() {
+    previousState = {
+        board: board.map(row => [...row]),
+        score: score
+    };
+    undoBtn.disabled = false;
+}
+// Undo move
+function undo() {
+    if (previousState) {
+        board = previousState.board.map(row => [...row]);
+        score = previousState.score;
+        updateScore();
+        renderBoard();
+        hideMessage();
+        previousState = null;
+        undoBtn.disabled = true;
+    }
+}
+// Move tiles
+function move(direction) {
+    saveState();
+    let moved = false;
+    if (direction === 'left' || direction === 'right') {
+        for (let i = 0; i < GRID_SIZE; i++) {
+            const row = board[i];
+            const newRow = direction === 'left' ? mergeLine(row) : mergeLine(row.reverse()).reverse();
+            if (JSON.stringify(row) !== JSON.stringify(newRow)) {
+                moved = true;
+            }
+            board[i] = newRow;
+        }
+    } else {
+        // Transpose for up/down
+        const transposed = transpose(board);
+        for (let i = 0; i < GRID_SIZE; i++) {
+            const row = transposed[i];
+            const newRow = direction === 'up' ? mergeLine(row) : mergeLine(row.reverse()).reverse();
+            if (JSON.stringify(row) !== JSON.stringify(newRow)) {
+                moved = true;
+            }
+            transposed[i] = newRow;
+        }
+        board = transpose(transposed);
+    }
+    if (moved) {
+        addRandomTile();
+        renderBoard();
+        updateScore();
+        if (checkWin()) {
+            showMessage('You Win! 🎉', true);
+        } else if (checkGameOver()) {
+            showMessage('Game Over! 😢', false);
+        }
+    } else {
+        // Revert if no move was made
+        previousState = null;
+        undoBtn.disabled = true;
+    }
+}
+// Merge line (left direction)
+function mergeLine(line) {
+    // Remove zeros
+    let newLine = line.filter(val => val !== 0);
+    // Merge same values
+    for (let i = 0; i < newLine.length - 1; i++) {
+        if (newLine[i] === newLine[i + 1]) {
+            newLine[i] *= 2;
+            score += newLine[i];
+            newLine.splice(i + 1, 1);
+        }
+    }
+    // Fill with zeros
+    while (newLine.length < GRID_SIZE) {
+        newLine.push(0);
+    }
+    return newLine;
+}
+// Transpose matrix
+function transpose(matrix) {
+    return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
+}
+// Check if won (reached 2048)
+function checkWin() {
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            if (board[i][j] === 2048) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+// Check if game over
+function checkGameOver() {
+    // Check for empty cells
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            if (board[i][j] === 0) {
+                return false;
+            }
+        }
+    }
+    // Check for possible merges
+    for (let i = 0; i < GRID_SIZE; i++) {
+        for (let j = 0; j < GRID_SIZE; j++) {
+            const current = board[i][j];
+            if ((j < GRID_SIZE - 1 && current === board[i][j + 1]) ||
+                (i < GRID_SIZE - 1 && current === board[i + 1][j])) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+// Show message
+function showMessage(text, isWin) {
+    messageText.textContent = text;
+    gameMessage.classList.add('show');
+    gameMessage.classList.toggle('win', isWin);
+}
+// Hide message
+function hideMessage() {
+    gameMessage.classList.remove('show', 'win');
+}
+// Keyboard controls
+document.addEventListener('keydown', (e) => {
+    if (gameMessage.classList.contains('show')) return;
+    switch (e.key) {
+        case 'ArrowUp':
+            e.preventDefault();
+            move('up');
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            move('down');
+            break;
+        case 'ArrowLeft':
+            e.preventDefault();
+            move('left');
+            break;
+        case 'ArrowRight':
+            e.preventDefault();
+            move('right');
+            break;
+    }
+});
+// Button controls
+upBtn.addEventListener('click', () => move('up'));
+downBtn.addEventListener('click', () => move('down'));
+leftBtn.addEventListener('click', () => move('left'));
+rightBtn.addEventListener('click', () => move('right'));
+newGameBtn.addEventListener('click', initGame);
+retryBtn.addEventListener('click', () => {
+    hideMessage();
+    initGame();
+});
+undoBtn.addEventListener('click', undo);
+// Initialize on load
+bestScoreDisplay.textContent = bestScore;
+initGame();

package/templates/game-2048/style.css ADDED Viewed

@@ -0,0 +1,281 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+.container {
+    width: 100%;
+    max-width: 500px;
+}
+.game-card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.header h1 {
+    font-size: 3rem;
+    color: #776e65;
+    font-weight: bold;
+}
+.scores {
+    display: flex;
+    gap: 10px;
+}
+.score-box {
+    background: #bbada0;
+    border-radius: 8px;
+    padding: 10px 20px;
+    text-align: center;
+    min-width: 80px;
+}
+.score-label {
+    color: #eee4da;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    font-weight: bold;
+}
+.score-value {
+    color: white;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+.game-intro {
+    background: #eee4da;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    color: #776e65;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+.game-container {
+    position: relative;
+    margin-bottom: 20px;
+}
+.grid-container {
+    background: #bbada0;
+    border-radius: 8px;
+    padding: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+.tile {
+    aspect-ratio: 1;
+    background: rgba(238, 228, 218, 0.35);
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #776e65;
+    transition: all 0.15s ease;
+}
+.tile-new {
+    animation: appear 0.2s ease;
+}
+@keyframes appear {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+.tile-2 { background: #eee4da; color: #776e65; }
+.tile-4 { background: #ede0c8; color: #776e65; }
+.tile-8 { background: #f2b179; color: #f9f6f2; }
+.tile-16 { background: #f59563; color: #f9f6f2; }
+.tile-32 { background: #f67c5f; color: #f9f6f2; }
+.tile-64 { background: #f65e3b; color: #f9f6f2; }
+.tile-128 { background: #edcf72; color: #f9f6f2; font-size: 1.6rem; }
+.tile-256 { background: #edcc61; color: #f9f6f2; font-size: 1.6rem; }
+.tile-512 { background: #edc850; color: #f9f6f2; font-size: 1.6rem; }
+.tile-1024 { background: #edc53f; color: #f9f6f2; font-size: 1.3rem; }
+.tile-2048 { background: #edc22e; color: #f9f6f2; font-size: 1.3rem; }
+.game-message {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(238, 228, 218, 0.95);
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+.game-message.show {
+    opacity: 1;
+    pointer-events: all;
+}
+.message-content {
+    text-align: center;
+}
+#messageText {
+    font-size: 2rem;
+    font-weight: bold;
+    color: #776e65;
+    margin-bottom: 20px;
+}
+.game-message.win #messageText {
+    color: #f67c5f;
+}
+.button-group {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.btn {
+    flex: 1;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.btn-primary {
+    background: #8f7a66;
+    color: white;
+}
+.btn-primary:hover:not(:disabled) {
+    background: #9f8a76;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(143, 122, 102, 0.4);
+}
+.btn-secondary {
+    background: #bbada0;
+    color: white;
+}
+.btn-secondary:hover:not(:disabled) {
+    background: #a89c94;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(187, 173, 160, 0.4);
+}
+.btn-retry {
+    background: #f67c5f;
+    color: white;
+    padding: 12px 30px;
+}
+.btn-retry:hover {
+    background: #f65e3b;
+    transform: scale(1.05);
+}
+.mobile-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+.control-row {
+    display: flex;
+    gap: 8px;
+}
+.control-btn {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #bbada0;
+    border-radius: 8px;
+    background: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: #776e65;
+}
+.control-btn:hover {
+    background: #eee4da;
+    transform: scale(1.05);
+}
+.control-btn:active {
+    transform: scale(0.95);
+}
+@media (max-width: 480px) {
+    .game-card {
+        padding: 20px;
+    }
+    .header h1 {
+        font-size: 2rem;
+    }
+    .tile {
+        font-size: 1.5rem;
+    }
+    .tile-128,
+    .tile-256,
+    .tile-512 {
+        font-size: 1.2rem;
+    }
+    .tile-1024,
+    .tile-2048 {
+        font-size: 1rem;
+    }
+    #messageText {
+        font-size: 1.5rem;
+    }
+}

package/templates/pong/index.html ADDED Viewed

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pong</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🕹️ Pong</h1>
+            <p class="subtitle">The classic game!</p>
+        </div>
+        <div class="game-mode">
+            <button class="mode-btn active" data-mode="pvc">🤖 vs Computer</button>
+            <button class="mode-btn" data-mode="pvp">👥 Two Players</button>
+        </div>
+        <div class="difficulty-selector">
+            <label>Difficulty:</label>
+            <select id="difficulty">
+                <option value="easy">Easy</option>
+                <option value="medium" selected>Medium</option>
+                <option value="hard">Hard</option>
+                <option value="impossible">Impossible</option>
+            </select>
+        </div>
+        <div class="score-board">
+            <div class="player-score">
+                <h3>👤 Player 1</h3>
+                <div id="player1Score" class="score">0</div>
+            </div>
+            <div class="divider">:</div>
+            <div class="player-score">
+                <h3 id="player2Name">🤖 Computer</h3>
+                <div id="player2Score" class="score">0</div>
+            </div>
+        </div>
+        <canvas id="gameCanvas"></canvas>
+        <div class="controls">
+            <button id="startBtn" class="btn btn-primary">Start Game</button>
+            <button id="pauseBtn" class="btn btn-secondary" disabled>Pause</button>
+            <button id="resetBtn" class="btn btn-danger">Reset</button>
+        </div>
+        <div id="resultMessage" class="result-message"></div>
+        <div class="instructions">
+            <h3>🎮 Game Instructions:</h3>
+            <div class="controls-grid">
+                <div class="control-item">
+                    <strong>Player 1:</strong>
+                    <div class="keys">
+                        <span class="key">W</span>
+                        <span>Up</span>
+                    </div>
+                    <div class="keys">
+                        <span class="key">S</span>
+                        <span>Down</span>
+                    </div>
+                </div>
+                <div class="control-item">
+                    <strong>Player 2:</strong>
+                    <div class="keys">
+                        <span class="key">↑</span>
+                        <span>Up</span>
+                    </div>
+                    <div class="keys">
+                        <span class="key">↓</span>
+                        <span>Down</span>
+                    </div>
+                </div>
+            </div>
+            <ul class="rules">
+                <li>Goal: Return the ball and score</li>
+                <li>Each goal scored = +1 point</li>
+                <li>First to 10 points wins!</li>
+                <li>Speed increases as the ball is returned</li>
+            </ul>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>