Task Sorter

A fast sorting game built on the Eisenhower Matrix. Task cards fly in, you swipe each one into one of four corners, and only accuracy decides whether you pass.

Sort right and fast, keep your streak alive, get an S.

Four levels wind up a trail - the Day to Day pack. Each level is a place in your life, and only that place's tasks turn up there, and each one brings one new twist. Four bosses each have a trick of their own. A Daily Challenge deals the same round to everybody each day, missions and badges give you something to come back for, and My List turns the four corners on your own real week.

---

Playing it

In a browser: https://task-sorter-one.vercel.app

Note the -one. Plain task-sorter.vercel.app is a different project by somebody else and is not this game.

On an Android phone: build the APK, or take it from the Build APK workflow in the Actions tab. See android/README.md.

---

Running it locally

On the PC: double-click index.html.

On a phone (same Wi-Fi):

powershell -ExecutionPolicy Bypass -File serve.ps1

It prints a http://192.168.x.x:8080 address. Open that on the phone.

On a laptop you can also play with the keyboard: Q W A S for the four corners, Escape to pause or go back, Enter to go on.

The pause button in the top-left of a round stops the clock and offers Resume, Restart and Quit. Nothing is recorded when you quit: no grade, no coins, no failed attempt.

Add ?fps to the address - http://192.168.x.x:8080/?fps - and a strip in the bottom corner shows the frame rate and how many milliseconds the game's own code spends on each frame. That is the number to check on a real phone.

---

The four corners

Corner	Box	Means
Top-left	Do Now	important and due soon
Top-right	Do Later	important, not due yet
Bottom-left	Give Away	urgent, but not yours to do
Bottom-right	Drop	neither important nor urgent

Three ways to sort, for three kinds of player:

• Drag the card into a corner. It rides a spring a hair behind your thumb and leans into the drag, and the tray you are heading for swells and lights up while the other three dim - you can see where it will land before you let go.
• Flick it. A quick throw that never travels the full distance still sorts, in the direction you threw it.
• Tap a tray. The card flies there.

Any direction maps to a corner, so a sloppy flick still counts. A drag shorter than SWIPE_MIN_PX that is not a flick snaps back instead of sorting, so a stray touch costs you nothing.

When you miss

The tray the card belonged in lights up with a moving dashed edge for a moment while you keep playing. No words: the glow says where it went. The round does not stop for it: the stun after a miss is still only the bounce.

The end-screen review lists every miss with its reason. The right corner is there too, under a tap - try to work it out from the reason first, then tap to check.

---

Special cards and twists

Every level adds one thing and keeps the ones before it. A clock and harder cards make a level harder; they do not make it different. So:

Level	Twist	What it is
1 House	Golden cards	Gold paper, triple points, +5 coins. The only new thing is good
2 School	Frozen cards	Iced over. Tap the card to crack it (twice), then sort it
3 Phone	Burning cards	A fuse runs along the top. Sort it before the spark reaches the end, or it chars and counts as a miss
4 Town	Trays swap	Every 18 seconds two trays slide into each other's corners. Every swipe follows them

Nothing announces a twist - the card looks different and you find out. How often each card turns up is specials in js/levels.js; the fixed numbers (triple, five coins, two taps, 3.4 seconds of fuse) are in TUNING in js/game.js.

Your gear works on them too. A Longsword or better breaks ice in one tap. A pet makes golden cards a little more likely (its coin bonus x 0.15). A shield covers a card that burns out, because a burnt card is a wrong answer.

A special card says what it is by how it looks - gold paper, ice, a fuse - never in words.

---

Daily Challenge

One round a day, the same for everybody. The deck, which cards are special, and which trays swap are drawn from random numbers seeded with today's date (js/daily.js, startDaily in js/game.js). Three separate streams, so the Nth card of the day is the same card with the same special for everybody, however fast they got there. Two friends on two phones get exactly the same round - the one place where comparing scores is fair.

• 75 seconds, every kind of card, every twist.
• Opens once Level 1 is passed, so a first-time player meets the corners on the gentle level.
• Streak: play on consecutive days and it climbs; miss one and it starts again. The first finish each day pays 40 coins + 15 per streak day, capped at a week. Replays can beat your best but do not pay the bonus again.
• The DAILY door on the home screen goes gold with a ! when today's round is waiting.

---

Missions and badges

js/missions.js. Three missions are always on the go - "Get 8 Perfects in one round", "Crack 3 frozen cards", "Sort 6 Do Later cards right". Finish one and its coins pay out with that round, flying into the wallet with the rest, and a new one takes its place. They get harder after every four you finish. Some count over many rounds, some want it done in one.

There is a mission for Do Later on purpose: it is the corner the game argues changes your life, and the one people skip.

Sixteen badges are for keeps: every level passed, an S on all four, every boss beaten, a seven-day streak, sorting your own list. Each is also an achievement id for HUAWEI Game Service (below).

Both live behind the target button next to the cog on the home screen, with a red dot when something has finished since you last looked. On the results screen, a finished mission or a new badge gets a card of its own that stamps in before the buttons.

---

My List

The game pointed at real life. Open MY LIST on the home screen, type in what is actually on your plate - "Science project due Friday", "Reply to grandma" - and press Sort. It plays like a round of your own cards: same four trays, same drag, no clock, no score and no wrong answers, because only you know whether your project is a Do Now.

