JS Tic-Tac-Toe: Improve instructions/resource order

[MaoShizhong]

Describe your suggestion

From a recent Discord discussion, I felt the project instructions could be improved to more closely follow the organisation/workflow concepts presented in the building a house from the inside out resource linked in step 4.2.

Currently, the instructions allude towards making different objects/modules for different parts of the logic but the flow of the instructions feels like it can lead to trying to handle the game logic (players/board/gameflow) and display logic/DOM interaction at the same time - something I feel (like the build a house resource suggests) would be better off focusing on game logic first and only then do you introduce display logic. I feel this order can reinforce the concept and benefits of separating logic into different objects and modules in a much clearer way than is currently being done.

A draft proposal for new instructions:

1. Set up your project with HTML, CSS and Javascript files and get the Git repo all set up.
2. You’re going to store the gameboard as an array inside of a Gameboard object, so start there! Your players are also going to be stored in objects, and you’re probably going to want an object to control the flow of the game itself.
   1. Your main goal here is to have as little global code as possible. Try tucking everything away inside of a module or factory. Rule of thumb: if you only ever need ONE of something (gameBoard, displayController), wrap their factory in an IIFE. If you need multiples of something (players!), you needn't do this (so you can reuse the factory).
   2. In this project, think carefully about where each bit of logic should reside. Each little piece of functionality should be able to fit in the game, player or gameboard objects. Take care to put them in “logical” places. Spending a little time brainstorming here can make your life much easier later!
   3. If you’re having trouble, Building a house from the inside out is a great article that lays out a highly applicable example of how you might organize your code for this project.
3. If you read the resource from the previous step, you'll probably want to focus on getting a working game in the console first. Make sure you include logic that checks for when the game is over! You should be checking for all 3-in-a-rows and ties. Try to avoid thinking about the DOM and your HTML/CSS until your game is working first!
4. Once you have a working console game, create an object that will handle the display/DOM logic. Write a function that will render the contents of the gameboard array to the webpage (for now, you can always just fill the gameboard array with "X"s and"O"s for now just to see what's going on).
5. Write the functions that allow players to add marks to a specific spot on the board by interacting with the appropriate DOM elements (e.g. letting players click on a board square to place their marker). Don't forget the logic that keeps players from playing in spots that are already taken!
6. Clean up the interface to allow players to put in their names, include a button to start/restart the game and add a display element that shows the results upon game end!

I have also omitted the extra credit section following the discussion in #26172

Thoughts?

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/javascript-tic-tac-toe and https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript

Checks

• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] Would you like to work on this issue?

(Optional) Discord Name

mao_sz

(Optional) Additional Comments

No response

[CouchofTomato]

@TheOdinProject/javascript

Can somebody review please.

[01zulfi]

@MaoShizhong I like the general idea of what you're proposing. Please create a pull request so that specifics can be reviewed there, thanks!

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.