Code Monkey home page Code Monkey logo

demo-dragonboat's Introduction

demo-dragonboat

A simple, fun JavaScript game that uses MQTT to have a dragon boat race Screenshot

Instructions to Install

  1. Load all the files onto a web server somewhere, e.g. myserver.org in folder boat
  2. Update the credentials for the MQTT connection in the lib/shared.js file. Note that you must use a WebSocket connection. If hosting on a website with https, the WebSocket connection must be secure wss:// (cannot mix secure & non-secure).
  3. All of the code is inside the index.html file. Update the displayed URL for players by changing the variable near the top of the file:
    • const URL_TO_DISPLAY = "myserver.org/boat";
  4. Then start a race by pointing your Presenter/Controller laptop to the full URL with at least some additional URL parameter
    • For example: http://myserver.org/boat?race1
    • When it loads, you'll be prompted to give the race a name. This is useful if there are multiple races happening concurrently
    • You will notice a "latency" timer displayed in the bottom corner. This indicates Round Trip Time (RTT) to the MQTT broker and back. Lower numbers indicate more responsive interactions.
  5. That will start the meet... I always suggest going into Full-Screen mode (F11 on Windows) and reloading
  6. Participants can now join the race (phone or laptop) using the URL displayed on the screen
  7. When enough participants have joined, the Presenter clicks anywhere on the background to start the race
  8. Participants are given a countdown, after which they simply have to click anywhere on the background, or tap their finger on the background if on a phone

Want to just play?

It's already setup on my demo server.

  • Point your (desktop) browser to https://sg.solace.com/db?UNIQUE-NAME-HERE
    • That browser is the "Race Controller"
    • Give your race a unique name, so you can make sure people join the right race
  • Get your friends to use their phones/tablets to join the race. Goto https://sg.solace.com/db
  • Once everyone joins, the Race Controller clicks anywhere on the background to start the race
  • Tap your phone background as fast as you can once the race starts

Event Portal Design

Screenshot

Check out the pubsub+event-portal folder for two ways of visualizing the flow of events and request-reply messages for the game. Also included are the Event Portal schemas you can import yourself to https://solace.com/products/portal

Licences

Check the LICENSE file

demo-dragonboat's People

Contributors

aaron-613 avatar

Watchers

 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.