kristoferjoseph/ro-sham-beaux.html

## ro-sham-beaux.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>👊✋✌️</title>
  <style>
    /* RESET */
    * {
      margin: 0;
      padding: 0;
    }
    /* Percent height starts from hmtl element */
    html,
    body {
      height: 100%;
    }
    /* This allows you to use my favorite San Francisco typeface in the browser ( on a mac that is ) */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-weight: bold;
      color: #222;
      letter-spacing: -4px;
    }
    /* Flexbox makes vertical & horizontal centering easy */
    #root {
      display: flex;
      align-items: center;
      justify-content: center;
      /* Fills the entire window with our game */
      width: 100%;
      height: 100%;
      /* Viewport relative units allow your font size to be responsive based off of the viewport width */
      font-size: 15vw;
      background: #EEE;
    }

    .btn {
      /* Normally buttons are display:inline so they can flow with content.
         We make it block so we can vertically position it */
      display: block;
      margin: 0 auto;
      padding: 1rem 3rem;
      background: #DDD;
      color: #333;
      border: 1px solid #AAA;
      border-bottom-width: 3px;
      border-radius: 2px;
      font-size: 2rem;
      /* Set the cursor to give the user another hint that this is an interactive element */
      cursor: pointer;
    }
    .btn:hover {
      background: #EEE;
    }
    .btn:active {
      /* Manipulating the border and margin give the illusion that an active button depressed */
      margin-top: 0.125rem;
      border-bottom-width: 1px;
      background: #DDD;
    }
  </style>
</head>
<body>
  <div id="root">
    <button
      class='btn'
    >
      Play
    </button>
  </div>
  <script>
    /* Self executing funtion to get things started */
    (function () {
      // Get a reference to the root element so we can add content to it
      var root = document.getElementById('root')
      // Make an array of ro sham beaux choices
      var choices = [
        '👊',
        '✋',
        '✌️'
      ]
      // Initialize the countup to zero
      var count = 0
      // Initialize whether the user is currently playing or not to false
      var playing = false

      // Called by our countup timer
      function increment () {
        // We count up to three before playing
        if (count < 3) {
          // Add one to the current count
          count = count + 1
          countUp()
        } else {
          play()
        }
      }

      function countUp () {
        // Play has begun so set the playing variable to true
        playing = true
        // This is an alternate conditional called a ternary operator. ternary meaning three parts.
        // Think of it like: Question? value if question response is true : value if question response is false
        // it says if count is falsey display GO! ( 0 is a falsey value in JavaScript )
        //  else display the count as it increments up to three
        root.innerHTML = count ? count : 'GO!'
        //  then call the increment function every 500 milliseconds
        setTimeout(increment, 500)
      }

      function play () {
        // Reset playing to false now that we are ending play
        playing = false
        // Display the choice in our root element
        root.innerHTML = choices[
          // Math floor rounds a decimal to a whole number
          //  we need this because the result from Math random multiplied by the choices array length will result in a decimal
          Math.floor(
            // This chooses a random choice from our ro sham beaux choices Array
            Math.random() * choices.length
          )
        ]
        setTimeout(reset, 1500)
      }

      function reset () {
        // This is a hack that refreshes the browser window so we can play again
        window.location = window.location
      }

      // Add a click handler to the root element
      root.onclick = function click (e) {
        // We check to see if we are already playing so that we don't start multiple timers
        !playing && countUp()
      }

    }())
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>👊✋✌️</title>
	<style>
	/* RESET */
	* {
	margin: 0;
	padding: 0;
	}
	/* Percent height starts from hmtl element */
	html,
	body {
	height: 100%;
	}
	/* This allows you to use my favorite San Francisco typeface in the browser ( on a mac that is ) */
	body {
	font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #222;
	letter-spacing: -4px;
	}
	/* Flexbox makes vertical & horizontal centering easy */
	#root {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fills the entire window with our game */
	width: 100%;
	height: 100%;
	/* Viewport relative units allow your font size to be responsive based off of the viewport width */
	font-size: 15vw;
	background: #EEE;
	}

	.btn {
	/* Normally buttons are display:inline so they can flow with content.
	We make it block so we can vertically position it */
	display: block;
	margin: 0 auto;
	padding: 1rem 3rem;
	background: #DDD;
	color: #333;
	border: 1px solid #AAA;
	border-bottom-width: 3px;
	border-radius: 2px;
	font-size: 2rem;
	/* Set the cursor to give the user another hint that this is an interactive element */
	cursor: pointer;
	}
	.btn:hover {
	background: #EEE;
	}
	.btn:active {
	/* Manipulating the border and margin give the illusion that an active button depressed */
	margin-top: 0.125rem;
	border-bottom-width: 1px;
	background: #DDD;
	}
	</style>
	</head>
	<body>
	<div id="root">
	<button
	class='btn'
	>
	Play
	</button>
	</div>
	<script>
	/* Self executing funtion to get things started */
	(function () {
	// Get a reference to the root element so we can add content to it
	var root = document.getElementById('root')
	// Make an array of ro sham beaux choices
	var choices = [
	'👊',
	'✋',
	'✌️'
	]
	// Initialize the countup to zero
	var count = 0
	// Initialize whether the user is currently playing or not to false
	var playing = false

	// Called by our countup timer
	function increment () {
	// We count up to three before playing
	if (count < 3) {
	// Add one to the current count
	count = count + 1
	countUp()
	} else {
	play()
	}
	}

	function countUp () {
	// Play has begun so set the playing variable to true
	playing = true
	// This is an alternate conditional called a ternary operator. ternary meaning three parts.
	// Think of it like: Question? value if question response is true : value if question response is false
	// it says if count is falsey display GO! ( 0 is a falsey value in JavaScript )
	// else display the count as it increments up to three
	root.innerHTML = count ? count : 'GO!'
	// then call the increment function every 500 milliseconds
	setTimeout(increment, 500)
	}

	function play () {
	// Reset playing to false now that we are ending play
	playing = false
	// Display the choice in our root element
	root.innerHTML = choices[
	// Math floor rounds a decimal to a whole number
	// we need this because the result from Math random multiplied by the choices array length will result in a decimal
	Math.floor(
	// This chooses a random choice from our ro sham beaux choices Array
	Math.random() * choices.length
	)
	]
	setTimeout(reset, 1500)
	}

	function reset () {
	// This is a hack that refreshes the browser window so we can play again
	window.location = window.location
	}

	// Add a click handler to the root element
	root.onclick = function click (e) {
	// We check to see if we are already playing so that we don't start multiple timers
	!playing && countUp()
	}

	}())
	</script>
	</body>
	</html>