Simon

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

README.md

@@ -2,6 +2,8 @@
 
 A collection of games to play in a web browser. See the full list of games in the [games.md](games.md) file.
 
+#### By: Aisha Ortiz
+
 ## Installation and Setup
 
 Clone the repo, install npm dependencies, and start the server:
@@ -22,3 +24,52 @@ Available on:
 ```
 
 Then open `http://localhost:4321/` in your browser of choice and play away!
+
+## Description
+
+Build simple graphical games for the browser.
+
+Fork the the browser-games repository and use the fork as your project artifact.
+
+Implement the games Tic-Tac-Toe and Simon from the list in the games.md file. As a stretch, implement the Connect Four game.
+
+You will be using FreeCodeCamp challenges as guides and tutorials for building these games.
+
+## Context
+
+This goal will challenge your ability to take a formal, defined system from the real world and replicate it in code. You will start with all of the logic of the system (the rules of the game) and most of the UI already designed.
+
+Your work will be mainly in deciding how to replicate that formal logic and user interface using JavaScript, HTML, and CSS.
+
+## Specifications
+
+### General
+
+ - [X] Artifact produced is a fork of the browser-games repo.
+ - [X] Variables, functions, files, etc. have appropriate and meaningful names.
+ - [X] HTML, CSS, and JS files are well formatted with proper spacing and indentation.
+ - [X] All major features are added via pull requests with a clear description and concise commit messages.
+ - [X] Every pull request has been reviewed by at least one other person.
+ - [X] The artifact produced is properly licensed, preferably with the MIT license.
+
+### Tic-Tac-Toe
+
+ - [X] Tic-Tac-Toe game can be found at public/ticTacToe.html
+ - [X] Tic-Tac-Toe game is playable by two people
+ - [X] Tic-Tac-Toe game page is linked from public/index.html
+
+### Simon
+
+ - [X] Simon game can be found at public/simon.html
+ - [ ] Simon game is playable
+ - [X] Simon game page is linked from public/index.html
+
+### Stretch
+
+ - [ ] Tic-Tac-Toe has a player-vs-computer version
+ - [ ] Tic-Tac-Toe AI will always win or tie
+ - [ ] Simon plays sounds
+ - [ ] Implement Connect Four game
+ - [ ] Connect Four game can be found at public/connectFour.html
+ - [ ] Connect Four game is playable by two people (human v human)
+ - [ ] Connect Four game page is linked from public/index.html

dist/js/ticTacToe.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var startGame = function startGame() {
+    document.turn = "X";
+};
+
+var nextMove = function nextMove(Square) {
+    square.innerText = document.turn;
+    switchTurn();
+};
+
+var switchTurn = function switchTurn() {
+    if (document.turn == "X") {
+        document.turn = "0";
+    } else {
+        document.turn = "X";
+    }
+};

dist/ticTacToe.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var startGame = function startGame() {
+    document.turn = "X";
+};
+
+var nextMove = function nextMove(Square) {
+    square.innerText = document.turn;
+    switchTurn();
+};
+
+var switchTurn = function switchTurn() {
+    if (document.turn == "X") {
+        document.turn = "0";
+    } else {
+        document.turn = "X";
+    }
+};

package.json

@@ -3,7 +3,9 @@
   "version": "0.0.0",
   "description": "A collection of games to play in a web browser.",
   "scripts": {
-    "start": "http-server ./public -p 4321"
+      "build": "babel --copy-files src --out-dir dist",
+      "build:watch": "npm run build -- --watch",
+      "start": "http-server ./public -p 4321"
   },
   "repository": {
     "type": "git",
@@ -20,6 +22,10 @@
   },
   "homepage": "https://github.com/GuildCrafts/browser-games#readme",
   "dependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-env": "^2.4.1",
+    "babel-preset-es2015": "^6.24.1",
     "http-server": "^0.9.0"
   }
 }

public/index.html

@@ -13,8 +13,8 @@ <h1>Browser Games</h1>
 
     <nav>
       <ul>
-        <li><a>LINK TO FIRST GAME</a></li>
-        <li><a>LINK TO SECOND GAME</a></li>
+        <li><a>file:///Users/Aisha/Desktop/LG-%20Projects/browser-games/public/ticTacToe.html</a></li>
+        <li><a>file:///Users/Aisha/Desktop/LG-%20Projects/browser-games/public/simon.html</a></li>
         <li>...</li>
       </ul>
     </nav>

public/js/simon.js

@@ -0,0 +1,87 @@
+class Game = () => {
+    constructor() {
+        this.welcome = []
+        this.audio = {}
+        this.lightUp = 'colors'
+        this.gameVoice = ''
+    }
+
+        startGame() => {
+
+        }
+
+        audio() => {
+        <a href="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></a>
+        <a href="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></a>
+        <a href="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></a>
+        <a href="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></a>
+        }
+
+        lightUp() => {
+
+        }
+
+        gameVoice(msg) => {
+            setMessage('').innerText = msg
+        }
+}
+
+class Simon = () => {
+    constructor() {
+        this.turn = []
+        this.audio =
+        this.click = ['colors']
+        this.gameVoice = ''
+    }
+
+        simonTurn() => {
+            //have our array of colors we're picking from
+            let colors = ['green', 'red', 'yellow', 'blue']
+            //randomly pick from array
+            for(let i = 1; i <= colors.length; i++) {
+
+            }
+        }
+        //call a function that displays simon's choice
+        simonChoice() => {
+
+        }
+        //record simon's choice, prob by pushing into empty array
+
+        }
+
+        simonAudio() => {
+
+        }
+
+        simonClick() => {
+
+        }
+    }
+
+    class Player = () => {
+        constructor() {
+            this.turn = []
+            this.audio =
+            this.color = 'pickColors'
+            this.gameVoice = ''
+        }
+
+        playerTurn() => {
+            //array that records player click
+            //check match (compare simon and player clicks)
+            for(let i = 1; i <= 4; i++) {
+                if(pickColor >= 4) {
+                    turn.push([1])
+                }
+            }
+        }
+
+        playerAudio() => {
+
+        }
+
+        playerClick() => {
+
+        }
+}

