GA SEB Pre-Work: Lapis, Papyrus, Scalpellus

ga-seb-pre-work-lapis-papyrus-scalpellus.markdown

GA SEB Pre-Work: Lapis, Papyrus, Scalpellus

A Pen by Ian Gilmore on CodePen.

License.

index.html

<header>
  <h1><span id="heading-option-1">Lapis</span>-<span id="heading-option-2">Papyrus</span>-<span id="heading-option-3">Scalpellus</span></h1>
  <h3>Play it as the ancients did</h3>
</header>
<div id="intro">
  <p>Welcome to the ancient Roman game of <span id="intro-option-1">Lapis</span>, <span id="intro-option-2">Papyrus</span>, <span id="intro-option-3">Scalpellus</span>, but with a curious twist... instead of competing with a fellow Roman, today you're up against the famous logician <span id="computer-name-intro">J. Scripticus</span>.
  </p>
</div>
<div id="input-and-prompt">
  <div id="input-div">
    <p>Before you two get started, <span id="computer-name-input">J. Scripticus</span> would like to know who they are playing against...</p>
    <input type="text" id="name-input" placeholder="enter your name" autofocus maxlength="48" />
    <p><button id="save-name">Save</button></p>
  </div>
  <div id="prompt">
    <p>
      <span id="welcome-name"></span>
      <span id="welcome-ready"></span>
    </p>
    <p>
      <span id="prompt-count-1">Lapis... </span>
      <span id="prompt-count-2">Papyrus... </span>
      <span id="prompt-count-3">Scalpellus... </span>
      <span id="prompt-count-4">Vado!</span>
    </p>
  </div>
</div>
<div id="player-choices">
  <button class="player-choice-button" id="button-option-1">Lapis</button>
  <button class="player-choice-button" id="button-option-2">Papyrus</button>
  <button class="player-choice-button" id="button-option-3">Scalpellus</button>
</div>
<div id="results-div">
  <p id="tip-first" class="tip">(Select a button to play.)<p/>
  <p id="results"></p>
  <p id="result-detail"></p>
  <p id="tip-again" class="tip">(Choose again to play another round.)</p>
</div>

script.js

const options = ["Lapis", "Papyrus", "Scalpellus"];
const name = {
  player: "Player",
  computer: "J. Scripticus"
};
const choice = {
  player: null,
  computer: null
};

const nameInput = document.querySelector("input");
window.addEventListener("load", function (e) {
  nameInput.focus();
});

// renaming strings based on current variable values
document.querySelectorAll("#heading-option-1").innerText = options[0];
document.querySelector("#heading-option-2").innerText = options[1];
document.querySelector("#heading-option-3").innerText = options[2];
document.querySelector("#intro-option-1").innerText = options[0];
document.querySelector("#intro-option-2").innerText = options[1];
document.querySelector("#intro-option-3").innerText = options[2];
document.querySelector("#prompt-count-1").innerText = options[0] + "... ";
document.querySelector("#prompt-count-2").innerText = options[1] + "... ";
document.querySelector("#prompt-count-3").innerText = options[2] + "... ";
document.querySelector("#button-option-1").innerText = options[0];
document.querySelector("#button-option-2").innerText = options[1];
document.querySelector("#button-option-3").innerText = options[2];
document.querySelector("#computer-name-intro").innerText = name.computer;
document.querySelector("#computer-name-input").innerText = name.computer;

// show save button once text has been entered in the name field
document.querySelector("#name-input").addEventListener("input", (event) => {
  document.querySelector("#save-name").style.opacity = 1;
});

function inputTransitionEnd() {
  document.querySelector("#input-div").remove();
}

function startGame() {
  const playerName = document.querySelector("#name-input");
  name.player = playerName.value;
  document
    .querySelector("#input-div")
    .addEventListener("transitionend", inputTransitionEnd);
  document.querySelector("#input-div").classList.add("removed");
  document.querySelector("#welcome-name").innerText =
    "Okay " + name.player + ",";
  document.querySelector("#welcome-name").classList.add("fade-in-A");
  document.querySelector("#welcome-ready").innerText = " get ready to play...";
  document.querySelector("#welcome-ready").classList.add("fade-in-B");
  document.querySelector("#prompt-count-1").classList.add("fade-in-C");
  document.querySelector("#prompt-count-2").classList.add("fade-in-D");
  document.querySelector("#prompt-count-3").classList.add("fade-in-E");
  document.querySelector("#prompt-count-4").classList.add("fade-in-F");
  document.querySelector("#player-choices").style.display = "initial";
  document.querySelector("#player-choices").classList.add("fade-in-G");
  document.querySelector("#tip-first").classList.add("fade-in-H");
}

// start the game once the save button has been selected
document.querySelector("#save-name").addEventListener("click", startGame);

// when the name field is active bind the enter/return key to selecting the save button
document
  .querySelector("#name-input")
  .addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
      event.preventDefault();
      document.querySelector("#save-name").click();
    }
  });

function playerChoice(e) {
  if (e.target.classList.contains("player-choice-button")) {
    choice.player = e.target.innerText;
    compareChoices();
  }
}

// listen for player making a selection
document
  .querySelector("#player-choices")
  .addEventListener("click", playerChoice);

function computerChooses() {
  const computerTurn = Math.floor(Math.random() * options.length);
  choice.computer = options[computerTurn];
}

