Skip to content

Instantly share code, notes, and snippets.

@MichaelEWalker87
Last active August 4, 2020 14:43
Show Gist options
  • Save MichaelEWalker87/4e600284b3b3965c3e019bf69828dd2c to your computer and use it in GitHub Desktop.
Save MichaelEWalker87/4e600284b3b3965c3e019bf69828dd2c to your computer and use it in GitHub Desktop.
Tic-tac-toe

project board for Tic-Tac-Toe

By Michael Walker

link to the project will be found sent directly to Hanan

Self DTR

learning goals

To get full practice on doing a solo project To grow a deeper grasp on the local storage
Learn how to put emoji icons in js Learn to use a timeout to restart the game Continue to learn about crafting DRY code

personal strengths

Imaginative- Inspirational, Standout, Self-Confident, lover of wisdom & knowledge

Success path

Seek out mentor code reviews. - I just set up 2 code reviews with mentor on jun2 and jun3 Set a timer for productive struggles. Reflect at the start of each day what needs to get done Make branches when switching ideas

Resource that will be used

Tuple slack zoom for talking over issues MDN files CSS Tricks Mentor Peers only for concept ideas

Project success

Will be based on if I can obtain a 3 across the board and possibly a 4 when possible Speak to each line of code

How to celebrate my wins

By dancing with loud music And maybe peer celebrations

The outline of the project

CSS work

  • I noticed during my first day when I was having just a small amout of down time that was a perfect time to play park I some CSS ideas

Iteration zero

Plan to write the HTML to match the example in the youtube video provided I anticipate that this will include the following

Making a desktop view of the project only Make a head and body tag Breaking the HTML into section left, right, top middle, middle bottom (starting point) Checking placement with the original Split the tic-tac-toe input sections

Iteration one

Create a player class The player must include the following Constructor- properties include: id (ex: ‘one’), token (ex: ‘🧙’), wins(ex: [ ]) saveWinsToStorage retrievWinsFromStorage

Iteration two

Create a Game class Should instantiate 2 players A way to keep track of the data for the game board A way to keep track of which player’s turn it currently is A way to check the Game’s board data for win conditions A way to detect when a game is a draw (no one has won) A way to save a winning Game’s board data to the correct player’s wins array A way to reset the Game’s board to begin a new game

Build the data model This will be both in iteration 2 This step will focus on updating the data model The local storage And prepping for transfer to the dom

Iteration three

Central board game on the Dom This includes connecting the game.js
Connecting the play.js

The data model in the dom
Making sure that the info from that data model gets transferred over This includes wins tracking

The data model in the dom
Making sure that the info from that data model gets transferred over This includes wins tracking Display wins This will display the information from the data model and local storage On the left side, it will display the wins for player one On the right side, it will show the wins for player 2

Display wins This will display the information from the data model and local storage On the left side, it will display the wins for player one On the right side, it will show the wins for player 2

Display winner timeout
This will set a time out before resetting the game board for the players The time out will be automatic either on a win or a draw

Iteration four

Local storage
Making sure on refresh that the win totals say in the respective columns (note might move this up)

Iteration five

  • extra flare

wireframe

wireframe without sections

wireframe with sections

  • goals for july 31

    • I would like to get all my classes built and start working on the js funtionality
    • math wise I think I could make logic for spots 1-9
    • I know the wining combos are [1,2,3] [4,5,6] [7,8,9] [1,4,7] [2,5,8] [3,6,9] [3,5,7] [1,5,9]
    • so if any of the values === one of thethose the person should win. if no valuesequal those then it is a draw if all values are used
  • personal pseudocode july 31- //so a way to track spots 1-9 where // they all start off as a empty " " // the innerText should be able to update showing the player token // the spot should only be able to have one token assigned while the board spots are not complete //if open spot then game is still in play //if the spot has a token then the token can not be replaced

    //turn order // if token ===

    //assignToken wants assign the vale entered to to that array // can not be reassined while empty

    • end of day product Game start in terminal
  • goals for june 1

    today I reliezed I might have my iterations a little missleading. I am still working on the game class however it is doing most of the heavy lifting in my project those far. I feel very pleased with my work so far I have made a ton of progress. I was origanly trying to eat an elephant whole but I stepped back and am now just working bite by bite.some of my code right now might be ugly and I am ok with that for now. I want to get things working then refactor.

    Yesterday I left off being able to fill each spot in my game Today I would like to. get display header, detectdraw, save, reset up and running in the Game class as well as save to storage and retrieveWinsFromStorage in the player class. if I can go further that would be awsome! map of one draw condtion. [0-X, 1-X, 2-O, 3-O, 4-O, 5-X, 6-X, 7-O, 8-O] O = Player-1, X = Player-2
    turn would look like [2,0,3,1,4,5,7,6,8]

I have made it to localStoage and now have localStoage saving I am going to make a shift to start some of the dispaly

  • summary

    I was able to get detectdraw, save, and reset up and running due to decideding that display header would fit more in the main.js file I decided to comment that method out and move on. I was able to go much further then expectred yesterday. In addtion to hitting the minium goal for the day then switch paths and moved to the CSS work which is at an ok spot right now I would like to revist however the styles will work for now. I A major win was getting the grid to match to the board even when doing some limited resizing.

  • goals for june 2

    this moring I looked up the overlay hex code for house ravenclaw and hufflepuff just in case I can add a switch player funtionality in the funture. Overall goals for today I would like to build out the main.js file adding listeners and attaching them to the grid spots. I would like to see the header and the win total update. holding the game wins from loacal storage. and addtional goal would be to add a timeout effect before the reset of the board. Anything beyond that would be great.

  • summary

    I was not able to reach my goal det for june 2. once I am able to fix several bugs and add a header I should be in a good spot however I ran into a bug when saing to localStorage the file kept on overwriting itself. this took some time to track down and fix. I had also made a mistake of not switching branches and working on the day proyers branch. I was able to get a ton of commits in, however when tracking a bug it was hard to reach to make a commit if I was bug tracking and nothing was geting better.

  • goals for june 3

    Yesterday fell short of my goals and I am dissapointed. I was able to do some good work tracking bugs however I need to re group and look at the entire project. I got distroyed mentally by a bug that took 3 hours to track and fix. I had to set listeners in every step along the way. today goal is to stop the player from placing an icon when another players icon has been placed. I played with a half a dozen theories yesterday and think I have a plan of attack this morning. right now my dom and my data model seem to run indepently I would like to connect them and have the dom update the board. I would then like to link the dom and the header to display. after that I would love to refactor and clean my code up before looking at any addtions however this is my goal today.

overview for june 3

I was able to acomplish everything I set out to do, in addtion I was able to start the README.md as well as being able to add addtional flair to my project.I feel great about my progress and feel that I am in a good spot at the end of this day. I did have to push refactoring to the next day due to a meeting with my mentor being pushed back however I stil feel good about the project. 
  • goals for june 4

    Yesterday I hit all my goal for the most part today will be all about refactoring completing the README.md and addingf an addtional flair for me I want to be able to improve the user experiance if I can maybe by adding hover states and hidden elements to my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment