Abdulgafar Abdurrasheed

Changelog

• fixed graph bugs, and logic.

While still not completely Okay, I’m happy with this for now, and would come back to it later i guess. Still needs UI, and logic improvement

Changelog

• Updated from tracking with time, to tracking per character
• Moving graphing logic from time based to character based

Works Now i guess. The only problems are:

• The graph has too much space at the bottom. The graph should almost be touching the X-axes
• The Graph Line is too thin, and points are too sharp. Should be fatter and wavy
• It should also have it’s own page. The end screen can’t render all those components
• Still has bugs to be fixed.

Changelog

• Started building an interactive accuracy graph component

Got the Graph working, But it’s Buggy, and doesn’t work well. This is not entirely accurate, the fall point be the point that has the hoverable interactive red dot. I’m currently tracking based on the time it checks for accuracy, and that explains the inaccuracy, cause it might not get data the exact second the accuracy goes down. Now i think a better approach would be to plot the graph as “Characters” against accuracy as opposed to time against accuracy. Such that it tracks every correct character, and once there is a wrong character, it calculates the accuracy(Not get now, it calculates it itself based on how we already calculate accuracy), and plots it. Also, axes labels should be included i guess

Changelog

• Populated the paragraphs

Changelog

• Fixed all ghost tracker bug. ghost tracking now works perfectly.
• update ghost data structure and add paragraph count tracking

There were multiple errors in the ghost tracker/racer logic, and it was a headache to fix(a fun headace) First issue was when the ghost reaches the next paragraph before me, it literally disappeares. I think it might’ve been teleporting to its own different paragraph lol. Anyways, i found out that the problem was from the Ghost not knowing where to render after a paragraph finishes so it just crashes. My fix was to use a 2d, instead of 1d, which saves both the paragraph index, and Character index. That spectacularly failed tho, as Since the ghost saves paragraph information of the PB run too, when you have paragraphs of different lengths, it only counts the indexes of it’s own paragraph(wether first or second or whatever), and then moves on to the second paragraph. For example, say in the PB run, my first paragraph was 6 characters second was 13, and 4th was 7 and in this one, my first is 10, second 2, third 6. here is waht the ghost does. on the first paragraph of the current session, instead of coounting 10, it counts 6, moves on to the next paragraph, and the radar goes “Ghost is one paragraph ahead” Then when i get to the second paragraph which is just 2, compared to the 13 of the PB run, i get there, finish my own 2(probably see the ghos if it was slow to type those 2 characters before i caught up), and then i am 1 paragraph ahead, with the ghost still counting 13, cause that is the data it has. I don’t know if you understand me. Lastly, the fix was just saving every all keystrokes, and rendering it at the time it came. Don’t let me Bore y’all with details.

Changelog

• Ghost rendering already working
• initialised variables for a ghost racer feature

Implemented a Ghost racer/tracker Feature that tracks your current position/index at every millisecond, and saves it if you finish higher than your Personal best run(i.e. It tracks your position every millisecond for your personal best run). Then, in your current session, you have a ghost like stuff, based on your Best ever run, chasing you down. It is currently buggy tho, still fixing t, but had to devlog the progress.

Changelog

• populating the paragraphs
• populating the paragraphs
• confetti turned off by default

Spent the last hour actually populating the paragraphs for each theme

Changelog

• tweaks and updates. All milestones now follow current
• Makein the #1 follow the Now when the Now beats the #1
• scaling logic to the wpm bar
• completed wpm tracking bar
• made the leaderboard and heatmap render differently from the rest of the stuff on the end screen
• bug fixes

T’was a Long productive day. Got many things working, i’m glad. Added a WPM bar, and made the wpm bar now has labels that follow you as you beat your last score, personal best, and global best.

Changelog

• added keyboard heatmap that shows error keys
• added streak, and pausing with esc key
• fixing user review problems. added space validation, and brightened unfocused words

Added Keyboard Heatmap Viewing. You can now see which keys you missed, which keys you’ve mastered, and all of that, and share it with your stat Card

Changelog

• Added confetti toggle button

A former voter complained about the confetti being too much, and and others liked it, so I added a toggle button, that saves your preference to local storage.

Changelog

• more paragraph population
• Populating the paragraphs

Basically spending time researching the various themes, and populating the paragraphs. this is going to take quite a bit of time imo.
PS: the underwater easy paragraphs is just sebastian the crab’s “Under the sea” from Disney’s “the little mermaid” 😅. I guess that’s not what it’s meant to be tho. i’ll create a separate “Disney” theme later

Changelog

• added sharable stat card. Copy to share

