<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Silkscreen&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome/all.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="game">
        <div class="game-intro">
            <h1 class="game-title">NAME THE GAME</h1>
            <p class="game-score-display">Score: <span id="game-score">0</span></p>
            <p id="game-lives-display"></p>
        </div>
        <div class="gameboard">
            <div id="game-difficulty">
                <p class="game-message game-difficulty__title">Choose your difficulty:</p>
                <button id="game-difficulty__easy" class="game-button">Easy</button>
                <button id="game-difficulty__hard" class="game-button">Hard</button>
            </div>
            <div id="gameboard__word"></div>
            <div id="game-end-message" class="hidden">
                <p id="game-end-message__text" class="game-message"></p>
                <button id="game-end-message__try-again" class="game-button">Try again</button>
            </div>
        </div>
        <div class="letterboard">
            <button>A</button>
            <button>B</button>
            <button>C</button>
            <button>D</button>
            <button>E</span>
                <button>F</button>
                <button>G</button>
                <button>H</button>
                <button>I</button>
                <button>J</button><br />
                <button>K</button>
                <button>L</button>
                <button>M</button>
                <button>N</button>
                <button>O</button>
                <button>P</button>
                <button>Q</button>
                <button>R</button>
                <button>S</button><br />
                <button>T</button>
                <button>U</button>
                <button>V</button>
                <button>W</button>
                <button>X</button>
                <button>Y</button>
                <button>Z</button>
        </div>
    </div>
    <script src="js/script.js" async defer></script>
</body>

</html>
:root {
    --green: #92ed1c;
    --orange: #ea6912;
    --black: #000000;
    --white: #ffffff;
    --lightergrey: #444444;
    --lightgrey: #666666;
    --darkgrey: #4F5961;
    --mainfonts: 'Silkscreen', Helvetica, sans-serif;

  }

body {
    margin-top: 1rem;
}


.hidden{
    display: none;
}

.game {
    padding: 0.5rem 0 0 0;
    max-width: 60%;
    margin: 0 auto;
    background: green;
    background-image: url('../images/lines.png');
    border-radius: 25px;
    text-align: right;
}

.game-intro {
    display: grid;
    grid-template-columns: repeat(4, 0.5fr);
    grid-auto-rows: 40px;
    align-items: center;
    width: 90%;
    margin: 1rem auto 1.5rem auto;
    padding: 0.5rem 0;
    background-color: var(--black);
    border-radius: 10px;
}

.game-title {
    display: inline-block;
    grid-column-start: 1;
    grid-column-end: 5;
    margin: 0;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    font-family: var(--mainfonts);
    font-size: 1.6rem;
    color: var(--green);
    text-align: center;
}

.game-button{
    margin: 0 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--darkgrey);
    border-radius: 8px;
    border: 1px solid white;
    font-family: var(--mainfonts);
    color: var(--green);
}

.game-button:active,
.game-button:hover,
.game-button:focus{
    background-color: var(--white);
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-duration: 1.25s;
    color: var(--darkgrey);
    cursor: pointer;
}

.game-message{
    margin: 0;
    margin-bottom: 1.5rem;
    font-family: var(--mainfonts);
    font-size: 1.25rem;
    color: var(--green);
}

.game-score-display {
    display: inline-block;
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 0;
    padding: 0.5rem;
    padding-left: 2rem;
    font-family: var(--mainfonts);
    font-weight: 400;
    color: var(--green);
    text-align: left;
}

#game-lives-display{
    grid-column-start: 2;
    grid-column-end: 5;
    padding: 0 1rem;
}

#game-lives-display.all-lives-lost{
    animation-name: blink;
    animation-iteration-count: 5;
    animation-duration: 1.5s;
    animation-direction: normal;
}

#game-lives-display span.life {
    display: inline-block;
    width: 30px;
    height: 26px;
    margin: 0 5px;
    background: var(--green);
    border-radius: 50% 50%;
    /*background-image: url('../images/heart-sprite.png');*/
    background-position: 0 0;
}

#game-lives-display span.life-lost{
    animation-name: blink;
    animation-iteration-count: 1;
    animation-duration: 1.5s;
    background: red;
    background-position: 30px 0;
}

.gameboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    min-height: 100px;
    margin: 0.5rem auto 3rem auto;
    padding: 2rem 0;
    background: var(--black);
    border-radius: 25px;
    text-align: center;
}

#gameboard__word {
    padding: 0 2rem;
}

#gameboard__word span {
    display: inline-block;
    margin: 0 0.5rem;
    width: 25px;
    font-family: var(--mainfonts);
    font-size: 2rem;
    font-weight: 400;
    line-height: 0;
    text-transform: uppercase;
}