What you get is a plan in four piles, kept on the sheet, with a tick box on every task. Sort the week again whenever it changes. It is saved on the phone like the rest of your progress (myTasks), and never leaves it unless you made an account.

---

Easier to play

Settings has two switches:

• Bigger text - larger words on the cards, the trays and every sheet.
• Calm screen - no screen shake, no freeze-frames, no punch-zoom, softer red flashes. The phone's own "reduce motion" setting does the same.

The trays also carry a pattern each - stripes, dots, chevrons, lines - so they differ in more than colour, for anyone who cannot tell the red from the orange.

---

What is in the box

The rules - what is true, regardless of what is on screen:

File	What it does
js/cards.js	The task cards. This is the file you will edit most
js/levels.js	The levels, the ranks, and your saved progress
js/game.js	The rules of a round: scoring, the clock, grading, unlocks
js/shop.js	The shop: pets, armour, weapons and coin rewards
js/battle.js	The bosses you duel, their tricks and what they say
js/daily.js	The Daily Challenge: today's seed, the streak, the bonus
js/missions.js	Missions (three at a time) and badges (for keeps)
js/mylist.js	My List: your own tasks, and the plan they become
js/services.js	Where HUAWEI Game Service plugs in (achievements, leaderboards)
js/hero.js	Your character's name, and the readout of what your gear does

The engine - how it is drawn, on one canvas (see Why it is drawn now):

File	What it does
js/gfx.js	Easing, tweens, springs, particles, sprites, text, the panel look, baking
js/stage.js	The canvas, the loop, scenes, transitions, hit-stop, shake, buttons
js/world.js	The four desk surfaces you play on, and the shelf
js/desk.js	The props: the four tray objects, the index card, the timer, notes
js/actors.js	Your character, your pets and the bosses, with bodies that react
js/sfx.js	Every sound effect, synthesised, and the haptics
js/music.js	The soundtrack, played rather than loaded

The screens:

File	What it does
js/arena.js	The round itself - the trays, the card, the fight
js/scenes.js	Title, home, the map, the boss stage, the VS face-off, the gear stage
js/results.js	The end of a round, as a sequence
js/panels.js	The HTML sheets: the shop, settings, the Guide Book, the review, back
index.html	The canvas, and the handful of sheets HTML is better at
css/game.css	Those sheets, and the fonts

Data and art:

File	What it does
js/doodle.js	The characters. Hero, gear, bosses and pets as shapes, inked once into canvases
js/sprites.js	The pixel icons. Small grids for the tab and badge icons
js/pets.js	The pet collection: the thirteen sheets, and how they are played
js/themes.js	The backgrounds you can pick
js/cloud.js	Accounts and saving your progress online
js/ui.js	The one audio context, and the sound switch
js/main.js	Boots the game, and wires the settings sheet
android/	The Android app. One WebView around this same game
serve.ps1	Local server for phone testing

No frameworks and no build step. Sounds are generated in code, so there are no audio files at all. The only network calls the game ever makes are the account ones in js/cloud.js, and the game plays exactly the same with every one of them failing.

---

Why it is drawn now

It used to be a website. Eight HTML pages swapped with display: none, a tab bar along the bottom, every card and corner a <div> moved by a CSS transition. It was well made, and it felt like what it was: an app with a game on one of its pages. A transition knows where a thing starts and where it ends and nothing about the middle - it cannot follow a thumb with weight, bounce a card off the wrong corner, or freeze the screen for three frames when you land a Perfect.

So the whole game is drawn on one canvas, sixty times a second. The rules did not move: js/game.js still decides what a card is worth, when a round ends, what a shield forgives and whether you passed, exactly as before. What changed is everything you see and feel while those rules run.

No engine, on purpose. This repository has no package.json and no build step - plain <script> tags, which is also what lets the same files run offline inside the Android app. A game with one card and four corners needs a loop, a tween, a spring and a particle emitter, not Phaser. js/gfx.js and js/stage.js are those, written for this game, in the same ES5 as the rest of it, because the APK's floor is Android 7.

What is on the canvas and what is not. The world, your character, the round, the map, the bosses, the results - all drawn. HTML is kept only for what it is genuinely better at: a shop you scroll, a box you type your name into, a rulebook, the list of what you missed. Those slide up as sheets over the living world rather than replacing it.

Two clocks. The stage keeps its own clock, which a hit-stop stops and a slow-motion finish slows, so when the screen freezes on a Perfect everything in it freezes together. The rules do not use it: the round is still timed against Date.now(), so a hit-stop can never steal a second off the clock you are racing.

On a wide screen the game plays in a column. A phone game stretched across a laptop put the four trays at the far corners of the window with a small card marooned between them. Wider than about 0.62 of its own height, the stage lays the game out in a portrait column in the middle and lets the world run full-bleed either side of it.

What a frame costs

Every canvas call is a draw call, and on a phone the cost of a frame is mostly how many of those there are, not how many pixels they cover. Profiling the round showed text alone was half the frame. So anything that does not change from one frame to the next is baked - drawn once into a small off-screen bitmap and stamped down as one image after that: every line of text, every glow, each tray, each card face, each button's body. Only what moves is drawn live.

