m/stewardle
1
0
Fork 0
mirror of https://github.com/ssyyhhrr/stewardle.git synced 2025-11-14 21:03:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

Tutorial Closer

Browse Source
This commit is contained in:
ssyyhhrr
2022-06-19 22:24:14 +01:00
parent 4ce85ac1c4
commit e83fed4663
3 changed files with 45 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/main.css
View File

@@ -217,6 +217,7 @@ p a:hover {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-shadow: 0 4px 23px 0 rgb(0 0 0 / 20%); box-shadow: 0 4px 23px 0 rgb(0 0 0 / 20%);
padding: 1.6em; padding: 1.6em;
transition: all 0.5s;
} }
.splitter { .splitter {
@@ -225,6 +226,19 @@ p a:hover {
background-color: #3a3a3c; background-color: #3a3a3c;
} }
.close {
color: #fff;
position: absolute;
right: 1.6em;
font-size: 1.4em;
transition: all 0.2s;
}
.close:hover {
color: #D3D3D3;
cursor: pointer;
}
.backdrop { .backdrop {
width: 150vw; width: 150vw;
height: 150vh; height: 150vh;
@@ -234,6 +248,7 @@ p a:hover {
padding: 0; padding: 0;
transform: translate(-25vw, -25vh); transform: translate(-25vw, -25vh);
opacity: 0.6; opacity: 0.6;
transition: all 0.5s;
z-index: 1 z-index: 1
} }
@@ -255,7 +270,7 @@ p a:hover {
} }
.tutorial .team { .tutorial .team {
padding: 7px; padding: 9px;
} }
#time { #time {

23
assets/js/main.js
View File

@@ -1,3 +1,5 @@
let canClose = true
function autocomplete(inp, arr) { function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments, /*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/ the text field element and an array of possible autocompleted values:*/
@@ -252,3 +254,24 @@ function editDistance(s1, s2) {
} }
return costs[s2.length]; return costs[s2.length];
} }
document.getElementsByClassName("backdrop")[0].onmousedown = () => {
close()
}
document.getElementsByClassName("close")[0].onmousedown = () => {
close()
}
function close() {
if (!canClose) return
canClose = false
let tutorial = document.getElementsByClassName("tutorial")[0]
let backdrop = document.getElementsByClassName("backdrop")[0]
tutorial.style.opacity = 0
backdrop.style.opacity = 0
setTimeout(() => {
tutorial.remove()
backdrop.remove()
}, 500)
}

15
views/index.ejs
View File

@@ -11,6 +11,9 @@
</head> </head>
<body> <body>
<div class="tutorial"> <div class="tutorial">
<div class="close">
<i class="fa-solid fa-xmark"></i>
</div>
<p>Guess the <b>STEWARDLE</b> in six tries.<br><br> <p>Guess the <b>STEWARDLE</b> in six tries.<br><br>
Each guess must be a valid F1 driver name who has raced in the 2014 season or later. Hit the enter button to submit.<br><br> Each guess must be a valid F1 driver name who has raced in the 2014 season or later. Hit the enter button to submit.<br><br>
After each guess, the color of the tiles will change to show how close your guess was to the Driver of the Day After each guess, the color of the tiles will change to show how close your guess was to the Driver of the Day
@@ -18,22 +21,16 @@
<div class="splitter"></div> <div class="splitter"></div>
<p><b>Examples</b></p> <p><b>Examples</b></p>
<div class="row"> <div class="row">
<!-- <div class="frame"><div class="guess text">HAM</div></div> -->
<div class="frame correct"><img class="flag" src="./flags/gb.svg"></div> <div class="frame correct"><img class="flag" src="./flags/gb.svg"></div>
<p>The driver is of British nationality.</p> <p>The driver is of British nationality.</p>
<!-- <div class="frame incorrect"><img class="team" src="./logos/mercedes.webp"></div>
<div class="frame up"><div class="guess text">44</div></div>
<div class="frame down"><div class="guess text">37</div></div>
<div class="frame up"><div class="guess text">2007</div></div>
<div class="frame down"><div class="guess text">103</div></div> -->
</div> </div>
<div class="row"> <div class="row">
<div class="frame incorrect"><img class="team" src="./logos/mercedes.webp"></div> <div class="frame incorrect"><img class="team" src="./logos/mercedes.webp"></div>
<p>The driver does not race for Mercedes.</p> <p>The driver does not race for Mercedes.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="frame previous"><img class="team" src="./logos/haas.webp"></div> <div class="frame previous"><img class="team" src="./logos/williams.webp"></div>
<p>The driver previously raced for Haas.</p> <p>The driver previously raced for Williams.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="frame up"><div class="guess text">44</div></div> <div class="frame up"><div class="guess text">44</div></div>
@@ -45,7 +42,7 @@
</div> </div>
<p></p> <p></p>
<div class="splitter"></div> <div class="splitter"></div>
<p>A new STEWARDLE will be available each day!</p> <p>A new <b>STEWARDLE</b> will be available each day!</p>
</div> </div>
<div class="backdrop"></div> <div class="backdrop"></div>
<div class="title"><h1>Stewardle</h1></div> <div class="title"><h1>Stewardle</h1></div>