Spaces:

awacke1
/

Angel-Tarot-Word-Game-HTML5-JS

Running

App Files Files Community

awacke1 commited on Jul 19

Commit

4bb9f57

•

1 Parent(s): 67f28c8

Update index.html

Browse files

Files changed (1) hide show

index.html +278 -5

index.html CHANGED Viewed

@@ -1,15 +1,288 @@
 <!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>Transformers.js - Object Detection</title>
 </head>
 <body>
     <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">

 <!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">