Avalon

I had to drop the idea of starting from absolute scratch. I wanted players to go from transistors to latches, but I ran out of time. I can’t do complex simulation like that. So I managed to make the game maybe 15-20 minutes long for most people. There are bugs for sure, but I don’t have the energy to fix them. I am not a true Hack Clubber at heart, and I am all out of coffee.

Also, I made Mike, the tutorial bot for the game (short for Micron). I got sidetracked and learnt some basic Lottie motion design to try to make three animated faces for him: normal, happy, and annoyed. His eyebrows are not symmetric. The GIF below is the annoyed face.

I have added the sidebar, and you can see truth tables and test results for a particular schematic, and the total course of circuits you need to make.

This is 19 hours of work. I don’t know how to summarize this properly, but:

• There is a sidebar
• The tutorial is done
• Mike exists
• Everything is now deployed to Github Pages
• I had to learn what a 2-to-1 Demultiplexer is

I hope this doesn’t immediately break the first time someone tries it.

I now finally have a working prototype of the whole thing. The actual logical simulator part of the, you know, logical simulator game, had not been done yet. It was an absolute pain to build from scratch in JavaScript. I know nothing about circuits or circuit design and I had to come up with an algorithm to generally simulate all kinds of circuits. Including oscillatory ones that propagate forever with no stable end. It took multiple days of thinking everything through and only four hours of writing the code, three of which were spent debugging an issue where the UI itself refused to update when the simulator ran.

Not fun (thumbs up)

What you see below is two circuits:

• The full-bit adder is a way to add numbers together. This is one of the basic components that power your CPU’s arithmetic unit. Each toggle button is one input, and the two numbers you see at the end are the sum of all three inputs, but in binary. 0 is 00, 1 is 01, 2 is 10, and 3 is 11.
• The SR NOR Latch is a thing used in memory circuits to remember values. Just pulse one toggle button and the circuit switches across two stable outputs. S is Set, R is Reset. Pulsing Set makes the circuit “latch” its output to 1, and pulsing Reset sets it back to 0.

Both circuits seem to work fine.

I succumbed to the urge. I rewrote the entire thing from scratch because the previous version was not scalable. I don’t have much to show for it except for:

• Landing page for days
• Animations
• Animations
• Better schematic management window

Hopefully the video might depict what exactly changed. It’s very little.

I built a basic scaffold, and not much else. I’ve used:

• SvelteKit, a meta-framework for building web things
• Svelte Flow, a library that lets you add interactive graphs and nodes and connections to your web thing
• shadcn/ui, a library of components like buttons or command menus, and
• Tabler Icons, an icon library for the little logic-gate symbols.

Right now, you can add “nodes” to the screen and wire them up together. A node can be a logic gate, or an input, an output, or anything that is part of a circuit. It took a really long time to actually learn how Svelte Flow was supposed to work. It’s simple when you actually read the documentation, which I did not :D

Clicking to move nodes around works, deleting nodes can be done with the X, Delete, or Backspace key, and you can add a node with Ctrl+Q.

I’ve used shadcn for UI components only because everyone is talking about it. It took a long time to figure out how it’s actually meant to be used.

There are only four logic gates added, and they have no functionality. Most of them are supposed to have two inputs, not one, but I’m adding that later.

The circuit simulation engine is going to be a headache, so I’ve put that off for later as well.

TL;DR: There is now an infinite graph where you can add logic gates. The gates do nothing. You can connect logic gates together, but that also does nothing. Most of the time was spent learning how to wrangle Svelte Flow and shadcn into submission.