On a GPU-accelerated canvas the round holds 60 fps at max combo with 120 particles in the air, for about 3 ms of the game's own work per frame. If a phone still cannot hold the frame rate, the stage steps its resolution down rather than stuttering.

The Android emulator is not a fair test of this. On it, even a bare full-screen canvas that fills one rectangle and 60 squares a frame manages 23 fps on the host GPU and 10 on SwiftShader, while the same test done in HTML gets 55 to 58 - the emulator's graphics translation is the bottleneck, not the game. Real phones composite canvases natively. Check a real one with ?fps.

---

How you get around

There is no tab bar. HOME / BOSS / PLAY / GEAR / ME along the bottom is the single most "this is an app" thing a screen can have. Games are places you move between: home is the hub, every door off it leads somewhere, and back takes you home.

	What is there
Title	The logo assembling itself, and TAP TO START - which is also the tap that wakes the sound
Home	Your character standing in the world, your rank and stars, PLAY, and three doors
The map	The trail. Tap a level and you walk there; it tells you about itself and you go in
Boss	The four bosses on a stage, one at a time, and a VS face-off before each fight
Gear	Your character up close on a pedestal, with the shop as a sheet underneath
Guide	The rulebook, as pages you turn
Settings	The cog on the home screen: account, background, sound, vibration, reset

Back is one rule everywhere. It closes whatever sheet is open; in a round it pauses, and from the pause it resumes; anywhere else it goes home; on the home screen it leaves the app. Nav.back() in js/panels.js is the single place that decides, and the Android app asks it rather than guessing.

Home

A game's home is where you see what you have got. Your character stands on a shelf on the board, a name sticker on, actually wearing what you chose: the shield on the off arm, the weapon in the near hand, and the pet you are walking with at their side. Every other pet you own potters about on the ground around them, so the collection lives on the home screen as creatures rather than as a row of icons. Tap your character and they jump; tap a pet and it hops.

The doors carry no subtitles. A red ! on GEAR means you can afford something; on DAILY it means today's round is waiting.

The hero is a marker doodle (see The characters below), chibi proportions on purpose - a big head and a short body, which is what the pets are, so the party looks like it came from one game. The figure is a composite, not thirty drawings: the shield and the weapon are laid over the figure at the points its hands are, in percent of the figure, so one set of numbers works at every size the game draws it.

Stars and ranks

A grade is a mark. Stars are the thing you collect - which is why every game that wants you to replay a level counts them. A letter tells you how you did; three empty stars tell you there is something still on the table.

Grade	Stars
S	3
A	2
B or C	1

Clearing a level is the achievement, so a pass at any grade is worth one. The other two are for doing it well. Twelve is everything the pack has, and they add up to a rank: Beginner, Sorter, Organiser, Pro, Master. A number going up is a score; a name going up is a reason to keep going. Both live in js/levels.js - RANKS, and Progress.stars().

---

What was wrong before

Three things were in the wrong place, back when this was five tabs of Map, Guide Book, Character, Battle and Shop:

• Saving your progress was on the Character page, in among the pets and the swords. Nobody looking for "keep my progress" opens a page about gear. It has its own screen now, and that screen says what it is for.
• The Shop and the Character were two tabs doing one job. They rendered the same list; you bought on one and equipped on the other.
• The Guide Book was a tab for ever. It is read once and come back to now and then, which is a button, not a fifth of the bottom bar. It kept its place in the first-run flow and gained a ? on the map, so it is still one tap away.

And one thing was simply broken: when the shop moved onto the Gear page it kept flex: 1; min-height: 0; overflow-y: auto from the days when it was its own screen. Nested inside another scrolling box it collapsed to nothing, so all twenty-six tiles were there in the page and none of them could be reached. The page had no clearance under the bottom bar either, so the last thing on it ended up underneath the bar.

Two things gained a home they never had. The background could only be changed from inside a round - you had to start playing something to change how the game looks - and the sound had no switch at all.

Reset asks first

Reset all progress used to wipe the save on a single tap, from a button sitting directly under the gear picker. It takes every level, every coin, all thirteen pets and your character's name with it, and if you are signed in it uploads the empty save to your account.

It now opens a popup that names what is lost rather than asking "are you sure", which tells nobody anything. The button that does it is red and says Delete everything, never "OK": a person tapping the loud button should already know what it does. Cancel, the tap outside, and every other way of dismissing it are all a no.

Panels.dialog() in js/panels.js is the general version of that, if anything else ever needs to ask.

---

Why it looks like this

Desk Day. The game is played on a cork board, and everything on it is a real thing from a desk. The design was drawn first, on Claude's Design canvas (Task Sorter game look), and the game was built to match it.

