jasterv/MEMORY-CARD-GAME
1
0
Fork 0
mirror of https://codeberg.org/JasterV/MEMORY-CARD-GAME.git synced 2026-04-26 18:20:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

🌻🏉 Checkpoint

Browse source 
./style.css:18108127/354
./script.js:18108127/510:18108132/374
This commit is contained in:
Glitch (hello-webpage) 2020-07-30 09:55:54 +00:00
parent 207535e4ff
commit 3f28fa3e95
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
script.js
View file

@ -214,7 +214,7 @@ function startGame(username) {
scoresController.createPlayingUser(username);
shuffle(imgDivArray);
imgsGrid.innerHTML = "";
imgDivArray.forEach(img => {
imgsGrid.appendChild(img);
@ -310,3 +310,9 @@ usernameInput.addEventListener("focusout", () => {
});
// Show responsive leaderboard
let scoreToggle = document.getElementById("score-toggle")
let scoreContainer = document.getElementById("score-container")
scoreToggle.addEventListener("click", () => {
scoreContainer.classList.toggle("fade-toggle")
})

22
style.css
View file

@ -279,7 +279,7 @@ strong {
position: absolute;
top: 30px;
left: 48px;
z-index: 2;
z-index: 3;
font-size: 34px;
opacity: 0;
pointer-events: none;
@ -380,11 +380,18 @@ strong {
}
.score-container {
opacity: 1;
opacity: 0;
pointer-events: none;
position: absolute;
height: 100vh;
z-index: 2;
margin-top: 0;
position: relative;
top: -2px;
transition: opacity 300ms ease-out;
}
.fade-toggle {
opacity: 1;
}
.cards-row {
@ -393,7 +400,7 @@ strong {
.left-card {
position: absolute;
top: 0;
top: -2px;
padding: 0 2rem;
}
@ -406,4 +413,11 @@ strong {
height: 65%;
padding-top: 22vh;
}
.score-container .fa-trophy {
font-size: 81vh;
opacity: .2;
bottom: 0;
transform: translateX(-62%) translateY(26%);
}
}