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 
./script.js:18108132/13893:18108380/24
./style.css:18108132/365
This commit is contained in:
Glitch (hello-webpage) 2020-07-29 19:43:10 +00:00
parent bf5b5faf7d
commit c6d928123b
2 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
script.js
View file

@ -51,8 +51,7 @@ let imgDivArray = createGridContentArray(imgSrc);
let discoveredCards = [];
let currentUser = "";
let startTime;
let scoresController = scoreBarController('user-scores');
let scoresController = scoreBarController("user-scores");
imgDivArray.forEach(targetCard => {
targetCard.addEventListener("click", () => {
@ -89,9 +88,9 @@ playBtn.addEventListener("click", () => {
if (isValidUsername(username)) {
currentUser = username;
startTime = Date.now();
scoresController.createPlayingUser(username);
shuffle(imgDivArray);
imgsGrid.innerHTML = "";
@ -124,22 +123,24 @@ function scoreBarController(barId) {
let scoresBar = document.getElementById(barId);
return {
hasUser(username){
let userContainer = document.querySelector(
`.div[data-username=${username}]`
);
getUser(username) {
return document.querySelector(`[data-username=${username}]`);
},
hasUser(username) {
let userContainer = this.getUser(username);
return userContainer !== null;
},
createPlayingUser(username) {
if (this.hasUser(username)) {
let userContainer = document.querySelector(`.div[data-username=${username}]`);
let userContainer = this.getUser(username);
userContainer.remove();
userContainer.lastElementChild.textContent = "Currently playing...";
scoresBar.insertAdjacentElement("afterbegin", userContainer);
} else {
scoresBar.insertAdjacentElement("afterbegin", userContainer);
} else {
let userContainer = createUserScoreDiv(username);
if(scoresBar.childElementCount == 5) {
if (scoresBar.childElementCount == 5) {
scoresBar.lastElementChild.remove();
}
scoresBar.insertAdjacentElement("afterbegin", userContainer);
@ -147,10 +148,10 @@ function scoreBarController(barId) {
},
setUserTime(username, seconds) {
let userContent = document.querySelector(
`.user-score-container[data-username=${username}] p`
);
userContent.textContent = `${seconds} seconds`;
if (this.hasUser(username)) {
let userContainer = this.getUser(username);
userContainer.lastElementChild.textContent = `${seconds} seconds`;
}
}
};
}
@ -163,10 +164,9 @@ function createUserScoreDiv(username) {
}
/*--------------------------------------------------*/
/*----------------- UTIL FUNCTIONS -----------------*/
/*----------------- USEFULL FUNCTIONS --------------*/
/*--------------------------------------------------*/
function isGameEnd(discoveredCards, cards) {
return discoveredCards.length === cards.length;
}
@ -175,7 +175,7 @@ function finishGame(username) {
let finalTimeSpan = document.getElementById("user-seconds");
let totalSeconds = (Date.now() - startTime) / 1000;
finalTimeSpan.textContent = `${totalSeconds} seconds`;
scoresController.setUserTime(username, totalSeconds);
imgsGrid.classList.add("hide");
@ -220,17 +220,17 @@ function shuffle(array) {
}
// FADE PLACEHOLDER IF INPUT IS EMPTY
var usernameInput = document.getElementById("username")
var placeholder = document.getElementById("placeholder")
var usernameInput = document.getElementById("username");
var placeholder = document.getElementById("placeholder");
usernameInput.addEventListener("focusin", () => {
if (usernameInput.value == "") {
placeholder.style.opacity = "0"
placeholder.style.opacity = "0";
}
})
});
usernameInput.addEventListener("focusout", () => {
if (usernameInput.value == "") {
placeholder.style.opacity = "1"
placeholder.style.opacity = "1";
}
})
});

18
style.css
View file

@ -22,6 +22,7 @@ h2{
.cards-row {
display: flex;
min-height: 400px;
height: 70%;
width: 100%;
justify-content: center;
@ -54,6 +55,7 @@ h2{
justify-content: center;
align-content: center;
}
.congrats-container{
display:flex;
height:100%;
@ -205,7 +207,13 @@ strong {
text-shadow: 0 3px 2px hsla(208, 80%, 45%, 1);
}
.user-score {
.user-scores .score-title {
color: hsla(208, 80%, 60%, 1);
text-align: center;
}
.user-scores {
transform: skew(0deg, -2deg);
}
@ -216,11 +224,3 @@ strong {
z-index: 1;
width: 35px;
}
.user-scores h2 {
color: hsla(208, 80%, 60%, 1);
}
.user-scores {
text-align: center;
}