rosell-dk / connect-4 Goto Github PK

Pressing arrow up to undo seems intuitive

First of all, it is not very nice to be bombarded with sounds when you open your browser containing lots of old tabs.

Secondly, it generates an error in the console on Chrome if you try. While this doesn't hurt the user experience, it certainly hurts the developer experience.

I btw tried to avoid the error, but it seems the only way to avoid it is not to try playing sound. Even creating a new AudioContext(); and testing if its state is suspended results in an error in the console when user hasn't interacted

The mouse-over effect on columns should only be active when the game is active
Also, the coin above the game, ready to be put in a slot should be inactivated

Save game locally and retrieve old games

It can take care of refusing to play, when muted or the hasn't interacted with the page yet

It is currently sound hell, when all discs are sucked up simultaneously (on game restart)

Ok, this isn't directly in the specification.
I'm just curious to try out how such a rule will work.
Of course, it will be too hard to connect 4 pieces, so it should also be possible to change that rule so only 3 pieces are required

You would probably want to use this in 3-player mode (#27)

We can use this:
https://vueuse.org/core/useEventListener/

We currently have a SVG for each cell.

We want to do animation and it would be neat to do it inside the SVG. For that we would need the cells in a column to be part of the same SVG. But lets make the rows part of the same SVG too. This will make the process of placing discs a breeze and will allow animations that affects the whole board.

There is an overview of Vue 3 frameworks with Typescript here:
https://dev.to/ranaharoon3222/the-ultimate-list-of-7-perfect-vue-3-ui-libraries-for-every-project-1l39

Detect when game is over because no other discs can be placed

Add a mute/unmute icon.

Choose column with left and right arrows. Drop it with down arrow.

This is not as fast as simply pressing a number (#5), but the risk of dropping it the wrong place is reduced

This feature will make it easier to play two on the same computer. One can grab the mouse while the other uses the keyboard

Currently, we have the information about discs stored in a two-dimensional array, "board"
The array keeps track of the state of each cell in the board (0 = empty, 1 = it contains a player 1 disc, ...)
So discs are actually just states of a cell

However, in order to do animation, we need the discs to have their own life (Imagine for example that we want to implement the "popout" rule, which allows you to remove a disc from the bottom. Such a game move will potentially affect several discs).

So: Lets add a disc array of played discs to the model.
We can still keep the "board" array, as it is useful for the logic. The model will then contain redundant information, which is not ideal, but its practical