Cirkuit

Devlog #35: UI cleanup and (another) demo circuit

The sidebar was getting a bit too crowded, so I added a small button to show/hide the more advanced components. The idea is to make things a little less overwhelming for new users, instead of throwing everything at them right away.

I also worked on a 4-bit adder and wired it up to my 7-segment decoder! I’m going to try making it a 4-bit decoder instead of a 3-bit one, but things are going to get a lot more complicated (more numbers = more logic gates).

One small issue with the adder for now: the most significant bit is on the right, so the input is basically reversed. I’ll fix that soon. In the meantime, you can already try it out in the live demo project!

As always, if you enjoy the project, feel free to leave a star on GitHub!

Repo: https://github.com/NaFo44/Cirkuit

Next steps: more UI/UX improvements, adding challenges, and continuing to waste way too much of my time messing around with circuits xd

Devlog #34: New component: Memory!

This is one step up in difficulty! It has two inputs: a clock input (at the top) and a signal input (on the left). The output signal is provided on the right. This component can store a 1-bit value, which is updated on every rising edge of the clock signal.

You can basically build anything with the component available: calculator, more advanced display (e.g. a 7-segment decoder that can go from 0 to 9).

I added a 3-bit binary counter that I wired up to my 7-segment decoder! (demo bellow). It’s also included in the demo project file.

Next steps: cleanup UI and improve UX (the sidebar is really really crowded right now)

Devlog #33: Docs update and 1-bit memory!

I added the clock to the docs page, along with some new tests for it.

I’m also almost done with the 1-bit memory (basically a simplified D flip-flop). I’ll share it in the next devlog!

Also, if you like this project, you can leave a star on the project’s GitHub page if you wish!

Next steps: finish the 1-bit memory and clean up the UI/UX

Devlog #32: New component: CLOCK (finally)

This one was relatively easy to implement! The tick system was already there, but it was only triggered by user interactions. Now, your circuits run at 10 ticks/s, and the clock has a constant 1 Hz square signal (the recording below is choppy, but yes it is indeed a 1 Hz periodic signal)

This component only has one output. I thought it would make building complex circuits easier if the other sides were isolated.

Next steps: 1-bit memory, and then a lot of UX/UI improvements!

Devlog #31: UI improvement!

I replaced the old “main shortcuts” section in the sidebar with simple links. It frees up some space, makes the interface feel cleaner, and should make it much easier to add a proper “Challenge” tab later.

Next steps: add a clock and a 1-bit memory.

Devlog #30: Component documentation!

I’ve added a new page in the sidebar that shows a description and preview image for every component. A few people asked for this in the reviews of my first ship, so it felt like a good addition.

Also, if you have any idea of how I could integrate the new more advanced features without overwhelming new users, I’m all ears!

The sidebar is starting to get pretty crowded, so I need to find a cleaner way to organize everything and keep navigation smooth.

Also, huge thanks to the Stardance staff for awarding this project Superstar ❤️

Next steps: code cleanup, UX improvements, 1-bit memory support, and FINALLY the clock.

Devlog #29: New feature: Multi-layer!

You can now build circuits across two layers!
I added vias, so you can connect the two layers together (obviously).

When you place a via, it’s added on both layers, it basically works like a wire.

I also finished the 7-segment decoder: 3bit input, supporting only 0-4 for now. The other values are just don’t-cares.

Next steps: polish the code and UI, then add some documentation.

Devlog #28: Multi-layer (and thank you!!)

First of all, thank you so much for all the support on this project! The Stardancers who reviewed my first ship got some really great advices. I’ll be following up on a lot of it.

So, I’m planning to add:

• a simple component documentation
• some challenges (e.g. 7-segment decoder, XOR gate)
• more advanced features (clock, 1-bit memory)
• and what I’m working on right now: a second layer! (currently, wires can’t cross each other, which becomes a real issue with more complex circuits)
• and, if I have enough time, a place where people can share circuit snippets and showcase their projects!

The real challenge will be integrating all of this while keeping the UI clean and the UX intuitive.

The screenshot below shows what the circuit viewport could look like with the second layer.

Devlog #27: Some optimization, code cleanup, and brand new readme!

That’s the last devlog for this project before I ship!

Devlog #26: I’ve done many small improvements, such as:

