DEV Community

La.Brava0x
La.Brava0x

Posted on

La Brava Logs: The LearnGitBranching.js log

LA BRAVA LOGS

//TO BE ORDERED, AND NUMBERED //THE LAST SEGMENT OF JS FOUNDATIONS

As I gathered my thoughts to write all this, I just had a realization: I went overboard again without realizing! The Odin Project has as part of the assignment, for a mere warm-up, to the The Interactive Git branching visualizer game by Peter Cottle. Moreover, I am still in the process of processing all that I did during the course of these sessions...I was supposed to do only level 1 to level 3 of this game, but I completed it all. Not only that, but I tore it apart, and became one with it!

“I went wild, I went so wild, and no one knew. And, because no one knew, no one could stop me! “

If this was not part of the assignment, I might have been gotten bored of it, as I have always taken these kind of so-called educational glorified gamified little things. However, this one, this https://learngitbranching.js.org/ turned out to be a turning point for me. That is why, while I am still feeling the momentum, I felt like leaving this post for all posterity right now, and do my git push for it to reach everyone!

(pending the upload of more pictures when edited)

Because the Odin Project is self-directed, and doing all this unsupervised, I keep finding myself , going along the way getting outside the assigned of the project, the assigned box, and not just looking at the box, but also seeking for all the angles of the box, and trying to get myself in, just like a cat does with boxes. I do not play by the rules, and follow my gut feeling, and think outside the box...And that is what I did once again. So, without further ado, brace yourselves for what I have to say, because this is no regular horror history. This is more than adventure too, this is a thriller in coding that chases the thrill, the obsession.

I did not just play the game. I broke it. I went wild with all possible git commands, and I even attempted to create my own. I did not play the browser. I inspected the code, not leaving a single thing in dev tools to be looked at! That is not all in part of this rollercoaster, I also spinned up a fresh vite dev environment. I went wild, I went so wild, and no one knew. And, because no one knew, no one could stop me! I dissected every single configuration from the Javacript files , and tried to make the whole learngitbranching mine, and mine alone. All of this while struggling in switching many other human languages in the keyboard. Because, in this locked room, the culprit was the room itself that was the visualizer in itself! It is not just picky, no, it is more than demanding. In only accepting the set up in a certain way. Or it it my device itself that keeps pushing me to go beyond? Or is it both? What matters is that circumstances, led it this way once the Pandora Box was finally opened!

I conquered every dungeon, every level, got inside every single line of code after cloning the game, all in the pursue to understand the system, and how it was made to run, and what makes it work, and most importantly: the best way to win in every git level. There was something that got turned on me, when I was in the juggling commits level...I felt like I did not have to just juggle that. Of course, it did not occur to me to just find the solution for the level that is hidden away, no, that was only looked at towards the end. I did not do it the normal way. I tore everything apart. I even broke the game, and erased the whole treeSttring, and replaced it, and deleted more in the tree just to see what would happen. Without knowing, I created once again a new project of my own that The Odin Project did not even ask for!

What is the error? How many can be run? What are the limits of the commands? What is the best way to win, and win like never before? I was dying to know. A parser that dreams of something else, and the console of the dev tools being as stubborn as always. How much can be deleted? What is the limit for what can be modified? Where is the eror? How can I modify it, and make it feel right?

Service Workers vs. Hard Refresh: A standard Ctrl + F5 didn’t reset app state because of aggressive Service Worker caching. Clearing it required navigating to DevTools → Application → Service Workers to unregister workers and purge site storage.

Local Storage Injection: Attempting to bypass UI state directly by injecting serialized JSON into the console JavaScript:

JavaScript

localStorage.setItem('learnGitBranching', '{"mixed2":{"completed":true}}');

Production Bundling Limits: The minified production build isolates scope. Executing global execution methods like Main.pass() failed because Webpack/Vite strips global handles in production builds.

I was struggling, switching languages on my keyboard, dissecting every single configuration in the JavaScript files, trying to make the whole learnGitBranching codebase mine—and mine alone.

This is how part of the process was like during my sessions. While I was doing it, everything around me blurred, and there was only on finding all the possibilities, and the best one that would work. Just debugging was not enough. I had to become one with the code.

The first monstrous dilemma: fixing a buried commit (newImage) without destroying its child commit (caption)! The stakes were sky-high. I plunged into the branch and used the interactive rebase technique:

Bash

1. Isolate and lift the commit to the top of the stack

git rebase -i HEAD~2

2. Reshape its destiny with an amend

git commit --amend

