<div class="container">
  <div class="wrapper mx-auto px-2">
            <div id="gameMessage" class="mt-2" style="height: 58px;">
                <div id="tie" class="alert alert-primary text-center" style="display: none;"></div>
            </div>
        
            <label class="d-flex justify-content-center pt-3">Computer</label>
            <div id="compControl" class="d-flex justify-content-center pt-3">
            
                <button id="cRock" type="button" class="btn btn-secondary disabled mx-2">Rock<i class="fa fa-hand-rock-o ms-2" aria-hidden="true"></i></button>

                <button id="cPaper" type="button" class="btn btn-secondary disabled mx-3">Paper<i class="fa fa-hand-paper-o ms-2" aria-hidden="true"></i></button>

                <button id="cScissors" type="button" class="btn btn-secondary disabled mx-2">Scissors<i class="fa fa-hand-scissors-o ms-2" aria-hidden="true"></i></button>
            </div>

            <div id="log" class="d-flex flex-column bg-light p-2 rounded mt-5 m-auto" style="height: 165px; overflow-y:scroll;">
                <label id="histLb" class="badge">History
                    <!--<i type="button" id="hideBtn" onclick="hideLog()" class="fa fa-chevron-down show" aria-hidden="true"></i>-->
                </label>
                <div id="hist" class="d-flex flex-column-reverse"></div>
            </div>

            <div id="playerControl" class="d-flex justify-content-center pb-1 mt-5">
                <button id="uRock" type="button" class="btn btn-primary mx-2" onclick="playGame('rock')">Rock<i class="fa fa-hand-rock-o ms-2" aria-hidden="true"></i></button>

                <button id="uPaper" type="button" class="btn btn-primary mx-3" onclick="playGame('paper')">Paper<i class="fa fa-hand-paper-o ms-2" aria-hidden="true"></i></button>

                <button id="uScissors" type="button" class="btn btn-primary mx-2" onclick="playGame('scissors')">Scissors<i class="fa fa-hand-scissors-o ms-2" aria-hidden="true"></i></button>
            </div>
            <label class="d-flex justify-content-center pt-3">You</label>

            <div class="d-flex row justify-content-center mt-4 mb-3" style="height: 90px;">
                <div id="myBoard" class="score col-md-2 bg-light me-2 rounded">
                    <label>Your Score</label>
                    <div id="wins">0</div>
                </div>

                <div id="compBoard" class="score col-md-2 bg-light ms-2 rounded">
                    <label>Comp Score</label>
                    <div id="losses">0</div> 
                </div>
            </div>
    </div>

        </div>

html {
  overflow-x: hidden;
  height: 100vh;
}
.wrapper {
  max-width: 400px;
}
p {
    margin-bottom: .5rem;
}
.score {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 8px;
    min-width: fit-content;
    width: 10vw;
}
.score div {
    font-size: large;
 }
label {
    color: #adb5bd;
}
#playerControl button, #compControl button {
    min-width: 110px;
 }
 #log {
    position: relative;
 }
 #histLb {
    position: sticky;
    top: 0;
    width: fit-content;
    background-color: #a0a6ab;
}
.btn-success.disabled, .btn-success:disabled, .btn-success, .btn-success:focus {
    background-color:#11cf94;
    border: #11cf94;
}
.btn-success:focus {
    box-shadow: 0 0 0 0.25rem rgb(11 207 148 / 44%);
}
.btn {
  padding: 10px;
}

// Clear session storage whenever page is refreshed
window.onunload = () => sessionStorage.clear();

let userRoll;
let compRoll;
let userWin;
let userScore = 0;
let compScore = 0;
let round = 0;

const wins = document.getElementById('wins');
const losses = document.getElementById('losses');
const myBoard = document.getElementById('myBoard');
const compBoard = document.getElementById('compBoard');
const compControl = document.getElementById('compControl');
const hideBtn = document.getElementById('hideBtn');

// Store Computer Controls
const cRock = document.getElementById('cRock');
const cPaper = document.getElementById('cPaper');
const cScissors = document.getElementById('cScissors');

// Store User Controls
const uRock = document.getElementById('uRock');
const uPaper = document.getElementById('uPaper');
const uScissors = document.getElementById('uScissors');

