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.
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.
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.
You can download the project in any of these ways:
-
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
-
GitHub Desktop - requires GitHub Desktop
- Click here to open in GitHub Desktop or click
Clone or Download
at the top of this page and selectOpen in Desktop
- Click here to open in GitHub Desktop or click
-
Download as ZIP
- Click here to download a ZIP or click
Clone or Download
at the top of this page and selectDownload ZIP
- Extract the ZIP in your desired directory
- Click here to download a ZIP or click
- 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
andsubscribeKey
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"
}
- 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 appnpm run build:web
- Builds the web app to/web/dist
- 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 extensionnpm 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
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
usenpm run netlify
- For
Publish directory
useweb/dist
- Open the
Advanced options
- Add a
New variable
and enterpublishKey
for the key and your PubNub key for the value - Add a
New variable
and enterpublishKey
for the key and your PubNub key for the value Deploy site
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 webservernpm run lint:web
- Lint and format code ESLint + Prettiernpm run lint:ext
- Format code with Prettier
I've put together a complete write up of how I built this project over on Medium.
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:
The extension will do nothing, Netflix will go with the default option.
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:
Maybe, create an issue with the enhancement
tag and I'll see if it's something I can add.
Create an issue with the question
tag and I'll add it to the FAQ.
Create an issue with the bug
tag and I'll work on a fix.