Re:paint is a color perception and reflex game. The code for re:paint is not public, but I've created this repo to showcase the game itself and provide an overview of its development.

Play it Here

Re:paint was created specifically to target mobile devices, packaged using Capacitor (a Cordova fork by the Ionic team). Here is a rundown of the tech used:

• Vue 3 / TypeScript - The game is largely written in Vue, using TypeScript.

• chroma.js - Chroma.js was used heavily to generate color schemes and evaluate the player's color proximity correctness. Useful for generating colors in close or distant proximity to other colors.

• phaser - I had originally planned to write each mini-game using phaser, a canvas-based HTML game engine. Most ended up pure Vue, except for one. The UI is, however, overlayed on a phaser canvas which provides background visuals in the menus via GLSL shader.

• @vueuse/motion - This library was used to create the fairly complex transitions seen in game.

• Firebase - Online leaderboards and anonymous user registration were created using Firebase Firestore. Requests are first processed and validated through Cloud Functions.

• Capacitor - Native mobile runtime, really the only good way to package a web app for mobile. This game has been packaged for iOS and Android (though not yet published to either store).

• AdMob - Though not visible in the web demo, this app runs mobile ads for monetization.