create-template-html-css 1.8.1 → 2.0.0

package/CHANGELOG.md

@@ -5,6 +5,86 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2026-02-05
+
+### Added
+- **12 Additional Interactive Game Templates**: Major expansion with diverse game genres
+  
+  **Puzzle & Strategy Games**:
+  - **2048**: Addictive tile-merging puzzle with touch & keyboard controls, undo feature, best score tracking
+  - **Connect Four**: Classic 4-in-a-row with AI opponent (3 difficulty levels), drop animations, win detection
+  - **Simon Says**: Memory pattern game with increasing difficulty, sound effects, high score tracking
+  
+  **Arcade Classics**:
+  - **Breakout**: Brick breaker with lives system, level progression, paddle/ball physics, mouse & keyboard
+  - **Tetris**: Full Tetris with all 7 pieces, ghost preview, next piece display, level/speed progression
+  - **Flappy Bird**: Tap-to-flap obstacle game with animated background, realistic physics, increasing difficulty
+  - **Pong**: Classic paddle game with AI opponent (4 difficulty levels), 2-player mode, realistic ball physics
+  - **Whack-a-Mole**: Fast-paced arcade with difficulty levels, combo system, high score tracking
+  
+  **Card & Casino Games**:
+  - **Blackjack**: Full 21 card game with betting system, dealer AI, Hit/Stand/Double, 3:2 blackjack payout
+  - **Slot Machine**: 3-reel slots with 8 weighted symbols, jackpot x100, confetti celebration, paytable
+  
+  **Skill Games**:
+  - **Dice Game**: Race to 100 strategy game with AI opponent, roll/hold mechanics, animated dice
+  - **Rock-Paper-Scissors**: Classic hand game vs AI with best-of series, winning streak tracking
+
+- **Enhanced Game Features**:
+  - Multiple AI difficulty levels in strategy games
+  - Advanced physics engines (Breakout, Pong, Flappy Bird)
+  - Complex game state management (Tetris, Blackjack)
+  - Canvas-based rendering for arcade games
+  - Weighted random algorithms (Slot Machine)
+  - localStorage for all game progress/scores
+  - Touch and keyboard control support
+  - Professional animations and visual feedback
+  - Responsive designs for all screen sizes
+
+### Changed
+- Updated total template count from 30 to 46 components
+- Expanded "Interactive Games" category from 4 to 16 games
+- Updated CLI list command to display all 46 templates
+- All game UI text translated to English
+- Package version bumped to 2.0.0 (major release)
+
+### Technical Details
+- All games are fully self-contained and work offline
+- No external dependencies required
+- Compatible with all modern browsers
+- Canvas API used for rendering in applicable games
+- Complex AI implementations (minimax-style for Connect Four, strategic for Dice Game)
+- Proper game loop implementations with requestAnimationFrame
+
+## [1.9.0] - 2026-02-05
+
+### Added
+- **4 New Interactive Game Templates**: Complete, playable games with full functionality
+  - **Tic-Tac-Toe**: Classic X and O game with score tracking, win detection, auto-reset, and winning cell highlighting
+  - **Memory Game**: Card matching game with 3 difficulty levels (4×4, 4×5, 4×6), move counter, timer, and emoji cards
+  - **Snake Game**: Classic snake with keyboard/touch controls, canvas rendering, increasing speed, and high score tracking
+  - **Guess the Number**: Number guessing game with hot/cold hints, 3 difficulty levels (1-100, 1-500, 1-1000), and best score tracking
+
+- **Game Features**:
+  - Complete game logic and state management
+  - Score persistence using localStorage
+  - Responsive designs for mobile and desktop
+  - Smooth animations and visual feedback
+  - Touch and keyboard controls support
+  - Professional UI with modern gradients
+  - Win/lose detection and celebration animations
+
+### Changed
+- Updated CLI list command to show 30 total components (was 26)
+- Added new "Interactive Games" category in component list
+- Updated package version from 1.8.1 to 1.9.0
+
+### Technical Details
+- All games include HTML, CSS, and JavaScript files
+- Games are fully self-contained and work offline
+- No external dependencies required
+- Compatible with all modern browsers
+
 ## [1.8.0] - 2026-02-02
 
 ### Added

package/README.md

@@ -33,7 +33,7 @@ npm install -g create-template-html-css
 - 🌈 **Stunning Gradients** - Colorful and attractive designs
 - ⚡ **Animations** - Smooth and professional effects
 - 🔧 **Customizable** - Easy to edit and modify the code
