Devlog 13: Final devlog before ship

I didn’t add much, just fixed some bugs and inconvenient things. For example, the space bar (finally) no longer triggers the dropdown menus. That was very annoying. Also, I added an option to clear all site settings and data, in case you have a outdated save file (no one is going to have that except me probably) that’s messing things up.

I also added some things to the README.

Devlog #12:

I separated the times for timer mode and driller mode. Since timer mode is intended for timing entire solves and driller mode is intended for only short portions of the solve, it doesn’t make sense for them to be lumped together.

I did this by adding another object inside the object for stored solves, and renaming the existing object. So now, inside of the stored solves object, there’s one object named “timer” and another named “driller”, to make it easy to get the correct object for the selected mode.

I kept encountering errors on the GitHub Pages, but everything’s fine on Live Server. It’s happened so many times, it’s getting annoying.

there’s literally no visual difference why do i still have to include a screenshot

Devlog #11:

You can finally change stuff!

I added settings to the web app, including the option to hide certain elements and 3 themes. The settings even stay across sessions, unless you clear solves, in which case the settings will be reset. This was totally intentional to make sure users are mindful about their times and not just spam times and definitely not because I’m too lazy to fix that part of the code.

:)

Devlog #10:

So it turns out that much of the code that involves paths and fetching other files were broken. I didn’t realize that until after I posted the devlog yesterday. For the next 24 hours, I proceeded to try everything I could think of to fix it. In the process, I definitely had one or two crashouts somewhat reminiscent to Doggie Acheron 1%.

I ended up just having the program fetch the JSON files and the favicon from GitHub instead of the local files. This does come with the downside of difficulties when testing the code when I don’t have wifi but that’s a small tradeoff considering I have wifi pretty often.

Devlog #9:

Finally. FINALLY I HAVE EVIDENCE TO BACK UP THAT THIS ISN’T A CSTIMER CLONE.

The main feature that I intended to add from the start, and the main reason that I wanted to make this web app in the first place has finally been implemented. It is, of course, the ability to drill algorithms.

Yes, it does need more polishing. No, you can’t import your own algorithm sets yet. But you can drill some Roux algorithms, and that’s already better than CSTimer and JPerm.net. Or at least that’s what I tell myself before I go to bed so I don’t feel like a waste of space.

This session was definitely the toughest mental challenge I’ve probably ever experienced. I started to code this, but halfway through I just decided to revert some of the changes cause the code was messy and wasn’t working. I reverted the changes back to the left Git commit and discovered that I forgot what I was doing at that time, and also that the code was broken. I proceeded to spend like 3 more hours fixing my broken code, and somehow ended up with something semi-coherent.

Features I need to add:

• Importing algorithm sets
• Changing the theme
• Tool to create algorithm sets
• Probably more but I forgot.

