learnwithleon · citizen-snipz · Feb 19, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slot Machine</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+      crossorigin="anonymous"
+    />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Lobster&display=swap&family=Sriracha&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <h1>
+      <i class="fas fa-fish"></i> Welcome to the Sand Dollar Casino's Mermaid
+      Slots
+      <i class="fas fa-disease"></i>
+    </h1>
+
+    <div class="reelContainer">
+      <div class="reel" id="reel1"></div>
+      <div class="reel" id="reel2"></div>
+      <div class="reel" id="reel3"></div>
+    </div>
+    <div class="payoutMessage">
+      <span>Catch all 3 mermaids for a special bonus!</span>
+    </div>
+    <div class="currentEarnings">Starting Credit: $1000</div>
+    <div class="totalBet">Current Bet: $0</div>
+    <div class="btnWrapper">
+      <button class="betUp bet">+10</button>
+      <button class="bet startBet">Bet 100</button>
+      <button class="betDown bet">-10</button>
+      <button class="maxBet bet">YOLO</button>
+    </div>
+    <div class="spin">
+      <button class="spinBtn">SPIN</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,144 @@
+/* 
+REEL ACTION
+1. create an array of icons
+2. randomize selection from array once for each reel
+3. Insert emoji into DOM
+4. Create CSS animation to imitate spinning reel
+
+BETTING
+1. Add event listeners to betting btns
+2. Have +/- buttons increment/decrement respectively
+3. Set max bet to 100
+4. Add event listener to spin btn, give condition if bet > 0
+5. Give player 1000 starting earnings
+6. Calculate earnings based on reel result
+    no match = lose bet, 2 match = return bet + 10, 3 match = double bet, 3 mermaids bonus = 5x bet
+7. disable bet and spin button if out of money and alert
+8. After all money lost, populate "Play again button" to reset the game
+*/
+
+const icons = ["🧜🏽‍♀️", "🦑", "🦭", "🐚", "🐬", "🐡", "🦈", "🦀"];
+
+const reel1 = document.getElementById("reel1");
+const reel2 = document.getElementById("reel2");
+const reel3 = document.getElementById("reel3");
+
+let betAmt = 0;
+let currentEarnings = 1000;
+const earnings = document.querySelector(".currentEarnings");
+const totalBet = document.querySelector(".totalBet");
+const add10 = document.querySelector(".betUp");
+const minus10 = document.querySelector(".betDown");
+const yolo = document.querySelector(".maxBet");
+const betBtn = document.querySelector(".startBet");
+const payMsg = document.querySelector(".payoutMessage");
+const reels = document.querySelector(".reels");
+
+add10.addEventListener("click", () => {
+  if (currentEarnings - betAmt - 10 < 0) {
+    alert("Slow down there, big spender! You ran out of sand dollars!");
+  } else {
+    setBet(10);
+  }
+});
+minus10.addEventListener("click", () => {
+  if (betAmt <= 0) {
+    alert("You can't bet less than zero!");
+  } else {
+    setBet(-10);
+  }
+});
+betBtn.addEventListener("click", () => {
+  if (currentEarnings - betAmt - 100 < 0) {
+    alert(
+      "Come back when ya got more sand dollars, old chum! (refresh to play again)"
+    );
+  } else {
+    setBet(100);
+  }
+});
+yolo.addEventListener("click", () => {
+  if (currentEarnings === 0) {
+    alert(
+      "Come back when ya got more sand dollars, old chum! (refresh to play again)"
+    );
+  }
+  setBet(currentEarnings - betAmt);
+});
+
+function randomIcon() {
+  return Math.floor(Math.random() * icons.length);
+}
+
+document.querySelector(".spinBtn").addEventListener("click", runGame);
+
+function runGame() {
+  const spins = spinReels();
+  const winnings = calcWinnings(spins);
+  console.log(winnings);
+  setEarnings(betAmt + winnings);
+  setBet(-betAmt);
+}
+
+function spinReels() {
+  if (betAmt === 0) {
+    alert("Place your bets before spinning!");
+  } else {
+    reel1.innerHTML = "";
+    reel2.innerHTML = "";
+    reel3.innerHTML = "";
+    const spins = [
+      icons[randomIcon()],
+      icons[randomIcon()],
+      icons[randomIcon()]
+    ];
+    setTimeout(function () {
+      reel1.innerHTML = spins[0];
+    }, 500);
+    setTimeout(function () {
+      reel2.innerHTML = spins[1];
+    }, 800);
+    setTimeout(function () {
+      reel3.innerHTML = spins[2];
+    }, 1100);
+    return spins;
+  }
+}
+
+function calcWinnings(spins) {
+  /* no match = lose bet, 2 match = return bet + 10, 3 match = double bet, 3 mermaids bonus = 5x bet*/
+
+  if (spins[0] === icons[0] && spins[1] === icons[0] && spins[2] === icons[0]) {
+    payMsg.innerHTML = `<span class="payoutMessage">Congratulations, you got the 5X mermaid bonus! $${
+      betAmt * 5
+    } awarded!</span>`;
+    return betAmt * 4;
+  } else if (spins[0] === spins[1] && spins[0] === spins[2]) {
+    payMsg.innerHTML = `<span class="payoutMessage">Congrats, you won a 2X bonus! $${
+      betAmt * 2
+    } awarded!</span>`;
+    return betAmt;
+  } else if (
+    spins[0] === spins[1] ||
+    spins[0] === spins[2] ||
+    spins[2] === spins[1]
+  ) {
+    payMsg.innerHTML = `<span class="payoutMessage">Not bad, you got the 1.2X bonus! $${Math.round(
+      betAmt * 1.2
+    )} awarded!</span>`;
+    return Math.round(betAmt * 0.2);
+  } else {
+    payMsg.innerHTML = `<span class="payoutMessage">Better luck next time!</span>`;
+    return -betAmt * 2;
+  }
+}
+
+function setEarnings(value) {
+  currentEarnings += value;
+  earnings.innerHTML = `Current Earnings: $${currentEarnings}`;
+}
+
+function setBet(value) {
+  betAmt += value;
+  totalBet.innerHTML = `Current Bet: $${betAmt}`;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,132 @@
+* {
+  box-sizing: border-box;
+  outline: 0;
+}
+
+body {
+  font-family: "Lobster", cursive;
+  margin: 0;
+  text-align: center;
+  background-color: #4cc3c7;
+  background-image: url("https://www.transparenttextures.com/patterns/silver-scales.png");
+  background-color: #4cc3c7;
+  background-image: url("https://www.transparenttextures.com/patterns/black-scales.png");
+}
+h1 {
+  font-size: clamp(1.8rem, 1.3333rem + 2.0741vw, 3.2rem);
+  width: 100%;
+  color: rgb(243, 223, 108);
+  text-shadow: 1px 2px 2px rgb(190, 53, 73);
+}
+
+.reelContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  width: 100%;
+  background-image: url("https://images.unsplash.com/photo-1586794793342-cae7afff0309?ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8b2NlYW4lMjBmaXNofGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
+  background-position: center bottom;
+  border: 2px solid gold;
+}
+
+.reel {
+  width: 20vw;
+  background-color: rgba(194, 212, 250, 0.646);
+  height: 18vw;
+  border: 4px solid rgb(121, 198, 243);
+  font-size: clamp(2.5rem, 1.3333rem + 7.4074vw, 8rem);
+  margin: 2rem 1rem;
+  padding: clamp(0.5rem, -0.1667rem + 2.963vw, 2.5rem);
+  /* padding: 2.5rem 1.5rem; */
+  border-radius: 50%;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 2px 3px 4px rgba(0, 0, 0, 0.541);
+}
+
+.btnWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spin {
+  display: block;
+  width: 100%;
+  margin: 0.5em;
+}
+
+.bet {
+  margin: 0.5em 1.3em;
+  padding: 0.5em 0.9em;
+  font-size: 1.2em;
+}
+
+button {
+  background-color: rgb(245, 227, 129);
+  color: rgb(214, 141, 152);
+  text-shadow: 1px 1px 2px rgb(138, 63, 74), 2px 2px 2px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgb(72, 162, 165);
+  border-radius: 25px;
+  font-family: "Sriracha", cursive;
+  box-shadow: 2px 2px 3px teal, 2px 2px 5px rgb(1, 75, 75);
+}
+
+.spinBtn {
+  padding: 0.7em 1.1em;
+  font-size: 2em;
+  border-radius: 50%;
+}
+
+/* .startBet,
+.maxBet {
+  font-size: 1.5rem;
+  width: 12vw;
+} */
+
+.fas {
+  margin: 0 0.5em;
+  color: rgb(201, 138, 147);
+  text-shadow: 2px 2px 3px teal, 2px 2px 5px rgb(1, 75, 75);
+}
+
+.currentEarnings,
+.totalBet {
+  font-size: 2rem;
+  color: white;
+  text-shadow: 2px 2px 3px teal, 2px 2px 5px rgb(1, 75, 75);
+}
+
+.payoutMessage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 0.3rem;
+  margin-bottom: 1.5rem;
+  font-family: inherit;
+  font-size: clamp(0.9rem, 0.6rem + 1.3333vw, 1.8rem);
+  color: rgb(201, 96, 111);
+  text-shadow: 1px 1px 2px teal, 2px 2px 3px rgb(1, 75, 75);
+  background-color: rgba(245, 227, 129, 0.7);
+  overflow: hidden;
+}
+
+.payoutMessage span {
+  /* scrolling text effects update with each spin */
+  animation: marquee 7s linear infinite;
+  padding-left: 40%;
+  display: inline-block;
+  font-family: "Sriracha", cursive;
+  text-transform: uppercase;
+  background-color: transparent;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate(50%, 0);
+  }
+
+  100% {
+    transform: translate(-100%, 0);
+  }
+}