#gameboard__word span.blank {
    border-bottom: 2px solid var(--darkgrey);
}

#gameboard__word span,
#gameboard__word span.letter,
.gameboard .win-message span {
    color: var(--green);
}

#gameboard__word span.letter,
.gameboard .win-message span {
    border-bottom: 2px solid transparent;
}

#gameboard__word .word-space {
    display: inline-block;
    margin: 0 0.5rem;
    width: 10px;
    height: 14px;
    background: var(--darkgrey);
}

.gameboard .win-message {
    margin-bottom: -2px;
}

.letterboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3rem 1rem;
    background-image: url('../images/woodgrain.jpg');
    background-size: cover;
    border-radius: 0 0 15px 15px;
    text-align: center;
}

.letterboard button {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 10px;
    padding: 0;
    outline: 2px solid var(--lightergrey);
    border: 1px solid var(--black);
    background-color: var(--lightergrey);
    font-family: var(--mainfonts);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--white);
    cursor: pointer;
}

.letterboard button:active,
.letterboard button:hover {
    outline: 2px solid var(--orange);
    background-color: var(--orange);
}

.letterboard button.disabled {
    outline: 2px solid var(--black);
    background-color: var(--black);
    color: var(--lightgrey);
    pointer-events: none;
}



@media(max-width: 1600px) {
    .game {
        max-width: 70%;
    }
}

@media(max-width: 1366px) {
    #gameboard__word .word-space {
        display: block;
        margin: 1rem auto;
    }
}

@media(max-width: 1024px) {
    .game {
        max-width: 95%;
    }

    #gameboard__word span.word-space {
        display: block;
        margin: 1rem auto;
        height: 20px;
    }
}

@media(max-width: 768px){
    .game-score-display,
    #game-lives-display{
        padding: 0 0.5rem;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}
/** WORD GUESSING GAME **/

var clickButton = function (e) {
    e.preventDefault();
};


const gameBoard = document.querySelector(".gameboard");
const gameBoardWord = document.querySelector("#gameboard__word");
const letterButtons = document.querySelectorAll(".letterboard button");

let gameStart = null;
let gameStatus = null;
let gameScore = 0;
let gameLives = 0;

let gameScoreDisplay = document.querySelector("#game-score");
let gameLivesDisplay = document.querySelector("#game-lives-display");

const gameDifficultyButtons = document.querySelector("#game-difficulty");
const gameDifficultyEasyButton = document.querySelector("#game-difficulty__easy");
const gameDifficultyHardButton = document.querySelector("#game-difficulty__hard");

const gameEndMessage = document.querySelector("#game-end-message");
const gameEndMessageText = document.querySelector("#game-end-message__text");
const gameEndMessageTryAgainButton = document.querySelector("#game-end-message__try-again");

turnOffLetters();

gameDifficultyEasyButton.addEventListener('click', () => {
    gameLives = 5;
    startGame(gameLives);
});

gameDifficultyHardButton.addEventListener('click', () => {
    gameLives = 3;
    startGame(gameLives);
});

gameEndMessageTryAgainButton.addEventListener('click', () => {
    newGame();
    console.log("Clicked Try Again");
});

function newGame() {
    gameScore = 0;
    gameLives = 0;
    updateScore();

    console.clear();

    // Reset panels
    gameDifficultyButtons.classList.remove('hidden');
    gameEndMessage.classList.add("hidden");

    gameBoardWord.innerHTML = "";
    gameBoardWord.classList.remove('hidden');

    gameLivesDisplay.classList.add("hidden");
}

