@spectra

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.