diff --git a/assets/css/main.css b/assets/css/main.css
index cd474df..330c0d9 100644
--- a/assets/css/main.css
+++ b/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;
}
@@ -368,4 +474,14 @@ p a:hover {
100% {
transform: translateX(0);
}
+}
+
+@keyframes pulse {
+ 25% {
+ transform: scale(0.9);
+ }
+
+ 75% {
+ transform: scale(1.1);
+ }
}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 9618009..1808853 100644
--- a/assets/js/main.js
+++ b/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 = `${greeting}
The driver was
${winner.winner}!
Next Stewardle
00:00:00:000
`
+ gg.innerHTML = `${greeting}
The driver was
${winner.winner}!
Next Stewardle
00:00:00:000
`
+ 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);
- 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) {
- localStorage.removeItem("guesses")
- }
if (localStorage.guesses != null) {
+ let utc = new Date()
+ let d = new Date(Date.UTC(utc.getUTCFullYear(), utc.getUTCMonth(), utc.getUTCDate(), 0, 0, 0))
+ let expire = new Date(JSON.parse(localStorage.guesses)[0])
+ if (expire <= d) {
+ localStorage.removeItem("guesses")
+ }
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])
})
})
})
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index afd9757..f479f4d 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -44,6 +44,47 @@
A new STEWARDLE will be available each day!
+
+
+
+
+
Statistics
+
0played
+
0won
+
0lost
+
0streak
+
0max streak
+
+
Debrief
+
+
+
+
+
+
+
+
+
Stewardle
@@ -122,8 +163,7 @@