create-template-html-css 2.0.2 → 2.0.4

package/bin/cli.js

@@ -14,7 +14,7 @@ program
   .description(
     chalk.cyan("🎨 Create HTML/CSS UI component templates in seconds"),
   )
-  .version("1.8.1");
+  .version("2.0.4");
 
 // Add intro message
 program.on("--help", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {

package/src/generator.js

@@ -241,6 +241,22 @@ const VALID_COMPONENTS = [
   "login",
   "register",
   "skeleton",
+  "tic-tac-toe",
+  "memory-game",
+  "snake-game",
+  "guess-number",
+  "game-2048",
+  "whack-a-mole",
+  "simon-says",
+  "rock-paper-scissors",
+  "breakout",
+  "tetris",
+  "flappy-bird",
+  "connect-four",
+  "blackjack",
+  "slot-machine",
+  "dice-game",
+  "pong",
 ];
 
 // Security: Sanitize filename to prevent path traversal

package/templates/blackjack/script.js

@@ -156,7 +156,7 @@ document.querySelectorAll('.bet-btn').forEach(btn => {
             updateDisplay();
             document.getElementById('dealBtn').disabled = false;
         } else {
-            showMessage('אין מספיק קרדיטים!', 'error');
+            showMessage('Not enough credits!', 'error');
         }
     });
 });
@@ -166,7 +166,7 @@ document.getElementById('dealBtn').addEventListener('click', startGame);
 
 function startGame() {
     if (gameState.currentBet === 0) {
-        showMessage('בחר הימור תחילה!', 'error');
+        showMessage('Choose a bet first!', 'error');
         return;
     }
     
@@ -261,7 +261,7 @@ document.getElementById('doubleBtn').addEventListener('click', () => {
             stand();
         }
     } else {
-        showMessage('אין מספיק קרדיטים להכפלה!', 'error');
+        showMessage('Not enough credits to double down!', 'error');
     }
 });
 
