README

Pipe Dreams

A browser-based game, collect or avoid balls based on colour.

Play

Follow the on-screen instructions, but basically drag around with your finger (or mouse) to steer your ball.

Development Environment

Dependencies

esbuild

JS bundler, tree shaker, transpiler. I installed a standalone build so I can run it from anywhere but it can also be installed with npm or other methods:
esbuild: Download a build

SASS

For compiling and bundling SASS/SCSS
SASS: Install SASS

Example of Project Setup Using Tmux/Vim

Below is an example build script which does the following:

  1. Change to the project directory
  2. Use tmux to open a few window panes:
    • esbuild watching for changes to JS
    • SASS watching for changes to CSS
    • git status, pane left open for commits etc
    • A simple Python server so we can test the app in a browser
  3. Open a vim session for file editing

#!/bin/bash

# Open a JS project using esbuild, SASS and vim

WORK_DIR="$HOME"/pipe-dream/

'tmux' \
    new-window -c "$WORK_DIR" "esbuild src/main.js --outfile=www/js/pipe-dream.js --target=es6 --bundle --minify --sourcemap --global-name=PIPEDREAM --format=iife --watch" \; \
    split-window -c "$WORK_DIR" "sass --watch src/scss/:www/css/" \; \
    split-window -c "$WORK_DIR" "git status; bash -i" \; \
    split-window -c "$WORK_DIR" "python -m http.server --directory www/" \; \
    select-layout even-vertical \; \
    new-window -c "$WORK_DIR" "vim -S vim.Session" \; \