// Store Alert Elements
const gameMessage = document.getElementById('gameMessage');
const tieM = document.getElementById('tie');

// OnScroll Event to Fade History Label
const log = document.getElementById('log');
const histLb = document.getElementById('histLb');
log.addEventListener("scroll", (event) => {
  histLb.style = "opacity: .15;";
  setTimeout(() => {
    histLb.style = "opacity: 1;";
  }, 1000)
});

// Display console log
const logger = document.getElementById('hist');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += '<p class="text-center" style="color: #adb5bd;">' + message;
        }
    }

function playGame(userRoll) {
    
    // Reset Styles
    myBoard.style = "border: none;";
    compBoard.style = "border: none;";
    cRock.style = "opacity: .65;";
    cPaper.style = "opacity: .65;";
    cScissors.style = "opacity: .65;";
    tieM.style = "display: none;";
    cRock.classList.remove('btn-success', 'btn-danger');
    cPaper.classList.remove('btn-success', 'btn-danger');
    cScissors.classList.remove('btn-success', 'btn-danger');
    uRock.classList.remove('btn-success', 'btn-danger');
    uPaper.classList.remove('btn-success', 'btn-danger');
    uScissors.classList.remove('btn-success', 'btn-danger');

    // Log history divider
    console.log('===========');

    // Get Round Value
    function getRound() {
        return round += 1;
    }

    let roundNum = getRound();

    // Get Computer Choice
    let randomNumber = Math.floor(Math.random() * 3);
    switch (randomNumber) {
        case 0:
            compRoll = 'rock';
            cRock.style = "opacity: 1;"
            break;
        case 1:
            compRoll = 'paper';
            cPaper.style = "opacity: 1;"
            break;
        case 2:
            compRoll = 'scissors';
            cScissors.style = "opacity: 1;"
            break;
        default:
            compRoll = 'blank';
            break;
    }


    // Game Logic to determin winner
    function findWinner() {
        switch(true) {
            // Player Win Scenarios
            case (compRoll === 'rock' && userRoll === 'paper'):
                myBoard.style = "border: 2px solid #0bdea6;"
                cRock.classList.add('btn-danger');
                uPaper.classList.add('btn-success');
                return userWin = true;
            case (compRoll === 'scissors' && userRoll === 'rock'):
                myBoard.style = "border: 2px solid #0bdea6;"
                cScissors.classList.add('btn-danger');
                uRock.classList.add('btn-success');
                return userWin = true;
            case (compRoll === 'paper' && userRoll === 'scissors'):
                myBoard.style = "border: 2px solid #0bdea6;"
                cPaper.classList.add('btn-danger');
                uScissors.classList.add('btn-success');
                return userWin = true;
            // Player Lose Scenarios
            case (compRoll === 'paper' && userRoll === 'rock'):
                compBoard.style = "border: 2px solid #0bdea6;"
                cPaper.classList.add('btn-success');
                uRock.classList.add('btn-danger');
                return userWin = false;
            case (compRoll === 'rock' && userRoll === 'scissors'):
                compBoard.style = "border: 2px solid #0bdea6;"
                cRock.classList.add('btn-success');
                uScissors.classList.add('btn-danger');
                return userWin = false;
            case (compRoll === 'scissors' && userRoll === 'paper'):
                compBoard.style = "border: 2px solid #0bdea6;"
                cScissors.classList.add('btn-success');
                uPaper.classList.add('btn-danger');
                return userWin = false;
            // Handle Ties
            default:
                return userWin = null;
        }
    }

    const winner = findWinner();
 
    // Find Score and Display Tie
    function findScore() {
        if (winner === null) {
            tieM.innerText = 'It\'s a tie! Try again!';
            tieM.style = 'display: block;';
        } else {
            winner ? userScore += 1 : compScore += 1;
        }
    }

    findScore();

    // Log History
    console.log(`User Score: ${userScore} ` + '| ' + `Comp Score: ${compScore}`);
    console.log(`User Roll: ${userRoll} ` + '| ' + `Comp Roll: ${compRoll}`);
    console.log(`Round ${roundNum}`);

    // Update Scoreboard
    wins.textContent = userScore;
    losses.textContent = compScore;
}