• ability to move annotations
• undo/redo buttons
• custom favicon

Next step: SHIP!

Devlog #25: UI/UX improvements!

I improved the component selection outline. Now the outline is around the whole selected group of pixels, instead of around each individual pixel.

You can also now delete selected components by pressing Del on your keyboard.

And I added a little preview showing the pixel currently targeted by the cursor.

Next steps: keep working on the UI/UX, and ship!

Devlog #24: New feature (kinda): the camera position and zoom are now stored in the project file, and loaded when you open the project.

That means you can setup any point of view in your project, and the viewport will be right where you left it when you open it again!

I also fixed a bunch of UI inconsistencies:

• the hover label position is now responsive to the workspace sidebar (before, it was getting hidden behind it)
• unified border colors
• fixed the phone workspace responsiveness
• made the sidebar on the right a little bit smaller

I also continued working on the 7-segment display, but ran into some issues since wires can’t cross each other. So I thought about having circuits on two different layers. What do you think about this?

Next steps: I’ll probably polish the UX a little bit more, and then ship the project. But I’m planning to keep working on it!

Devlog #23: New feature: Undo/Redo!
You can now undo and redo things you’ve done in the editor. This works with both components and annotations.

I had to implement a project history system. Basically, every time an action modifies the project, the previous project state is added to the past history stack. When you undo, the latest state from past becomes the current state, while the previous current state is moved to the future stack. When you redo, the next state from future becomes the current state and the previous current state is moved back to past. Yeah it’s messy 😂

I’m also still working on the 7-segment decoder. I switched to a 3-bit one, I’ll probably include it in the demo.

Next steps: mostly UI and code improvements, and then I’ll probably ship it. I’ll keep working on it!

Devlog #22: New feature: selection and copy/paste!

You just have to press “S” and drag your mouse/pad while holding the left click. You can then copy, paste, or move the selected pixels around.

Probably the most difficult feature I’ve worked on so far. I had to get some help from ChatGPT :’)

I think this will be my last devlog before shipping, since one of my other projects has been pending for 18 days now, so yeah… I’ll still keep working on this project though!

Devlog #21: Some UI/UX improvements and started working on selection!

I’m currently working on the selection system. It works like this: Press S, then while holding it, drag the selection area with the left click. Once selected, you can copy, paste or move the selected block of pixels.

It’s not committed yet! It still requires some work.

Next steps: finish the selection feature, then add the clock. I also want to improve the UX as much as possible.

Devlog #20: demo project and UI/UX update!
I added a demo project with a basic light/switch circuit, an OR and XOR gate, and a few annotations.

I also (and mostly) removed the old “Quick start” section. It was becoming kinda useless since pretty much everything was already covered by the demo project. So I replaced it with a little intro to the project, along with a table of the shortcuts.
I also added a little decoration to the bottom-left corner of the sidebar. I think it looks pretty dope!

Next steps: copy/paste and selection, THEN add a clock.

Devlog #19: A little code cleanup!

I refactored the App.tsx file because it was handling too many different things. Now each hook has its own dedicated file. Small refactor, but definitely a needed one!

Next steps: add a demo project, improve the UI/UX and laptop pad support, add copy/paste and selection, and finally add a clock (eventually, at this point 😂)

Devlog #18: You can save your work now!
There are now two buttons in the bottom-left corner: Open and Save.
Your projects are downloaded as .cirkuit files.

This part was actually quite challenging, mostly because of the file format validation and all the tests around it.

Next steps: clean up the code, cleanup the UI (it feels a bit messy right now), add a demo project, add copy/paste and selection, and add a clock

Devlog #17: New feature: Annotations!
You can now add labels, lines and rectangles to your circuits!
I developed this feature so I can better explain what’s going on in the demo project when I’ll ship this project. But you can also use it to explain your craziest circuits!

Next step: upload/download projects.

Devlog #16: Annotation feature (WIP)
It’s not finished yet, but I’m currently working on a new annotation feature. Why? Because I’ll need it to explain the circuits in the demo!

I’m adding this before the project download/upload system, because otherwise I’d have to refactor quite a bit of the system later.

Also, I’m starting to build a 4-bit 7-segment decoder in Cirkuit! (I started with the two easier segments lmao)

Next steps: continue working on the annotation system, then implement project download/upload.