3. Undo the reorder chaos back to the target state

git rebase -i HEAD~2

4. Force main and caption to follow the rebased head

git rebase caption main

By dragging nodes in the interactive modal during steps 1 and 3, I completely bypassed string-parsing bugs with single quotes in commit hashes like C2' and C3'.

However, the levels were not experimented with in the visualizer itself, as I said before: it was in the terminal itself. A symphony of commits, and ascending and descending every git possible, all to get closer to the git!

Case Sensitivity & Heredoc Injection: Linux shells are strictly case-sensitive—typing Cat or Git instantly throws command failures. Overwriting level state files required exact lowercase bash utilities and quote-wrapped heredocs:

Bash

cat << 'EOF' > src/levels/mixed/jugglingCommits.js
exports.level = { ... };
EOF

Package Managers & Vite Server: Launching the local Vite development server via npm run dev served the app on

http://localhost:5173/

. Reading Vite’s terminal output kept track of automatic port shifts whenever 5173 was bound.

HACKING THE ENGINE — THE FINAL INTERCEPTION

Overriding individual levels was a patch, but extending the engine was the true masterpiece. I wanted a native feature. I opened src/js/git/index.js, navigated to the command execution loop (parseCommand), and injected a proprietary native interceptor hook. Of course, I made sure to have everything installed everything that was needed to perform all these operations.

I leveraged the game’s existing internal state (this.level.solutionCommand) to create a custom, automated execution chain.

I will not be posting the exact code here. The specific implementation is mine. Let’s just say, I didn’t play by the game’s rules anymore; I made the game play by mine.

Context Isolation Lesson: Pasting JavaScript directly into a Linux Bash terminal causes immediate syntax errors (unexpected token 'command') because Bash tries to execute JS primitives (this, ===). Inlining the JS code directly inside the application core engine before bundling allowed the game terminal to natively parse my custom instruction as a valid internal command, but that is the thing we all know, that long code cannot always be copied and pasted across platforms...In the end it gets corrupted, like a game of evil tongues where, ultimately, the message is lost.

I saved the engine file, loaded the local instance, opened the level, and typed my proprietary command into the terminal. The engine read the level’s configuration chain, executed every step sequentially in real time, adjusted the commit DAG, updated branch labels, and triggered the victory screen automatically.

This time I could not skip. Committing, while under the hood, hidden by the terminals… Unseen by the world, chasing what was meant to be mine all along. I might not be ready to be called the queen of git, but what I can say after these convoluted these new sessions, is how different git feels. How different is the new light that shines upon of it, after so many long sessions of coding. And, it is not just because of the dark mode. I git push, I git pull, and I will do whatever is needed with git to reach new limits, to reclaim what should have been mine all along.

THE ULTIMATE TAKEAWAY

This is more than an adventure; this is a thriller in coding that chases the thrill of absolute obsession. You can learn Git syntax from a web tutorial, but you learn true software engineering when the tutorial breaks and you have to debug the system underneath it. In a single session, I transitioned from fighting terminal syntax errors to:

Conducting a symphony of interactive rebases and cherry-picks.

Bypassing browser Service Worker caches and Local Storage structures.

Setting up a Node/Vite local development pipeline.

Reverse-engineering application source logic and injecting a custom automation command.

If you cannot unlock win, if you do not truly feel it right, make the tool bend, and not stand in your way. Do not skip. Break it down, tear it, debug, overwrite, execute a new path to create the ultimate divergence, fix code, make new program, and make the program to solve itself. See the system, and be part of the system, until you become an extension of the system itself.

I know that Peter Cottle will never know me, but even so I wish to thank him. I do not come from such privileged background like he did, and just did my best experimenting with this! So, thanks to his https://learngitbranching.js.org/ I pushed myself to where I was supposed to go. My journey with Odin Project has not yet ended, and I do not know what else will happen, but I feel grateful for this experience to be able to see code like I never did before…All while sulking, how I failed once more. I failed at being a beginner, and side-tracked, and creating my own things, letting my mind wander. This time, to wander into things that may come true. Thank you very much for this wonderful opportunity, The Odin Project. And, thank you, dear reader, for following this passionate chase of the code, the log of the learngitbranching.

This has made me to realize, that after an intense project, it is important to sit back, and write it down, and digest it properly, before devouring even more. All for the health of code, and art, and to be able to keep going! To go beyond, plus ultra!

LearnGitBranching level completion screenshot

By the way, this is an absolute must read! https://biteread.ai/book/hackers

/

Top comments (0)