/Codenames

A simple web version of the famous game

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Codenames

This project tries to reproduce a web version of the board game Codenames.

There is a running instance of the game accessible at https://codenames.landazuri.fr.

Dictionaries

The dictionaries used to generate the games are in the dictionaries folder:

Any correction or addition is very welcome, so we can spice up the game :)

Roadmap

Here is an unordered list of improvements coming up:

General features

  • Whose turn is it currently?

  • Counter for the time for each turn --> Time restricted games ?

Frontend

  • Fix leaving a room

  • Fix when a number of failed on token expiry

  • Mobile friendly! So that the spymasters can be even more discrete! --> Be clear if you need to scroll right

  • Icon to start a game? https://thenounproject.com/search/?q=new%20game

  • Party seed in Title

  • Join a game / New game in different menus

  • Dark theme

Backend

  • Websocket server

  • Security:

  • Backend with websocket rooms:

    • to assign roles in a game (no more cheating!)
    • chat (background colours by team)
    • check for words sent through chat

Installation

If you want to run the project locally, here are the basic requirements:

  • Node.js: The recommended way is via nvm. You can then install the version used for this project: nvm install lts/erbium.

  • Yarn: If you have nvm installed, you'd prefer to install yarn without the node dependency. To do so, the bash install is easier: curl -o- -L https://yarnpkg.com/install.sh | bash.

This repository uses the Yarn workspaces as a tool to manage the different packages.

From the root folder, simply run the classic command:

yarn install

This will install all package dependencies in a common node_modules folder at the root of the project using a single yarn.lock file to avoid conflicts package dependencies.

Applications

You can learn more about each application in their respective README:

  • Frontend: written in TypeScript, developed with React and bundled with Parcel.

  • API: written in TypeScript, developed with NestJS and bundled with Webpack.

Development

For both the Frontend and the Backend (API), you can navigate to the appropriate folder (packages/frontend or packages/api) and run the following commands:

  • To run a local dev server of the application with Hot Module Reload:

    yarn start:dev

    For the API, you can also run local server in [debug mode]((https://nodejs.org/en/docs/guides/debugging-getting-started/):

    yarn start:debug
  • To produce a distribution build in the corresponding dist folder:

    yarn build

Regenerate dictionaries

To regenerate the packages/frontend/src/data.json file based on the dictionaries/dictionary.**.txt file, you can run:

yarn generate-dictionaries

Legacy frontend deployment

Once built, if you want to send the packages/frontend/dist folder to a static content hosting service accessible via SSH, you can run the scripts/deploy_static.sh script. But first, you'll need to set up your hosting information at the beginning of the script:

# Hosting information
FULL_HOST_ADDRESS="username@host.address"
PORT="21"
DESTINATION_FOLDER="/absolute/path/to/www/"

Technical aspects

This projects uses the following technologies:

This project also includes some development dependencies (devDependencies in package.json) with their respective configuration file for a better developer experience:

  • EditorConfig: .editorconfig — not a devDependency but allows consistant configuration across IDEs and editors.

  • ESLint with TypeScript parser and React

  • React Hooks configuration: .eslintrc following this article as a starting point.

  • Prettier: .prettierrc — formatting options

Author

Paul Landázuri