Ship #1 Pending review

@Ash-ioL on Sorting Arena · about 1 hour ago

Hi! I made a fun little app that can take 2 sorting algorithms and face them off to the death!!!⚔️ The faster one wins!

To test out my project, simply click the “try project” and there are in-website instructions for you to follow. You can scroll through the side panel to select configurations and click run.

In particular the most challenging part of making this was the initial deadline: I was making this project as a demo for a high school club but as an elite procrastinator I started building it the day before the event at 9 pm. So I worked on it for 4 hours with a couple breaks until 2 am. (And during the demo it was too hot outside to run the project 💀).

I’ve always wanted to make a sorting arena, mainly to better understand different sorting algorithms and also to have a interesting project in my portfolio. I’m happy how this turned out.

3 devlogs
7h

Try project → See source code →

Open comments for this post

@Ash-ioL on Sorting Arena · about 1 hour ago

1h 1m 11s logged

Devlog 3: Results Screen and Improved Look/Functionality

First I generated a design for the results screen with Figma AI. Then I handcoded the structure for it. The challenging part was to struture it well so that it’s easiest to style with css. Then I started working on the CSS, but then i realized if I did I handcode everything then I wouldn’t get sleep tonight. So I gave the job to chatgpt. I’d say I manually coded around 50% of the results screen. After that, I made some improvements to the interface on the left side. I added a number that shows the exact period setting , and I adjusted the paddings and margins to make everythign look cleaner. Overall, I’m pretty proud of where this project is and I’m happy to put a bookend to it and get it off my mind now.

Open comments for this post

@Ash-ioL on Sorting Arena · 20 days ago

1h 55m 32s logged

Devlog 2

I added better overlap prevention by making it so that the page is still interactable when running, but this still has some flaws with reloading, and inconsistencies with cache and actual values which need to be fixed.

I also added the html structure that replicates the attached design (generated by figma ai). Currently there’s no styling, only the code stucture.

Future plans:

Improve overlap prevention
Add classes to make design styling easier
Complete number slider
Figure out why the speed seems to be capped
Code logic for the results

Struggles:

Not much but it feels kind of tedious to write each thing line by line even though I’m using autocomplete. I’m also struggling to figure out why there’s a max speed cap.

Open comments for this post

@Ash-ioL on Sorting Arena · 23 days ago

4h 12m 1s logged

Devlog 1

I made a quick prototype, and added several sorting algorithms. It is at a usable state but has many bugs. It displays the result as an alert like this. Biggest challenge was working with all the small variables like the time and stuff and working with asynchronization.