Devlog #15: I added a little guide!
The goal of this small guide is to explain a few things that might not be obvious to new users.
You can close and reopen it whenever you want, so it doesn’t get in the way while you’re playing.

It’s still available on the GitHub page if you want to give it a try!

Next step: add a minimal circuit loading system (so I can add a default demo circuit), and THEN I’ll add the clock 😂😭

Devlog #14: New component: AND gate!
Now the two main gates are available (NOT & AND), so you can basically build anything with them!
In the screenshot below, I built a working XOR logic gate, both in a large and a condensed version.

A few changes since last time, apart from the new component:
The old NOT gate wasn’t working properly because the circuit actually handles 3 states (low, floating, high), while the NOT component only supported low and high. So now, “floating” is considered as “low”.

Also, there’s no longer real-time simulation, sadly. I had some issues with the logic gates: if you built them the wrong way, it could crash the entire webpage. So now you have to click on “Run simulation” to see the magic happen.
It’s a bit less cool than real-time simulation, but at least it doesn’t nuke the whole page anymore lol.

Next steps: UI/UX improvements, clock, and 1-bit memory later on

Devlog #13: New component: NOT gate!
This component returns the opposite signal you give it: low becomes high, high becomes low.

I also improved the UI/UX. There’s now a new label in the bottom-left corner of the page that shows which component you’re hovering over with your mouse, and what its current state is. For example: “Wire | Low”, “Switch | Open”.

I also fixed the pixel rendering, because before there were some really thin lines between them. And now the sidebar is responsive!

Next steps: code cleanup, AND gate, clock

Devlog #12: Wire states are now visually apparent! In the example below, on the first circuit, the first segment is high because it is powered by the source, while the second segment (connected to the lamp) is floating because the switch is open.
I’ve also fixed a whole bunch of UI issues.
You can try out this project on my GitHub page!
Next step (for real this time): adding a NOT gate (the clock will come later)

Devlog #11: I did some UI improvements, but before I commit, I’d like to have your opinion for the light component; which glow do you prefere?

Devlog #10: I added some tooltips so it’s easier to understand for you guys!
Next steps: Start writting an actual documentation, add new components

Devlog #9: New component: Switch
This new component come with a new “simulation” mode, where you can interact with the components.
Next step: add small tooltips to the sidebar elements, add new components (clock, memory…)
It’s deployed so you can try it (see the project page)! I’d love to get some feedbacks.

Devlog #8: UI update!
Changes:

• checkerboard background texture instead of the old grid
• custom selector on the component palette
• pixel art icons

Next step: new components (switch, clock, memory…)

Devlog #7: Now power and light can be connected from all sides! Also, since the old arrows are no longer necessary (at least for these components), I improved the UX by displaying the actual component icon instead. The icons on the circuit are also hidden by default now, and only appear when you hover over them.
Oh and there’s an eraser now.
I also deployed the website: nafo44.github.io/Cirkuit/

Next step: add new components (switch, clock, logic gates, memory)

Devlog #6: I wired up the simulation engine to the UI! It’s working really well, even tho there’s only 3 components right now (source, wire, light). I added arrows so you can easily rotate the components. I want this project to be really intuitive, so if you guys have some ideas to simplify this, I’m all ears!
Next step: let a source and light to power/be powered through all sides, add new components (switch, clock, memory)

Devlog #5: Now the component placement UI side is wired to our circuit layout! It probably don’t make much sens for you right now. Next step: modify visually the component grid according to the simulation.

Devlog #4: The other half of the engine is done! It can now compute components state (low, high, floating, conflict) based on the connections between each other. Next step: wiring the engine to the UI.

Devlog #3: I’ve finished half of the engine of my website, made to let you create circuits using pixel art. It wasn’t easy!
I came up with a simplified netlist algorithm, to represent how a component (pixel) is oriented, how many are wired, to what, and through which side of the pixel. Components states aren’t handled yet, but that’s what I’m going to work on next.

Devlog #2: I improved the UI, added mouse wheel support (to zoom and move the map). Now it’s time to work on the actual engine.

Devlog #1: Hi! I just started making a website where you will be able to create circuits… with pixel art!
The idea is to add different pixels: wire (gray), power (green), light (yellow), logic gates (AND, OR, …), memory (simple true/false state storage).
I want to keep this as simple as possible to use.