Update share button

index.html

@@ -52,6 +52,9 @@
       </header>
 
       <main id="game-container">
+        <div id="share-toast" class="animate__animated hide">
+          <center>Results copied to clipboard</center>
+        </div>
         <div id="info-card" class="animate__animated">
           <div id="image-container"></div>
           <div id="product-info"></div>
@@ -67,8 +70,11 @@
           <div id="4" class="guess-container"></div>
           <div id="5" class="guess-container"></div>
           <div id="6" class="guess-container"></div>
-          <div class="guess-container transparent-background">
-            <div id="input-container">
+          <div
+            id="input-container"
+            class="guess-container transparent-background"
+          >
+            <div id="text-input-container">
               <div id="input-label">$</div>
               <input
                 id="guess-input"
@@ -210,9 +216,6 @@
         </div>
         <div id="stats-overlay" class="overlay" style="display: none">
           <div id="stat-body" class="overlay-body">
-            <div id="stats-toast" class="animate__animated hide">
-              <center>Results copied to clipboard</center>
-            </div>
             <p id="statistics-title">STATISTICS</p>
             <div id="statistics">
               <div class="statistic">
@@ -263,11 +266,6 @@
                 <div id="graph-6" class="graphElem"></div>
               </div>
             </div>
-            <div class="share-button-container">
-              <button id="share-button" class="share-button">
-                Share<img src="./assets/share-icon.svg" class="share-icon" />
-              </button>
-            </div>
           </div>
         </div>
       </main>

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
+  <img src="./assets/share-icon.svg" class="share-icon" />`;
+  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();
 }
 
 /*

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);
+}

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;
-}