Giter Club home page Giter Club logo

chessmsgs's Introduction

chessmsgs.com - Play Chess over social/messaging

Created because I wanted to play chess with others without having to install software, create accounts, etc.. Game play is simple -- make your move, copy and paste the URL to your opponent, etc.

Technical details:

Web browser-side - all chess logic is run in the browser

  • chessboard.js - JavaScript chessboard component - by Chris Oakman
  • chess.js - JavaScript chess library that is used for chess move generation/validation, piece placement/movement, and check/checkmate/stalemate detection - by Jeff Hlywa
  • body-scroll-lock - JavaScript library that makes it easy to manage scrolling on mobile (I needed to freeze scrolling during moves and this library works across almost all browsers) - by Will Po
  • JQuery - the above two chess libraries required it, so I used it too.

Web Server - simple Node/Express server with some super simple templating to create the Open Graph and Twitter Card image URLs, links, etc.  This could have easily been a static website other than this requirement.

  • request-ip - Used for logging IP address of each move to use for future scaling (create additional copies in regions, etc.)
  • nanoid - Used to generate unique Game IDs
  • No database/data store -- all game state info is passed back and forth between players in URL
  • Deployed on Google Cloud Run

Image Server - used to generate the image used for Open Graph and Twitter cards so that when a user posts a game link to most platforms, the platform will show the image with the current board position. I created an endpoint that looks like any other png file url (example).

  • chess-image-generator - JavaScript library that creates a png from a FEN (standard chess board notation) - by Andrew Young
  • I made a copy of generateBuffer() as generateCustomBuffer() and customized it to do padding to match Open Graph requirements
  • Deployed as a route in the web server Node express app

Testing and deploying

The parts

  • Main web server is in project root -- server.js
  • Web content is in ./public

Local testing of serve - run from project root.

# Install all dependencies
npm install

# Run server
node server

Access http://localhost:8080 to test. If you are running this on your own server, you'll need to change the URL hard-coding in server.js (replace "chessmsgs.com")

Deploying to Google Cloud Run

npm run build
npm run deploy

or, build and deploy with a single click:

Run on Google Cloud
You can also setup continuious deployment to auto-deploy when you push to a branch or tag using Cloud Build)

Why Google Cloud Run?

The hosting requirements are simple. I needed support for Node.js/Express, domain mapping, and SSL. There are several options on Google Cloud including Compute Engine (VMs), App Engine, and Kubernetes Engine. For this app, however, I wanted to go completely serverless, which quickly led me to Cloud Run. Cloud Run is a managed platform that enables you to run stateless containers that are invocable via web requests or Pub/Sub events.

Cloud Run is also basically free for this type of project because the always-free-tier includes 180,000 vCPU-seconds, 360,000 GiB-seconds, and 2 million requests per month (as of this writing – see the Cloud Run pricing page for the latest details). Even beyond the free tier, it’s very inexpensive for this type of app because you only pay while a request is being handled on your container instance, and my code is simple and fast.

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.