Skip to content

tic-tac-toe implemented in MEAN stack with socket.io, supporting human-to-human, and human-to-computer games

Notifications You must be signed in to change notification settings

jeremy-wl/tic-tac-toe-mean

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tic-Tac-Toe-MEAN

Real-time Tic-Tac-Toe game implemented using MEAN stack and socket.io

Features

  • User register/unregister, login/out, social login
  • Real-time multi-player game
  • History game review
  • Mobile-friendly
  • Single-page application
  • Admin CRUD features

Descriptions

Two user roles are implemented in this web app

  1. Player
  2. Admin
  • User can register, or use Facebook/Google login to get access to the games.
  • Player can choose to play locally (with computer) or online (with other players)
    • For local games, I consumed a third party API endpoint for game strategies against the player. The API algorithms, however, are so optimized that I am not able to win a single match... Because the restrictions from the API, the local game only supports 3×3 game
    • Players can choose grid from 3 to 10 in multi-player game. By clicking the join room button, the app will look for rooms available to join, or if no room available, create a new room. Because of the nature of socket.io, all data between users will be transmitted in real time.
  • A normal player can view his game history with computer/human. Inside the listing view, he is also able to view the game move-by-move using back/forward steppers.
  • An admin has some superpowers, he is able to
    • View all users
    • Edit user credentials/roles
    • Remove users
    • View all games by that user
    • And of course, view all games by all users

Note

  • For Local Game:

    At the beginning, it will take the API about 5 seconds to respond and make a move (the third-party Heroku App needs to wake up from sleep due to inactivity)

  • For Online Game:

    You will need to

    1. use a different browser OR same browser but the other page in incognito mode
    2. use two different accounts

    to start the game (so that the user cannot cheat easily :D)

Usage

  1. Make sure you have Node.js and MongoDB installed and configured
  2. $ git clone https://github.com/jeremylinlin/tic-tac-toe-mean.git
  3. $ cd tic-tac-toe-mean/
  4. $ npm install
  5. $ node server.js
  6. Visit http://localhost:3000/

In addition, you will need to

  1. Go to Facebook/Google developer page and create an app for OAuth authentication, and get their client id and client secret
  2. Create a file in project root named .env to store those environment variables

These environment variables should be present in your .env

  • WD_SESSION_SECRET=?
  • GOOGLE_CLIENT_ID=?
  • GOOGLE_CLIENT_SECRET=?
  • GOOGLE_CALLBACK_URL=http://localhost:3000/auth/google/callback
  • FACEBOOK_CLIENT_ID=?
  • FACEBOOK_CLIENT_SECRET=?
  • FACEBOOK_CALLBACK_URL=http://localhost:3000/auth/facebook/callback

To login the game as an admin, you will need to register a user, and then manually add a role 'ADMIN' to this user from MongoDB.

License

MIT

About

tic-tac-toe implemented in MEAN stack with socket.io, supporting human-to-human, and human-to-computer games

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published