• The four trays are objects, not boxes. Do Now is a red metal in-tray with hazard tape across the front. Do Later is a desk calendar with a day ringed in red marker. Give Away is a stamped, addressed envelope. Drop is a wire bin already full of crumpled paper. Each is a different shape as well as a different colour, so the corners tell apart before you read a word - and for anyone who cannot tell red from orange. Each shows its own pile as the round goes on: more papers in the in-tray, days crossed off the calendar, letters behind the envelope, balls of paper in the bin.
• A task is an index card, handwritten (Kalam), taped down with washi tape: cream card, red margin, blue rules. A golden card is golden card stock, a frozen one is iced over, a burning one has a fuse along the top.
• The rest is stationery. The score is on a strip of masking tape, the clock is a kitchen timer, the combo is a rubber stamp that inks redder as it climbs, the reason for a miss is a note pinned to the board, buttons are tickets (PLAY), manila folders (the home doors) and kraft card, coins and stars are on price tags, your name is a HELLO MY NAME IS sticker, your rank is coloured in on a ruler, the map is red string between pinned discs, each boss is on a WANTED poster, and the results are a report card.
• One light, one shadow. Everything casts the same hard brown shadow down and to the right, as if one lamp is above and to the left. No glows, no gloss, no blur, no rounded app cards.
• Three typefaces, each with one job. Bungee for anything loud, Kalam handwriting for anything you read, IBM Plex Mono for typed labels. All three ship with the game (assets/fonts/).
• The characters are marker doodles. The hero, the gear, the bosses and the pets are drawn the way you would doodle on the desk: a wobbly ink line, with the colour printed slightly off it.

The props are drawn in js/desk.js (trays, index card, card back, timer, note) and js/gfx.js (tape, pins, the rubber stamp, the paper panel every box uses). The sheets get the same look in css/game.css (Desk Day block).

Writing cards (the important part)

Open js/cards.js. Copy a line and change it:

{ text: 'Homework due 8am tomorrow',
  box: 'now',
  why: 'Important, and the deadline is before school.' },

box is one of 'now', 'later', 'give', 'drop'.

The fair card rule

A card must have exactly one right answer. Give it a deadline AND the stakes, so the player is judging, not guessing.

• BAD — 'Essay' — could be any box
• GOOD — 'Essay due in 2 weeks, 20% of grade' — clearly Do Later

The why is shown on the END SCREEN, in the "What you missed" list, not during the round. The right corner is never shown - not on a fail, and not on a pass either. Being handed the answer teaches nothing: you read it, nod, and forget it by the next round. You are told what you chose and why that was not it; working out what it should have been is the part that is actually the game. A banner mid-round is unreadable at speed and it covers the card you are meant to be looking at. This is still the line that does the teaching, so write it properly. If you cannot write a why that convinces you, cut the card.

There are 116 cards: 32 house, and 28 each for school, phone and out.

Give Away must not be spottable

The corner people find hardest was also the most guessable. Every Give Away card named somebody - a brother, a friend, "anyone can" - and almost nothing else did, so a player who swiped bottom-left whenever a human appeared in the text scored 60% without reading the card. That is pattern matching, not judgement, and it is the one corner the game most needs to teach.

Fixed from both ends: a dozen Do Now, Do Later and Drop cards now mention somebody without being anyone else's job ("Everyone else revised, your test is tomorrow"), and four Give Away cards name nobody at all ("A reply is needed today and it is not your thread"). The tell is down to 42%, against 25% for a coin flip.

When you add a card, keep it that way: a person in the text must never be a reliable signal for a corner.

But do not chase the number. The first pass at this rewrote "Learn to cook one meal properly" into "Get someone to teach you one meal properly" - which moved the metric and pointed the card straight at Give Away. Three others went the same way: a card where the person named could plausibly do the task is a card with two answers, and the FAIR CARD RULE outranks the tell every time. Add the person; never hand them the job. Inside a theme the four corners are the same size as each other, or one corner starts repeating before the others do.

---

Levels

The Day to Day pack is four levels, defined in js/levels.js. Beat one to unlock the next. Your best grade is saved and shown on the marker itself.

The map is a winding trail: level markers sit at the x and y percent set on each level, so it stretches to any phone. Move a marker by changing those two numbers and redrawing the trail path in index.html.

#	Level	Place	Clock	Cards	Corners	Pass
1	In the House	home, chores, cooking	none	easy only	4	60%
2	At School	homework, tests, group work	60s	easy + medium	4	65%
3	On Your Phone	messages, apps, scrolling	75s	all three	4	70%
4	Out in Town	buses, shops, friends	90s	medium + hard	4	75%

The order is deliberate. Home is where the answers are most obvious. School adds other people, so Give Away starts to matter. A phone is the hardest thing in anyone's life to sort, because every notification feels urgent. Out in town is last: real deadlines, other people, and no easy cards left.

Three lists on each level control what turns up, and together they are the whole difficulty ramp:

• theme - which place you are in, so Level 1 is nothing but house tasks
• boxes - which corners a level uses. All four are live from Level 1; the easing-in comes from tiers, not from hiding a corner. Nothing uses a short boxes list at the moment - it is there so a future level can, and a corner left out is removed from the screen rather than greyed out
• tiers - how hard the cards are to judge (see js/cards.js)

That is the teaching built into the progression.

Why passing is accuracy, not score

Score swings enormously - a x8 streak with Perfect bonuses is worth more than ten times a careless sort. A near-perfect test run scored 249,708 against an early target of 3,000. Any score target is therefore either trivial or impossible, so passing tests the thing the game is actually about: getting them right, and not drowning. Score is what goes on the leaderboard (once HUAWEI Game Service is connected); the grade comes from accuracy and your best streak.

---

Scoring

Points reward accuracy and steadiness, never how many cards you mashed through.

points = (100 + speed bonus + perfect bonus) x streak multiplier