I legit don’t know how this took 1 hour, but i guess some time from the last devlog carried over. Anyways, you can now share stat cards featuring WPM, Accuracy, and maxCombo to your freinds.

Changelog

• tweaks and updates
• feat: implement faux-live leaderboard polling
• fixed bug, and mad name change/update happen immidiately
• using uuid instead of ANON for users who haven’t changed name
• Rename useLeaderBoard.ts to useLeaderboard.ts
• fixing bugs, trying to deploy
• Completed the Leaderboard feature, and fixed CSS bugs that was hidinng the Overdrive Label
• add useLeaderboard hook for leaderboard functionality

Yeah…. The leaderboard is finally complete, and Boy was that Harder than expected. Spent 1 hour(untracked BTW) debugging why my netlify deploy with github repo wasn’t working, and finally saw that it was a Casing issue. Anyways, it works now, and i’m glad i’ve gotten that over with.

Changelog

• add useLeaderboard hook for leaderboard functionality
• implement leaderboard API

Changelog

• Redis integration for leaderboard integration

Started work for the addition of a LeaderBoard. Want to do this without signup/Auth, so the ides is: Each local storage is assigned a unique ID, that ID is stored in a database, along with the relevant stats, and anytime a person goes to the website, the stats saved in that localstorage’s ID will be loaded. I didn’t know how feasible it was, so i asked on Stack Overflow, and i goot really good, and helpfull answers. Was going to use vercel KV, but i guess redis upstash was better for me, since i don’t Host on Vercel

Changelog

• Ui updates.
• completed theming.

Theming Now complete. Every theme has Custom UI, and Paragraphs. Currently, it’s just background color, and particle changes.
I will add Sound changes, and probably an animated/video background too, but later.
I haven’t written the paragraphs. would probably take hours(I’m not just going to copy and paste paragraphs. That’s bad for hour farming 😅)

Changelog

• More custom theme styles.
• added custom CSS for each theme
• added theme selector to the Intro Overlay
• Added paragraph theming
• started integration of multiple theme feature.

Basically started the addition of custom CSS, and paragraphs per theme. currently supports 4 themes:

• Cyberpunk (The OG)
• Underwater
• Retro
• Fantasy

Haven’t wired the changes to the UI yet. Would do that by the next devlog i guess

Changelog

• Added difficulty selection to end screen, and added space clicking to move to the next word
• Add difficulty selection and adjust game mechanics for varying difficulty
• removed the line spacing that was causing mushy text

Basically added difficulty modes easy, medium, and hard. Medium introduces spaces and Case differences(upper/lower case). Hard introduces special characters, and Randomness.

Changelog

• completed gallery view feature
• gallery view
• Gallery save: 200×200 JPEG thumbnails to localStorage (max 20)
• Slide-out panel with 2-column thumbnail grid
• Delete artwork
• Gallery button in TopBar with cyan badge showing saved count
• Empty state message when gallery is empty

Changelog

• Separate the Guide Line rendering component
• added dynamic circle brush cursor
• added keyboard shortcuts
• 8 keyboard shortcuts
  • Ctrl+Z for Undo
  • Ctrl+S for Export/Download
  • G to toggle guide lines on/off
  • M to toggle mirroring on/off
  • N to toggle glow on/off
  • [ to reduce strokess
  • ] to increase strokes
• Ctrl+S overrides browser “Save Webpage” → exports artwork instead
• Dynamic brush cursor preview (size + color + glow matches settings)
• Extracted GuidesOverlay.tsx with center pivot dot

Changelog

• added toast component
• completed component separation
• Extracted ColorPicker
• Extracted BrushSlide
• Extracted SymmetryControl
• Extracted ToggleGroup
• Built Toast.tsx with auto-dismiss timer

Changelog

• Separate the tool palette component
• Separate the top Bar component
• Start splitting components, starting from the canvas
• Extracted Canvas.tsx
• Extracted TopBar.tsx
• Extracted ToolPalette.tsx
• App.tsx reduced from ~200 lines to ~80 lines of JSX

Changelog

• Add faint guide lines
• added toggle buttons for glow, mirror, and guides, added symmetry axes number changer
• Symmetry axes stepper. Steps of 2, range 2-32
• Toggle group Buttons for glow, mirroring, and guide lines
• DOM-based visual guide lines (excluded from PNG export!)
• Guide count adapts to symmetry count + mirror state

Changelog

• added brush change size slider to tooolbar
• add color picker
• added toolbar placeholder
• added Png export, and TopBar with buttons
• Floating glassmorphism toolbar at screen bottom
• Color picker
• Brush size slider
• Scrollbar-hide CSS for mobile overflow scroll

Changelog

