Update readme

README.md

@@ -1,96 +1,156 @@
-# Project Name (Start editing here)
+#Project#1:  Sweet Tooth
 <!---
 Read Me Contents
 -->
+* https://siya-ng.github.io/project-1/
+
+# ![](/assets/css/img/whiteteeth.png)
+
 
-# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
 
 ### Overview
 
-Let's start out with something fun - **a game!**
+Sweetly is a **Sweet Tooth** from the tooth kingdom. After a long duration of lack of sweets due to working, she found her health deteriorate that she has turned yellow. Help Sweetly regain her health and become stronger by feeding her more sweets.
+
+![](/assets/img/sweettoothcharacter.png)
 
-Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build.
+Swap sweets to make a match of three or more to feed her. Beware as she has only 100 seconds break time to eat.
 
-**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got!
+![](/assets/img/gameplay.png)
 
 
+Different types of sweets available for Sweetly: rainbow cake, vanilla cupcake, ice cream, chocolate cake and strawberry parfait.
+
+![](/assets/img/sweetstypetwo.png)
+
 ---
 
-### Technical Requirements
+### Flow Chart
 
-Your app must:
+![](/assets/img/flowchart.jpg)
 
-* **Render a game in the browser**
-* **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
-* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory
-* **Deploy your game online**, where the rest of the world can access it
-* Use **semantic markup** for HTML and CSS (adhere to best practices)
-* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please
+* Once the game is started, the **countdown timer** will run. The game will end when the timer reach zero.
+* After the timer is set, the grid is set.  
 
+* Check for match of three or more. Add points if yes and remove elements. Push the elements down to fill the empty space.
+* Let player moves the element if there is no match of three or more.
+* Check for match of three or more after the player moves.
+* End the game when timer is up.
 ---
 
-### Necessary Deliverables
+### The Grid : Using 2d Array for this game
 
-* A **working game, built by you**, hosted somewhere on the internet
-* A **link to your hosted working game** in the URL section of your GitHub repo
-* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project
-* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.
+#### Setting the grid
+* As it is 2d array, the game require 2 for loop to create the individual elements for the grid.
 
----
+#### Checking the grid
+* The game uses 2 for loop to check through the rows and another 2 for loop to check through the column.
+* When checking, the game push the id of elements with the match of three or more to an array, this is so that it can be remove later on.
+* The removal and calculation of score will be at another function.
 
-### Suggested Ways to Get Started
+### Checking available moves
+* checking through this few possible move.
+If value in the red box match, check if the value at the blue cross is same as the value in red box. For each combination, the game run 2 for loop to check.
 
-* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
-* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems
-* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_.
-* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version.
-* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
-* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.
+![](/assets/css/img/combi1.png)
+![](/assets/css/img/combi2.png)
 
 ---
 
-### Potential Project Ideas
 
-##### Blackjack
-Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next!
+### Key issues (before start coding)
+
+* **Setting the grid** There is a need to randomize the elements(sweets) that is insert into the grid.
+
+* **Checking matching system** How do I check if there is match of three?
+Suggestion: to check all the possible "winning" condition.
+
+* **Removing elements(sweets)** After there is match of three, the system should remove the matching set from the grid.
+Suggestion: To set the value to be = null.
+
+* **Push the elements**
+If there is empty space below, elements(sweets) should be moved down to fill the empty space.
+Suggestion: To check if the current box value is null, if yes, make it equal to the value of box above. (shift down one by one.)
+
+* **Adding elements at the top when it is empty**
+Need to create a function that will generate random elements(sweets)
 
-##### Self-scoring Trivia
-Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are!
+* **Check if there is available moves** If no, reset the grid.
+**Suggestion**: to search more online.
+
+* **Let players move** Check whether the two elements that the player click is adjacent.(1st selection should be next to 2nd selection)
+
+* **Changing the elements position**
+**To Test:**
+Whether [a,b] =[b,a] method works?
+Using temporary var to store one of the values.
+```
+var temp = a
+a = b
+b = temp
+```
+
+* **Linking box values with the visual.**
+Suggestion: to use addClass function.
+**To Test**
+```
+Var boxValue = array[i][j]
+array[i][j].addClass(`${boxValue}`)
+```
+If boxValue is string values (e.g "strawberry"), will it add class of strawberry to the box?
 
 ---
+### Key points (after coding)
 
-### Useful Resources
+* **Removing elements(sweets)** Let the elements value be equal to undefined. Undefined is chosen as during the push down function, if there is no value for the function to push down, it will generate undefined in the array.
 
-* **[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 a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_
+* **Linking box values with the visual.**
+Using the addClass method. Tried using string value ie('strawberry') but it affect the undefined value in some of the function. (undefined become "undefined" instead)
 
 ---
+### Versions
+
+version 0.2.0:(1/10/2017) added necessary function:
+* Generate the different elements.
+* Checking the grid for match, increase score for match, delete the 3 or more matching elements and push those elements above down, add new elements to the top.
+* visual: Able to differentiate between different types of elements. Able to see the total score.
+
+version 0.4.0:(2/10/2017) added:
+* one more type of elements: cream color.
+* the swapping element function.
+* able to remove match of 5
+* added delay to most of the function to aid player to view what is going on
 
-### Project Feedback + Evaluation
+version 0.6.0:(3/10/2017) added:
+* check available move function
+* reset grid function. (with remove class and add class 'Box' function)
 
-* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)?
+version 0.8.0:(4/10/2017) added:
+* working timer, grid is removed when timer reach zero.
+* better visual design
+* check when after swapping the elements if there is no match, it should change back.
+* able to change character image based on score
+* increase grid to 5x5
 
-* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?
+version 0.9.0: (5/10/2017) added:
+* end game screen
+* check through the code and removing all the comments etc.
+
+Current timing:
+switching elements to checkGrid (250) to finaliseRemoveList to removeElements (300) to pushDown(200) to generateElements (250) to checkGrid(250)
+
+full cycle 1250
+
+
+---
 
-* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)?
+### Potential Improvement
 
-* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?
+* Use Javascript to build the box(the grid) instead of coding into the html. Allow for the game to be scalable. Instead of having 5x5 grid, it can be 6x6 grid or 6x4 grid.
 
-* __Deployment__: Did you deploy your application to a public url using GitHub Pages?
+* Consider using 1d array.
 
-* __Total__: Your instructors will give you a total score on your project between:
+* Adding sound effect to the game.
 
-    Score | Expectations
-    ----- | ------------
-    **0** | _Incomplete._
-    **1** | _Does not meet expectations._
-    **2** | _Meets expectations, good job!_
-    **3** | _Exceeds expectations, you wonderful creature, you!_
 
- This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project!
+* Improve the animation or effect of the game.

assets/css/style.css

@@ -0,0 +1,172 @@
+
+h2, h3 {
+  font-family: 'Sunshiney', cursive;
+}
+h2{
+  font-size: 45px;
+  color: #7cb2cc;
+  text-shadow: -1px 0 #FDFDFD, 0 1px #FDFDFD, 1px 0 #FDFDFD, 0 -1px #FDFDFD;
+}
+h3{
+  font-size: 40px;
+  color: #FDFDFD;
+  text-shadow: -1px 0 #7cb2cc, 0 1px #7cb2cc, 1px 0 #7cb2cc, 0 -1px #7cb2cc;
+}
+
+body{
+  width: 90%;
+  background-image: url('../img/grey-polka-dot.jpg');
+  background-size:contain;
+  background-repeat: repeat;
+  align-content: center;
+  margin: 0 auto;
+}
+header{
+  width: inherit;
+  height: 110px;
+  font-family: 'Oleo Script Swash Caps', cursive;
+  font-size: 80px;
+  text-shadow: -3px 0 pink, 0 3px pink, 3px 0 pink, 0 -3px pink;
+  font-weight: bold;
+  vertical-align: middle;
+  color:#FDFDFD;
+  padding-top: 10px;
+}
+.container{
+  text-align: center;
+  display: block;
+  width: 930px;
+  height: 760px;
+  margin: 0 auto;
+
+}
+.left{
+  text-align: center;
+  display: inline-block;
+  float: left;
+
+}
+.gridbox{
+  display: inline-block;
+  background-color: rgba(255,255,255,0.3);
+  border: 3px solid #5E6A7A;
+  border-radius: 20px;
+
+}
+
+.characterFinal{
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.right{
+  width:280px;
+  height: 760px;
+  display: inline-block;
+  float:left;
+  text-align: center;
+}
+.scoreTotal{
+  width:200px;
+  height: 60px;
+  background-color: #5E6A7A;
+  vertical-align: middle;
+  color:white;
+  font-size: 35px;
+  line-height: 60px;
+  display: inline-block;
+  border-radius: 25px;
+}
+.timer{
+  width:200px;
+  height: 70px;
+  background-color: #5E6A7A;
+  vertical-align: middle;
+  color:white;
+  font-size: 40px;
+  line-height: 70px;
+  display: inline-block;
+  border-radius: 25px;
+}
+.noMove{
+  text-align:center;
+  color: black;
+  vertical-align: middle;
+}
+.noMoveText {
+  color: black;
+  font-size: 45px;
+}
+button{
+  width: 130px;
+  height: 50px;
+  border-radius: 20px;
+  display: inline-block;
+  font-size: 22px;
+  background-color: #AECFDF;
+  color: white;
+}
+
+.box{
+  width: 90px;
+  height: 90px;
+  display: inline-block;
+  margin: 1px;
+  box-sizing: border-box;
+}
+/* below class related to element*/
+.instruction{
+  margin-top: 140px;
+  float:left;
+  width:50px;
+  display: none;
+}
+.instructionBtn{
+  margin-top:20px;
+  width:35px;
+  height:35px;
+  float:left;
+}
+.character{
+  background-size: contain;
+  background-repeat: no-repeat;
+  transition: ease-in
+  width:inherit;
+  height:250px;
+
+}
+.noMove{
+  position:absolute;
+  top: 270px;
+  left: 450px;
+
+}
+
+.c1{
+  background: url("../img/ice-cream.png");
+  background-size: cover;
+}
+
+.c2 {
+  background: url('../img/chocolatecake.png');
+  background-size: contain;
+}
+
+.c3 {
+  background: url("../img/greencupcake.png");
+  background-size: contain;
+}
+
+.c4{
+  background: url("../img/rainbowcake.png");
+  background-size: contain;
+}
+
+.c5{
+  background: url("../img/strawberryparfait.png");
+  background-size: cover;
+}
+.c6{
+  background: url("../img/redvelvet.png");
+  background-size: cover;
+}