ZebGirouard · October 7, 2015 01:00 · Oct 7, 2015
diff --git a/Simon Game.markdown b/Simon Game.markdown
@@ -0,0 +1,7 @@
+Simon Game
+----------
+
+
+A [Pen](http://codepen.io/ZebGirouard/pen/wKzvdQ) by [Timothy Zeb Girouard](http://codepen.io/ZebGirouard) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/ZebGirouard/pen/wKzvdQ/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<html>
+  <body>
+    <div class="container">
+      <div class = 'outer circle container'>
+        <div>
+          <button class='pushButton quarter-circle' id='green'></button>
+          <button class='pushButton quarter-circle' id='red'></button>
+          <button class='pushButton quarter-circle' id='yellow'></button>
+          <button class='pushButton quarter-circle' id='blue'></button>
+        </div>
+        <div class='inner circle container'>
+          <h2 class='text-center'>Simon&reg;</h2>
+          <button class='pushButton circle inner' id='start'>Start</button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,65 @@
+$(document).ready(function() {
+
+  //Define what the start button does
+  var initialize = function() {
+    var game = {
+      sequence: [],
+      colors: ['green', 'red', 'yellow', 'blue'],
+      player: 'computer'
+    };
+    console.log('Game initialized.');
+    return game;
+  };
+
+    //Define what clicking a color does
+  var waitForClick = function (color) {
+    console.log("Waiting for "+color);
+    var WinLose;
+    WinLose = setTimeout(loseGame(), 5000);
+    $( "#"+color ).click(function() {
+      console.log( "You clicked the right color!" );
+      WinLose= 'win';
+    });
+    $( "button" ).not( "#"+color ).click(function() {
+      console.log( "You clicked the wrong color!" );
+      WinLose= 'lose';      
+    });
+    return WinLose;
+  };
+  //Lose the game
+  var loseGame = function() {
+    console.log('You lost, buddy.');
+    return 'lost';
+  };
+  var takeComputerTurn = function(game) {
+    console.log("It's the computer's turn.");
+    var newColor = game.colors[Math.floor(Math.random()*4)]
+    console.log(newColor);
+    game.sequence.push(newColor);
+    console.log(game.sequence);
+    game.player = 'human';
+    playGame(game);
+  }
+
+  var takeHumanTurn = function(game) {
+    console.log("It's the human's turn.");
+    for (var i = 0; i < game.sequence.length; i++) {
+      if (waitForClick(game.sequence[i]) === 'lost') {
+        return;
+      }
+    }
+    game.player = 'computer';
+    playGame(game);
+  }
+  var playGame = function(game) {
+    if (game.player === 'computer') {
+      takeComputerTurn(game);
+    }
+    else {
+      takeHumanTurn(game);
+    }
+  };
+  //Initialize the game
+  playGame(initialize());
+
+});
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+body {
+  background-color: rgb(210,200,210);
+}
+
+h2 {
+  font-family: "Times New Roman", Georgia, Serif;
+  font-size: 350%;
+  font-weight: 900;
+}
+.circle {
+  border-radius: 50%;
+  padding: 33%;
+}
+
+.outer {
+  position: relative;
+  width: 75%;
+  height: 100%;
+  background: rgb(40,40,40);
+}
+
+.inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 50%;
+  transform: translate(-50%,-50%);
+  padding: 2rem;
+  background: rgb(200,210,200);
+}
+
+#green {
+  background: rgb(0,175,0);
+  left: 0;
+  top: 0;
+  -moz-border-radius: 50% 0 0 0;
+  border-radius: 50% 0 0 0;
+}
+
+#red {
+  background: rgb(175,0,0);
+  right: 0;
+  top: 0;
+  -moz-border-radius: 0 50% 0 0;
+  border-radius: 0 50% 0 0;
+}
+
+#yellow {
+  background: rgb(175,200,0);
+  left: 0;
+  bottom: 0;
+  -moz-border-radius: 0 0 0 50%;
+  border-radius: 0 0 0 50%;
+}
+
+#blue {
+  background: rgb(0,0,175);
+  right: 0;
+  bottom: 0;
+  -moz-border-radius: 0 0 50% 0;
+  border-radius: 0 0 50% 0;
+}
+
+.quarter-circle {
+    position: absolute;
+    height: 49%;
+    width: 49%;
+}
+
+#start {
+  top: 74%;
+  background: rgb(150,0,150);
+  color: rgb(200,200,200);
+  font-size: 150%;
+  font-weight: 900;
+}
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />