Share

assets/css/main.css

@@ -137,7 +137,11 @@ input[type=text] {
 }
 
 .timer {
-    margin-top: 1.4em;
+    margin-top: 1em;
+}
+
+.fa-github {
+    color: #fff;
 }
 
 .board {
@@ -184,6 +188,18 @@ input[type=text] {
     font-family: "FormulaOne";
 }
 
+.shareScreen .text {
+    font-size: 0.9em;
+    line-height: 45px;
+    vertical-align: middle;
+    position: absolute;
+    width: 45px;
+    margin-left: auto;
+    margin-right: auto;
+    color: white;
+    font-family: "FormulaOne";
+}
+
 .credits {
     color: white;
     position: absolute;
@@ -200,6 +216,11 @@ input[type=text] {
     font-family: "FormulaOne";
 }
 
+.shareScreen p {
+    color: white;
+    font-family: "FormulaOne";
+}
+
 .credits p {
     margin-bottom: 0.5em;
 }
@@ -242,6 +263,21 @@ p a:hover {
     opacity: 0;
 }
 
+.shareScreen {
+    width: 30em;
+    max-height: 80vh;
+    position: fixed;
+    background-color: #171717;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 4px 23px 0 rgb(0 0 0 / 20%);
+    padding: 1.6em;
+    transition: all 0.5s;
+    opacity: 0;
+}
+
 .splitter {
     width: 100%;
     height: 1px;
@@ -261,6 +297,23 @@ p a:hover {
     cursor: pointer;
 }
 
+.closeShare {
+    color: #fff;
+    position: absolute;
+    right: 1.6em;
+    font-size: 1.4em;
+    transition: all 0.2s;
+}
+
+.shareScreen b {
+    margin-right: 0.4em;
+}
+
+.closeShare:hover {
+    color: #D3D3D3;
+    cursor: pointer;
+}
+
 .backdrop {
     width: 150vw;
     height: 150vh;
@@ -274,6 +327,35 @@ p a:hover {
     z-index: -1;
 }
 
+.share {
+    display: flex;
+    justify-content: center;
+    margin-top: 1em;
+    cursor: pointer;
+}
+
+.copy {
+    display: inline-flex;
+    margin-top: 1em;
+    margin-right: 0.5em;
+    cursor: pointer;
+}
+
+#copied {
+    display: inline;
+    vertical-align: middle;
+    line-height: 40px;
+}
+
+.btn {
+    background-color: #171717;
+    padding: 10px;
+    font-size: 16px;
+    border: 2px solid #3a3a3c;
+    font-family: "FormulaOne";
+    color: #fff;
+}
+
 .frame {
     background-color: #171717;
     height: 55px;
@@ -291,6 +373,30 @@ p a:hover {
     margin-right: 10px;
 }
 
+.stats {
+    height: 25px;
+    display: flex;
+    flex-direction: row;
+    gap: 5%;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.stats b {
+    font-variant-numeric: tabular-nums;
+}
+
+.bar {
+    width: 100%;
+    height: 21px;
+    text-align: right;
+    background-color: #508b53;
+    color: #fff;
+    font-family: "FormulaOne";
+    vertical-align: middle;
+    padding-right: 5px;
+}
+
 .tutorial .team {
     padding: 9px;
 }
@@ -369,3 +475,13 @@ p a:hover {
         transform: translateX(0);
     }
 }
+
+@keyframes pulse {
+    25% {
+        transform: scale(0.9);
+    }
+
+    75% {
+        transform: scale(1.1);
+    }
+}

assets/js/main.js

@@ -145,7 +145,7 @@ document.addEventListener("keyup", async function (event) {
                 for (var i = 0; i < x.length; i++) {
                     x[i].parentNode.removeChild(x[i]);
                 }
-                submit(guess)
+                submit(guess, true)
             }
             else {
                 shake()
@@ -160,7 +160,14 @@ function shake() {
     setTimeout(() => element.style.animation = "shake .5s", 100)
 }
 
-async function submit(guess) {
+function pulse() {
+    let element = document.getElementsByClassName("btn")[0]
+    element.style.removeProperty("animation")
+    setTimeout(() => element.style.animation = "pulse .3s linear 1", 100)
+    setTimeout(() => document.getElementById("copied").innerText = "Copied to clipboard!", 400)
+}
+
+async function submit(guess, real) {
     localStorage.first = false
     return new Promise(async (res, rej) => {
         let obj = {}
@@ -188,6 +195,49 @@ async function submit(guess) {
             }, index * 250)
         })
         if (won || Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0).length == 0) {
+            let attempts = (6 - (Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0).length / 7))
+            if (real) {
+                if (localStorage.stats == null) {
+                    localStorage.stats = JSON.stringify([0, 0, 0, 0, 0])
+                }
+                let stats = JSON.parse(localStorage.stats)
+                stats[0]++
+                if (won) {
+                    stats[1]++
+                    stats[3]++
+                }
+                else {
+                    stats[2]++
+                    stats[3] = 0
+                }
+                if (stats[3] > stats[4]) stats[4] = stats[3]
+                localStorage.stats = JSON.stringify(stats)
+                if (localStorage.scores == null) {
+                    localStorage.scores = JSON.stringify([0, 0, 0, 0, 0, 0])
+                }
+                let scores = JSON.parse(localStorage.scores)
+                scores[6 - (attempts - 1)]++
+                localStorage.scores = JSON.stringify(scores)
+            }
+            let stats = JSON.parse(localStorage.stats)
+            let scores = JSON.parse(localStorage.scores)
+            let bars = ["one", "two", "three", "four", "five", "six"]
+            bars.forEach((bar, index) => {
+                document.getElementById(bar).innerText = scores[index]
+            })
+            let highest = 0
+            scores.forEach(score => {
+                if (score > highest) highest = score
+            })
+            bars.forEach((bar, index) => {
+                let width = scores[index] / highest * 100
+                document.getElementById(bar).style.width = `${width}%`
+                if (width == 0) document.getElementById(bar).style.backgroundColor = "#171717"
+            })
+            let categories = ["played", "won", "lost", "streak", "max"]
+            categories.forEach((category, index) => {
+                document.getElementById(category).innerText = stats[index]
+            })
             let data = await fetch(`${window.location.href}winner`)
             let winner = await data.json()
             let gg = document.getElementsByClassName("input")[0]
@@ -195,7 +245,10 @@ async function submit(guess) {
                 gg.classList.remove("input")
                 gg.classList.add("gg")
                 let greeting = won ? "Congratulations!" : "Bwoah."
-                gg.innerHTML = `<h2>${greeting}</h2><div class="p"><h5>The driver was</h5><h4> ${winner.winner}!</h4></div><div class="p timer"><h3>Next Stewardle</h3></div><div class="p"><h4 id="time">00:00:00:000</h4></div>`
+                gg.innerHTML = `<h2>${greeting}</h2><div class="p"><h5>The driver was</h5><h4> ${winner.winner}!</h4></div><div class="share"><div class="btn"><i class="fa-solid fa-share"></i> Share</div></div><div class="p timer"><h3>Next Stewardle</h3></div><div class="p"><h4 id="time">00:00:00:000</h4></div>`
+                document.getElementsByClassName("btn")[1].onmousedown = () => {
+                    open(document.getElementsByClassName("shareScreen")[0])
+                }
             }
 
             // Set the date we're counting down to
@@ -279,26 +332,34 @@ function editDistance(s1, s2) {
 }
 
 document.getElementsByClassName("backdrop")[0].onmousedown = () => {
-    close()
+    close(document.getElementsByClassName("tutorial")[0])
 }
 
 document.getElementsByClassName("close")[0].onmousedown = () => {
-    close()
+    close(document.getElementsByClassName("tutorial")[0])
+}
+
+document.getElementsByClassName("closeShare")[0].onmousedown = () => {
+    close(document.getElementsByClassName("shareScreen")[0])
 }
 
 document.getElementsByClassName("info")[0].onmousedown = () => {
-    open()
+    open(document.getElementsByClassName("tutorial")[0])
 }
 
-function open() {
+document.getElementsByClassName("btn")[0].onmousedown = () => {
+    pulse()
+    copy()
+}
+
+function open(element) {
     if (!canOpen) return
     canOpen = false
-    let tutorial = document.getElementsByClassName("tutorial")[0]
     let backdrop = document.getElementsByClassName("backdrop")[0]
-    tutorial.style.zIndex = 2
+    element.style.zIndex = 2
     backdrop.style.zIndex = 1
     setTimeout(() => {
-        tutorial.style.opacity = 1
+        element.style.opacity = 1
         backdrop.style.opacity = 0.6
     }, 100)
     setTimeout(() => {
@@ -306,20 +367,41 @@ function open() {
     }, 500)
 }
 
-function close() {
+function close(element) {
     if (!canClose) return
     canClose = false
-    let tutorial = document.getElementsByClassName("tutorial")[0]
     let backdrop = document.getElementsByClassName("backdrop")[0]
-    tutorial.style.opacity = 0
+    element.style.opacity = 0
     backdrop.style.opacity = 0
     setTimeout(() => {
-        tutorial.style.zIndex = -1
+        element.style.zIndex = -1
         backdrop.style.zIndex = -1
         canOpen = true
     }, 500)
 }
 
+function copy() {
+    let attempts = (6 - (Array.from(document.getElementsByClassName("frame")).filter(x => x.childNodes.length == 0).length / 7))
+    let gameNumber = Math.floor((Date.now() - 1655769600000) / 86400000)
+    let clipboard = `Stewardle ${gameNumber} ${attempts}/6\n\n`
+    let x = 0
+    Array.from(document.getElementsByClassName("frame")).filter(x => x.classList.length > 1).forEach((frame, index) => {
+        if (index > 11) {
+            x++
+            if (frame.classList[1] == "down") clipboard += "⬇️"
+            else if (frame.classList[1] == "correct") clipboard += "🟩"
+            else if (frame.classList[1] == "up") clipboard += "⬆️"
+            else if (frame.classList[1] == "incorrect") clipboard += "🟥"
+            else if (frame.classList[1] == "previous") clipboard += "🟧"
+            if (x == 6) {
+                x = 0
+                clipboard += "\n"
+            }
+        }
+    })
+    navigator.clipboard.writeText(clipboard)
+}
+
 document.addEventListener('DOMContentLoaded', (event) => {
     fetch(`${window.location.href}/drivers.json`).then(res => {
         res.json().then(result => {
@@ -328,17 +410,18 @@ document.addEventListener('DOMContentLoaded', (event) => {
                 drivers.push(driver[1].firstName + " " + driver[1].lastName)
             })
             autocomplete(document.getElementById("myInput"), drivers);
+            if (localStorage.guesses != null) {
                 let utc = new Date()
                 let d = new Date(Date.UTC(utc.getUTCFullYear(), utc.getUTCMonth(), utc.getUTCDate(), 0, 0, 0))
-            if (JSON.parse(localStorage.guesses)[0] < d) {
+                let expire = new Date(JSON.parse(localStorage.guesses)[0])
+                if (expire <= d) {
                     localStorage.removeItem("guesses")
                 }
-            if (localStorage.guesses != null) {
                 JSON.parse(localStorage.guesses).forEach(async (guess, index) => {
-                    if (index > 0) await submit(guess)
+                    if (index > 0) await submit(guess, false)
                 })
             }
-            if (localStorage.first == null) open()
+            if (localStorage.first == null) open(document.getElementsByClassName("tutorial")[0])
         })
     })
 })

views/index.ejs

@@ -44,6 +44,47 @@
         <div class="splitter"></div>
         <p>A new <b>STEWARDLE</b> will be available each day!</p>
     </div>
+    <div class="shareScreen">
+        <div class="closeShare">
+            <i class="fa-solid fa-xmark"></i>
+        </div>
+        <p><b>Statistics</b></p>
+        <p><b id="played">0</b>played</p>
+        <p><b id="won">0</b>won</p>
+        <p><b id="lost">0</b>lost</p>
+        <p><b id="streak">0</b>streak</p>
+        <p><b id="max">0</b>max streak</p>
+        <div class="splitter"></div>
+        <p><b>Debrief</b></p>
+        <div class="stats">
+            <p><b>1</b></p>
+            <div class="bar" id="one">0</div>
+        </div>
+        <div class="stats">
+            <p><b>2</b></p>
+            <div class="bar" id="two">0</div>
+        </div>
+        <div class="stats">
+            <p><b>3</b></p>
+            <div class="bar" id="three">0</div>
+        </div>
+        <div class="stats">
+            <p><b>4</b></p>
+            <div class="bar" id="four">0</div>
+        </div>
+        <div class="stats">
+            <p><b>5</b></p>
+            <div class="bar" id="five">0</div>
+        </div>
+        <div class="stats">
+            <p><b>6</b></p>
+            <div class="bar" id="six">0</div>
+        </div>
+        <div class="copy">
+            <div class="btn"><i class="fa-solid fa-copy"></i> Copy</div>
+        </div>
+        <p id="copied"></p>
+    </div>
     <div class="backdrop"></div>
     <div class="title">
         <h1>Stewardle</h1>
@@ -122,8 +163,7 @@
     </div>
     <div class="credits">
         <p style="margin-bottom: 0.25em">Inspired by <a href="https://www.nytimes.com/games/wordle/index.html" target="_blank">Wordle</a></p>
-        <p style="margin-top: 0px">Created by <a href="https://sy.hr/" target="_blank">syhr</a></p>
+        <p style="margin-top: 0px">Created by <a href="https://sy.hr/" target="_blank">syhr</a> <a href="https://github.com/ssyyhhrr/stewardle" target="_blank"><i class="fa-brands fa-github"></i></a></p>
-        <a href="https://github.com/ssyyhhrr/stewardle" target="_blank"><i class="fa-brands fa-github"></i></a>
     </div>
 </body>
 <script src="./js/main.js"></script>