Tic-Tac-Toe | Practice session projects from The odin project | DevOps library

You should have a crack at this yourself so I don't want to code an answer for you... but here are some of the pieces and the thinking.

You can check to see if a player has won immediately after they click for their turn, so at the end of the handleClick function.

A rough and ready way to do this would be to gather all of the "box" elements, then check all the rows, columns and diagonals.

Some of the pieces of this include:

• Use the document.getElementById method to get the "box" elements into variables (ideally an array or map to make it easy to refer to the elements in a logical, rather than manual, way, but individual variables would work)
• Test those variables for winning lines, so a crude example for testing one winning line would be (where box1, box2 and box3 were the box elements from the previous step, and processWin some function which did whatever was needed when a win happened):

Your .btn-1 styling is aligning the elements based on their text content, this can be solved by applying vertical-align: top; to that class.

Another small change that's worth making would be to change .item-board from inline-block to display: block, as that will prevent the width of the screen affecting whether the rows wrap.

You have to be very careful while separating the components. Check out this CodeSandbox link. I haven't done any changes in your logic. There is a scope for code improvement but that wasn't in the requirements so I have just separated your file into individual components file.

So I sat down and got your program working for myself and noticed a few problems. So the first issue is that you check

But now the rust compiler complains about the lack of a lifetime parameter for the returned reference in the type specifier of cell_access:

The problem here, as I understand it, is that in order to be able to write the code in this shape, the cell_access function's signature needs to refer to the lifetime for which it is valid, and this is impossible because that lifetime doesn't have a name — it's a local reborrow of self that's implicit in the closure creation. Your attempt with &'a mut self doesn't work because it doesn't capture the fact that the closure's self is a reborrow of the function's self and accordingly does not need to live exactly the same lifetime, since mutable borrows' lifetimes are invariant rather than covariant; they can't be arbitrarily taken as shorter (because that would break the exclusiveness of mutable references).

That last point gives me an idea for how to fix this: move the all_in_line code into a function which takes self by immutable reference. This compiles:

So it looks I've answered my own question. Its not exactly what i was expecting but it does work. What I noticed was that modifying any of the lists board[0], board[1] and board[2] (which happen to be the rows) modified the elements in board and vice versa.

So I figured if I convert board to a numpy array and use its indexing to get the columns, it would allow me to do this with columns as well. So that would make 6 of the possible winning options. luckily, the array.diagonal() allowed me to achieve the same with the diagonal elements too.

The snippet below will brute force all end games for player X and player O

There are 33,542,145 permutations to test of which ~ 5,000,000 are valid end games. To prevent the page locking up it splits the task into groups of 250,000 permutations

Best score for X is 16 and for O is 14. Run the snippet to see example end game layout and other details.

I did not include any handicap.

This can only do end games as it uses bit fields to keep performance high. However bit fields have no room of empty board positions.

It can be optimized to do both players at the same time by inverting the bits for each game permutation

You need to turn your string into an iterator so you can pull one at a time. Right now, your code is processing ALL 9 CHARACTERS for each square, so every square gets the last character in the list.

Let's for example consider this function declaration.