twelve-heroes

TWELVE HEROES

The digital version of the boardgame - Implementation in progress

This is a web version on the 12 heroes board game that I am coding for fun as a personal project. It is far from being complete and production ready.

Game official rules : https://cloud.jojolab.net/s/pBnC6wsSKC4E3RX

Here you have :

• A vueJS app with :
  • socket.io client for communication with backend
  • game menus
  • start of the game logic : build the start deck
• A NodeJS backend server :
  • talks to a MariaDB
  • Authenticate users
  • implements game logic

What's left :

• Better look & feel, especially for cellphones
• game logic
• tests (shoud have started with that :) )

Project setup

Prerequisites

• nodeJS >= 14
• npm >= v6.14.8
• Docker >= v19.03.13

• Docker Compose >= v1.27.4

  npm install
  cd server && npm install
  

Compiles and hot-reloads for development in Firefox browser

For development there is a default environment in .env.development

Run dev server with hot reloading upon changes

To run the backend you also need a mariaDB, following will start :

• a local test DB with user1 to user5 created

• the backend server

  npm run dbtest
  npm run server-dev
  

Run VueJS app with hot reloading upon changes

npm run dev

How to deploy using docker compose

You will need to fill the .env.production file

# HOST and PORT of the backend server for client socket connection
export VUE_APP_SERVER_HOST=
export VUE_APP_SERVER_PORT=
# Port on which you want to expose the game app
export VUE_APP_PORT=

## backend MariaDB information :
# DB host (usually localhost as same machine as the backend)
export DB=
# DB port (by default 3306 for mysql/MariaDB)
export DB_PORT=
# Depends on your DB config, you can connect to a unix socket instead of port
export DB_SOCKET=
# Database name
export DB_NAME=
# User and password
export DB_USER=
export DB_PASS=

Then you just need to do :

npm run build-docker
deocker-compose start
## Or docker-compose up    to get logs

Recommended VS code plugins :

• Vetur
• Vue 2 Snippets
• Vue VSCode Snippets
• ESlint
• Prettier ESLint
• All Autocomplete
• Bootstrap 4, Font awesome 4, Font Awesome 5 Free
• SCSS IntelliSense