• Streak rises with every correct sort, up to MAX_MULTIPLIER (8)
• One wrong sort resets it to x1 — that is the real punishment
• Speed bonus — up to +100, the faster you sort
• Perfect — correct and under 1.2 seconds — +150 and a chime
• Final rush — the last stretch of a level pays double

Grade comes from accuracy and best streak only:

• S — 95%+ accuracy and a 12+ streak
• A — 85%+
• B — 70%+
• C — below that

You cannot win by spamming swipes, which is what makes a leaderboard mean something.

Losing

There is only one way to fail a level: finish below the accuracy bar.

A failed run is not recorded. No grade is saved and the marker on the map stays blank, because a best grade is the badge for beating a level - writing a failed one in there put a C on a level nobody had passed, and made it look finished from the map.

There used to be a second - a desk meter that filled up behind you and buried you if you fell behind. It was removed. Everything it touched (card spawning, deskMax, the armour "desk space" stat) went with it, and pets and armour were rebuilt around the clock and accuracy instead.

The final rush

The last stretch of a level pays double - the screen washes red, the music speeds up, and the score tape reads RUSH x2. Its length is min(RUSH_SECONDS, level length x RUSH_SHARE) - capped at a quarter of the level. Without that cap a 45 second tutorial level would spend 20 of its 45 seconds in rush mode, which is what made Level 1 unfairly brutal at first.

---

Boss

A 1 v 1 sorting duel against the computer — not a separate fighting game. Both of you sort the same cards:

• You sort one right → you hit them (12 damage, 18 if you were fast)
• You sort one wrong → they hit you (10 damage)
• They sort one right on their own clock → they hit you

Two health bars, a 60 second clock. First bar to empty loses; if the clock runs out, whoever has more of their own bar left wins.

The bosses

Boss	Is	Sorts	Accuracy	Damage	Health	Trick
Sticky Steve	a sticky note with a face	one every 2.6s	60%	9	100	Sticky Fingers - glues the card you are holding; tap it free
Clip Carla	paperclips in her hair	one every 2.0s	72%	10	120	Reshuffle - swaps two of your trays
Inbox Ivan	buried under his own paperwork	one every 1.5s	82%	11	140	Inbox Flood - the words on your trays vanish for 6 seconds
Deadline Dan	an alarm clock, not a person	one every 1.1s	92%	13	160	Deadline - this card and the next two catch fire

Every boss has one trick, and it is the one their name promises. Each is a twist the map already taught - frozen cards, swapping trays, burning cards - turned up, so a boss fight tests what the levels taught. Ivan's blackout is the only new one, and it only takes away words you should not need by then: the colours, icons and patterns stay. The first trick comes 4.5 seconds in, so you meet it in every fight, then every 9 to 11 seconds.

They talk. A speech bubble under the boss: a line when the fight starts, when they use their trick, sometimes when you land a big hit, and when one of you goes down. They keep quiet while the reason for a miss is on screen. The lines are in lines on each boss.

The later bosses have more health, so their fights last long enough for the trick to matter - at full speed a player could take a 100 HP boss apart in six cards.

Each boss has its own drawing, named by sprite on the opponent. They are all named after the thing that buries people, so each one IS that thing - you can tell them apart by silhouette before reading a name. A boss added without a sprite falls back to the plain stand-in figure.

They unlock one at a time. Winning pays 120 coins plus 60 per boss; losing still pays 20% of that, so a hard fight is never a total waste.

Your weapon from the shop multiplies your damage, so gear matters here more than anywhere else.

Everything is in js/battle.js — adding a boss is one entry with a speed and an accuracy.

The screen says Boss; the code still says battle. A "battle" in the source is the duel mechanic - two health bars, one clock, the same cards - and it is what game.js switches into with mode = 'battle'. Boss is what the four of them are to a player working up the ladder. Renaming the mechanic would have meant touching the scoring path to change nothing anybody can see.

---

The Gear screen