function startGame(gameLives) {
    gameStart = true;

    console.log("gameScore" + gameScore);

    gameLivesDisplay.classList.remove("hidden");
    gameLivesDisplay.innerHTML = "";
    updateGameLives(gameLives);
    turnOnLetters();

    console.log("GAME STARTED");
    gameDifficultyButtons.classList.add('hidden');
    gameLivesDisplay.classList.remove('all-lives-lost');

    // Array with game names assigned with a key
    const gameNamesArray = {
        //1: "Pac-Man",
        1: "E.T.",
        //2: "Mario Bros.",
        //4: "The Legend Of Zelda",
        //5: "Space Invaders"
    };

    const gameNamesArrayLength = Object.keys(gameNamesArray).length;

    // Random number generator to link back to key
    // Key matches to an answer

    let selectedGameNumber = Math.floor(Math.random() * gameNamesArrayLength + 1);

    // Selected answer is matched to a variable
    let selectedGameName = gameNamesArray[selectedGameNumber];

    //console.log(`Selected Game: ${selectedGameNumber} ${selectedGameName}`);


    // Answer shown to user using blanks in place of the letters
    for (let char of selectedGameName) {
        // console.log(char);

        if (char == "-") {
            gameBoardWord.innerHTML += '<span>-</span>';
        } else if (char == ".") {
            gameBoardWord.innerHTML += '<span>.</span>';
        } else if (char !== " ") {
            gameBoardWord.innerHTML += '<span class="blank"></span>';
        } else {
            gameBoardWord.innerHTML += '<div class="word-space"></div>';
        }
    }

    // User selects a letter
    // Capture letter in text field on submit
    // Turn to lower case

    letterButtons.forEach((currentBtn) => {
        currentBtn.addEventListener('click', () => {

            currentBtn.classList.add("disabled");

            let guess = currentBtn.innerText;
            let characterNum = 0;

            let matches = 0;
            let matchMade = false;

            for (let char of selectedGameName) {
                characterNum++;

                // console.log(char);
                /* If correct, the function feeds this back to the user
                by replacing any blanks with the letter. If no matches
                are made then the message "Try again" is fed back to
                the user */

                if (char.toUpperCase() === guess.toUpperCase()) {
                    // console.log(gameBoardWord.querySelector(`span.blank:nth-child(${characterNum})`));
                    gameBoardWord.querySelector(`span.blank:nth-child(${characterNum})`).innerText = char;
                    gameBoardWord.querySelector(`span.blank:nth-child(${characterNum})`).classList.add('letter');
                    gameBoardWord.querySelector(`span.blank:nth-child(${characterNum})`).classList.remove('blank');


                    matches++;
                    //console.log(matches);
                    matchMade = true;
                }
            }

            if (matchMade) {
                gameScore += 100 * matches;
            } else {
                gameScore -= 50;

                console.log("Original Game Lives: " + gameLives);
                updateGameLives(gameLives);
                gameLives -= 1;
                console.log("New Game Lives: " + gameLives);

                if (gameLives == 0) {
                    console.log("GAME OVER");
                    gameStatus = "lose";
                    gameOver();
                } else {
                    console.log("gameLives left" + gameLives);
                }

            }

            matchMade = false;

            updateScore();
            checkBlanks(selectedGameName);
        });
    });
}

//startGame();

/*
Function runs to loop through the answer variable
to match the user-selected letter with any letters
contained in the answer
*/

function checkBlanks(selectedGameName) {
    let blanks = gameBoardWord.querySelectorAll("span.blank");

    if (blanks.length == 0) {
        gameStatus = "win";
        gameOver(selectedGameName);
    }
}

function turnOnLetters() {
    letterButtons.forEach((letterButton) => {
        letterButton.classList.remove("disabled");
    });
}

function turnOffLetters() {
    letterButtons.forEach((letterButton) => {
        letterButton.classList.add("disabled");
    });
}

function updateScore() {
    gameScoreDisplay.innerText = gameScore;
}

function updateGameLives(gameLives) {
    //console.log("gameStart" + gameStart);

    if (gameStart == true) {
        for (i = 1; i <= gameLives; i++) {
            gameLivesDisplay.insertAdjacentHTML("afterbegin", `<span class="life" id="life${i}"></span>`);
        }

        gameStart = false;
        // console.log("gameStart" + gameStart);
    } else {
        // console.log("gameStart" + gameStart);
        // console.log("Lost life! gameLives" + gameLives);
        gameLivesDisplay.querySelector(`span#life${gameLives}`).classList.add("life-lost");
    }
}

function gameOver(selectedGameName) {
    console.clear();

    turnOffLetters();

    gameDifficultyButtons.classList.add("hidden");
    gameBoardWord.classList.add("hidden");
    gameEndMessage.classList.remove("hidden");

    if (gameStatus == "lose") {
        gameEndMessageText.innerText = `Oh dear! Why not try again?`;
        gameLivesDisplay.classList.add("all-lives-lost");
    } else {
        gameEndMessageText.innerText = `Yes! The answer was ${selectedGameName}!\nSuper-gamer! Can you improve your score?`;
    }

    // gameBoardWord.innerHTML = "<div class='win-message'><span>Y</span><span>O</span><span>U</span><span class='word-space'></span><span>W</span><span>I</span><span>N</span><span>!</span></div>"
}


newGame();
console.log("Game started");

/* Play continues until there are no blanks left, at which
point the message "Well done" or similar is fed back.
Optional: beat the game in a certain number of tries
(Easy/Hard mode selection at game start?) */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.