create-template-html-css 1.8.1 → 2.0.0

package/templates/dice-game/script.js

@@ -0,0 +1,291 @@
+// Game state
+let gameState = {
+    players: [
+        { total: 0, current: 0, name: 'שחקן 1' },
+        { total: 0, current: 0, name: 'שחקן 2' }
+    ],
+    currentPlayer: 0,
+    gameActive: true,
+    gameMode: 'pvp', // 'pvp' or 'pvc'
+    rolling: false
+};
+
+// Dice faces configuration
+const diceFaces = {
+    1: [{ x: 50, y: 50 }],
+    2: [{ x: 25, y: 25 }, { x: 75, y: 75 }],
+    3: [{ x: 25, y: 25 }, { x: 50, y: 50 }, { x: 75, y: 75 }],
+    4: [{ x: 25, y: 25 }, { x: 75, y: 25 }, { x: 25, y: 75 }, { x: 75, y: 75 }],
+    5: [{ x: 25, y: 25 }, { x: 75, y: 25 }, { x: 50, y: 50 }, { x: 25, y: 75 }, { x: 75, y: 75 }],
+    6: [{ x: 25, y: 25 }, { x: 75, y: 25 }, { x: 25, y: 50 }, { x: 75, y: 50 }, { x: 25, y: 75 }, { x: 75, y: 75 }]
+};
+
+// Update display
+function updateDisplay() {
+    document.getElementById('player1Total').textContent = gameState.players[0].total;
+    document.getElementById('player1Current').textContent = gameState.players[0].current;
+    document.getElementById('player2Total').textContent = gameState.players[1].total;
+    document.getElementById('player2Current').textContent = gameState.players[1].current;
+    
+    // Update active player
+    const player1Card = document.getElementById('player1Card');
+    const player2Card = document.getElementById('player2Card');
+    
+    if (gameState.currentPlayer === 0) {
+        player1Card.classList.add('active');
+        player2Card.classList.remove('active');
+        player1Card.querySelector('.current-turn').textContent = 'תורך!';
+        player2Card.querySelector('.current-turn').textContent = 'המתן...';
+    } else {
+        player1Card.classList.remove('active');
+        player2Card.classList.add('active');
+        player1Card.querySelector('.current-turn').textContent = 'המתן...';
+        player2Card.querySelector('.current-turn').textContent = gameState.gameMode === 'pvc' ? 'תור המחשב...' : 'תורך!';
+    }
+}
+
+// Draw dice
+function drawDice(number) {
+    const dice = document.getElementById('dice');
+    const face = dice.querySelector('.dice-face');
+    
+    face.innerHTML = '';
+    
+    const dots = diceFaces[number];
+    dots.forEach(dot => {
+        const dotEl = document.createElement('span');
+        dotEl.className = 'dot';
+        dotEl.style.left = `${dot.x}%`;
+        dotEl.style.top = `${dot.y}%`;
+        face.appendChild(dotEl);
+    });
+}
+
+// Roll dice with animation
+async function rollDice() {
+    if (!gameState.gameActive || gameState.rolling) return;
+    
+    gameState.rolling = true;
+    const dice = document.getElementById('dice');
+    dice.classList.add('rolling');
+    
+    // Animate random numbers
+    for (let i = 0; i < 10; i++) {
+        drawDice(Math.floor(Math.random() * 6) + 1);
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    
+    // Final roll
+    const result = Math.floor(Math.random() * 6) + 1;
+    drawDice(result);
+    
+    dice.classList.remove('rolling');
+    gameState.rolling = false;
+    
+    return result;
+}
+
+// Roll button
+document.getElementById('rollBtn').addEventListener('click', async () => {
+    if (!gameState.gameActive || gameState.rolling) return;
+    
+    document.getElementById('resultMessage').textContent = '';
+    
+    const roll = await rollDice();
+    
+    if (roll === 1) {
+        // Lost turn
+        gameState.players[gameState.currentPlayer].current = 0;
+        showMessage(`💥 הטלת 1! איבדת את כל ניקוד התור!`, 'error');
+        
+        await new Promise(resolve => setTimeout(resolve, 1500));
+        switchPlayer();
+    } else {
+        // Add to current
+        gameState.players[gameState.currentPlayer].current += roll;
+        updateDisplay();
+        showMessage(`🎲 הטלת ${roll}!`, 'info');
+    }
+});
+
+// Hold button
+document.getElementById('holdBtn').addEventListener('click', () => {
+    if (!gameState.gameActive || gameState.rolling) return;
+    
+    const player = gameState.players[gameState.currentPlayer];
+    
+    if (player.current === 0) {
+        showMessage('אין מה לשמור! הטל קובייה תחילה.', 'error');
+        return;
+    }
+    
+    player.total += player.current;
+    player.current = 0;
+    
+    updateDisplay();
+    
+    // Check for win
+    if (player.total >= 100) {
+        endGame();
+    } else {
+        showMessage(`✅ נשמר! ${player.total} נקודות סה"כ.`, 'success');
+        setTimeout(() => {
+            switchPlayer();
+        }, 1000);
+    }
+});
+
+// Switch player
+async function switchPlayer() {
+    gameState.currentPlayer = gameState.currentPlayer === 0 ? 1 : 0;
+    updateDisplay();
+    document.getElementById('resultMessage').textContent = '';
+    
+    // Computer turn
+    if (gameState.gameMode === 'pvc' && gameState.currentPlayer === 1) {
+        await computerTurn();
+    }
+}
+
+// Computer turn (AI)
+async function computerTurn() {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    const player = gameState.players[1];
+    const opponent = gameState.players[0];
+    
+    while (gameState.currentPlayer === 1 && gameState.gameActive) {
+        await new Promise(resolve => setTimeout(resolve, 1200));
+        
+        const roll = await rollDice();
+        
+        if (roll === 1) {
+            player.current = 0;
+            showMessage(`🤖 המחשב הטיל 1! איבד את התור!`, 'error');
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            switchPlayer();
+            return;
+        }
+        
+        player.current += roll;
+        updateDisplay();
+        showMessage(`🤖 המחשב הטיל ${roll}!`, 'info');
+        
+        // AI decision logic
+        const shouldHold = 
+            player.current >= 20 || // Safe threshold
+            (player.total + player.current >= 100) || // Winning move
+            (opponent.total >= 80 && player.current >= 15); // Defensive play
+        
+        if (shouldHold) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            
+            player.total += player.current;
+            player.current = 0;
+            updateDisplay();
+            
+            if (player.total >= 100) {
+                endGame();
+                return;
+            }
+            
+            showMessage(`🤖 המחשב שומר ${player.total} נקודות!`, 'success');
+            await new Promise(resolve => setTimeout(resolve, 1500));
+            switchPlayer();
+            return;
+        }
+    }
+}
+
+// End game
+function endGame() {
+    gameState.gameActive = false;
+    
+    const winner = gameState.players[gameState.currentPlayer];
+    const winnerName = gameState.currentPlayer === 0 ? 
+        'שחקן 1' : 
+        (gameState.gameMode === 'pvc' ? 'המחשב' : 'שחקן 2');
+    
+    showMessage(`🎉 ${winnerName} ניצח עם ${winner.total} נקודות!`, 'success');
+    
+    // Celebrate
+    celebrate();
+}
+
+// New game
+document.getElementById('newGameBtn').addEventListener('click', newGame);
+
+function newGame() {
+    gameState.players = [
+        { total: 0, current: 0, name: 'שחקן 1' },
+        { total: 0, current: 0, name: 'שחקן 2' }
+    ];
+    gameState.currentPlayer = 0;
+    gameState.gameActive = true;
+    gameState.rolling = false;
+    
+    updateDisplay();
+    drawDice(1);
+    document.getElementById('resultMessage').textContent = '';
+}
+
+// Game mode buttons
+document.querySelectorAll('.mode-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        if (gameState.rolling) return;
+        
+        document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        
+        gameState.gameMode = btn.dataset.mode;
+        
+        // Update player 2 name
+        if (gameState.gameMode === 'pvc') {
+            document.querySelector('#player2Card h3').textContent = '🤖 מחשב';
+        } else {
+            document.querySelector('#player2Card h3').textContent = '👤 שחקן 2';
+        }
+        
+        newGame();
+    });
+});
+
+// Show message
+function showMessage(text, type = 'info') {
+    const messageEl = document.getElementById('resultMessage');
+    messageEl.textContent = text;
+    messageEl.className = `result-message ${type}`;
+    messageEl.style.display = 'block';
+}
+
+// Celebration
+function celebrate() {
+    const card = document.getElementById(`player${gameState.currentPlayer + 1}Card`);
+    card.classList.add('winner');
+    
+    // Confetti
+    for (let i = 0; i < 50; i++) {
+        setTimeout(() => {
+            createConfetti();
+        }, i * 30);
+    }
+}
+
+// Create confetti
+function createConfetti() {
+    const confetti = document.createElement('div');
+    confetti.className = 'confetti';
+    confetti.style.left = Math.random() * 100 + '%';
+    confetti.style.animationDuration = (Math.random() * 2 + 1) + 's';
+    confetti.style.background = ['#FFD700', '#FF6347', '#4169E1', '#32CD32', '#FF69B4'][Math.floor(Math.random() * 5)];
+    
+    document.body.appendChild(confetti);
+    
+    setTimeout(() => {
+        confetti.remove();
+    }, 3000);
+}
+
+// Initialize
+updateDisplay();
+drawDice(1);