Your character, large, standing on a pedestal, with the shop as a sheet underneath. Tap anything and the figure above changes outfit in a puff of smoke - buy a shield and you watch it appear on their arm. (The old Gear page redrew the shelf on a purchase and not the character, so the figure kept wearing last week's shield until you left the page - which read exactly like the purchase had not registered.)

At the top of the sheet: your character's name (tap to type) and the full set banner. At the bottom, what your gear actually does:

• Clock speed — how fast your round runs out (from your pet)
• Coins — what you earn at the end of a round (pet + full set)
• Mistakes covered — wrong answers that will not count (from your armour)
• Points — what each card is worth (from your weapon)

js/shop.js draws what is for sale, js/hero.js the readout, and Scenes.gear the character - all reading the same item list, so adding an item to js/shop.js makes it appear in every part of the screen at once.

---

The shop

On the Gear screen, under your character: one kind at a time, on tabs - Pets, Armour, Weapons. All three used to be stacked down one long page, which is a catalogue; a game's shop shows you one shelf and lets you flip between them. Each item stands on its tile with a shadow under it; tiles you can afford wear a gold price tag, the one you are wearing goes green, and anything still locked is a silhouette that says what unlocks it.

Three kinds of gear, and every item changes how a round actually plays — nothing is decoration.

Kind	What it does	Items
Pets	More coins, but a faster clock	Thirteen, from the Duck to the Phoenixling - see below
Armour	Covers wrong answers so they do not count	Wood, Silver, Gold, Diamond, Diamond and Gold Shield
Weapons	More points, and more battle damage	Dagger, Longsword, Gold Sword, Bronze Blade, Winged Blade

One of each can be worn at a time. Everything is defined in js/shop.js; fast, coin, block and mult are the only four things an item can do, so adding an item is one line.

The pet collection

Thirteen pets, brought over whole from MyTask with their own art and their own rarity. They are doodles like everyone else (js/doodle.js); their names, prices and bonuses live in js/shop.js.

Rarity	Pets	Gate
Common	Duck, Kitten, Mushroom, Hatchling, Bunny	none - buyable from the start
Rare	Adventurer, Teddy Bear, Penguin	reach level 2 or 3
Epic	Zombie, Flame Sprite	reach level 3 or 4
Legendary	Polar Bear, Dragon, Phoenixling	beat a boss

MyTask gave each pet an ability worth some percent of XP or coins. Task Sorter has no XP, so every ability lands on coins - and here a pet also shortens your clock. The ladder runs both ways at once: the further down you buy, the more you are paid and the less time you get to earn it in. The Phoenixling pays +60% and cuts a 60 second level to 39. That is on purpose: the best pet in the game is not automatically the best pet to wear, which is the only thing keeping thirteen of them from being one of them and twelve trophies.

All three legendaries sit behind a battle rather than a price, so the collection cannot be finished by grinding coins alone. That is what Battle mode is for.

Each slot has a different job, and the jobs come from how you pass a level. Passing is decided by accuracy alone, so armour protects your accuracy, a weapon grows the score a good round earns, and a pet pays extra coins but shortens the clock, which means fewer cards and a smaller score. A slot that does not help you pass, or pay you for not helping, is decoration.

Giving one item its own picture

By default every item in a group shares its group's picture and is told apart by a colour tint. An item can override that with its own sprite:

{ id: 'pet3', name: 'Sleepy Sloth', ..., tint: 0, sprite: 'sloth' },

Set tint: 0 at the same time, or the tint will recolour your art.

The named sprite either comes from a grid in js/sprites.js or from a real PNG listed in SPRITE_OVERRIDES. To swap the hand-drawn Sleepy Sloth for real art:

1. Save the image as assets/sprites/sleepy-sloth.png
2. Uncomment // sloth: 'assets/sprites/sleepy-sloth.png' at the top of js/sprites.js

Nothing else changes — the shop, the Character slots and the picker all pick it up.

Unlocking gear

Not everything is buyable from the start. Items carry one of two gates:

• needsLevel: 3 — you must have reached level 3 on the map
• needsRival: 2 — you must have beaten the second boss

A locked tile shows the reason on its price tag ("Reach level 3", "Beat Clip Carla") rather than just going grey, so you always know what to go and do. The top item in each group is gated behind a boss fight, which is what gives the Boss screen a purpose beyond coins.

There are 24 things to buy: 13 pets, 5 shields and 5 weapons, plus an empty slot in each group.

The full-set bonus

Wear a pet and armour and a weapon at the same time and every coin payout goes up by 25% — levels and battles both.

It is deliberately about filling all three slots rather than owning expensive gear, so the cheapest full set (Duck + Wood Shield + Dagger, 340 coins) earns the bonus just as well as the priciest one. That gives a new player something reachable to aim for instead of grinding for one costly item.

The Gear screen shows a gold FULL SET banner when it is active, and a greyed-out reminder when it is not. setBonus in js/shop.js controls it.

Coins

You earn coins by finishing a level:

coins = score / 500  +  grade bonus (S 50, A 35, B 20, C 8)

Both numbers live in COIN_REWARD in js/shop.js. A typical good round pays roughly 100-150 coins, so the cheapest item is about one round away and the best is a proper grind.

The divisor was 200 until a full play-through test: a clean Level 1 paid 288 coins, which bought the cheapest item in every slot at once and left the whole shop about two rounds away. Score climbs with your streak AND with how many cards you got through, so it runs away from you on the longer levels - the divisor is the thing holding the payout down. Still worth re-checking once real people play it.

---

Tuning

Every number worth changing is in TUNING at the top of js/game.js: round length, points, streak cap, wrong-answer pause, rush settings.

The wrong-answer pause is 350ms and it is ANIMATION time, not reading time - just long enough for the card to fly off and the screen to flash red. It used to be 1800ms on Level 1 so the player could read a banner; the banner is gone, so the wait went with it.

---

The characters

Everyone with a face is drawn in js/doodle.js - the hero, the ten pieces of gear, the four bosses and the thirteen pets. Each is a short list of polygons, ellipses and pen strokes on its own little grid. The first time one is asked for, it is inked once into a canvas big enough for a phone screen, and from then on it is an ordinary sprite: Gfx.sprite('steve') and Sprites.apply(el, 'duck') hand it out under the name the pixel art had.

How a shape is inked. The colour goes down first, nudged down and to the right. Then the outline, on the true spot, with every edge cut into short steps and each step pushed about a little. The wobble is worked out from where the point is, so the same shape always wobbles the same way and nothing shimmers. Eyes and their shine are solid ink and sit exactly where they are drawn.

A hit shows on the face. Each boss has a second drawing, steve_hurt and so on, with the eyes screwed shut; it is shown while they flash from a hit.

Pets bob instead of walking frames. On the stage a pet breathes and bobs on the same frame counter a sheet used to step; in the shop sheet CSS does the bob (.pet-ink), and stops it for anyone who asked for less motion.

Adding a pet is a shape list in PETS in js/doodle.js (drawn facing right on an 80 x 72 grid; it is flipped to face left like the old sheets) and one entry in PET_SHEETS in js/pets.js for its name and speed.

---

One thing done deliberately

The round clock runs on a wall-clock interval, not requestAnimationFrame. rAF stops dead when the phone screen locks or the player switches apps, which would freeze a round instead of ending it. Everything reads Date.now(), so the timer stays honest even if the app goes to the background.

---

Not built yet

• Online Boss. Shown on the Boss screen, clearly marked Coming soon, and tapping it says so. Two real players need a server to pair them and pass their moves; the game has no server. There is deliberately no pretend "searching for players" screen, because faking a real opponent with a computer one is lying to whoever is playing.
• Give Away characters (pick a teammate to hand the task to)
• Rush mode (3x)
• HUAWEI Game Service, connected. The game is built for it - every badge is an achievement id, every daily and level score a leaderboard entry, all passed through js/services.js to GameServices.java in the app. What is missing is the part that cannot be in a repository: a HUAWEI developer account and an AppGallery Connect project. android/README.md has the steps.
• Office pack

---

Contest checklist

• Register before 13 October
• Collect 20 HUAWEI GameCenter IDs from 20 different devices. This is the one on the list that is not code and not a document: it is twenty people with twenty phones. It is compulsory, it waives the RM20 fee, and it is what teams run out of time on. Start it first.
• Confirm with the Category A group that the APK satisfies the "Mobile Game App Product / Prototype" requirement
• Presentation slides (ppt, max 40) — needs Issue Clarification and SDGs. The SDG answer is in the game as well as on the slide: see Why this game exists in the Guide Book
• Video, max 3 minutes, max 60 MB, English subtitles if not in English. store/gameplay.mp4 is 53 seconds of real play to cut from (no sound - record the soundtrack separately, or play over it)
• Store screenshots, 1080 x 1920 - store/screenshots/
• Store text: name, short and long description - store/listing.md
• An installable Android app — android/, about 4 MB
• Under 100 MB — the APK is about 4 MB, the game itself under 1 MB
• Run the APK. Done on an Android 15 emulator (Pixel 7, API 35): save survives a cold start, touch and the back button behave, portrait holds, it clears a notch, 60 fps, works with the network off. Three bugs found and fixed. See android/TESTING.md
• Run it on a physical phone. The emulator covered the logic; it cannot tell you about a cheap chipset or how a swipe feels - and since the game became a canvas game, the emulator is no measure of its frame rate at all (see What a frame costs). Open it with ?fps on a real phone and check the number. An emulator will also NOT do for the twenty IDs above; those say twenty different devices and mean it
• Final submission 1 November, 11:59pm

---

The soundtrack

There is no music file. Every note in js/music.js is an oscillator, the same bargain as the rest of the game - the sprites are colour grids and the worlds are drawn maths.

That matters here more than it is clever. A borrowed loop in a public repository is a borrowed loop's licence to honour. A minute of even middling MP3 is bigger than everything else in the game put together. And a soundtrack that has to arrive over the network is not there for the first round, which is the round somebody judges you on.

It keeps time against the audio clock, not setTimeout. A coarse timer wakes every 25ms and books whatever falls inside the next 120ms directly with the hardware clock, so the timer running a frame late changes nothing. Scheduling each note with its own setTimeout drifts audibly inside two bars.

Four chords - C, G, Am, F - and a melody built only from the C major pentatonic, five notes that cannot land wrong on any of them. Chosen because this loops for as long as somebody is on the screen, and music that repeats must have nothing in it that grates on the ninth time round. Five arrangements of the same phrase, so moving between them sounds like one game:

Tune	Where	How
title	the title screen	the menu's tempo with the arpeggio running
menu	home, map, gear, bosses	slow and thin, for screens you read
play	a round	faster, with a hat and a kick
rush	the final rush	faster again, a kick on every beat
battle	a boss fight	the same melody over Am F C G - every note of the C major pentatonic is also in A minor, so it fits unchanged and the whole thing turns tense

It follows the scene (the stage tells it), stops on the Settings sound switch along with the effects, and pauses on a hidden tab - on a phone that is battery spent behind a locked screen.

Nothing makes a sound until you have touched the screen. A browser tab enforces that itself; an Android WebView does not, and for a while the game sang over the launcher animation. UI.sound keeps that gate itself now, and the title screen's TAP TO START is the tap that opens it.

The sound effects

js/sfx.js. Still no files: each effect is built the way a sound designer would build it on a synth, from two or three layers - a click on the front so it has an edge, a body that carries the pitch, a tail of filtered noise so it sits in a room. A card landing in the right tray is a pluck and a soft thud of it arriving; a mistake is a low buzz and a dull knock. A compressor on the whole effects bus keeps twenty coins landing at once from clipping.

The right answers play a tune. Each correct sort in a streak is the next note up the C major pentatonic, the same five notes the melody is built from, so they can never clash with it. A long streak climbs a scale you can hear; break it and it starts again from the bottom. That one idea does more for "keep the streak going" than any number on the screen.

---

The Android app

android/ wraps the game into an APK. About 4 MB.

There is no second copy of the game in there. The obvious approach is to copy index.html, css, js and assets into the Android assets folder and commit them, and from that moment there are two games in one repository and one of them is always the stale one. android/app/build.gradle stages the repository root at build time instead, so the app and the website are built from the same files and cannot drift.

Nothing in js/ changed for the app to exist, and nothing in it knows it is inside one. One Activity, one WebView, and one optional bridge (GameServices, for HUAWEI Game Service) that the game treats as a no-op when it is missing - so there is still only one game to test.

It is served over https, not loaded from file://. The usual way is loadUrl("file:///android_asset/index.html") and it mostly works, which is the trap: a file:// page is an opaque origin, where local storage is unreliable and every request is cross-origin from null. This game keeps every scrap of progress in localStorage. WebViewAssetLoader serves the same files from a real secure origin that never leaves the phone, so the app behaves exactly like the browser the game was tested in.

Back asks the game. The system back button calls Nav.back() in the page and only closes the app when the game says there is nowhere left to go. It used to find whichever of four HTML back buttons was showing and click it; the game is drawn now and those buttons do not exist.

It buzzes. navigator.vibrate works inside a WebView once the app holds the install-time VIBRATE permission - a short tap when a card lands, a double knock on a mistake. It asks the player nothing, and Settings turns it off.

Build it with ./gradlew assembleDebug, or take the artifact from the Build APK workflow in the Actions tab. See android/README.md.

---

Backgrounds

Four desks to play on, picked in Settings or from the pause menu, and painted in js/world.js:

Id	Name	What it is
cork	Cork Board	a pinboard in a wooden frame - the default
wood	Wood Desk	planks and grain
mat	Cutting Mat	green, ruled in centimetres
chalk	Chalkboard	dark, half rubbed out

Each is painted once into an off-screen canvas and stamped every frame, with a few specks of dust drifting in the lamp light. Saves from before the desk say space, sakura, forest or falls; world.js maps those onto the four surfaces, so nobody's choice is lost.

The first round

The very first round teaches - without words. The first time anyone plays Level 1, the first four cards are one for each corner; the tray each belongs in glows and a hand shows the drag. After the fourth it is a normal round. It is remembered as tipsSeen.tutorial, so it only happens once.

There are no first-time notes anywhere else. Game screens carry names and numbers only - no hints, subtitles or "tap to..." lines. The Guide Book holds the reading, for anyone who opens it.

---

Online Boss (not built yet)

The boss stage has a fifth page after Deadline Dan, Online Boss, marked Coming soon. Tapping it opens a note that says plainly it is not ready yet and why.

It is not a working feature. Playing a real person needs a server on the internet to pair two players and pass their moves between the phones, and this game has no server for that - the game itself is files that run on the phone, and only the optional cloud save goes online.

There is deliberately no pretend matchmaking: no fake "searching for players..." spinner and no computer opponent dressed up as a human. Anyone tapping it is told the truth.

Building it for real would mean: a hosted server (or a service such as HUAWEI's own game services), player accounts or at least anonymous IDs, a matchmaking queue, sending both players the SAME shuffled deck so it is fair, and deciding what happens when someone's connection drops mid-round.

---

Putting it online

The repo is committed and ready. It is a static site - no build step - so a host only has to serve the folder.

Done: https://github.com/ZenBen5173/task-sorter

git push          # after the first push, this is all it takes

Deploy at https://vercel.com/new: pick the repo and press Deploy. Framework preset Other, no build command, no output directory - vercel.json already says what is needed. Once it is linked, every push deploys itself.

Commit author

Commits use [email protected], not a real address. GitHub rejects a push that would publish a private email (error GH007), and this repo is public, so the forwarding address is the right thing to use.

archive/ (the old Focus Village build) is in .gitignore, so it is not uploaded and does not count towards the competition's 100 MB.

---

Accounts and saving online

Make an account with a username and a password. Progress is then kept on a server, so the same account picks up where it left off on any device.

No email is ever asked for. The username becomes [email protected] behind the scenes. .invalid is reserved by RFC 2606 so it can never be registered by anyone and nothing can ever be delivered to a real person. This is a game for children; the less personal information it holds, the better.

The game still works with no internet. All of this sits on top of the ordinary browser save. If the server cannot be reached the game carries on exactly as before.

Which save wins

Signing in to...	What happens
an account never played	the progress on this device is uploaded to it
an account with progress	the account's progress replaces what is on this device

Blunt on purpose. Merging two saves would have to guess, and a guess that silently deletes somebody's coins is worse than a rule you can predict. The game says out loud which way the save went.

The server

Supabase project task-sorter (grhnczwqilayvxfaypmj), Singapore region, free tier. One table, profiles: the player id, their username, and the whole save as JSON.

Row Level Security is on, and the three policies only ever match auth.uid() = id. A player can only read and write their own row, and the database enforces it - not the game - so a tampered copy of the game cannot reach anyone else's save.

The key in js/cloud.js is a publishable key. It is meant to be public and grants nothing by itself.

Before accounts will work

New Supabase projects require a new account to confirm its email address, and a .invalid address can never receive one. Turn that off once, in the dashboard:

Authentication -> Sign In / Providers -> Email -> "Confirm email" OFF