public/js/ticTacToe.js

@@ -0,0 +1,69 @@
+const startGame = () => {
+    for(let i = 1; i <= 9; i++) {
+        clearBox(i)
+    }
+
+    document.turn = 'X'
+    document.winner = null
+    setMessage(document.turn + ' ready, set, GO!')
+}
+
+const setMessage = (msg) => {
+    document.getElementById('message').innerText = (msg)
+}
+
+const nextMove = (square) => {
+    if(document.winner != null) {
+        setMessage(document.turn + ', you already won foo!')
+    } else if(square.innerText == '') {
+       square.innerText = document.turn
+       switchTurn()
+    }  else {
+         setMessage('Um, you see me here already! Pick another square foo.')
+       }
+}
+
+const switchTurn = () => {
+    if(checkForWinner(document.turn)) {
+        setMessage('Winner Winner Chicken Dinner! Congrats ' + document.turn)
+        document.winner = document.turn
+    } else if(document.turn == 'X') {
+        document.turn = '0'
+        setMessage("It\'s " + document.turn + "'s turn.")
+
+    } else {
+        document.turn = 'X'
+        setMessage("It\'s " + document.turn + "'s turn.")
+      }
+}
+
+const checkForWinner = (move) => {
+    let result = false
+    if(checkRow(1, 2, 3, move) ||
+       checkRow(4, 5, 6, move) ||
+       checkRow(7, 8, 9, move) ||
+       checkRow(1, 4, 7, move) ||
+       checkRow(2, 5, 8, move) ||
+       checkRow(3, 6, 9, move) ||
+       checkRow(1, 5, 9, move) ||
+       checkRow(3, 5, 7, move)) {
+        result = true
+    }
+    return result
+}
+
+const checkRow = (a, b, c, move) => {
+    let result = false
+    if(getBox(a) == move && getBox(b) == move && getBox(c) == move) {
+        result = true
+    }
+    return result
+}
+
+const getBox = (number) => {
+    return document.getElementById('s' + number).innerText
+}
+
+const clearBox = (number) => {
+    document.getElementById('s' + number).innerText = ''
+}

public/simon.html

@@ -0,0 +1,101 @@
+<html>
+    <head>
+        <meta charset='utf-8'>
+        <title>Simon</title>
+
+        <style>
+
+        @import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Raleway|Roboto+Mono');
+
+            body {
+                width: 550px;
+                margin: auto;
+                background: #transparent
+            }
+
+            h1 {
+                color: black;
+                width: 470px;
+                text-align: center;
+                font-family: 'Roboto Mono', monospace;
+            }
+
+            #gameVoice {
+                color: black;
+                font-size: 20px;
+                font-family: 'Josefin Sans', sans-serif;
+            }
+
+            #restart {
+                font-size: 20px;
+                position: inherit;
+                font-weight: bold;
+                text-decoration: none;
+                color: black;
+                font-family: 'Josefin Sans', sans-serif;
+            }
+
+            .Zone {
+                height: 265px;
+                width: 280px;
+                font-size: 80px;
+                border-radius: 15px 50px 30px;
+                text-align: center;
+                font-family: 'Roboto Mono', monospace;
+            }
+
+            #button1 {
+                background-color: green;
+                position: relative;
+                overflow: hidden;
+                border-radius: 250px 5px 5px 5px;
+                border: 30px solid #111;
+                box-shadow: 10px 10px 35px #111111;
+            }
+
+            #button2 {
+                background-color: red;
+                position: relative;
+                overflow: hidden;
+                border-radius: 5px 250px 5px 5px;
+                border: 30px solid #111;
+                box-shadow: 10px 10px 35px #111111;
+            }
+
+            #button3 {
+                background-color: yellow;
+                position:relative;
+                overflow:hidden;
+                border-radius: 5px 5px 5px 250px;
+                border: 30px solid #111;
+                box-shadow: 10px 10px 35px #111111;
+            }
+
+            #button4 {
+                background-color: blue;
+                position:relative;
+                overflow:hidden;
+                border-radius: 5px 5px 250px 5px;
+                border: 30px solid #111;
+                box-shadow: 10px 10px 35px #111111;
+                hover:
+            }
+        </style>
+    </head>
+    <body onload='startGame()'>
+        <h1>Simon</h1>
+            <div id='gameVoice'>Welcome message</div>
+                <table border='0'>
+                    <tr>
+        				<td class='Zone' id='button1' onclick='pickColor(this)'></td>
+        				<td class='Zone' id='button2' onclick='pickColor(this)'></td>
+        			</tr>
+                    <tr>
+                        <td class='Zone' id='button3' onclick='pickColor(this)'></td>
+                        <td class='Zone' id='button4' onclick='pickColor(this)'></td>
+                    </tr>
+                </table>
+                <a href='Javascript: startGame()' id='restart'>Play Again!</a>
+        <script src='./js/simon.js'></script>
+    </body>
+</html>