• added Png export, and TopBar with buttons
• PNG export with timestamped filename
• Toast notification state for export feedback
• TopBar UI
• Undo button (disabled when stack empty, Lucide icon)
• Clear button (with undo safety net)
• Export button (white, glowing, hover:scale animation)

Changelog

• finished undo system. ctrl+ z for undo
• implement undo/redo
• saveState() snapshots canvas to data URL before each stroke
• undo() clears canvas, restores previous snapshot
• clearCanvas() wipes with undo safety (saves before clearing)
• Ctrl+Z / Cmd+Z keyboard shortcut for undo

Changelog

• added mirroring, and glow features
• Radial symmetry engine. strokes replicated N times around center
• ctx.translate + ctx.rotate math for center-origin symmetry
• Mirror reflection, doubles every axis
• Neon glow: canvas shadowBlur scales with brush size

Changelog

• Basic line rendering now working
• added drawing start and stop handlers, cleared the unnecessary hook
• create pointer coordinate extraction
• getCoordinates() unified helper mouse + touch
• startDrawing / stopDrawing lifecycle
• Basic single-stroke drawing engine
• Wired all 8 event handlers to canvas
• First visible drawing on screen!

Changelog

• create the canvas to fill the background, and add dimensions
• create the canvas to fill the background, and add dimensions
• add types and constants
• Project initialisation complete
• Installes tailwind and lucide-react
• Initialised the project
• Defined TypeScript interfaces
• Created color palette constant
• Set game defaults
• Built minimal App shell with all state hooks
• Initialized full-screen canvas with background fill

made the tour available for anyone, signed in or not.
You don’t have to create an account to know what the project is all about now.

Changelog

• Added ending stat page, and removed some errors preventing build

Final Devlog before first ship I guess. I really hope this one does well, if not, I go just actually give up

• actual paragraphs
• reponsiveness styles
• Tweaks and Updates
• readme
• More tweaks and updates

Changelog

• More tweaks and updates
• Adding some styles, Bug fixes, Tweaks and updates
• add SpeechSynthesis callouts at combo milestones
• SpeechSynthesis combo callouts at milestone combos
• useSoundEffects hook wrapper
• Super Saiyan global CSS theme (green→pink color shift on everything)
• Scan beam pulse animation for OVERDRIVE word display

Changelog

• more sound effexts
• error buzz and word completion sound synthesis
• Add ‘Thock’ Audio

**Sounds added: **

• playThock()
• playError()
• playWordComplete()
• playSuperSaiyan()
• playGameOver()

Changelog

• added more intro styles.
• visual effects components added to app.tsx
• particle explosion system for completed words
• created the background canvas
• BackgroundFX canvas with floating particles and moving scan line
• word explosion system (dot + character particles)
• Intro overlay CSS
• Matrix rain CSS with columns of falling katakana with staggered timing

Changelog

• wiring all to App component

• intro sequence

• ame over screen with rank tiers

• EndScreen with 6-tier rank system (N00B → CYBERDEMON)

• IntroOverlay with 4-step tutorial

• Wired ALL 6 components into App.tsx

• Hidden input pattern for fullscreen keyboard capture

• Screen shake on error

Changelog

• Built Combo display/animation
• Built the animated health bar.
• Built the live stats display component
• StatsBar with animated WPM flip counter
• HealthBar with 3-tier visual escalation
• WordDisplay with character-level correct/wrong/cursor rendering
• ComboMeter with MAXIMUM OVERDRIVE rainbow cycling
• Level badge with spring pop animation on level-up

Changelog

• add end screen stats layout, rank display, and restart button
• input display and end screen card
• combo meter bar with super saiyan effects
• Word display container with glass-morphism
• Character states: correct (green glow), wrong (red shake)
• Combo meter bar with hot/fire color escalation
• MAXIMUM OVERDRIVE label inside combo bar
• Terminal-style input display with “>” prompt
• Complete end screen

Changelog

• add health bar styles and animations
• added base styles for the stat ber
• game header layout and neon logo glow
• added the theme/overlays with standard css
• app layout, and animations with standard css
• Adding UI to the game engine
• finished the Game engine Hook
• word completion detection, and moving on to a random paragraph
• get the user’s input, and check if it is correct or not

Changelog

• Now implement game start, and timer drain functions
• implementing game ending and timer stopping functions
• added sound refs
• cleared faulty GameEngine Hook
• started the project, created game engine hook, added base styles, added paragraphs

Worked on getting the game engine running. UI changes by the next devlog.

• Initialised the project, Creating Base Styles, and planning.
• Created complete folder structure (components, hooks, data)
• Defined GameState interface
• Tuned 7 game balance constants
• Wrote some of the cyberpunk-themed paragraphs
• Pre-split all paragraphs into word arrays