(sorry it doesn’t really look much different in the screenshot but I promise I actually did a lot of stuff.

Devlog #8:

The window not displays the difference between the current solve and the previous solve. If the user got a faster time, it displays green. If they got a slower time, it displays red (like CSTimer lol).

I also added a help window that dims the background when it appears. There’s not much in the help window right now.

Bugs

The most notable bug(?) I encountered is the thing where some coding languages return weird numbers when dealing with decimals. It turned out like -0.249999999999999999999996 or something like that.
I used difference.toPrecision(2); to round it to 3 decimals and I guess it works for now.

Devlog #7:
I added box that lists all the solves the user has done, and it even saves when you close the browser or refresh the page. I also made the scramble copyable by clicking on it.

I did this with local storage, so I guess it probably isn’t the best way to do it, but I couldn’t find any good tutorials for indexedDB online (probably because of my cooked attention span). I ended up storing the entire object inside a single local storage string.

Notable bugs that I fixed

-When any of the buttons are pressed with the mouse, any press of the spacebar triggers the button because apparently that’s how buttons work. Retrospectively, I probably could’ve use a CSS property or something idk to prevent this from happening but I just made fake buttons instead.

Devlog #6:

I CAN SEE COLOURS!

I finally used some CSS, added background colours, and moved some elements. As you can see, the cube net drawing is at the bottom right and the timer and scrambles are centred now. I didn’t have internet for the majority of this, so I lowkey copied a bunch of code from my other project CubeOS, which I have saved locally still.

I also added a function to hide all elements when the timer is timing, to help with focus by setting the display to none and switching it back afterwards.

Lastly, I wrote a couple of JSON files (with the help of AI when I did have internet for a few minutes) that contain the cubing algorithms that the drilling mode will use. But after I was done writing them I discovered that I don’t know how to actually read files using JavaScript, so I’ll be figuring that out later.

Devlog #5:

I spent a couple of hours doing optimizations and adding features that aren’t used yet but will definitely be built upon in the future. The one change that the user can actually see doesn’t work yet because I added the UI for it before the actual functionality was added. I’m going to attach a screenshot and try to see if you can spot the difference.

I did try to add a new feature (hence the aforementioned UI change) but I ended up running into a bunch of issues including the following:

• Functions being called before they’re defined
• Browser running out of memory somehow
• Distraction
• Skill issue (please laugh. i need external validation)

Here are the things I need to do still:

• [] Add a drilling mode that helps you master doing Rubik’s cubes algorithms
• [] Add ability to upload your own algorithms to drill
• [] Add ability for the timer to store solves in local story
• [] Add compatibility with CSTimer.net so that you can export or import timer solves.
• [] Add a somewhat good GUI

Devlog #4:

I added a net of the scrambled Rubik’s cube to my webpage. Even though a real cube moves in separate pieces, I decided to calculate the cube using the stickers.

I used an array to represent all 54 stickers on the cube, and used functions that switched around the stickers to represent turning the cube’s faces. I was originally going to make a function switching around the stickers for every single face turn (there’s 12, not including rotating the entire cube, the middle slice, and the double moves). But after I made the function for turning the top face and it already took up like 100 lines of code, and deciding that I don’t want to get carpal tunnel syndrome when I’m not even an adult, I realized I could just rotate the entire cube and stick with only one face turn. This brought down my code from a potential 1200 lines to only 300.

At this point, I’ve spent like 2 hours on making this cube net but there’s still nothing on screen to show for it.

So I quickly coded a net of the cube using HTML and CSS and used JavaScript to change each element according to what its color in the array is.

Just when everything was just about done, I ran into the biggest problem of this entire session: the net/drawing wasn’t accurate. After about 2 hours of debugging, I discovered I forgot to reset the cube before “scrambling” it again. I literally wrote a function doing just that and I forgot to use it.

(I’m reading the page on how to write a devlog and apparently they’re only supposed to be 4-6 sentences… lol)

Devlog #3:

I SWEAR THIS IS NOT INTENDED (ENTIRELY) AS A CSTIMER CLONE.

Soooo… I added scrambles to my web app. (You can see the current scramble above the time).

I just used JavaScript random to pick from the basic 6 moves a 3x3 Rubik’s cube, as well as a modifier (normal, prime (counterclockwise), and 2 (twice). This move is then checked against the previous move so that there won’t be any cases of someone having to do the same move twice in a row. Every time the timer stops, a new scramble is generated and replaces the old one.

Also, I added a delay of one second that the user has to hold to trigger the timer. In addition to that, the timer now changes colour when you’re holding the spacebar down before starting the timer. It’s green if the timer will start when you release it, and red if it’ll just cancel the timer.

Wow, this is looking more and more like a CSTimer clone, right?

(honestly I agree)

Devlog #2:

I fixed most problems with the timer. It now updates in real time, and you can (and must) use the space bar to activate it. You start it after you release the space bar, and stop it as soon as you press the space bar again, without automatically starting the timer every time you stop it (believe me, that was a problem for a long time).

So far, it’s turning out like a CSTimer clone, which isn’t actually what I want at the end of the day. Even though this will probably look like a CSTimer clone for a very long time, eventually I swear I’ll make it have additional functionality.

Devlog #1:

I’m trying to build a web application that acts like a timer for solving Rubik’s cubes, a scramble generator, and a cubing algorithm driller.

This coding session, I built a timer (or is it called a stopwatch?). It’s not that good, and you have to physically click a button with your mouse to start and stop the timer. It also does not update live and displays the time in milliseconds, which is… not the best. I’ll improve on it later though.

I’ve gained a bit of JavaScript experience from my WebOS project, so this was honestly not that hard. It was very satisfying to code though.

The actual web page still looks ugly though, I’ll style it after I add the bulk of the functionality probably.