Rohan the Codebreaker (my code)

Made The Dump.

Everything's going smoothly, now I will start filling things in and probably making little changes, before making my BIG idea. It's coming soon, though.

I made a template for project cards. I'll include links to the projects as well!

Experimenting with gradients for a panel.

I got it all deployed and then realised that making CORS requests every time you get a ruby is REALLY slow and messes with the game's timings. So I reworked the saving system! Now, there's a button for saving, and the game autosaves every 60 seconds. This way, there're no slow fetch requests every few seconds. And... I'M DONE!!!!!

I've been debugging deployment and API calls for 3 HOURS and I hope this next commit works. My commit history looks absolutely horrid now :skull:

The shop menu is basically finished now, with decoration and stuff! All I have to do now is deploy the app and stuff and connect it to an actual server :sob:

I've done a lot. I've fixed data issues, implemented the buying of enchantments, and creating a price curve.

There was a really funny issue where, instead of adding 1 to the ruby count, it was CONCATENATING 1. This led not only to insane ruby-gathering speeds, but total catastrophe when rubies are subtracted, as it concatenated -1 to it, making it not even a number.

I also added this enchantment table and am going to make it look cooler. I have to hurry, though, because I have to finish by 11 P.M.!

YEAH WE GOT PASSWORDS AND VERIFICATION WORKING LET'S GO!!!!

I'm using the sha256 algorithm for safety, too, so nobody (hopefully) can just look at my endpoints and hack people's accounts.

Boom! Bought pickaxes don't show the price anymore!!! And everything updates correctly using a new update system! Now, I use dispatchEvent whenever the pickaxe or ruby count changes so that the change is immediately seen.

While fiddling around with different values, I found out that my number-to-array function was NOT working correctly. Luckily, it was clear that the only issue was that it was reversed from what it should be. This means that the fix was only one function call away. :3

Pickaxes now have prices displayed! They'll only show if you don't have them, of course. ...I still need to implement the logic for that.

I've just made a function to calculate the speed of your pickaxe. It has values hard-coded that definitely may change, but I'm hoping I won't have to change them that much. Next, I'll make prices for things like enchantments and pickaxes.

Now, the pickaxe updates and stuff when you click a pickaxe option! I had to look up some stuff about window.dispatchEvent to do this because my logic takes place across two separate controllers.

I made a controller for the shop to make it clear which pickaxes you have unlocked. Only the unlocked ones do anything when clicked, that being setting their given pickaxe to the active one.

This is the first major addition that I've done without looking up anything!!!

I've just made functions for buying pickaxes and enchantments! I decided to keep track of your pickaxes with just a number ranging from 0 to 255, and converting it to an array of booleans when needed. This is so the database doesn't need 8 different boolean entries, because that'd be pretty annoying.

I finally found a better way to show the break images! I'm glad I looked it up now before I implemented the pickaxe images. Now, I only need one image element because I store the image paths at the beginning and then use them in code to change the source.

I started writing the code for the shop and gathered some image for the pickaxe upgrades! They're just the pickaxe sprites from Minecraft, but I made an extra surprise one...

Visual Change + Shop Menu! I put the Ruby counter text underneath the ruby and made it much larger.

I also started on the shop menu, which will have cool things like speed increases and pickaxe modifiers.

I think I FINALLY understand async and Promises. I just used them to make sure that data is gotten before UI is updated, and it worked just right. Now, data is always fully retrieved before updates, which fixes the minor issues that happened before.

I just installed Tailwind CSS for Rails and implemented it!!! I'm glad it's compatible because I LOOOOOOOOOOOOOVE Tailwind :D

In order to make it easier to implement a shop for upgrades, I did some research (asked ChatGPT) about sharing between components and then made a helper file for my controllers! Here it is, with a totalRubies variable that can now be accessed anywhere with the getRubies function.

I transferred my JS code over to a controller to make things easier!!! Now, I have a function. Next, I'll make a controller for the shop, where you can buy upgrades!

Your ruby count now saves to the DB when you gain rubies!!! It also loads your ruby count when the document loads. Currently, I'm hard-coding the user ID to be 1, but in the future I'll implement logging in and saving your progress.

Now, mining is REQUIRED to take 0.7 seconds, so that you can't just mash. Also, there's a ruby count in the top right that increments with each break.

