ninjacarr/twister.html

## twister.html
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
      }
      #main {
        width: 100%;
        height: 100%;

        position: relative;
      }
      #text {
        text-align: center;
        font-family: verdana;
        font-weight: bold;
        font-size: 40px;
        position: absolute;
        top: 50%;
        width: 100%;
        height: 100px;
        margin-top: -50px;
      }
      .red {
        background-color: red;
      }
      .blue {
        background-color: blue;
      }
      .green {
        background-color: green;
      }
      .yellow {
        background-color: yellow;
      }
    </style>

    <script type="text/javascript">
      // Milliseconds since last input before accepting a new one
      var diff = 2000;
      // Keyword to spin
      var keyword = "spin";

      document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("text").innerHTML =
          "Say " + keyword.toUpperCase() + "!";
      });

      var last = new Date();
      var bodyparts = ["RIGHT HAND", "LEFT HAND", "RIGHT FOOT", "LEFT FOOT"];
      var colors = ["blue", "red", "green", "yellow"];

      function spin() {
        var bodypart = bodyparts[Math.floor(Math.random() * 4)];
        var color = colors[Math.floor(Math.random() * 4)];
        document.getElementById("main").className = color;
        document.getElementById("text").innerHTML = bodypart;
        speechSynthesis.speak(
          new SpeechSynthesisUtterance(bodypart + ", " + color)
        );
      }
      var recognition = new webkitSpeechRecognition();

      recognition.continuous = true;
      recognition.interimResults = true;
      recognition.onresult = function(event) {
        if (event.results) {
          Object.values(event.results).forEach(res => {
            console.log();
            var alternative = res["0"];
            if (
              alternative &&
              alternative.confidence &&
              alternative.confidence >= 0.9 &&
              alternative.transcript &&
              alternative.transcript.trim() == keyword
            ) {
              var now = new Date();
              if (now.getTime() - last.getTime() > diff) {
                last = now;
                spin();
              }
            }
          });
        }
      };
      recognition.start();
    </script>
  </head>
  <body>
    <div id="main"><div id="text"></div></div>
  </body>
</html>
	<html>
	<head>
	<style type="text/css">
	body {
	margin: 0px;
	}
	#main {
	width: 100%;
	height: 100%;

	position: relative;
	}
	#text {
	text-align: center;
	font-family: verdana;
	font-weight: bold;
	font-size: 40px;
	position: absolute;
	top: 50%;
	width: 100%;
	height: 100px;
	margin-top: -50px;
	}
	.red {
	background-color: red;
	}
	.blue {
	background-color: blue;
	}
	.green {
	background-color: green;
	}
	.yellow {
	background-color: yellow;
	}
	</style>

	<script type="text/javascript">
	// Milliseconds since last input before accepting a new one
	var diff = 2000;
	// Keyword to spin
	var keyword = "spin";

	document.addEventListener("DOMContentLoaded", function() {
	document.getElementById("text").innerHTML =
	"Say " + keyword.toUpperCase() + "!";
	});

	var last = new Date();
	var bodyparts = ["RIGHT HAND", "LEFT HAND", "RIGHT FOOT", "LEFT FOOT"];
	var colors = ["blue", "red", "green", "yellow"];

	function spin() {
	var bodypart = bodyparts[Math.floor(Math.random() * 4)];
	var color = colors[Math.floor(Math.random() * 4)];
	document.getElementById("main").className = color;
	document.getElementById("text").innerHTML = bodypart;
	speechSynthesis.speak(
	new SpeechSynthesisUtterance(bodypart + ", " + color)
	);
	}
	var recognition = new webkitSpeechRecognition();

	recognition.continuous = true;
	recognition.interimResults = true;
	recognition.onresult = function(event) {
	if (event.results) {
	Object.values(event.results).forEach(res => {
	console.log();
	var alternative = res["0"];
	if (
	alternative &&
	alternative.confidence &&
	alternative.confidence >= 0.9 &&
	alternative.transcript &&
	alternative.transcript.trim() == keyword
	) {
	var now = new Date();
	if (now.getTime() - last.getTime() > diff) {
	last = now;
	spin();
	}
	}
	});
	}
	};
	recognition.start();
	</script>
	</head>
	<body>
	<div id="main"><div id="text"></div></div>
	</body>
	</html>