-- 📦 **26 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Login, Register, Skeleton, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs
+- 📦 **46 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Login, Register, Skeleton, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs, 16 Interactive Games (Tic-Tac-Toe, Memory, Snake, Guess Number, 2048, Whack-a-Mole, Simon Says, Rock-Paper-Scissors, Breakout, Tetris, Flappy Bird, Connect Four, Blackjack, Slot Machine, Dice Game, Pong)
 - 🎯 **Two Modes** - Create new projects or insert into existing HTML pages
 - 🔒 **Secure** - Input validation and path protection
 - 📚 **Well Documented** - Comprehensive guides and examples
@@ -43,6 +43,82 @@ npm install -g create-template-html-css
 - 💾 **Simple Backups** - Clean backup naming without timestamps (v1.6.2+)
 - 🎯 **Customizable Components** - Choose navigation items and form fields during creation (v1.7.0+)
 
+## 🆕 What's New in v2.0.0
+
+### 🎮 12 Additional Game Templates
+Massive expansion with 12 new fully-functional games:
+
+**Puzzle & Strategy Games:**
+- **2048** - Addictive tile-merging puzzle with touch & keyboard controls, undo feature, and best score tracking
+- **Connect Four** - Classic 4-in-a-row strategy game with AI opponent (3 difficulty levels), drop animations
+- **Simon Says** - Memory pattern game with increasing difficulty, sound effects, and high score tracking
+
+**Arcade Classics:**
+- **Breakout** - Brick breaker with lives system, level progression, paddle/ball physics, mouse & keyboard controls
+- **Tetris** - Full Tetris implementation with all 7 pieces, ghost preview, next piece display, level progression
+- **Flappy Bird** - Tap-to-flap obstacle game with animated background, realistic physics, increasing difficulty
+- **Pong** - Classic paddle game with AI opponent (4 difficulty levels), 2-player mode, realistic ball physics
+- **Whack-a-Mole** - Fast-paced arcade game with difficulty levels, combo system, and high score tracking
+
+**Card & Casino Games:**
+- **Blackjack** - Full 21 card game with betting system, dealer AI, Hit/Stand/Double actions, 3:2 payout
+- **Slot Machine** - 3-reel slots with 8 symbols, weighted payouts, jackpot x100, confetti celebration
+- **Dice Game** - Race to 100 dice strategy game with AI opponent, roll/hold mechanics, animated dice
+
+**Skill Games:**
+- **Rock-Paper-Scissors** - Classic hand game vs AI with best-of series, winning streak tracking
+
+**All Games Feature:**
+- Complete game logic and state management
+- Score/progress tracking with localStorage
+- Responsive designs for mobile and desktop
+- Smooth animations and visual feedback
+- Professional UI with modern styling
+- Touch and keyboard controls
+- AI opponents with multiple difficulty levels
+
+**Usage:**
+```bash
+create-template create -c game-2048 -n 2048-game
+create-template create -c breakout -n brick-breaker
+create-template create -c tetris -n tetris-game
+create-template create -c flappy-bird -n flappy
+create-template create -c connect-four -n connect4
+create-template create -c blackjack -n blackjack-game
+create-template create -c slot-machine -n slots
+create-template create -c dice-game -n dice
+create-template create -c pong -n pong-game
+create-template create -c whack-a-mole -n whack
+create-template create -c simon-says -n simon
+create-template create -c rock-paper-scissors -n rps
+```
+
+## 🆕 What's New in v1.9.0
+
+### 🎮 Interactive Game Templates
+4 new fully-functional game templates with complete gameplay mechanics:
+
+- **Tic-Tac-Toe** - Classic X and O game with score tracking, win detection, and auto-reset
+- **Memory Game** - Card matching game with 3 difficulty levels (4×4, 4×5, 4×6), timer, and move counter
+- **Snake Game** - Classic snake with keyboard/touch controls, increasing speed, and high score tracking
+- **Guess the Number** - Number guessing game with hot/cold hints, multiple difficulty levels, and best score tracking
+
+**Features:**
+- Complete game logic and state management
+- Score tracking with localStorage persistence
+- Responsive designs for mobile and desktop
+- Smooth animations and visual feedback
+- Professional UI with gradients and modern styling
+- Touch and keyboard controls
+
+**Usage:**
+```bash
+create-template create -c tic-tac-toe -n my-game
+create-template create -c memory-game -n memory
+create-template create -c snake-game -n snake
+create-template create -c guess-number -n guess
+```
+
 ## 🆕 What's New in v1.8.0
 
 ### 🌙 Dark Mode Support