I've added animations for the pickaxe!!! Next, I'll add breaking the ruby.

I've set everything up and decided what I want to make, a ruby clicker game with a leaderboard! It'll be... very simple, but it'll work. I've already learned a ton about Ruby on Rails.

I have an image of a ruby and a pickaxe, and soon they'll be doing stuff!

Now, things can be broken!!! All I do is give it the Breakable class_name and then it's broken based upon the code. The box is destroyed by the grenade in this video.

I added an explosion animation to the grenades!!! I also made the hitboxes activate when exploding (and be inactive when not).

Here's the image I promised last devlog; the trail is visible and it tapers off as it goes! This was surprisingly easy to make and it worked without a problem!!!

I just made a Trail object! It creates a little white trail behind any object you put it on. I'm using it on the grenades for some extra coolness. The script is pretty simple; the parent node's position over chunks of time is kept track of in an array and then those values are used for the line. I had to change the custom line curve to make it look more like a trail. I think it's pretty cool-looking!

My next devlog will just be a picture of the trail in-game so you can see!

I have now added a line to show you where you're aiming, and you must HOLD the throw button and release it to throw a trig-renade.

Now, I've made it so that trig-renades only start their timer when they touch a surface.
Also, they now cost one COS and one SIN to throw, each. I think you can guess why. ;)

My Godot Wakatime stopped working for a bit!!! But I fixed it pretty soon and only lost around 8 minutes.

Anyway, I've been transitioning over to using physics layers rather than type checking. It's SO GOOD. It lowers the amount of code that I need and makes it easy to configure collision in the editor. I love it. Here's a screenshot of the layers I've made.

I've made a small tweak to the rays, making them slightly faster-travelling. I think they were too slow before.

I've also added little grenades! You can throw them out using your mouse to aim, and they start flashing and then disappear after 3 seconds. I have yet to implement the explosion or related logic. I will add a better way to aim them, like by HOLDING the fire button and then releasing to throw them.

I finished the TXT -> CSV -> HTML conversion architecture and then wrote a really verbose README about it so that nobody messes it up lol.

When the airtable server is working and used, it can be connected with a bit of fetching and the python, CSV, and TXT can be done away with, but for now, this is an easy solution.

The txt file is done, and I am ready to convert it all to CSV and then HTML. All I need to do for that is run two commands, python projectcsv.py and node projects.

I also changed the code a bit to make it take in a TXT file rather than a hard-coded entry paragraph.

I just made it MUCH easier to add more projects. I now have two scripts which transform someone's message into CSV data and then convert that CSV into HTML and append it to the document. Here is the latter.

In order for this to be a map of CONNECTIONS between math concepts, I need to be able to edit the links' descriptions and names.

I mostly copied the code from the NodeEditor file, but made a few tweaks to fit the links.
I also made more art for the toolbar.
It was pretty easy to make the menu and get it all working! It looks almost the same as the node editor menu except without an image input.

To replace descriptions with wiki links, I commented out the description editor and its related variables. I commented it out instead of deleting it because I need it later for the link editor.

Then I added a link and some other simple code, and boom! It's done. I have an addend field in case a page needs disambiguation, as in the case of https://en.wikipedia.org/wiki/Division_(mathematics).

With that done, my three tiny goals are finished! Now on to bigger ones.

I added code for adding and removing nodes, and then had to make a function for updating the IDs of every node and link such that things kept the same structure regardless of removals or additions.

There are currently a few odd edge cases where deleting a node causes some links to jump to other nodes. I don't know how to fix this at the moment, but I will at some point.

There are a couple things I need to clean up before moving on to bigger things, like editing link descriptions and a viewer for the users of the website.

First, I need to be able to download the new graphs I make as JSON files.

After a google search, I did it very easily with a keydown check and some link-creating.
Wow, a lot of things are called links in this project...

To make undo-ing into an actual functional feature, I need an array to keep track of the state and for going back and forth.

Making the code work was a little frustrating, but I found out (by asking Copilot, sorry) that I was only storing references to data and not clones.
Once I fixed that, and after a BUNCH more trial and error, I got everything working fine.

I have two helper functions for saving the state.

Minor changes, but I fixed the viewport size on the itch.io page. I'll research how to better do that, but for now, it's fine.

I've also made it so that the ray about to be deleted by a right click will flash gray to indicate such. I reused the shader from the grenade tool I'm implementing.

