diff --git a/index.html b/index.html index 66cb926..a01accc 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,9 @@
+
+
Results copied to clipboard
+
@@ -67,8 +70,11 @@
-
-
+
+
$
diff --git a/scripts/main.js b/scripts/main.js index 6e59424..4d1469d 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -30,9 +30,6 @@ infoButton.addEventListener("click", switchState); const statButton = document.getElementById("stat-button"); statButton.addEventListener("click", switchState); -const shareButton = document.getElementById("share-button"); -shareButton.addEventListener("click", copyStats); - //User stats object const userStats = JSON.parse(localStorage.getItem("stats")) || { numGames: 0, @@ -84,6 +81,9 @@ function fetchGameData(gameNumber) { function initializeGame() { //Reset game state and track new game if user last played on a previous day if (gameState.gameNumber !== gameNumber) { + if (gameState.hasWon === false) { + userStats.currentStreak = 0; + } gameState.gameNumber = gameNumber; gameState.guesses = []; gameState.hasWon = false; @@ -100,13 +100,21 @@ function initializeGame() { if (gameState.guesses.length < 6 && !gameState.hasWon) { addEventListeners(); } else { - buttonInput.setAttribute("disabled", ""); - buttonInput.classList.remove("active"); - input.setAttribute("disabled", ""); - input.setAttribute("placeholder", "Game Over!"); + convertToShareButton(); } } +function convertToShareButton() { + const containerElem = document.getElementById("input-container"); + const shareButtonElem = document.createElement("button"); + shareButtonElem.setAttribute("id", "share-button"); + containerElem.innerHTML = ""; + shareButtonElem.innerHTML = `Share + `; + shareButtonElem.addEventListener("click", copyStats); + containerElem.appendChild(shareButtonElem); +} + function displayProductCard() { //First, update the image container with the new product image const imageContainer = document.getElementById("image-container"); @@ -165,7 +173,7 @@ function buttonEventListener() { function handleInput() { const strippedString = input.value.replaceAll(",", ""); const guess = Number(strippedString).toFixed(2); - console.log(guess); + if (isNaN(guess) || !strippedString) { displayWarning(); return; @@ -225,15 +233,37 @@ function copyStats() { output += `\n`; }); - output += `https://costcodle.com`; - navigator.clipboard.writeText(output); + const isMobile = + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/webOS/i) || + navigator.userAgent.match(/iPhone/i) || + navigator.userAgent.match(/iPad/i) || + navigator.userAgent.match(/iPod/i) || + navigator.userAgent.match(/BlackBerry/i) || + navigator.userAgent.match(/Windows Phone/i) || + navigator.userAgent.match(/IEMobile/i) || + navigator.userAgent.match(/Opera Mini/i); - displayToast(); + if (isMobile) { + if (navigator.canShare) { + navigator + .share({ + title: "COSTCODLE", + text: output, + url: "https://costcodle.com", + }) + .catch((error) => console.error("Share failed:", error)); + } + } else { + output += `https://costcodle.com`; + navigator.clipboard.writeText(output); + displayToast(); + } function displayToast() { clearTimeout(toastTimeout); - const toastElem = document.getElementById("stats-toast"); + const toastElem = document.getElementById("share-toast"); toastElem.classList.remove("hide"); toastElem.classList.add("animate__flipInX"); @@ -367,13 +397,16 @@ function gameWon() { localStorage.setItem("state", JSON.stringify(gameState)); localStorage.setItem("stats", JSON.stringify(userStats)); removeEventListeners(); + convertToShareButton(); } function gameLost() { userStats.currentStreak = 0; localStorage.setItem("stats", JSON.stringify(userStats)); + removeEventListeners(); + convertToShareButton(); } /* diff --git a/styles/game.css b/styles/game.css index e473b26..a716a44 100644 --- a/styles/game.css +++ b/styles/game.css @@ -93,7 +93,7 @@ box-shadow: inset 0 0 5px; } -#input-container { +#text-input-container { font-size: 28px; display: flex; @@ -207,3 +207,41 @@ background-color: rgba(0, 96, 169, 0.5); } + +#share-button { + width: 100%; + font-size: 28px; + + font-family: "VT323", monospace; + + display: flex; + align-items: center; + justify-content: center; + + color: white; + border: none; + border-radius: 32px; + background-color: rgb(227, 42, 54); +} + +#share-button:hover { + background-color: rgba(227, 42, 54, 0.8); +} + +.share-icon { + height: 80%; + margin-left: 10px; +} + +#share-toast { + position: absolute; + top: 16px; + + width: 300px; + padding: 18px; + + font-size: 24px; + color: white; + border-radius: 8px; + background-color: rgb(0, 0, 0); +} diff --git a/styles/overlay.css b/styles/overlay.css index 5054fb8..9799c8b 100644 --- a/styles/overlay.css +++ b/styles/overlay.css @@ -45,19 +45,6 @@ background-color: gainsboro; } -#stats-toast { - position: absolute; - top: 16px; - - width: 300px; - padding: 18px; - - font-size: 24px; - color: white; - border-radius: 8px; - background-color: rgb(0, 0, 0); -} - #statistics-title { margin-bottom: 24px; } @@ -102,8 +89,8 @@ display: flex; align-items: center; - justify-content: end; -webkit-justify-content: flex-end; + justify-content: end; padding-right: 4px; @@ -118,35 +105,3 @@ height: 26px; margin-bottom: 15px; } - -.share-button-container { - display: flex; - justify-content: center; - - width: 100%; -} - -.share-button { - font-family: "VT323", monospace; - font-size: 36px; - - display: flex; - align-items: center; - justify-content: center; - - padding: 8px 64px; - - color: white; - border: none; - border-radius: 32px; - background-color: rgb(227, 42, 54); -} - -.share-button:hover { - background-color: rgba(227, 42, 54, 0.8); -} - -.share-icon { - height: 32px; - margin-left: 16px; -}