wdi-sg · matthewfrancisong · Sep 29, 2017 · Sep 30, 2017 · Oct 1, 2017 · Oct 1, 2017
diff --git a/1stdraft.html b/1stdraft.html
@@ -0,0 +1,38 @@
+
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" href="./assets/css/1stdraft.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="Game-Title">Snakes and Ladders</h1>
+        <div class="wrapper">
+          <div class='cell' data-value=0>1
+            <div class='player1'></div>
+            <div class='player2'></div>
+          </div>
+          <div class='cell'data-value=1>2</div>
+          <div class='cell'data-value=2>3</div>
+          <div class='cell'data-value=3>4</div>
+          <div class='cell'data-value=4>5</div>
+          <div class='cell'data-value=5>6</div>
+          <div class='cell'data-value=6>7</div>
+          <div class='cell'data-value=7>8</div>
+          <div class='cell'data-value=8>9</div>
+          <div class='cell'data-value=9>10</div>
+          <div class='cell'data-value=10>11</div>
+          <div class='cell'data-value=11>12</div>
+          <div class='cell'data-value=12>13</div>
+          <div class='cell'data-value=13>14</div>
+          <div class='cell'data-value=14>15</div>
+          <div class='cell'data-value=15>16</div>
+    </div>
+    <button class="dice" type="button">Button</button>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="./assets/js/1stdraft.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -1,7 +1,149 @@
-# Project Name (Start editing here)
-<!---
-Read Me Contents
--->
+# Snake & Ladder
+
+<img src="./assets/images/finalLook.png">
+
+Game Link: https://matthewfrancisong.github.io/project-1/
+
+## Table of Contents
+
+1. How to play
+2. Why Snakes & Ladders
+3. My 7 days plan
+4. Game Documentation
+5. References
+
+
+
+## How to Play
+
+Goal: Reach above and beyond square numbered 100 at the top-left hand corner of the board.
+
+Players begin at square number 1. Each player takes a turn to roll a dice and move them along the numbered squares. If a player lands on a square which has the base of a ladder, they will advance to the square that sits on the top of the ladder.
+
+Similarly, if a player lands on a square which has the head of a snake, it would drop to the tail of the snake.
+
+## Why Snakes & Ladders
+
+When I was young, I played a lot. Everything from board games, donkey cards to remote-controlled cars. I thought how wonderful would it be to design the game that I actually played then. It was meaningful.
+
+Some of the animated characters in this game brought me back to happy memories where I remembered slogging thousands of hours. It was all fun.  Wonderful memories to recollect and one day share with my family.
+
+
+## 7 days Plan
+
+
+#### 29th Sept
+##### Day 1: (Friday)
+
+1.  Flow-chart
+2.  Pseudo Codes
+
+<img src="./assets/images/flowchart.jpg">
+
+#### 30th Sept
+##### Day 2 & 3 (Weekend)
+
+1. Create 16 grid MVP (Minimal Viable Game)
+
+  * Logic to switch players
+  * Win-Game condition. Create 2 markers. if >16, win game
+  * Reset Function
+  * Snakes & Ladders Logic
+
+2. Make game functional
+
+<img src="./assets/images/mvp.png">
+
+#### 2nd Oct
+##### Day 4 (Monday)
+
+1. Create actual game. (100 Grid)
+
+Deliverables:
+1. Jquery 100 Grid
+  * Use JQuery to create 100 grids instead of using html.
+  * Use for-loop to give each individual grid an ID.
+  * Use modular function to alternate grid background color.
+  * Reverse rows so that board number flows bottoms-up in a zig-zag fashion.
+2. WhoWon() , Reset() , rollDice() Functions.
+
+
+Challenges:
+ * Refactoring html 16grid into Jquery nested loop function.
+ * Create a div instead of '<table'. Learnt that table has its own properties.
+
+#### 3rd Oct
+##### Day 5 (Tuesday)
+
+Deliverables:
+1. Refactoring Snakes & Ladder Logic
+2. Comparison analysis with other snakes and ladder board games to set difficuity.
+
+Challenges:
+* Choosing between creating an Array to house logic or a Switch statement
+* Reduce player 1 and player 2 codes as there were many repetitions.
+
+
+#### 4th Oct
+##### Day 6 (Wednesday)
+
+Deliverables: (CSS Styling)
+1. Find snakes, ladder, and button images.  
+2. Color & Style Snakes & Ladders
+3. Use Sprite to animate my characters
+4. Design Layout of landing page of divs
+
+
+#### 5th Oct
+##### Day 7 (Thursday )
+
+Deliverables: (CSS Styling)
+1. Cleaning up Codes
+2. Cleaning up UI of page.
+3. Inserted audio track
+4. Created auto-play & reset feature
+
+Challenges:
+1. Tried to use transition-duration to create delay in my character movement.
+2. Had to priortise on using the remaining time to touch up & style the layout.
+
+
+
+#### 6th Oct
+##### Day 8 (Friday)
+
+Presentation Day!
+
+
+## References
+1. Font taken from FGOnlyHope
+http://www.fontspace.com/kimberly-geswein/kg-onlyhope
+2. Zombie Lupid Sprite - Ripped by Boo
+3. Hog Sprite - Ripped by Mageker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 # ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
 
@@ -21,7 +163,7 @@ Everyone will get a chance to **be creative**, and work through some really **to
 Your app must:
 
 * **Render a game in the browser**
-* **Any number of players** will be okay, switch turns will be great 
+* **Any number of players** will be okay, switch turns will be great
 * **Design logic for winning** & **visually display which player won**
 * **Include separate HTML / CSS / JavaScript files**
 * Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles
@@ -67,7 +209,7 @@ Test your wits & knowledge with whatever-the-heck you know about (so you can act
 * **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_
 * **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_
 * **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_
-* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ 
+* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_
 * **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_
 
 ---

diff --git a/assets/audio/sexiness.mp3 b/assets/audio/sexiness.mp3
diff --git a/assets/css/1stdraft.css b/assets/css/1stdraft.css
@@ -0,0 +1,44 @@
+.container  {
+  border: 1px solid black;
+  width: 1200px;
+}
+
+.wrapper {
+  border: 1px solid black;
+  width: 1000px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.cell {
+  display: inline-block;
+  border: 1px solid black;
+  width:200px;
+  height: 200px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 200px;
+  font-size: 20px;
+  margin: 5px;
+}
+
+.player1 , .player2 {
+  border: 1px solid black;
+  width: 50px;
+  height:50px;
+  display: inline-block;
+}
+
+.dice {
+  height 40px;
+  width: 60px;
+  position: relative;
+}
+
+button {
+  bottom: 900px;
+}
+
+h1 {
+  text-align: center;
+}