create-template-html-css 1.9.0 → 2.0.0

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
  1. package/CHANGELOG.md +80 -0
  2. package/README.md +179 -2
  3. package/bin/cli.js +15 -3
  4. package/package.json +1 -1
  5. package/templates/blackjack/index.html +97 -0
  6. package/templates/blackjack/script.js +381 -0
  7. package/templates/blackjack/style.css +452 -0
  8. package/templates/breakout/index.html +56 -0
  9. package/templates/breakout/script.js +387 -0
  10. package/templates/breakout/style.css +239 -0
  11. package/templates/connect-four/index.html +78 -0
  12. package/templates/connect-four/script.js +413 -0
  13. package/templates/connect-four/style.css +426 -0
  14. package/templates/dice-game/index.html +99 -0
  15. package/templates/dice-game/script.js +291 -0
  16. package/templates/dice-game/style.css +403 -0
  17. package/templates/flappy-bird/index.html +47 -0
  18. package/templates/flappy-bird/script.js +394 -0
  19. package/templates/flappy-bird/style.css +243 -0
  20. package/templates/game-2048/index.html +59 -0
  21. package/templates/game-2048/script.js +269 -0
  22. package/templates/game-2048/style.css +281 -0
  23. package/templates/pong/index.html +90 -0
  24. package/templates/pong/script.js +364 -0
  25. package/templates/pong/style.css +371 -0
  26. package/templates/rock-paper-scissors/index.html +84 -0
  27. package/templates/rock-paper-scissors/script.js +199 -0
  28. package/templates/rock-paper-scissors/style.css +295 -0
  29. package/templates/simon-says/index.html +64 -0
  30. package/templates/simon-says/script.js +206 -0
  31. package/templates/simon-says/style.css +250 -0
  32. package/templates/slot-machine/index.html +112 -0
  33. package/templates/slot-machine/script.js +238 -0
  34. package/templates/slot-machine/style.css +464 -0
  35. package/templates/tetris/index.html +84 -0
  36. package/templates/tetris/script.js +447 -0
  37. package/templates/tetris/style.css +286 -0
  38. package/templates/whack-a-mole/index.html +85 -0
  39. package/templates/whack-a-mole/script.js +172 -0
  40. package/{demo-games/snake-game → templates/whack-a-mole}/style.css +114 -97
  41. package/COMPONENTS-GALLERY.html +0 -773
  42. package/PUBLISH-GUIDE.md +0 -112
  43. package/create-template-html-css-1.8.0.tgz +0 -0
  44. package/demo-games/guess-number/index.html +0 -71
  45. package/demo-games/guess-number/script.js +0 -216
  46. package/demo-games/guess-number/style.css +0 -337
  47. package/demo-games/memory-game/index.html +0 -50
  48. package/demo-games/memory-game/script.js +0 -216
  49. package/demo-games/memory-game/style.css +0 -288
  50. package/demo-games/snake-game/index.html +0 -61
  51. package/demo-games/snake-game/script.js +0 -360
  52. package/demo-games/tic-tac-toe/index.html +0 -57
  53. package/demo-games/tic-tac-toe/script.js +0 -156
  54. package/demo-games/tic-tac-toe/style.css +0 -244