Even though I have 3 hours on this devlog, most of it was just tiny, simple stuff like fixing bugs and screen size issues.

First, I changed the log sending function to take in a main action name and then an extra details string, which is optional. This is so I can do the undo/redo messages easily.

Most of the log sending was pretty simple.
The only one that was more complex was the node saving one, where I had to some array-string shenanigans to get a good, clear message.

First, I need an array of states for keeping track of changes and so that you can undo.
Here's the logic I wrote for undoing and redoing inside of the edit logger. This code only affects the edit logger because the other logic happens in the GraphEditor.
I've also added undo and redo buttons that do exactly what you'd expect. :३
Next, I'll add all of the edit messages and actual data logic.

One of the things I had on my to-do list was to add an undo button. This means I have to keep track of the state at all times.
First, I'm going to make a Godot-style edit log to show what you're doing. The code is pretty simple; it exports a function for other components to use to send messages.

Now, different parts of code can call its function, and send a message to be put in the log! It only needs to be as simple as

~~~~~~~~~
~~~~
logger.log("क्या हो रहा है?")


Next is to fill in messages where they should be sent and, of course, fix any issues that come up lol :D
But first I'm going to sleep. It's like 4 A.M. right now :sob:

Today, I started out trying to implement zooming, but it got frustrating and I decided to switch to making link editing.

You can create a new link by clicking on one node and then clicking on another. You can delete a link by clicking on it.

While making a new link, a little ghost path will follow the mouse to show what the link will look like.

To find out when you're clicking an existing link, I needed to calculate the distance of the mouse's position to the link line. I didn't know how to do this at first, so I copied a Math Stack Exchange answer.
I won't go into detail here, but I implemented the function, plus some handling for the case where the mouse is too far away.

Unfortunately, now, whenever you drag the canvas, it jitters a bit. I don't know how to fix this 😭

Added a link to the project page from the main page!!!

The page is officially done!!! Until someone else sends a game idea...

I'll update it when they do :)

Finished filling in all of the projects! There were a LOT. Which is great! Here's a screenshot. That's not even HALF of them in that picture.

I made a template for a project card, and now I'll fill in the data for everyone's project!

An editor requires different ways of doing things. Here, there needs to be a way to:

• Add nodes

• Edit nodes' data

• Drag nodes

• Change linkings between nodes

I decided to make a separate component for the toolbar, and the code really showed me how nice of a combo Svelte and Tailwind are. I only needed 27 lines of code to make a great-looking menu.

This is the result. Dark gray means selected, and blue means hovering over. Currently the buttons don't do anything, but that's coming up next!

I've heard of Tailwind before, but never knew how cool it was! I installed it in this project to try it out, and I love it so much that I changed most of my CSS to Tailwind. I love its syntax and intuitive naming system.

For ease of repetition, I defined the css strings in my TS, and used them in the classes of HTML objects.

I just spent an hour messing around with stupid GitHub deployment stuff, but now it's all fine... I won't need to do any of this stuff for a while, luckily.

I had to remove the images from the nodes in order for it to work.

Svelte's $state functionality is amazing and can be very helpful. One thing it doesn't help with, however, is changing data by reference. I originally was using the focusNode variable to store the node you were editing, but I turned it to a state variable and it suddenly stopped working. It took me a while to fix, but now I'm done and this was my solution.

I had to look up a tutorial to get the demo up — it's now live!!!
I'm using the command shown in the image.

I feel like I'm really getting the hang of Svelte now. I pretty easily added a bunch of stuff.

Now, you can right-click to open the editing menu, and there are buttons for save and exit. It'll warn you if you exit without saving, and it'll also ask confirmation when you click save.
Also, in onmousedown, 1 is middle button and 2 is right click. Weird.

The code for saving nodes was pretty simple! It'll be harder probably when I hook it up to a server or whatever, but for now it was easy.
Thanks for reading, and read more in my Github devlogs!

These last few hours have been really annoying.
First off, I was dealing with some really stupid importing bugs that I spent upwards of an hour fixing.

Once the draw function was done, I had to work out the issues in the dragging of the screen. I fixed it with TWO PLUS SIGNS.

I was very relieved when I finally got done and was able to easily edit the nodes, dragging them around and moving the screen smoothly.

I've added the GraphEditor screen and the NodePanel for editing node content, next, I just have to put them together!

