Flow Suite

• 

  Secret Message Patter

• 

  Twist both sides to be in equilibrium

• 

  Block Pattern

Inspiration

The urge to scroll social media mindlessly is universal—whether waiting on a bus, standing in a cafeteria line, or attempting some casual stealth-gaming during a long lecture. Flow Suite was created to transform that passive screen time into active, competitive brainpower with lightweight, high-stakes browser mini-puzzles designed to waste time but maximize critical thinking.

What it does

Flow Suite is an instant-play web arcade featuring two distinct browser mini-games: FlipFlop (Equilibrium): A synchronized, dual-board tile slider where two 3x3 grids are structurally linked in reverse. Sliding an alphanumeric tile on one board automatically shifts the other board in a mirrored, opposite direction, requiring both distinct target words to be spelled out simultaneously along the middle rows to win. Rotato (Flow Matrix): A dynamic 5x5 canvas wrapping puzzle where players swipe, drag, or scroll entire rows and columns horizontally and vertically to match a blueprint. It features two setup modes: Pixel Mode (aligning structural pixel art blocks) and Text Mode (reconstructing scrambled text matrices). Both games allow players to escalate the stakes by layering custom time limits or maximum move thresholds, and instantly share exact puzzle seeds with friends via custom-generated links.

How we built it

Flow Suite was built entirely from scratch using vanilla web technologies without external frameworks, game engines, or bulky dependencies: The Core: Pure HTML5 structure orchestrated by native ES6+ JavaScript modules managing separate game engine states. The Visuals: Responsive CSS3 utilizing custom viewport media queries that dynamically scale and stack the boards for a flawless mobile footprint. The Engines: Rotato utilizes dual HTML5 Canvas elements (2d context) to handle complex row/column loop-wrapping render algorithms. State & Sharing: Puzzle layouts, initial scramble paths, and target maps are serialized on the fly, encoded into Base64 strings, and injected directly into the window's URL hash-enabling zero-database, serverless peer-to-peer challenge sharing.

Challenges we ran into

Gesture Hijacking on Mobile: In Rotato, mobile browsers frequently intercepted dragging gestures on the canvas to scroll the webpage. This required enforcing strict touch-action: none rules and leveraging the native setPointerCapture API to seamlessly bind pointer vectors without layout lockups. Ensuring Solvability: Sliding puzzles can easily become mathematically impossible if scrambled purely at random. A custom breadth-first search (BFS) shortest path solver and an intelligent backtracking scramble routine were engineered to guarantee that every board generated is fully solvable and sits at a challenging depth of at least 14 moves from equilibrium. State Synchronization: Handling the reverse-mirrored matrix tracking in FlipFlop required pinpoint indexing accuracy to prevent infinite updating loops when reflecting actions between the left and right arrays.

Accomplishments that we're proud of

Zero Dependencies: The entire suite compiles instantly, running entirely client-side with an incredibly tiny performance footprint. Fluid Interaction: Achieving desktop-smooth scrolling physics and rendering responsive canvas components that handle both mouse wheels and finger swipes fluidly. Serverless Sharing Utility: Crafting a fully functional, client-driven challenge loop using nothing but native URL hash encoding.

What we learned

We gained a deep appreciation for the power of native browser interfaces. Building complex grid-wrapping math, state tracking, and pointer tracking structures from the ground up proved that heavy frameworks are completely unnecessary to create responsive, highly interactive web experiences.

What's next for Flow Suite

WebRTC Integration: Turning the current URL hash link system into a live, real-time multiplayer battle mode where players race on the exact same board configuration simultaneously.

Expanding the Puzzle Vault: Introducing more algorithmic variants, such as scaling matrices (6x6) or multi-layered linked boards.

The Global Aura Leaderboard: Introducing client-authenticated global tracking for minimal moves, sub-second speed runs, and daily streak parameters.

Built With

• css3
• html5
• javascript