package/templates/rock-paper-scissors/index.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{{name}} - Rock Paper Scissors</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <div class="game-card">
12
+ <h1>✊ Rock Paper Scissors ✋</h1>
13
+
14
+ <div class="score-board">
15
+ <div class="score-item player">
16
+ <div class="score-label">You</div>
17
+ <div id="playerScore" class="score-value">0</div>
18
+ </div>
19
+ <div class="score-item">
20
+ <div class="score-label">Draws</div>
21
+ <div id="drawScore" class="score-value">0</div>
22
+ </div>
23
+ <div class="score-item computer">
24
+ <div class="score-label">Computer</div>
25
+ <div id="computerScore" class="score-value">0</div>
26
+ </div>
27
+ </div>
28
+
29
+ <div class="game-area">
30
+ <div class="choice-display">
31
+ <div class="choice-box player-choice">
32
+ <div class="choice-icon" id="playerChoice">❓</div>
33
+ <div class="choice-label">Your Choice</div>
34
+ </div>
35
+ <div class="vs">VS</div>
36
+ <div class="choice-box computer-choice">
37
+ <div class="choice-icon" id="computerChoice">❓</div>
38
+ <div class="choice-label">Computer</div>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="result-message" id="resultMessage">
43
+ Choose your weapon!
44
+ </div>
45
+ </div>
46
+
47
+ <div class="choices">
48
+ <button class="choice-btn" data-choice="rock">
49
+ <span class="choice-emoji">✊</span>
50
+ <span class="choice-name">Rock</span>
51
+ </button>
52
+ <button class="choice-btn" data-choice="paper">
53
+ <span class="choice-emoji">✋</span>
54
+ <span class="choice-name">Paper</span>
55
+ </button>
56
+ <button class="choice-btn" data-choice="scissors">
57
+ <span class="choice-emoji">✌️</span>
58
+ <span class="choice-name">Scissors</span>
59
+ </button>
60
+ </div>
61
+
62
+ <div class="game-mode">
63
+ <label>Game Mode:</label>
64
+ <select id="gameMode">
65
+ <option value="unlimited">Unlimited</option>
66
+ <option value="best-of-3">Best of 3</option>
67
+ <option value="best-of-5">Best of 5</option>
68
+ <option value="best-of-10">Best of 10</option>
69
+ </select>
70
+ </div>
71
+
72
+ <button id="resetBtn" class="btn btn-secondary">Reset Game</button>
73
+
74
+ <div class="rules">
75
+ <h3>Rules:</h3>
76
+ <p>✊ Rock beats ✌️ Scissors</p>
77
+ <p>✋ Paper beats ✊ Rock</p>
78
+ <p>✌️ Scissors beats ✋ Paper</p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <script src="script.js"></script>
83
+ </body>
84
+ </html>
package/templates/rock-paper-scissors/script.js ADDED
@@ -0,0 +1,199 @@
1
+ // Rock Paper Scissors Game Logic
2
+
3
+ const choiceBtns = document.querySelectorAll('.choice-btn');
4
+ const playerScoreDisplay = document.getElementById('playerScore');
5
+ const computerScoreDisplay = document.getElementById('computerScore');
6
+ const drawScoreDisplay = document.getElementById('drawScore');
7
+ const playerChoiceDisplay = document.getElementById('playerChoice');
8
+ const computerChoiceDisplay = document.getElementById('computerChoice');
9
+ const resultMessage = document.getElementById('resultMessage');
10
+ const resetBtn = document.getElementById('resetBtn');
11
+ const gameModeSelect = document.getElementById('gameMode');
12
+
13
+ let playerScore = 0;
14
+ let computerScore = 0;
15
+ let drawScore = 0;
16
+ let gameMode = 'unlimited';
17
+ let isAnimating = false;
18
+
19
+ const choices = {
20
+ rock: '✊',
21
+ paper: '✋',
22
+ scissors: '✌️'
23
+ };
24
+
25
+ const rules = {
26
+ rock: 'scissors',
27
+ paper: 'rock',
28
+ scissors: 'paper'
29
+ };
30
+
31
+ // Make choice
32
+ function makeChoice(playerChoice) {
33
+ if (isAnimating) return;
34
+
35
+ // Check game mode limit
36
+ if (checkGameEnd()) return;
37
+
38
+ isAnimating = true;
39
+
40
+ // Get computer choice
41
+ const computerChoice = getComputerChoice();
42
+
43
+ // Animate choices
44
+ animateChoice(() => {
45
+ // Show choices
46
+ playerChoiceDisplay.textContent = choices[playerChoice];
47
+ computerChoiceDisplay.textContent = choices[computerChoice];
48
+
49
+ // Determine winner
50
+ const result = determineWinner(playerChoice, computerChoice);
51
+
52
+ // Update scores
53
+ updateScore(result);
54
+
55
+ // Show result
56
+ showResult(result, playerChoice, computerChoice);
57
+
58
+ // Check if game ended
59
+ setTimeout(() => {
60
+ if (checkGameEnd()) {
61
+ showFinalResult();
62
+ }
63
+ isAnimating = false;
64
+ }, 1000);
65
+ });
66
+ }
67
+
68
+ // Get computer choice
69
+ function getComputerChoice() {
70
+ const choices = ['rock', 'paper', 'scissors'];
71
+ return choices[Math.floor(Math.random() * choices.length)];
72
+ }
73
+
74
+ // Animate choice
75
+ function animateChoice(callback) {
76
+ let count = 0;
77
+ const animationChoices = ['✊', '✋', '✌️'];
78
+
79
+ const interval = setInterval(() => {
80
+ const randomIndex = Math.floor(Math.random() * animationChoices.length);
81
+ playerChoiceDisplay.textContent = animationChoices[randomIndex];
82
+ computerChoiceDisplay.textContent = animationChoices[randomIndex];
83
+
84
+ count++;
85
+ if (count >= 10) {
86
+ clearInterval(interval);
87
+ callback();
88
+ }
89
+ }, 100);
90
+ }
91
+
92
+ // Determine winner
93
+ function determineWinner(player, computer) {
94
+ if (player === computer) {
95
+ return 'draw';
96
+ }
97
+
98
+ if (rules[player] === computer) {
99
+ return 'player';
100
+ }
101
+
102
+ return 'computer';
103
+ }
104
+
105
+ // Update score
106
+ function updateScore(result) {
107
+ if (result === 'player') {
108
+ playerScore++;
109
+ playerScoreDisplay.textContent = playerScore;
110
+ } else if (result === 'computer') {
111
+ computerScore++;
112
+ computerScoreDisplay.textContent = computerScore;
113
+ } else {
114
+ drawScore++;
115
+ drawScoreDisplay.textContent = drawScore;
116
+ }
117
+ }
118
+
119
+ // Show result
120
+ function showResult(result, playerChoice, computerChoice) {
121
+ if (result === 'player') {
122
+ resultMessage.textContent = `You Win! ${choices[playerChoice]} beats ${choices[computerChoice]}! 🎉`;
123
+ resultMessage.className = 'result-message win';
124
+ } else if (result === 'computer') {
125
+ resultMessage.textContent = `You Lose! ${choices[computerChoice]} beats ${choices[playerChoice]}! 😢`;
126
+ resultMessage.className = 'result-message lose';
127
+ } else {
128
+ resultMessage.textContent = `It's a Draw! Both chose ${choices[playerChoice]}! 🤝`;
129
+ resultMessage.className = 'result-message draw';
130
+ }
131
+ }
132
+
133
+ // Check game end
134
+ function checkGameEnd() {
135
+ const mode = gameModeSelect.value;
136
+
137
+ if (mode === 'unlimited') return false;
138
+
139
+ const target = parseInt(mode.split('-')[2]);
140
+ const totalGames = playerScore + computerScore + drawScore;
141
+
142
+ // For best-of-X, winner needs to get majority
143
+ const winsNeeded = Math.ceil(target / 2);
144
+
145
+ return playerScore >= winsNeeded || computerScore >= winsNeeded || totalGames >= target;
146
+ }
147
+
148
+ // Show final result
149
+ function showFinalResult() {
150
+ if (playerScore > computerScore) {
151
+ resultMessage.textContent = `🏆 GAME OVER - You Win! (${playerScore}-${computerScore}) 🏆`;
152
+ resultMessage.className = 'result-message win final';
153
+ } else if (computerScore > playerScore) {
154
+ resultMessage.textContent = `😢 GAME OVER - Computer Wins! (${computerScore}-${playerScore}) 😢`;
155
+ resultMessage.className = 'result-message lose final';
156
+ } else {
157
+ resultMessage.textContent = `🤝 GAME OVER - It's a Tie! (${playerScore}-${computerScore}) 🤝`;
158
+ resultMessage.className = 'result-message draw final';
159
+ }
160
+
161
+ // Disable buttons
162
+ choiceBtns.forEach(btn => btn.disabled = true);
163
+ }
164
+
165
+ // Reset game
166
+ function resetGame() {
167
+ playerScore = 0;
168
+ computerScore = 0;
169
+ drawScore = 0;
170
+ isAnimating = false;
171
+
172
+ playerScoreDisplay.textContent = '0';
173
+ computerScoreDisplay.textContent = '0';
174
+ drawScoreDisplay.textContent = '0';
175
+
176
+ playerChoiceDisplay.textContent = '❓';
177
+ computerChoiceDisplay.textContent = '❓';
178
+
179
+ resultMessage.textContent = 'Choose your weapon!';
180
+ resultMessage.className = 'result-message';
181
+
182
+ choiceBtns.forEach(btn => btn.disabled = false);
183
+ }
184
+
185
+ // Event listeners
186
+ choiceBtns.forEach(btn => {
187
+ btn.addEventListener('click', () => {
188
+ const choice = btn.dataset.choice;
189
+ makeChoice(choice);
190
+ });
191
+ });
192
+
193
+ resetBtn.addEventListener('click', resetGame);
194
+
195
+ gameModeSelect.addEventListener('change', () => {
196
+ if (!isAnimating) {
197
+ resetGame();
198
+ }
199
+ });
package/templates/rock-paper-scissors/style.css ADDED
@@ -0,0 +1,295 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
10
+ min-height: 100vh;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ padding: 20px;
15
+ }
16
+
17
+ .container {
18
+ width: 100%;
19
+ max-width: 600px;
20
+ }
21
+
22
+ .game-card {
23
+ background: white;
24
+ border-radius: 16px;
25
+ padding: 30px;
26
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
27
+ }
28
+
29
+ .game-card h1 {
30
+ text-align: center;
31
+ color: #333;
32
+ margin-bottom: 20px;
33
+ font-size: 2rem;
34
+ }
35
+
36
+ .score-board {
37
+ display: flex;
38
+ justify-content: space-around;
39
+ padding: 20px;
40
+ background: #f3f4f6;
41
+ border-radius: 12px;
42
+ margin-bottom: 30px;
43
+ }
44
+
45
+ .score-item {
46
+ text-align: center;
47
+ }
48
+
49
+ .score-label {
50
+ font-size: 0.9rem;
51
+ color: #6b7280;
52
+ margin-bottom: 8px;
53
+ font-weight: 600;
54
+ }
55
+
56
+ .score-value {
57
+ font-size: 2.5rem;
58
+ font-weight: bold;
59
+ color: #333;
60
+ }
61
+
62
+ .score-item.player .score-value {
63
+ color: #10b981;
64
+ }
65
+
66
+ .score-item.computer .score-value {
67
+ color: #ef4444;
68
+ }
69
+
70
+ .game-area {
71
+ margin-bottom: 30px;
72
+ }
73
+
74
+ .choice-display {
75
+ display: flex;
76
+ justify-content: space-around;
77
+ align-items: center;
78
+ margin-bottom: 20px;
79
+ }
80
+
81
+ .choice-box {
82
+ text-align: center;
83
+ flex: 1;
84
+ }
85
+
86
+ .choice-icon {
87
+ font-size: 5rem;
88
+ margin-bottom: 10px;
89
+ animation: pulse 0.5s ease infinite alternate;
90
+ }
91
+
92
+ @keyframes pulse {
93
+ from {
94
+ transform: scale(1);
95
+ }
96
+ to {
97
+ transform: scale(1.05);
98
+ }
99
+ }
100
+
101
+ .choice-label {
102
+ font-size: 0.9rem;
103
+ color: #6b7280;
104
+ font-weight: 600;
105
+ }
106
+
107
+ .vs {
108
+ font-size: 2rem;
109
+ font-weight: bold;
110
+ color: #9ca3af;
111
+ padding: 0 20px;
112
+ }
113
+
114
+ .result-message {
115
+ text-align: center;
116
+ font-size: 1.2rem;
117
+ font-weight: bold;
118
+ padding: 15px;
119
+ border-radius: 8px;
120
+ background: #f3f4f6;
121
+ color: #333;
122
+ min-height: 60px;
123
+ display: flex;
124
+ justify-content: center;
125
+ align-items: center;
126
+ }
127
+
128
+ .result-message.win {
129
+ background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
130
+ color: #065f46;
131
+ }
132
+
133
+ .result-message.lose {
134
+ background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
135
+ color: #991b1b;
136
+ }
137
+
138
+ .result-message.draw {
139
+ background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
140
+ color: #1e40af;
141
+ }
142
+
143
+ .result-message.final {
144
+ font-size: 1.3rem;
145
+ animation: bounce 0.6s ease;
146
+ }
147
+
148
+ @keyframes bounce {
149
+ 0%, 100% {
150
+ transform: translateY(0);
151
+ }
152
+ 50% {
153
+ transform: translateY(-10px);
154
+ }
155
+ }
156
+
157
+ .choices {
158
+ display: flex;
159
+ gap: 15px;
160
+ margin-bottom: 20px;
161
+ }
162
+
163
+ .choice-btn {
164
+ flex: 1;
165
+ padding: 20px;
166
+ border: 3px solid #e5e7eb;
167
+ border-radius: 12px;
168
+ background: white;
169
+ cursor: pointer;
170
+ transition: all 0.3s ease;
171
+ display: flex;
172
+ flex-direction: column;
173
+ align-items: center;
174
+ gap: 10px;
175
+ }
176
+
177
+ .choice-btn:hover:not(:disabled) {
178
+ border-color: #667eea;
179
+ transform: translateY(-5px);
180
+ box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
181
+ }
182
+
183
+ .choice-btn:active:not(:disabled) {
184
+ transform: translateY(-2px);
185
+ }
186
+
187
+ .choice-btn:disabled {
188
+ opacity: 0.5;
189
+ cursor: not-allowed;
190
+ }
191
+
192
+ .choice-emoji {
193
+ font-size: 3rem;
194
+ }
195
+
196
+ .choice-name {
197
+ font-size: 1rem;
198
+ font-weight: 600;
199
+ color: #333;
200
+ }
201
+
202
+ .game-mode {
203
+ display: flex;
204
+ justify-content: center;
205
+ align-items: center;
206
+ gap: 10px;
207
+ margin-bottom: 20px;
208
+ font-weight: 600;
209
+ color: #555;
210
+ }
211
+
212
+ #gameMode {
213
+ padding: 8px 15px;
214
+ border: 2px solid #e5e7eb;
215
+ border-radius: 8px;
216
+ font-size: 1rem;
217
+ cursor: pointer;
218
+ background: white;
219
+ }
220
+
221
+ .btn {
222
+ width: 100%;
223
+ padding: 12px 24px;
224
+ border: none;
225
+ border-radius: 8px;
226
+ font-size: 1rem;
227
+ font-weight: 600;
228
+ cursor: pointer;
229
+ transition: all 0.3s ease;
230
+ margin-bottom: 20px;
231
+ }
232
+
233
+ .btn-secondary {
234
+ background: #6b7280;
235
+ color: white;
236
+ }
237
+
238
+ .btn-secondary:hover {
239
+ background: #4b5563;
240
+ transform: translateY(-2px);
241
+ box-shadow: 0 5px 15px rgba(107, 114, 128, 0.4);
242
+ }
243
+
244
+ .rules {
245
+ background: #f9fafb;
246
+ border-radius: 8px;
247
+ padding: 15px;
248
+ }
249
+
250
+ .rules h3 {
251
+ color: #333;
252
+ margin-bottom: 10px;
253
+ font-size: 1.1rem;
254
+ }
255
+
256
+ .rules p {
257
+ color: #6b7280;
258
+ font-size: 0.9rem;
259
+ margin-bottom: 5px;
260
+ }
261
+
262
+ .rules p:last-child {
263
+ margin-bottom: 0;
264
+ }
265
+
266
+ @media (max-width: 480px) {
267
+ .game-card {
268
+ padding: 20px;
269
+ }
270
+
271
+ .game-card h1 {
272
+ font-size: 1.5rem;
273
+ }
274
+
275
+ .choice-icon {
276
+ font-size: 3.5rem;
277
+ }
278
+
279
+ .vs {
280
+ font-size: 1.5rem;
281
+ padding: 0 10px;
282
+ }
283
+
284
+ .choices {
285
+ flex-direction: column;
286
+ }
287
+
288
+ .choice-emoji {
289
+ font-size: 2.5rem;
290
+ }
291
+
292
+ .result-message {
293
+ font-size: 1rem;
294
+ }
295
+ }
package/templates/simon-says/index.html ADDED
@@ -0,0 +1,64 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{{name}} - Simon Says</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <div class="game-card">
12
+ <h1>🎵 Simon Says</h1>
13
+
14
+ <div class="game-stats">
15
+ <div class="stat">
16
+ <div class="stat-label">Level</div>
17
+ <div id="level" class="stat-value">1</div>
18
+ </div>
19
+ <div class="stat">
20
+ <div class="stat-label">Score</div>
21
+ <div id="score" class="stat-value">0</div>
22
+ </div>
23
+ <div class="stat">
24
+ <div class="stat-label">Best</div>
25
+ <div id="bestScore" class="stat-value">0</div>
26
+ </div>
27
+ </div>
28
+
29
+ <div class="simon-board">
30
+ <div class="simon-button green" data-color="green"></div>
31
+ <div class="simon-button red" data-color="red"></div>
32
+ <div class="simon-button yellow" data-color="yellow"></div>
33
+ <div class="simon-button blue" data-color="blue"></div>
34
+ <div class="simon-center">
35
+ <div id="startBtn" class="start-button">START</div>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="message" id="message">Press START to begin!</div>
40
+
41
+ <div class="settings">
42
+ <label>Speed:</label>
43
+ <select id="speed">
44
+ <option value="1000">Slow</option>
45
+ <option value="700" selected>Normal</option>
46
+ <option value="400">Fast</option>
47
+ </select>
48
+ <label class="sound-toggle">
49
+ <input type="checkbox" id="soundToggle" checked>
50
+ <span>Sound</span>
51
+ </label>
52
+ </div>
53
+
54
+ <div class="instructions">
55
+ <h3>How to Play:</h3>
56
+ <p>🎯 Watch the sequence of colors</p>
57
+ <p>🖱️ Click the colors in the same order</p>
58
+ <p>📈 Each round adds one more color to the sequence</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <script src="script.js"></script>
63
+ </body>
64
+ </html>