@@ -103,7 +179,7 @@ create-template create -c modal
 
 ### 📊 Interactive Component Gallery
 New **COMPONENTS-GALLERY.html** showcase page:
-- Browse all 26 components with descriptions
+- Browse all 30 components with descriptions
 - Search and filter by category
 - View all 10 color scheme presets with color swatches
 - Copy CLI commands (both npx and local) with one click
@@ -720,6 +796,107 @@ Admin dashboard built entirely with Flexbox:
 - Interactive animations
 - Professional design
 
+### 20. Todo List ✅
+
+Interactive todo list with add/remove functionality:
+
+**Features:**
+- Add new tasks
+- Mark tasks as complete
+- Delete tasks
+- Task counter
+- LocalStorage persistence
+- Animated interactions
+
+### 21. Counter 🔢
+
+Click counter with history tracking:
+
+**Features:**
+- Increment/decrement buttons
+- Custom step size
+- Reset functionality
+- History log
+- Color-coded display
+- Animated transitions
+
+### 22. Accordion 📑
+
+Collapsible accordion component:
+
+**Features:**
+- Multiple sections
+- Smooth expand/collapse
+- Only one section open at a time
+- Icon rotation
+- Responsive design
+
+### 23. Tabs 📑
+
+Tabbed content switcher:
+
+**Features:**
+- Multiple tab panels
+- Smooth transitions
+- Active state highlighting
+- Responsive layout
+- Keyboard navigation
+
+### 24. Tic-Tac-Toe 🎯
+
+Classic X and O game:
+
+**Features:**
+- Two-player gameplay
+- Win detection (rows, columns, diagonals)
+- Score tracking for X, O, and draws
+- Auto-reset after game ends
+- Winning cell highlighting
+- Responsive design
+- Score persistence
+
+### 25. Memory Game 🧠
+
+Card matching memory game:
+
+**Features:**
+- 3 difficulty levels (4×4, 4×5, 4×6)
+- Move counter
+- Timer
+- Match tracking
+- Card flip animations
+- Emoji-based cards
+- Win detection
+- Responsive grid
+
+### 26. Snake Game 🐍
+
+Classic snake game:
+
+**Features:**
+- Keyboard controls (Arrow keys, WASD)
+- Touch swipe controls for mobile
+- On-screen button controls
+- Increasing speed as you score
+- High score tracking (localStorage)
+- Collision detection
+- Smooth canvas rendering
+- Pause/resume functionality
+
+### 27. Guess the Number 🎲
+
+Number guessing game with hints:
+
+**Features:**
+- 3 difficulty levels (1-100, 1-500, 1-1000)
+- Hot/cold hint system
+- Guess history
+- Attempt counter
+- Best score tracking per difficulty
+- Visual feedback animations
+- Duplicate guess detection
+- Give up option
+
 
 ## 💡 Examples
 

package/bin/cli.js