Added Delete account Function. A User can now delete his account whenever he wants by going to his profile, clicking the delete button, and tyipng “DELETE” in the modal that appears. Had to learn Edge functions for this.

Completed the first stage of the tournament. Now Ready for shipping. Fixed Bugs, Added a detailed tour, remade the Dashboard, added match logging feature, added tournament view page, and lot’s more.

Changelog

• added tournament details page, with tabs for navigation
• most unserious commit. Don’t mind this
• Deploying to gh-pages from @ abdulgafarabdurrasheed/football-tournament-manager@cda431e555645772e324c372c47a2afbb94ce87e 🚀
• more tweaks and updates. Getting ready for a massive ship.
• Deploying to gh-pages from @ abdulgafarabdurrasheed/football-tournament-manager@d5a1dff848b1e889146ea39f2798a1198c2290cd 🚀
• added bracket viewing for knockout competitions, more tweaks and updates
• Deploying to gh-pages from @ abdulgafarabdurrasheed/football-tournament-manager@1a4081bc28da9a39b7ef1e2015ee77c50a01af86 🚀
• Fixed erreors, teaked and updated, and created the standings table
• tweaks and upsates

Completed the Core of the tournament creation. The tournament WIzard now accurately puts data into supabase, and set’s the stage for the tournament format and all. Also added a tournament card to show active tournaments on the Tournament Finding Page. Next, i have to create a page for a tournament’s details, and all of that. The tournament part of the project is almost complete.

Changelog

• added realtime subscription hooks for tournament updates and started the creation of the TournamentWizard component for tournament creation
• created react hook for Matches
• created react hooks for manager
• added react Query for Tournaments
• added analytics for the tournament. Highest goal scorers, Highest assisters, Form, Head to Head, e.t.c.

This was Such a genuinely productive part of the project overall. I added tournament state with zustand stores to prvent prop drilling hell, I implemented Match scheduling Logic, League tables, Tournament analytics, Highest Goal Scorers, Top Assisters, e.t.c.
The project might Just be ready for it’s first ship, But i need to clean up some stuff first. The Berger table logic was very interesting to learn tho. You guys should read about it. It contains algorithms like sorting, finding, Divide and conquer, e.t.c.

Loved this part Overall.

Started Tournament creation process. Implemented form validation using Zod, And added tournament database types.

Fixed bugs, and learn’t alot. Kinda tired, so forgive me if this is awfully boring. No UI update/Form yet, Just Behind the scenes stuff.

Deleted an 8 hour Devlog By Mistake 😭😭😭😭. AHHHHHHHHHHHH.

Learnt How to write test, wrote tests for the authentication process, that I have been working on for the past 30 hours( and Yeah. I’on like writing tests 😭😭). Fixed a bug that the test exposed, and yeah. This is currently in a good state I guess. Also integrates Sentry, and created an error boundary component. On fire 🔥🔥

Created a profile page(Users can now view and edit their profiles), added sentry for error tracking, and enhanced the UI more and more. Used framer motion to add more animations(I’m playing around with this a lot), and added responsiveness for different screen sizes. Reduced animations for mobile, with an option to remove them entirely. Fixed a Bug where Profiles refuse to update when an profile picture change is added(Just removed Profile picture changing for now, I’ll get back to it later.)

Have completed the Authentication UI. Users can now Login, Sign Up, and all that without any Problems. Used Framer motion for Smooth Opening of Authentication Modals. Finally Getting the Hang of Supabase, typescript, and the Frontend, Backend communications with one another. Going into creating tournament Features Now. Probably Gonna ship after the next Phase. I’d say i’m currently about 20% done with the whole thing, and in 40 hours is record time(Considering I’m just learning). Dealt with A LOT of typescript bug, and consulted AI A WHOLE LOT. But it’s all fine and good init? My Idea, My Code, My Project.

Created the UI for the Login, and Sign up pages, Connected it to the Backend, Added email confirmation link, Created the Routes to said pages, and Some more stuff. Had a heck of a problem creating a working supabase project that uses google OAuth.

Finished all Auth Processes on the Backend side of things(What is Featured in the image is just the testing Page.), Yay 🎉🎉. The next few hours will bring the authentication pages, and all of the cool UI side of stuff, And from there, we Cruise on.

As Someone who didn’t know a lick of Databases and their technicalities prior to this, Really Learning a lot. That’s why to the seasoned people, I probably look slow 🐌🐌(I asked around, and getting to where I currently am in the project, should normally take 10–>15 hours. It’s taken me 26 ☠☠). Anyways, Catch you Guys Later.

So, yeah. Started the project 😅