@@ -301,23 +301,23 @@ function endGame(result) {
     switch (result) {
         case 'blackjack':
             winAmount = Math.floor(gameState.currentBet * 2.5); // 3:2 payout
-            message = '🎉 BLACKJACK! אתה מנצח!';
+            message = '🎉 BLACKJACK! You win!';
             gameState.wins++;
             break;
         case 'win':
             winAmount = gameState.currentBet * 2;
-            message = '🎉 ניצחת!';
+            message = '🎉 You won!';
             gameState.wins++;
             break;
         case 'lose':
-            message = '😢 הפסדת!';
+            message = '😢 You lost!';
             break;
         case 'push':
             winAmount = gameState.currentBet;
-            message = '🤝 תיקו!';
+            message = '🤝 Push!';
             break;
         case 'bust':
-            message = '💥 עברת את 21! הפסדת!';
+            message = '💥 Busted! You lost!';
             break;
     }
     
@@ -337,7 +337,7 @@ function endGame(result) {
     // Check if out of credits
     if (gameState.credits < 10) {
         setTimeout(() => {
-            alert('נגמרו הקרדיטים! מקבל 1000 קרדיטים חדשים.');
+            alert('Out of credits! Receiving 1000 new credits.');
             gameState.credits = 1000;
             updateDisplay();
             saveGame();

package/templates/breakout/script.js

@@ -263,11 +263,11 @@ function gameOver() {
     ctx.fillStyle = '#FFFFFF';
     ctx.font = 'bold 48px Arial';
     ctx.textAlign = 'center';
-    ctx.fillText('משחק נגמר!', canvas.width / 2, canvas.height / 2 - 40);
+    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40);
     
     ctx.font = '24px Arial';
-    ctx.fillText(`ניקוד סופי: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 20);
-    ctx.fillText('לחץ "אתחל" להתחיל מחדש', canvas.width / 2, canvas.height / 2 + 60);
+    ctx.fillText(`Final Score: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 20);
+    ctx.fillText('Click "Reset" to restart', canvas.width / 2, canvas.height / 2 + 60);
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
@@ -306,7 +306,7 @@ function draw() {
         ctx.fillStyle = '#FFFFFF';
         ctx.font = 'bold 36px Arial';
         ctx.textAlign = 'center';
-        ctx.fillText('משחק מושהה', canvas.width / 2, canvas.height / 2);
+        ctx.fillText('Game Paused', canvas.width / 2, canvas.height / 2);
     }
 }
 
@@ -349,7 +349,7 @@ function startGame() {
 // Pause game
 function pauseGame() {
     gameState.paused = !gameState.paused;
-    document.getElementById('pauseBtn').textContent = gameState.paused ? 'המשך' : 'השהה';
+    document.getElementById('pauseBtn').textContent = gameState.paused ? 'Resume' : 'Pause';
 }
 
 // Reset game
@@ -372,7 +372,7 @@ function resetGame() {
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
-    document.getElementById('pauseBtn').textContent = 'השהה';
+    document.getElementById('pauseBtn').textContent = 'Pause';
 }
 
 // Event listeners

package/templates/connect-four/script.js

@@ -331,15 +331,15 @@ function endGame(winner) {
         gameState.score1++;
         localStorage.setItem('connect4Score1', gameState.score1);
         updateScore();
-        showMessage('🎉 שחקן 1 ניצח!', 'player1');
+        showMessage('🎉 Player 1 wins!', 'player1');
     } else if (winner === PLAYER2) {
         gameState.score2++;
         localStorage.setItem('connect4Score2', gameState.score2);
         updateScore();
-        const message = gameState.gameMode === 'pvc' ? '🤖 המחשב ניצח!' : '🎉 שחקן 2 ניצח!';
+        const message = gameState.gameMode === 'pvc' ? '🤖 Computer wins!' : '🎉 Player 2 wins!';
         showMessage(message, 'player2');
     } else {
-        showMessage('🤝 תיקו!', 'draw');
+        showMessage('🤝 Draw!', 'draw');
     }
 }
 
@@ -354,10 +354,10 @@ function showMessage(text, type) {
 function updateTurnIndicator() {
     const turnIndicator = document.getElementById('turnIndicator');
     if (gameState.currentPlayer === PLAYER1) {
-        turnIndicator.textContent = 'תור שחקן 1';
+        turnIndicator.textContent = 'Player 1\'s Turn';
         turnIndicator.className = 'player1-turn';
     } else {
-        const text = gameState.gameMode === 'pvc' ? 'תור המחשב' : 'תור שחקן 2';
+        const text = gameState.gameMode === 'pvc' ? 'Computer\'s Turn' : 'Player 2\'s Turn';
         turnIndicator.textContent = text;
         turnIndicator.className = 'player2-turn';
     }

package/templates/dice-game/script.js

@@ -1,8 +1,8 @@
 // Game state
 let gameState = {
     players: [
-        { total: 0, current: 0, name: 'שחקן 1' },
-        { total: 0, current: 0, name: 'שחקן 2' }
+        { total: 0, current: 0, name: 'Player 1' },
+        { total: 0, current: 0, name: 'Player 2' }
     ],
     currentPlayer: 0,
     gameActive: true,
@@ -34,13 +34,13 @@ function updateDisplay() {
     if (gameState.currentPlayer === 0) {
         player1Card.classList.add('active');
         player2Card.classList.remove('active');
-        player1Card.querySelector('.current-turn').textContent = 'תורך!';
-        player2Card.querySelector('.current-turn').textContent = 'המתן...';
+        player1Card.querySelector('.current-turn').textContent = 'Your Turn!';
+        player2Card.querySelector('.current-turn').textContent = 'Wait...';
     } else {
         player1Card.classList.remove('active');
         player2Card.classList.add('active');
-        player1Card.querySelector('.current-turn').textContent = 'המתן...';
-        player2Card.querySelector('.current-turn').textContent = gameState.gameMode === 'pvc' ? 'תור המחשב...' : 'תורך!';
+        player1Card.querySelector('.current-turn').textContent = 'Wait...';
+        player2Card.querySelector('.current-turn').textContent = gameState.gameMode === 'pvc' ? 'Computer\'s Turn...' : 'Your Turn!';
     }
 }
 
@@ -96,7 +96,7 @@ document.getElementById('rollBtn').addEventListener('click', async () => {
     if (roll === 1) {
         // Lost turn
         gameState.players[gameState.currentPlayer].current = 0;
-        showMessage(`💥 הטלת 1! איבדת את כל ניקוד התור!`, 'error');
+        showMessage(`💥 Rolled 1! You lost all turn points!`, 'error');
         
         await new Promise(resolve => setTimeout(resolve, 1500));
         switchPlayer();
@@ -104,7 +104,7 @@ document.getElementById('rollBtn').addEventListener('click', async () => {
         // Add to current
         gameState.players[gameState.currentPlayer].current += roll;
         updateDisplay();
-        showMessage(`🎲 הטלת ${roll}!`, 'info');
+        showMessage(`🎲 Rolled ${roll}!`, 'info');
     }
 });
 
@@ -115,7 +115,7 @@ document.getElementById('holdBtn').addEventListener('click', () => {
     const player = gameState.players[gameState.currentPlayer];
     
     if (player.current === 0) {
-        showMessage('אין מה לשמור! הטל קובייה תחילה.', 'error');
+        showMessage('Nothing to save! Roll the dice first.', 'error');
         return;
     }
     
@@ -128,7 +128,7 @@ document.getElementById('holdBtn').addEventListener('click', () => {
     if (player.total >= 100) {
         endGame();
     } else {
-        showMessage(`✅ נשמר! ${player.total} נקודות סה"כ.`, 'success');
+        showMessage(`✅ Saved! ${player.total} points total.`, 'success');
         setTimeout(() => {
             switchPlayer();
         }, 1000);
@@ -161,7 +161,7 @@ async function computerTurn() {
         
         if (roll === 1) {
             player.current = 0;
-            showMessage(`🤖 המחשב הטיל 1! איבד את התור!`, 'error');
+            showMessage(`🤖 Computer rolled 1! Lost the turn!`, 'error');
             await new Promise(resolve => setTimeout(resolve, 1500));
             switchPlayer();
             return;
@@ -169,7 +169,7 @@ async function computerTurn() {
         
         player.current += roll;
         updateDisplay();
-        showMessage(`🤖 המחשב הטיל ${roll}!`, 'info');
+        showMessage(`🤖 Computer rolled ${roll}!`, 'info');
         
         // AI decision logic
         const shouldHold = 
@@ -189,7 +189,7 @@ async function computerTurn() {
                 return;
             }
             
-            showMessage(`🤖 המחשב שומר ${player.total} נקודות!`, 'success');
+            showMessage(`🤖 Computer saves ${player.total} points!`, 'success');
             await new Promise(resolve => setTimeout(resolve, 1500));
             switchPlayer();
             return;
@@ -203,10 +203,10 @@ function endGame() {
     
     const winner = gameState.players[gameState.currentPlayer];
     const winnerName = gameState.currentPlayer === 0 ? 
-        'שחקן 1' : 
-        (gameState.gameMode === 'pvc' ? 'המחשב' : 'שחקן 2');
+        'Player 1' : 
+        (gameState.gameMode === 'pvc' ? 'Computer' : 'Player 2');
     
-    showMessage(`🎉 ${winnerName} ניצח עם ${winner.total} נקודות!`, 'success');
+    showMessage(`🎉 ${winnerName} won with ${winner.total} points!`, 'success');
     
     // Celebrate
     celebrate();
@@ -217,8 +217,8 @@ document.getElementById('newGameBtn').addEventListener('click', newGame);
 
 function newGame() {
     gameState.players = [
-        { total: 0, current: 0, name: 'שחקן 1' },
-        { total: 0, current: 0, name: 'שחקן 2' }
+        { total: 0, current: 0, name: 'Player 1' },
+        { total: 0, current: 0, name: 'Player 2' }
     ];
     gameState.currentPlayer = 0;
     gameState.gameActive = true;
@@ -241,9 +241,9 @@ document.querySelectorAll('.mode-btn').forEach(btn => {
         
         // Update player 2 name
         if (gameState.gameMode === 'pvc') {
-            document.querySelector('#player2Card h3').textContent = '🤖 מחשב';
+            document.querySelector('#player2Card h3').textContent = '🤖 Computer';
         } else {
-            document.querySelector('#player2Card h3').textContent = '👤 שחקן 2';
+            document.querySelector('#player2Card h3').textContent = '👤 Player 2';
         }
         
         newGame();

package/templates/flappy-bird/script.js

@@ -279,15 +279,15 @@ function gameOver() {
     ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 50);
     
     ctx.font = '24px Arial';
-    ctx.strokeText(`ניקוד: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
-    ctx.fillText(`ניקוד: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
+    ctx.strokeText(`Score: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
+    ctx.fillText(`Score: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
     
-    ctx.strokeText(`שיא: ${gameState.highScore}`, canvas.width / 2, canvas.height / 2 + 50);
-    ctx.fillText(`שיא: ${gameState.highScore}`, canvas.width / 2, canvas.height / 2 + 50);
+    ctx.strokeText(`High Score: ${gameState.highScore}`, canvas.width / 2, canvas.height / 2 + 50);
+    ctx.fillText(`High Score: ${gameState.highScore}`, canvas.width / 2, canvas.height / 2 + 50);
     
     ctx.font = '18px Arial';
-    ctx.strokeText('לחץ "אתחל" להתחיל מחדש', canvas.width / 2, canvas.height / 2 + 100);
-    ctx.fillText('לחץ "אתחל" להתחיל מחדש', canvas.width / 2, canvas.height / 2 + 100);
+    ctx.strokeText('Click "Reset" to restart', canvas.width / 2, canvas.height / 2 + 100);
+    ctx.fillText('Click "Reset" to restart', canvas.width / 2, canvas.height / 2 + 100);
     
     document.getElementById('startBtn').disabled = false;
 }
@@ -318,11 +318,11 @@ function drawStartScreen() {
     ctx.fillText('🐦 Flappy Bird', canvas.width / 2, canvas.height / 2 - 40);
     
     ctx.font = '20px Arial';
-    ctx.strokeText('לחץ "התחל משחק"', canvas.width / 2, canvas.height / 2 + 20);
-    ctx.fillText('לחץ "התחל משחק"', canvas.width / 2, canvas.height / 2 + 20);
+    ctx.strokeText('Click "Start Game"', canvas.width / 2, canvas.height / 2 + 20);
+    ctx.fillText('Click "Start Game"', canvas.width / 2, canvas.height / 2 + 20);
     
-    ctx.strokeText('להתחיל!', canvas.width / 2, canvas.height / 2 + 50);
-    ctx.fillText('להתחיל!', canvas.width / 2, canvas.height / 2 + 50);
+    ctx.strokeText('to begin!', canvas.width / 2, canvas.height / 2 + 50);
+    ctx.fillText('to begin!', canvas.width / 2, canvas.height / 2 + 50);
 }
 
 // Game loop

package/templates/pong/script.js

@@ -89,10 +89,10 @@ document.querySelectorAll('.mode-btn').forEach(btn => {
         
         // Update player 2 name
         if (gameState.gameMode === 'pvc') {
-            document.getElementById('player2Name').textContent = '🤖 מחשב';
+            document.getElementById('player2Name').textContent = '🤖 Computer';
             document.querySelector('.difficulty-selector').style.display = 'flex';
         } else {
-            document.getElementById('player2Name').textContent = '👤 שחקן 2';
+            document.getElementById('player2Name').textContent = '👤 Player 2';
             document.querySelector('.difficulty-selector').style.display = 'none';
         }
     });
@@ -251,7 +251,7 @@ function draw() {
         ctx.fillStyle = '#FFFFFF';
         ctx.font = 'bold 36px Arial';
         ctx.textAlign = 'center';
-        ctx.fillText('משחק מושהה', canvas.width / 2, canvas.height / 2);
+        ctx.fillText('Game Paused', canvas.width / 2, canvas.height / 2);
     }
 }
 
@@ -288,10 +288,10 @@ function endGame(winner) {
     gameState.running = false;
     
     const winnerName = winner === 1 ? 
-        'שחקן 1' : 
-        (gameState.gameMode === 'pvc' ? 'המחשב' : 'שחקן 2');
+        'Player 1' : 
+        (gameState.gameMode === 'pvc' ? 'Computer' : 'Player 2');
     
-    showMessage(`🎉 ${winnerName} ניצח ${gameState.winningScore} - ${winner === 1 ? gameState.score2 : gameState.score1}!`, 'success');
+    showMessage(`🎉 ${winnerName} wins ${gameState.winningScore} - ${winner === 1 ? gameState.score2 : gameState.score1}!`, 'success');
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
@@ -325,7 +325,7 @@ document.getElementById('pauseBtn').addEventListener('click', pauseGame);
 
 function pauseGame() {
     gameState.paused = !gameState.paused;
-    document.getElementById('pauseBtn').textContent = gameState.paused ? 'המשך' : 'השהה';
+    document.getElementById('pauseBtn').textContent = gameState.paused ? 'Resume' : 'Pause';
 }
 
 // Reset game
@@ -347,7 +347,7 @@ function resetGame() {
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
-    document.getElementById('pauseBtn').textContent = 'השהה';
+    document.getElementById('pauseBtn').textContent = 'Pause';
     document.getElementById('resultMessage').textContent = '';
 }
 

package/templates/slot-machine/script.js

@@ -72,7 +72,7 @@ async function spin() {
     if (gameState.spinning) return;
     
     if (gameState.credits < gameState.bet) {
-        showMessage('אין מספיק קרדיטים!', 'error');
+        showMessage('Not enough credits!', 'error');
         return;
     }
     
@@ -105,7 +105,7 @@ async function spin() {
     // Check if out of credits
     if (gameState.credits < 10) {
         setTimeout(() => {
-            alert('נגמרו הקרדיטים! מקבל 1000 קרדיטים חדשים.');
+            alert('Out of credits! Receiving 1000 new credits.');
             gameState.credits = 1000;
             updateDisplay();
             saveGame();
@@ -171,18 +171,18 @@ function checkWin(results) {
         let type = 'success';
         
         if (first.icon === '💰') {
-            message = `🎉 ג'קפוט! זכית ${winAmount} קרדיטים! 🎉`;
+            message = `🎉 Jackpot! You won ${winAmount} credits! 🎉`;
             type = 'jackpot';
             celebrate();
         } else {
-            message = `🎊 זכייה! +${winAmount} קרדיטים!`;
+            message = `🎊 You Win! +${winAmount} credits!`;
         }
         
         showMessage(message, type);
     } else if (first.icon === second.icon || second.icon === third.icon || first.icon === third.icon) {
-        showMessage('כמעט! שני סמלים תואמים!', 'info');
+        showMessage('Almost! Two matching symbols!', 'info');
     } else {
-        showMessage('נסה שוב!', 'info');
+        showMessage('Try again!', 'info');
     }
     
     updateDisplay();

package/templates/tetris/script.js

@@ -273,10 +273,10 @@ function gameOver() {
     ctx.fillStyle = '#FFFFFF';
     ctx.font = 'bold 36px Arial';
     ctx.textAlign = 'center';
-    ctx.fillText('משחק נגמר!', canvas.width / 2, canvas.height / 2 - 30);
+    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 30);
     
     ctx.font = '20px Arial';
-    ctx.fillText(`ניקוד: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
+    ctx.fillText(`Score: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
@@ -324,7 +324,7 @@ function draw() {
         ctx.fillStyle = '#FFFFFF';
         ctx.font = 'bold 28px Arial';
         ctx.textAlign = 'center';
-        ctx.fillText('משחק מושהה', canvas.width / 2, canvas.height / 2);
+        ctx.fillText('Game Paused', canvas.width / 2, canvas.height / 2);
     }
 }
 
@@ -408,7 +408,7 @@ function startGame() {
 // Pause game
 function pauseGame() {
     gameState.paused = !gameState.paused;
-    document.getElementById('pauseBtn').textContent = gameState.paused ? 'המשך' : 'השהה';
+    document.getElementById('pauseBtn').textContent = gameState.paused ? 'Resume' : 'Pause';
 }
 
 // Reset game
@@ -432,7 +432,7 @@ function resetGame() {
     
     document.getElementById('startBtn').disabled = false;
     document.getElementById('pauseBtn').disabled = true;
-    document.getElementById('pauseBtn').textContent = 'השהה';
+    document.getElementById('pauseBtn').textContent = 'Pause';
 }
 
 // Event listeners