Slot Machine Test

Emoji One Arm Bandit

by trentHarlem

HTML

<div class="bandit-wrapper">
  <!-- html for the slot machine -->
  <div class="bandit">
    <h1>TOTAL SLOT</h1>
    <div class="slots-wrapper">
      <div class="slots">
        <div class="bandit__slot">
          <div id="slot_one" class="reel"></div>
        </div>
        <div class="bandit__slot">
          <div id="slot_two" class="reel"></div>
        </div>
        <div class="bandit__slot">
          <div id="slot_three" class="reel"></div>
        </div>
      </div>
    </div>
    <!-- controls -->
    <div class="controls">
      <div class="betting">
        <label for="bet">Bet Amount</label>
        <!-- display the current bet amount -->
        <input type="text" class="betting__input" id="bet" readonly value="$ =>">
        <!-- control the bet amount ( incr / decr ) with up and down arrows -->
        <div class="betting__controls">
          <!-- up/down arrow controls -->
          <!-- these buttons light up when -->
          <button class="betting__arrow betting__controls__up">Λ„</button>
          <button class="betting__arrow betting__controls__down">Λ…</button>

        </div>
        <button class="controls__button">Spin</button>

      </div>
      <!-- end of the slot machine -->
    </div> <!-- end of the bandit wrapper -->

CSS

/* slot machine font */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

* {
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

h1 {
  border: 2px solid #131313;
  border-radius: 5px;
  font: 600 3em 'Orbitron', monospace;
  color: #fff;
  padding: 8px;
  text-align: center;
}

h1 {
  text-shadow: 3px 3px 5px #000;
}


.bandit-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f5f5f5;
  min-width: 390px;
}

.bandit {
  display: flex;
  align-items: center;
  border: 5px solid #000;
  padding: 20px;

  border-radius: 10px;
  background: #ffb520;
  box-shadow: 0 0 10px 5px #000;
  flex-direction: column;

}

.slots-wrapper {
  display: flex;
  margin: 15px;
  border-radius: 10px;
  border: 3px solid rgb(86, 0, 0);
  background-color: #664400;

}

.slots {
  box-shadow: 0 0 90px 0 rgba(86, 0, 0, 0.498);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 9px 29px;
  border-radius: 10px;
  border: 3px solid rgb(86, 0, 0);
  background-color: #885a00;
}

.bandit__slot {
  /* inset */
  box-shadow: inset 0 0 15px 1px #000;
  width: 100px;
  height: 120px;
  margin: 10px 4px;
  background-color: whitesmoke;

  border: 5px solid #480000;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: bold 50px/1.8 Helvetica, Verdana, sans-serif;
  overflow: hidden;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 6px;
}

.betting {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.betting__input {
  width: 100px;
  height: 40px;
  margin: 0px 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  border: 5px solid #000;
  border-radius: 10px;
}

.betting__controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
 ...

JavaScript

// initializing the bandit
const bandit = document.querySelector('.bandit')
// initializing the slots
const slots = document.querySelectorAll('.bandit__slot')

const slot_one = document.querySelector('#slot_one')
const slot_two = document.querySelector('#slot_two')
const slot_three = document.querySelector('#slot_three')

// initializing the images to be displayed in the slots
const reel_one = ['πŸ‹', 'πŸ•', 'πŸ’', '😈', 'πŸ•', 'πŸ•', 'πŸ’', 'πŸ‹', '🎱']
const reel_two = ['πŸ‹', 'πŸ’', 'πŸ•', '😈', '🎱', 'πŸ’', 'πŸ•', 'πŸ’', '😈']
const reel_three = ['πŸ•', '😈', 'πŸ’', 'πŸ‹', 'πŸ’', 'πŸ•', '🎱', 'πŸ‹', 'πŸ‹']

const spin = document.querySelector('.controls__button')
const progress = []
let count = 0
let wins = progress.filter(outcome => outcome === 'WIN')


// spin the slot machine
spin.addEventListener('click', () => {
  let spin_one = Math.floor(Math.random() * reel_one.length)
  let spin_two = Math.floor(Math.random() * reel_two.length)
  let spin_three = Math.floor(Math.random() * reel_three.length)

  // in each slot, display random array values in the slot machine every 200ms for 2 seconds. then display the final result

  const spin_start = setTimeout(() => {
    clearInterval(spin_interval)
    let outcome = ''
    // result
    slot_one.innerHTML = reel_one[spin_one]
    slot_two.innerHTML = reel_two[spin_two]
    slot_three.innerHTML = reel_three[spin_three]

    // check for win
    if (reel_one[spin_one] === reel_two[spin_two] && reel_two[spin_two] === reel_three[spin_three]) {
      outcome = 'WIN'
    } else {
      outcome = 'LOSS'
    }
    progress.push(outcome)
    console.log('ODDS:', progress.filter(outcome => outcome === 'WIN').length / progress.length * 100 + '%');

    return progress
  }, 2400)

  const spin_interval = setInterval(() => {
    slot_one.innerHTML = reel_one[Math.floor(Math.random() * reel_one.length)]
    slot_two.innerHTML = reel_two[Math.floor(Math.random() * reel_two.length)]
    slot_three.innerHTML = reel_three[Math.floor(Math.random() * reel_three.length)]
  },...