@@ -601,7 +601,7 @@ program
   .command("list")
   .description(chalk.green("List all available templates"))
   .action(() => {
-    console.log("\n" + chalk.blue("📦 Available Components (26 total)\n"));
+    console.log("\n" + chalk.blue("📦 Available Components (46 total)\n"));
 
     console.log(chalk.yellow("━ Basic Components (9)"));
     console.log("  button          Styled button component");
@@ -643,6 +643,24 @@ program
     console.log("  accordion       Collapsible accordion component");
     console.log("  tabs            Tabbed content switcher");
 
+    console.log("\n" + chalk.green("━ Interactive Games (16)"));
+    console.log("  tic-tac-toe     Classic Tic-Tac-Toe game with score tracking");
+    console.log("  memory-game     Memory card matching game with difficulty levels");
+    console.log("  snake-game      Classic Snake game with keyboard controls");
+    console.log("  guess-number    Number guessing game with hints and scoring");
+    console.log("  game-2048       2048 puzzle game with touch & keyboard controls");
+    console.log("  whack-a-mole    Whack-A-Mole arcade game with difficulty levels");
+    console.log("  simon-says      Simon Says memory pattern game");
+    console.log("  rock-paper-scissors  Rock Paper Scissors vs AI");
+    console.log("  breakout        Brick breaker arcade game with levels");
+    console.log("  tetris          Classic Tetris with piece preview");
+    console.log("  flappy-bird     Flappy Bird obstacle avoidance game");
+    console.log("  connect-four    Connect 4 strategy game vs AI");
+    console.log("  blackjack       Blackjack card game with betting");
+    console.log("  slot-machine    3-reel slot machine with jackpots");
+    console.log("  dice-game       Dice race to 100 strategy game");
+    console.log("  pong            Classic Pong paddle game vs AI");
+
     console.log("\n" + chalk.gray("Usage:"));
     console.log("  create-template create              Create a new component");
     console.log("  create-template insert              Insert into HTML file");
@@ -699,7 +717,7 @@ if (!process.argv.slice(2).length) {
   console.log("  $ create-template create        # Create with prompts");
   console.log("  $ create-template insert        # Insert with prompts");
   console.log("  $ create-template gallery       # View all components in gallery");
-  console.log("  $ create-template list          # View all 26 templates\n");
+  console.log("  $ create-template list          # View all 46 templates\n");
   console.log(chalk.gray("Flag Examples (Non-interactive):"));
   console.log("  $ create-template create -c button -n my-btn");
   console.log("  $ create-template insert -f index.html -c card -s separate");

package/package.json

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

package/templates/blackjack/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Blackjack - 21</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🃏 Blackjack</h1>
+            <p class="subtitle">Get to 21 and beat the dealer!</p>
+        </div>
+
+        <div class="game-info">
+            <div class="info-item">
+                <span class="label">Credits:</span>
+                <span id="credits" class="value">1000</span>
+            </div>
+            <div class="info-item">
+                <span class="label">Bet:</span>
+                <span id="bet" class="value">0</span>
+            </div>
+            <div class="info-item">
+                <span class="label">Wins:</span>
+                <span id="wins" class="value">0</span>
+            </div>
+        </div>
+
+        <div class="game-area">
+            <!-- Dealer Section -->
+            <div class="player-section dealer-section">
+                <div class="player-header">
+                    <h3>🎩 Dealer</h3>
+                    <div class="score-display">
+                        <span id="dealerScore">0</span>
+                    </div>
+                </div>
+                <div id="dealerHand" class="hand"></div>
+            </div>
+
+            <!-- Player Section -->
+            <div class="player-section player-section-main">
+                <div class="player-header">
+                    <h3>👤 You</h3>
+                    <div class="score-display">
+                        <span id="playerScore">0</span>
+                    </div>
+                </div>
+                <div id="playerHand" class="hand"></div>
+            </div>
+        </div>
+
+        <!-- Betting Area -->
+        <div class="betting-area" id="bettingArea">
+            <h3>🎲 Place Bet:</h3>
+            <div class="bet-buttons">
+                <button class="bet-btn" data-amount="10">10</button>
+                <button class="bet-btn" data-amount="25">25</button>
+                <button class="bet-btn" data-amount="50">50</button>
+                <button class="bet-btn" data-amount="100">100</button>
+                <button class="bet-btn" data-amount="250">250</button>
+            </div>
+            <button id="dealBtn" class="btn btn-primary" disabled>Deal Cards</button>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="action-buttons" id="actionButtons" style="display: none;">
+            <button id="hitBtn" class="btn btn-success">Hit</button>
+            <button id="standBtn" class="btn btn-warning">Stand</button>
+            <button id="doubleBtn" class="btn btn-info">Double</button>
+        </div>
+
+        <!-- Result Message -->
+        <div id="resultMessage" class="result-message"></div>
+
+        <!-- Next Round Button -->
+        <button id="nextRoundBtn" class="btn btn-primary" style="display: none;">Next Round</button>
+
+        <div class="instructions">
+            <h3>📖 Game Rules:</h3>
+            <ul>
+                <li>Goal: Get to 21 or as close as possible without going over</li>
+                <li>Face cards are worth 10, Ace is worth 1 or 11</li>
+                <li><strong>Hit</strong> - Take another card</li>
+                <li><strong>Stand</strong> - Stop and let dealer play</li>
+                <li><strong>Double</strong> - Double your bet and get one card</li>
+                <li><strong>Blackjack</strong> - 21 with 2 cards = 3:2 payout!</li>
+                <li>Dealer must hit until 17 or higher</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>