Spaces:

awacke1
/

Angel-Tarot-Word-Game-HTML5-JS

Running

App Files Files Community

awacke1 commited on Jul 19

Commit

c5f6e88

•

1 Parent(s): 645d24a

Create index.html

Browse files

Files changed (1) hide show

index.html +322 -0

index.html ADDED Viewed

	@@ -0,0 +1,322 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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;
+            background-size: cover;
+            background-position: center;
+        }
+        .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>
+    <h2>Upload Card Back Image</h2>
+    <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>
+    <input id="upload" type="file" accept="image/*" />
+    <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 = [];
+        let cardBackImage = null;
+        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);
+            if (cardBackImage) {
+                cardElement.style.backgroundImage = `url(${cardBackImage})`;
+                cardElement.style.color = 'white';
+                cardElement.style.textShadow = '1px 1px 2px black';
+            }
+            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 initImageUpload() {
+            const uploadInput = document.getElementById('upload');
+            uploadInput.addEventListener('change', (event) => {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        cardBackImage = e.target.result;
+                        resetGame(); // Reset the game to apply the new card back image
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+        function init() {
+            createTrainCars();
+            dealCards();
+            initDragAndDrop();
+            initImageUpload();
+            document.getElementById('reset-button').addEventListener('click', resetGame);
+        }
+        init();
+    </script>
+</body>
+</html>