function compareChoices() {
  computerChooses();
  removeFirstTip();
  document.querySelector("#results").style.opacity = 0;
  document.querySelector("#result-detail").style.opacity = 0;
  setTimeout(() => {
    if (choice.player === choice.computer) {
      showResultTie(choice.computer);
    } else if (
      (choice.computer === options[0] && choice.player === options[1]) ||
      (choice.computer === options[1] && choice.player === options[2]) ||
      (choice.computer === options[2] && choice.player === options[0])
    ) {
      showResultWinner(
        name.player,
        choice.player,
        name.computer,
        choice.computer
      );
    } else {
      showResultWinner(
        name.computer,
        choice.computer,
        name.player,
        choice.player
      );
    }
  }, 500);
}

function removeFirstTip() {
  const firstTip = document.querySelector("#tip-first");
  if (firstTip != null) {
    firstTip.remove();
  }
}

function showResultTie(choice) {
  document.querySelector("#results").innerText = "Tie game!";
  document.querySelector("#results").style.opacity = 1;
  document.querySelector("#result-detail").innerText =
    name.player + " & " + name.computer + " both chose " + choice + ".";
  document.querySelector("#result-detail").style.opacity = 1;
  document.querySelector("#tip-again").style.opacity = 1;
}

function showResultWinner(winnerName, winnerChoice, loserName, loserChoice) {
  document.querySelector("#results").innerText = winnerName + " wins!";
  document.querySelector("#results").style.opacity = 1;
  document.querySelector("#result-detail").innerText =
    loserName +
    " chose " +
    loserChoice +
    " and " +
    winnerName +
    " chose " +
    winnerChoice +
    ".";
  document.querySelector("#result-detail").style.opacity = 1;
  document.querySelector("#tip-again").style.opacity = 1;
}

style.css

@import url("https://fonts.googleapis.com/css2?family=Aboreto&family=PT+Sans+Narrow:wght@400;700&display=swap");

body {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  background-color: #d1c8b3;
  font-family: Aboreto, sans-serif;
}

div {
  padding: 0;
}

#intro {
  margin: 0 auto;
}

h1 {
  font-size: 36px;
  margin-bottom: 0;
}

h3 {
  font-size: 18px;
  letter-spacing: 7px;
  margin-top: 0;
}

p {
  font-size: 22px;
  font-family: PT Sans Narrow, sand-serif;
}

#input-div {
  transition: opacity .5s;
}

input {
  padding: 8px;
  margin: 0 8px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 24px;
  text-align: center;
  font-family: Aboreto, sans-serif;
  border: solid black;
  border-width: 0 0 2px 0;
  display: initial;
}

.removed {
  transition: opacity .5s;
  opacity: 0;
}

input::placeholder {
  color: gray;
}

#save-name {
  color: black;
  padding: 8px 16px;
  margin: 0 8px;
  background-color: rgba(0, 0, 0, 0);
  border: solid black 2px;
  border-radius: 8px;
  font-size: 18px;
  font-family: Aboreto, sans-serif;
  opacity: 0;
  transition: 1.5s ease-in-out;
}

#welcome-name,
#welcome-ready,
#prompt-count-1,
#prompt-count-2,
#prompt-count-3,
#prompt-count-4 {
  opacity: 0;
}

#player-choices {
  display: none;
  opacity: 0;
}

.player-choice-button {
  color: black;
  padding: 16px;
  margin: 0 8px;
  background-color: rgba(0, 0, 0, 0);
  border: solid black 2px;
  border-radius: 8px;
  width: 30%;
  font-size: 32px;
  font-family: Aboreto, sans-serif;
}

button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.5s;
  cursor: pointer;
}

button:active {
  background-color: rgba(0, 0, 0, 0.5);
}

.tip {
  color: gray;
  opacity: 0;
}

#tip-first {
  transition: opacity .5s;
}

#tip-again {
  transition: opacity 1s;
}

#results-div {
  height: 150px;
}

#results {
  font-size: 48px;
  font-family: PT Sans Narrow, sand-serif;
  text-transform: uppercase;
  margin: 8px;
  padding: 0;
  transition: opacity 0.5s;
  opacity: 0;
}

#result-detail {
  margin: 0;
  padding: 0;
  transition: opacity 0.5s;
  opacity: 0;
}

@media only screen and (max-width: 576px) {
  h1 {
    font-size: 22px;
  }
  h3 {
    font-size: 12px;
    letter-spacing: 5px;
  }
  p {
    font-size: 18px;
  }
  .player-choice-button {
    padding: 16px 4px;
    margin: 4px 2px;
    width: 30%;
    font-size: 16px;
    transition: 0.5s;
  }
}

.fade-in-A {
  animation: 0.5s fadeIn;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-B {
  animation: 0.75s fadeIn;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-C {
  animation: 0.5s fadeIn;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-D {
  animation: 0.5s fadeIn;
  animation-delay: 2.75s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-E {
  animation: 0.5s fadeIn;
  animation-delay: 3.5s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-F {
  animation: 0.5s fadeIn;
  animation-delay: 4.25s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-G {
  animation: 0.5s fadeIn;
  animation-delay: 4.25s;
  animation-fill-mode: forwards;
  visibility: visible;
}

.fade-in-H {
  animation: 2s fadeIn;
  animation-delay: 5.25s;
  animation-fill-mode: forwards;
  visibility: visible;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visbile;
    opacity: 1;
  }
}