Added Copypasta Emojis

I-AM-T3X · Jun 16, 2024 · b4fad53 · b4fad53
1 parent b06e427
commit b4fad53
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -49,6 +49,19 @@ <h2>How to Play Azerothian Guess</h2>
         </div>
     </div>
 
+    <!-- End Game Modal -->
+    <div id="end-game-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-button" id="end-game-close-button">&times;</span>
+            <h2>Game Over</h2>
+            <p id="end-game-message"></p>
+            <p id="end-game-score"></p>
+            <p id="end-game-streak"></p>
+            <textarea id="end-game-copy-pasta" readonly></textarea>
+            <button id="copy-to-clipboard">Copy to Clipboard</button>
+        </div>
+    </div>
+
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -129,6 +129,7 @@ let wrongGuesses = [];
 let maxWrongGuesses = 6;
 let score = getScore();
 let streak = getStreak();
+let guesses = [];
 
 const wordDisplay = document.getElementById('word-display');
 const letters = document.getElementById('letters');
@@ -154,15 +155,18 @@ function checkGameStatus() {
         setScore(score + 10); // Award 10 points for winning
         setStreak(streak + 1); // Increase streak
         savePlay();
+        showEndGameModal(true);
     } else if (wrongGuesses.length >= maxWrongGuesses) {
         message.textContent = `Game Over! The word was: ${chosenWord}`;
         document.removeEventListener('keydown', handleKeyPress);
         setStreak(0); // Reset streak
         savePlay();
+        showEndGameModal(false);
     }
 }
 
 function handleGuess(letter) {
+    guesses.push(letter);
     if (chosenWord.includes(letter)) {
         for (let i = 0; i < chosenWord.length; i++) {
             if (chosenWord[i] === letter) {
@@ -207,18 +211,25 @@ function createLetterButtons() {
 const instructionsModal = document.getElementById('instructions-modal');
 const closeButton = document.querySelector('.close-button');
 const startGameButton = document.getElementById('start-game');
+const endGameModal = document.getElementById('end-game-modal');
+const endGameCloseButton = document.getElementById('end-game-close-button');
+const endGameMessage = document.getElementById('end-game-message');
+const endGameScore = document.getElementById('end-game-score');
+const endGameStreak = document.getElementById('end-game-streak');
+const endGameCopyPasta = document.getElementById('end-game-copy-pasta');
+const copyToClipboardButton = document.getElementById('copy-to-clipboard');
 
-function openModal() {
-    instructionsModal.style.display = 'block';
+function openModal(modal) {
+    modal.style.display = 'block';
 }
 
-function closeModal() {
-    instructionsModal.style.display = 'none';
+function closeModal(modal) {
+    modal.style.display = 'none';
 }
 
-closeButton.onclick = closeModal;
+closeButton.onclick = () => closeModal(instructionsModal);
 startGameButton.onclick = () => {
-    closeModal();
+    closeModal(instructionsModal);
     if (!hasPlayedToday()) {
         displayWord();
         createLetterButtons();
@@ -231,4 +242,23 @@ startGameButton.onclick = () => {
     }
 };
 
-window.onload = openModal;
+endGameCloseButton.onclick = () => closeModal(endGameModal);
+copyToClipboardButton.onclick = () => {
+    endGameCopyPasta.select();
+    document.execCommand('copy');
+};
+
+function showEndGameModal(won) {
+    endGameMessage.textContent = won ? "Congratulations! You guessed the word!" : `Game Over! The word was: ${chosenWord}`;
+    endGameScore.textContent = `Score: ${score}`;
+    endGameStreak.textContent = `Streak: ${streak}`;
+    endGameCopyPasta.value = generateCopyPasta(won);
+    openModal(endGameModal);
+}
+
+function generateCopyPasta(won) {
+    const result = guesses.map(letter => (chosenWord.includes(letter) ? '✅' : '❌')).join(' ');
+    return `Azerothian Guess: ${won ? "Won" : "Lost"}\n${result}\nWord: ${chosenWord}\nScore: ${score}\nStreak: ${streak}`;
+}
+
+window.onload = () => openModal(instructionsModal);
diff --git a/styles.css b/styles.css
@@ -129,21 +129,21 @@ body {
 
 .modal-content {
     background-color: #fefefe;
-    margin: 10% auto; /* Adjust margin for mobile */
+    margin: 10% auto;
     padding: 20px;
     border: 1px solid #888;
-    width: 90%; /* Adjust width for mobile */
+    width: 90%;
     max-width: 600px;
     text-align: center;
     box-sizing: border-box;
 }
 
 .modal-content ul {
     list-style-type: disc;
-    padding-left: 20px; /* Reduce padding for mobile */
+    padding-left: 20px;
     text-align: left;
     display: inline-block;
-    white-space: normal; /* Allow wrapping */
+    white-space: normal;
 }
 
 .modal-content li {
@@ -161,36 +161,30 @@ body {
     background-color: #f0f0f0;
 }
 
-.close-button {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close-button:hover,
-.close-button:focus {
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
+.modal-content textarea {
+    width: 100%;
+    height: 80px;
+    margin-top: 10px;
+    resize: none;
+    font-size: 1em;
 }
 
 /* Responsive adjustments */
 @media (max-width: 600px) {
     .modal-content {
-        margin: 5% auto; /* Adjust margin for smaller screens */
+        margin: 5% auto;
         padding: 10px;
-        width: 95%; /* Adjust width for smaller screens */
+        width: 95%;
     }
 
     #word-display {
-        font-size: 1.5em; /* Adjust font size for smaller screens */
+        font-size: 1.5em;
     }
 
     #letters button {
         padding: 5px;
         width: 30px;
         height: 30px;
-        font-size: 0.8em; /* Adjust button size for smaller screens */
+        font-size: 0.8em;
     }
 }