Spaces:

awacke1
/

Angel-Tarot-Word-Game-HTML5-JS

Running

File size: 10,016 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angel Tarot Train Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #game-area {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 800px;
        }
        #player-hand {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .card {
            width: 80px;
            height: 120px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 0 5px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            cursor: move;
            position: relative;
        }
        .card-value {
            position: absolute;
            top: 5px;
            left: 5px;
            font-weight: bold;
        }
        .train-level {
            height: 150px;
            overflow-x: auto;
            white-space: nowrap;
            border: 1px solid #999;
            margin-bottom: 10px;
        }
        .train-car {
            display: inline-block;
            width: 100px;
            height: 140px;
            background-color: #e0e0e0;
            border: 1px solid #bbb;
            margin: 5px;
            vertical-align: top;
        }
        #score-display {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            font-weight: bold;
        }
        #high-score {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            font-weight: bold;
        }
        #reset-button {
            margin-top: 20px;
        }
        #history {
            margin-top: 20px;
            max-height: 100px;
            overflow-y: auto;
            width: 100%;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <h1>Angel Tarot Train Game</h1>
    <div id="score-display">Score: 0</div>
    <div id="game-area">
        <div id="train-level-1" class="train-level"></div>
        <div id="train-level-2" class="train-level"></div>
        <div id="train-level-3" class="train-level"></div>
        <div id="player-hand"></div>
    </div>
    <button id="reset-button">Reset Game</button>
    <div id="history"></div>
    <div id="high-score">High Score: 0</div>

    <script>
        const angelCards = [
            {name: "Michael", value: 0},
            {name: "Gabriel", value: 1},
            {name: "Raphael", value: 2},
            {name: "Uriel", value: 3},
            {name: "Samael", value: 4},
            {name: "Zadkiel", value: 5},
            {name: "Camael", value: 6},
            {name: "Haniel", value: 7},
            {name: "Raziel", value: 8},
            {name: "Metatron", value: 9},
            {name: "Sandalphon", value: 10},
            {name: "Azrael", value: 11},
            {name: "Cassiel", value: 12},
            {name: "Sachiel", value: 13},
            {name: "Raguel", value: 14},
            {name: "Remiel", value: 15},
            {name: "Sariel", value: 16},
            {name: "Jeremiel", value: 17},
            {name: "Jophiel", value: 18},
            {name: "Ariel", value: 19},
            {name: "Chamuel", value: 20},
            {name: "Seraphiel", value: 21}
        ];

        let score = 0;
        let highScore = 0;
        let playedCards = [];

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        function createCard(card) {
            const cardElement = document.createElement('div');
            cardElement.className = 'card';
            cardElement.draggable = true;
            cardElement.textContent = card.name;
            cardElement.dataset.value = card.value;
            cardElement.dataset.name = card.name;

            const valueElement = document.createElement('span');
            valueElement.className = 'card-value';
            valueElement.textContent = card.value;
            cardElement.appendChild(valueElement);

            return cardElement;
        }

        function dealCards() {
            shuffleArray(angelCards);
            const playerHand = document.getElementById('player-hand');
            playerHand.innerHTML = '';
            for (let i = 0; i < 5; i++) {
                const card = angelCards[i];
                const cardElement = createCard(card);
                playerHand.appendChild(cardElement);
            }
        }

        function createTrainCars() {
            const trainLevels = document.querySelectorAll('.train-level');
            trainLevels.forEach(level => {
                for (let i = 0; i < 5; i++) {
                    const trainCar = document.createElement('div');
                    trainCar.className = 'train-car';
                    level.appendChild(trainCar);
                }
            });
        }

        function initDragAndDrop() {
            const cards = document.querySelectorAll('.card');
            const trainCars = document.querySelectorAll('.train-car');

            cards.forEach(card => {
                card.addEventListener('dragstart', dragStart);
            });

            trainCars.forEach(car => {
                car.addEventListener('dragover', dragOver);
                car.addEventListener('drop', drop);
            });
        }

        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.dataset.name);
        }

        function dragOver(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();
            const cardName = e.dataTransfer.getData('text');
            const card = document.querySelector(`.card[data-name="${cardName}"]`);
            
            if (card && e.target.classList.contains('train-car') && !e.target.hasChildNodes()) {
                e.target.appendChild(card);
                card.draggable = false;
                activateCard(card);
            }
        }

        function activateCard(card) {
            const cardName = card.dataset.name;
            const cardValue = parseInt(card.dataset.value);
            playedCards.push({name: cardName, value: cardValue});
            updateScore();
        }

        function updateScore() {
            score = 0;
            const letterCounts = {};

            playedCards.forEach(card => {
                // Count letters
                for (let letter of card.name) {
                    letterCounts[letter] = (letterCounts[letter] || 0) + 1;
                }

                // Add point for each card
                score++;

                // Special rules for 0 and 21
                if (card.value === 0) {
                    score *= 2; // Double the current score
                } else if (card.value === 21) {
                    score += 10; // Add 10 bonus points
                }
            });

            // Check for letter combinations
            Object.values(letterCounts).forEach(count => {
                if (count >= 3) {
                    score *= 3; // Triple the score for each letter with 3 or more occurrences
                }
            });

            document.getElementById('score-display').textContent = `Score: ${score}`;

            if (playedCards.length === 5) {
                endGame();
            }
        }

        function endGame() {
            if (score > highScore) {
                highScore = score;
                document.getElementById('high-score').textContent = `High Score: ${highScore}`;
                alert(`Congratulations! New high score: ${highScore}`);
            }

            const historyElement = document.getElementById('history');
            historyElement.innerHTML += `<p>Game ended with score: ${score}</p>`;
            historyElement.scrollTop = historyElement.scrollHeight;
        }

        function resetGame() {
            score = 0;
            playedCards = [];
            document.getElementById('score-display').textContent = 'Score: 0';
            
            const trainCars = document.querySelectorAll('.train-car');
            trainCars.forEach(car => car.innerHTML = '');
            
            dealCards();
            initDragAndDrop();
        }

        function init() {
            createTrainCars();
            dealCards();
            initDragAndDrop();
            document.getElementById('reset-button').addEventListener('click', resetGame);
        }

        init();
    </script>
    <h1>Object Detection w/ 🤗 Transformers.js</h1>
    <label id="container" for="upload">
        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill="#000"
                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
            </path>
        </svg>
        Click to upload image
        <label id="example">(or try example)</label>
    </label>
    <label id="status">Loading model...</label>
    <input id="upload" type="file" accept="image/*" />

    <script src="index.js" type="module"></script>
</body>

</html>