package/templates/dice-game/style.css

@@ -0,0 +1,403 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    overflow-x: hidden;
+}
+
+.container {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 800px;
+    width: 100%;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.header h1 {
+    color: #2d3748;
+    font-size: 2.5rem;
+    margin-bottom: 5px;
+}
+
+.subtitle {
+    color: #718096;
+    font-size: 1.1rem;
+}
+
+.game-mode {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 25px;
+}
+
+.mode-btn {
+    padding: 12px 30px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: 3px solid #e2e8f0;
+    background: white;
+    color: #4a5568;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.mode-btn:hover {
+    border-color: #667eea;
+    color: #667eea;
+}
+
+.mode-btn.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-color: #667eea;
+}
+
+.players-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.player-card {
+    background: #f7fafc;
+    border-radius: 15px;
+    padding: 20px;
+    border: 3px solid #e2e8f0;
+    transition: all 0.3s ease;
+}
+
+.player-card.active {
+    border-color: #667eea;
+    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
+    transform: scale(1.02);
+}
+
+.player-card.winner {
+    animation: winnerPulse 1s ease-in-out infinite;
+}
+
+@keyframes winnerPulse {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+    }
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
+    }
+}
+
+.player1-card.active {
+    background: linear-gradient(135deg, rgba(245, 87, 108, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
+}
+
+.player2-card.active {
+    background: linear-gradient(135deg, rgba(77, 219, 255, 0.1) 0%, rgba(66, 153, 225, 0.1) 100%);
+}
+
+.player-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.player-header h3 {
+    color: #2d3748;
+    font-size: 1.3rem;
+}
+
+.current-turn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 6px 15px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: bold;
+}
+
+.player-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.stat {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.stat-label {
+    color: #718096;
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.stat-value {
+    color: #2d3748;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.dice-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 30px;
+}
+
+.dice {
+    width: 120px;
+    height: 120px;
+    perspective: 1000px;
+}
+
+.dice.rolling {
+    animation: diceRoll 0.5s ease-in-out;
+}
+
+@keyframes diceRoll {
+    0%, 100% {
+        transform: rotateX(0) rotateY(0);
+    }
+    25% {
+        transform: rotateX(180deg) rotateY(180deg);
+    }
+    50% {
+        transform: rotateX(360deg) rotateY(360deg);
+    }
+    75% {
+        transform: rotateX(540deg) rotateY(540deg);
+    }
+}
+
+.dice-face {
+    width: 100%;
+    height: 100%;
+    background: white;
+    border: 4px solid #2d3748;
+    border-radius: 15px;
+    position: relative;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.dot {
+    width: 20px;
+    height: 20px;
+    background: #2d3748;
+    border-radius: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+}
+
+.controls {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    padding: 15px 30px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 160px;
+    justify-content: center;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.btn:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-icon {
+    font-size: 1.5rem;
+}
+
+.btn-roll {
+    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
+    color: white;
+}
+
+.btn-hold {
+    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
+    color: white;
+}
+
+.btn-new {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.result-message {
+    text-align: center;
+    padding: 15px;
+    border-radius: 10px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 20px;
+    display: none;
+}
+
+.result-message.success {
+    background: #c6f6d5;
+    color: #22543d;
+    border: 2px solid #9ae6b4;
+}
+
+.result-message.error {
+    background: #fed7d7;
+    color: #742a2a;
+    border: 2px solid #fc8181;
+}
+
+.result-message.info {
+    background: #bee3f8;
+    color: #2c5282;
+    border: 2px solid #90cdf4;
+}
+
+.instructions {
+    background: #f7fafc;
+    padding: 20px;
+    border-radius: 10px;
+    border: 2px solid #e2e8f0;
+}
+
+.instructions h3 {
+    color: #2d3748;
+    margin-bottom: 12px;
+    font-size: 1.1rem;
+}
+
+.instructions ul {
+    list-style: none;
+    padding-right: 0;
+}
+
+.instructions li {
+    color: #4a5568;
+    margin-bottom: 8px;
+    padding-right: 20px;
+    position: relative;
+    line-height: 1.6;
+}
+
+.instructions li:before {
+    content: "•";
+    color: #667eea;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    font-size: 1.2rem;
+}
+
+/* Confetti */
+.confetti {
+    position: fixed;
+    width: 10px;
+    height: 10px;
+    top: -10px;
+    z-index: 9999;
+    animation: confettiFall linear forwards;
+}
+
+@keyframes confettiFall {
+    to {
+        transform: translateY(100vh) rotate(720deg);
+    }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+
+    .header h1 {
+        font-size: 2rem;
+    }
+
+    .players-section {
+        grid-template-columns: 1fr;
+    }
+
+    .game-mode {
+        flex-direction: column;
+    }
+
+    .mode-btn {
+        width: 100%;
+    }
+
+    .controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .btn {
+        min-width: unset;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.5rem;
+    }
+
+    .dice {
+        width: 100px;
+        height: 100px;
+    }
+
+    .dot {
+        width: 16px;
+        height: 16px;
+    }
+
+    .btn {
+        padding: 12px 20px;
+        font-size: 1rem;
+    }
+
+    .btn-icon {
+        font-size: 1.2rem;
+    }
+}