Giter VIP home page Giter VIP logo

monopoly-money's Introduction

Monopoly Money Banner

Manage your finances in a game of Monopoly from the browser.

๐ŸŒ: monopoly-money.nitratine.net

๐Ÿ› ๏ธ Setup

  1. Clone the repo and cd into the project.
  2. Install dependencies by executing npm install.
  3. Setup environment variables. This can be done two ways:
    • Set the environment variables in the current terminal session
    • Copy the .env.example files in the server and client packages and populate them:
      • Examples are at: packages/server/.env.example and packages/client/.env.example
      • Copy these using cp .env.example .env and populate them both.
  4. Build dependencies using npm run build.
  5. Execute npm start to start the server

The environment variables that can be used are (can also be found in .env.example files):

  • REACT_APP_API_ROOT (optional): The route that the client requests. Not setting this will default to window.location.origin.
  • SERVER_ALLOWED_ORIGINS (optional): The origins that are served by the server. Not setting this is the equivalent of setting CORS to *.

๐Ÿงช Development Setup

When running the client in development mode using npm run client:dev, the client will use the REACT_APP_API_ROOT environment variable value to decide where to send requests. If this is not provided, the current hosted URL will be used.

npm run server:dev can also be used for development of the server; this allows for hot-reloading. Running the client using npm run client:dev and setting REACT_APP_API_ROOT to where the server is running will allow for a development setup with hot-reloading.

launch.json also offers the ability to connect and debug the the server when running npm run client:dev.

Screenshots

TODO TODO TODO
TODO TODO TODO

๐Ÿ“ Features

  • Multiple games can be hosted on the server at once
  • Each player uses their own device; everyone joins one game
  • Send money between players with ease - no need to sort out change
  • Realtime - players get notified when an event occurs immediately.
  • The person that created the game is the banker. This person can:
    • Give money to players from the bank (and take money)
    • Give free parking to players
    • Update player names
    • Delete players
    • Stop new people from joining the game
    • End the game completely
  • History is recorded of each game event that can be viewed by all players

โ“ Why?

If you have ever played the credit card edition of Monopoly, you will appreciate how much faster the game moves without having to count cash. This webapp substitutes the need for cash in a game of monopoly for a mobile-banking-like solution where players can easily send each other virtual currency.

๐ŸŒ Deployment

This application was designed to have the server deployed on Heroku (with the client) and a separate client on GitHub Pages.

  • When deploying with Heroku, make sure to set NPM_CONFIG_PRODUCTION to false in config vars otherwise packages will not be installed correctly.
  • The client deployment workflow can be found in main.yml.

๐Ÿ’ก Potential Future Ideas

  • Requests
    • Game event
    • Bank and players can get them
    • Shows at the top of funds / top of bank page
    • Can approve or decline
    • Approval triggers a payment
    • Doesn't how show in history
    • This request is then removed in the game state when approved, declined.
    • Hold down on players tile?

monopoly-money's People

Contributors

brentvollebregt avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.