🔴 Live Demo

💻 Extension

You can grab this extension from the Chrome Web Store here. Install the extension start watching Bandersnatch. The extension should turn red. When you click it, a QR code and channel code will pop up. You can enter these from the web app.

📱 Web App

If you have a QR Code scanner you can just scan the QR Code!

Otherwise, go to https://pac.elviswolcott.com to access the remote. If you allow camera access you can scan the QR Code from the web app, or you can enter the code manually.

Once the code is entered, your phone will be synced to the extension. You should see the options on screen mirrored to your phone at the next decision.

📘 Table of Contents

1. 🔴 Live Demo
   • 💻 Extension
   • 📱 Web App
2. ❔ Why would I need this?
3. ⏩ Quickstart
   1. 💾 Download the Project
   2. 🔑 Get your FREE PubNub keys
   3. 🔨 Build the Web App
   4. 🔨 Build the Chrome Extension
   5. 🌎 Deploying the Web App
4. ⚙️ Development
5. ❓ FAQ
   • The remote gets the options before they show up on screen. What is this magic?
   • What happens if I don't vote?
   • What happens when there's a tie?
   • Can you add...
   • My question isn't here!
   • It's broken.

❔ Why would I need this?

While watching Bandersnatch with a group of friends I encountered an unexpected issue. Coming to a consensus in the 10 second decision window can prove to be a challenge. This project addresses this issue by providing a remote control designed specifically for Bandersnatch which supports voting between multiple users. It also can make for a fun thematic twist when playing with others - nobody is in control of what path they follow.

This was a perfect project to show off the capabilities PubNub. When you only have 10 seconds to make your decision, every millisecond counts. PubNub's ultra low latency ensures that every vote cast makes it to the extension in time to be counted. Combined with a little bit of magic, the extension can even get the pathways to the remote before they are visible on your TV.

⏩ Quickstart

💾 Download the Project

You can download the project in any of these ways:

1. Git Clone (recommended) - requires git

   • In your terminal, navigate to the directory where you want your project saved
   • git clone https://github.com/elviswolcott/bandersnatch-PAC.git

2. GitHub Desktop - requires GitHub Desktop

   • Click here to open in GitHub Desktop or click Clone or Download at the top of this page and select Open in Desktop

3. Download as ZIP

   • Click here to download a ZIP or click Clone or Download at the top of this page and select Download ZIP
   • Extract the ZIP in your desired directory

🔑 Get your FREE PubNub keys

• Sign up/Login to the PubNub dashboard
• Click the big red button labeled CREATE NEW APP +
• Enter a name for your app (I went with Bandersnatch PAC for consistency) and click CREATE
• Select your new app and then select the Demo Keyset
• Create a file named keys.json in the project directory and paste in the JSON below (both the extension and the web app need this to connect to PubNub)
• Replace the publishKey and subscribeKey with your keys from the PubNub dashboard and save the changes

{
  "publishKey" : "pub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX",
  "subscribeKey" : "pub-c-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX"
}

🔨 Build the Web App

• Edit deploy-details.json to contain the path where you will deploy the project
• In your terminal, navigate to the project directory
• npm run install:web - Downloads the dependencies note: you only need to run this the first time you build the web app
• npm run build:web - Builds the web app to /web/dist

🔨 Build the Chrome Extension

• In your terminal, navigate to the project directory
• npm run install:ext - Downloads the dependencies note: you only need to run this the first time you build the extension
• npm run build:ext - Builds the Chrome extension to /ext/dist
• In Chrome, navigate to chrome://extensions
• Enable Developer mode in the top right corner
• Click Load unpacked... and choose /ext/dist

🌎 Deploying the Web App

How you deploy the web app is up to you. As long as you make the /web/dist directory accessible you should be good to go.

I find that Netlify is the easiest option. If you don't have a Netlify account, the easiest option is Netlify Drop. You can just drag and drop the /ext/dist directory into your browser and Netlify will deploy it for you. You can set up a custom domain, tweak your settings, and create an account to keep your web app online permanently.

If you want make your own changes, the best option is to use Netlify to deploy from git. They'll automatically build the web app on their servers and publish the result every time you commit. Getting Netlify setup to deploy from git only takes a few clicks.

• Sign in to Netlify
• Click New site from Git
• Select your git provider
• Link your account
• Find and select your repository
• For Build command use npm run netlify
• For Publish directory use web/dist
• Open the Advanced options
• Add a New variable and enter publishKey for the key and your PubNub key for the value
• Add a New variable and enter publishKey for the key and your PubNub key for the value
• Deploy site

⚙️ Development

These commands help when you are actively making changes by keeping code readable and serving the web app to a local webserver.

• npm run serve:web - Use Hot Module Reloading to reduce build times and serve files on a local webserver
• npm run lint:web - Lint and format code ESLint + Prettier
• npm run lint:ext - Format code with Prettier

I've put together a complete write up of how I built this project over on Medium.

❓ FAQ

The remote gets the options before they show up on screen. What is this magic?

Because the options have animations, they are detectable shortly before they are displayed. The Chrome Extension uses Mutation Observers to watch for changes to the DOM. This allows it to pull out the options as soon as they are added to the page. Combined with the speed of PubNub, messages can arrive in as little as 30ms-40ms with a global guarantee of 250ms. In comparison, visual reaction speed is around 150ms-200ms and a blink takes 100ms-400ms. With PubNub, messages literally arrive in the blink of an eye.

Sources:

1. PubNub Latency
2. Reaction Speed
3. Blink Speed

What happens if I don't vote?

The extension will do nothing, Netflix will go with the default option.

What happens when there's a tie?

This behavior is somewhat undefined. The vote tallying uses Object.enumerate, so the order votes are processed depends on the order of the object keys. However, this does not necessarily mean the first vote will win. According to the spec, JSON key/value pairs are unsorted. Therefore, the order they will be processed is unknown. This adds some level of randomness, which seems like a acceptable solution for ties.

Sources:

1. JSON Spec

Can you add...

Maybe, create an issue with the enhancement tag and I'll see if it's something I can add.

My question isn't here!

Create an issue with the question tag and I'll add it to the FAQ.

It's broken.

Create an issue with the bug tag and I'll work on a fix.