This is my first time using Svelte, so I've just been getting used to it.

I made a component for editing a node, giving it a title, description, and image. I also stole some CSS from one of my other projects to use for this one, and I think it looks acceptable.

I have finished the game!
Just in time for the end of the YSWS, at 11:00 P.M. CST.

I've added all 7 cards and an ending screen. There is also a hint room if you get stuck.
I made a new logo!!!

I kinda forgot about devlogging for a bit because we got a surprise extension on the YSWS!!

Anyway, I've now added 7 cards to collect, and I've added a hints area in case you get stuck.
Additionally, there is now a pause menu that lets you see the cards you've collected.

I'm finished with every mechanic! All the technical stuff is done!
Now, I have to design the world and its puzzles... in only two hours. I think that's fine.

What I've added:
- A camera system where it follows the player differently depending upon where it is in the world
- Buttons that unlock doors
- Ray upgrading items
- Card items
- A cool sound effect

I have done a LOT in the last 4 hours.
I made items that you can pick up, an audio manager, and sprites for the main character!
Now all I have left to do is level design and maybe filling in the background with something.

The character can now shoot out a ray and then stand on it!
The ray disappears after 2 seconds of being fixed in place. After shooting it, it travels to a surface and stops when they come in contact.

There is still a bug with the line collision at certain angles, but I can fix it soon.

Next, I intend to add a jumping move where you plot a quadratic to follow.

I started my Godot project and made some sprites for the ground. I added them to a terrain tileset to make sure they formatted with each other correctly.

Now I can jump and move!

Most files are way too big to be reasonably converted to a good image.
I probably should have thought of that already, but I'm fixing it now, so it's probably file. I mean fine.

Uploading files can still be done, but now there's a convenient text field for just encoding a simple message.
I've also added a way to change the number of Bézier curves in your spline.t

My goal this whole time has been to encode DATA into DNA, and so far, there's not much data coming in nor out. But I fixed it!

Now, it's possible to input a file from your computer and then get an image of DNA from it!
You can do everything from this helpful little panel here.

I did this with some simple-ish file reading code, where it reads the file as an array of bytes, and then returns a base 4 string.

It looks like I'm almost done with my project, as everything's working pretty well. But there are definitely things I could do to make it even better, and from here on out, changes will likely be small or simple improvements.

Thanks for reading up to here!
As always, check things out with more images on my repository devlogs!

Bézier curves are not uniform in their movement. Some parts of the curve have a higher velocity than others, which makes the spacing between molecules uneven when interpolating linearly over one. Trying to fix this issue led me down a rabbit hole online about arc-length parametrization during which I learned some new techniques and math to help me with handling Béziers.

The method I used in the end was one I found on a stack exchange conversation. It goes as follows:

• Use numerical integration to find a time-to-arclength map.
• Invert the map using binary search and linear interpolation for precision.
• Use this map as a lookup table and update it when points change.

With this, I am able to make equally spaced DNA parts!

Since Hackclub only allows one attachment per devlog, check out a demonstration in my repository's devlog folder.

C2, Here we come!
Now, when editing the points of each curve, the continuity is preserved, leaving the DNA strand looking smooth. I may change this to only C1 if it proves too restricting, but for now it looks pretty good!
There is still an issue with sharp corners. When there is one, some artifacts are left on the corner, making it look ugly. I'll look into that later.

I assigned colors to each DNA molecule, ATCG, and made it draw to the screen when given a string (pun intended) of DNA.
Here is a demonstration with the string ACTGATAGCTA. As you can see, only one side of the DNA shows the data inputted, because both sides must match.

The DNA is still bendable however you want, of course.

In order to get the local coordinate spaces on the curves, I had to add functions for finding them, which involved taking some derivatives! Luckily, I like derivatives.

The user should be able to input a file of a reasonable size and get the data as a DNA encoding. A string of text would be boring, so I plan to make the output an image of the DNA strand. I want the DNA string to be movable, adding customization to the output.

The simplest way to do that, I think, will be with editable Bézier splines. I learned about Bézier curves a few months ago and I am fascinated by them and their other cousin curves, so I thought this would be a fun application for them.

In this update I made a quick and simple implementation of an editable Bézier curve with four movable points.

From here I'll add more general spline editing and probably focus on the actual data encoding functionality LAST.

Thanks for reading! <3