irinastelea / connect-four-or-more

Online two-player game powered by Vue3, Node.js and Typescript.

🔴 Connect4/more - Online two-player game 🟡

Overview

Online two-player game where users take turns 'dropping' pieces into a slot-based gameboard.

The first user who manages to connect horizontally, vertically or diagonally four or more of their own pieces wins.

📱 🖥 Optimized for both mobile & desktop.

👨‍💻👩‍💻 Made by @RobertMoravek and @IrinaStelea

Features

• Two-player setup

  • the player who starts the game (admin) invites the opponent via a unique code

• Customisable game board

  • the number of rows, column and slots required to win can be chosen by the admin player from a predefined range

• Realtime game experience

  • the game updates to the next state depending on the status/choices of each player
  • the game reacts to the player whose turn it is and, once a slot has been added, it shows the outcome to both players

• Victory / draw

  • in case of victory / loss / draw, the game displays the relevant notification to each player

• Multiple games

  • each of the two players can choose to invite the opponent to a new game
  • the admin player can re-configure the board in-between games
  • score updates accordingly

• Animated game elements and user-friendly design

• Other functionalities

  • when a user leaves the game / is disconnected, the other user gets a relevant notification
  • server-side validation of the game configuration
  • client & server-side validation of moves
  • player turn is random for first game and alternates for the next games in the same streak
  • error handling

Technology

• Typescript (Backend and Frontend)
• Vue3 (Composition API + Script Setup)
• Node.js & Express
• Socket.io

Set up this project locally

• clone the repository
• install all the dependencies with npm install
• run the project locally with npm run dev and open it at localhost:8080

Previews

Game start & configuration

Realtime game experience: playing

Realtime game experience: results

Multiple games

User leave/disconnect

connect-four-or-more's Issues

FE player turn animation when game starts

improve winning slots animation

currently not so visible for the yellow pieces

make gamecode a component

fixes FE functionality

• fix flicker right after falling slot
• carry over current game config to the config options shown in ResultsView

FE add score & player turn visuals

Annoy Irina

fix server crash when inactive

Setup Vue FE

code cleanup

fixes results view

once either player clicks on play again, hide the results, lower the yellow message and only show relevant buttons
background of box should all change to yellow once either has clicked on play again

Animation falling piece

convert waitScreen to modal that also displays the game code

styling for buttons

further work on ResultsView component FE

leave-game event in backend

finalize FE leave game functionality

Integrate Victory check into server

small fixes to config menu

Create Vue app w/ TS support and server

Testing sockets FE & BE

Improve falling slot animation (speed varies with distance)

add paste icon FE

make everything responsive

set up socket emitters FE

Functionality & design GameBoardBack

fix flicker after falling slot

add readme & favicon

listen for enter on join game

Test issue

BE check for victory function

add leave button to wait screen

winning slots animation FE

repair leave function

CSS fixes

handle errors from BE in FE

add socket listeners to FE