The Lab

The landing page.
The weekly dashboard.
So many tasks, so little spoons.
Spray him with febreeze!
The most common ending. Not enough spoons :(

Inspiration & What It Is

Quiet suffering is the name of the game. Erin here works in a magical lab, bottom of the totem pole needing to grind her way up. She's disabled, though, which makes it pretty difficult some days when the workload requires more spoons than she has.

This is a browser-based choose your own adventure game. Use your spoons wisely to make it through the week and get your to-do list complete!

How I Built It

I built it with React, Redux, Tailwind and Ink. Ink is a language that abstracts choose your own adventure games from if statements and while loops to a more readable form when writing.

I also used some react libraries (tsparticles and react-typewriter-effect) and got the initial boilerplate from a tutorial in 2018 of someone bringing Ink, React and Redux together.

That boilerplate needed to be amended so badly that the only place it kind of remains living is the Redux code. I also used a couple pinterest images and google fonts.

Challenges I Ran Into

The biggest challenge this whole hackathon has been working with Redux. The boilerplate used connect and that is not the easiest function to work with. The recommended method now is to use hooks in deeply nested children, but I got so far into the connect method that changing the hooks would mean I would have to refactor the entire thing.

Speaking of deeply nested children, rearranging the entire screen based on what point in the story you were was a gigantic pain. There is no way to change the variables within the ink story, you have to read the variables through their tag system. Anything not in the tags is not able to be worked with. I had to use the tags with useState and useEffect to have the whole page change as the story progresses.

Additionally, learning Ink and the best way to manage the story was a gigantic pain as well. Something that would be simple to do such as adding to an array or removing from an array or having a while loop requires a lot of janky finicking around. Ink doesn't even have arrays, it only has sets. Ink has some really good documentation, I'll give it that, but to make it do what I wanted it to do required fighting it so hard.

Accomplishments I'm Proud Of

I'm proud I finished, to be honest! My first hackathon I was working right until the end and even then we still had a critical bug.

This time around? No bugs in sight! I nearly gave up. I spent 3 hours debugging in circles with ChatGPT only to realize I could add a second variable to my useEffect() for the page to update.... 😭

What I Learned

I learned that web development progresses too dang fast for niche tutorials to keep up. I was expecting to have to do most of the work myself but dang if it ain't a pain.

I also learned that AI has a shorter term memory than me, with clinically short term memory. It can help with semantic errors, but logic ones? Tough luck!

What's Next For The Lab?

This was originally conceptualized as a much longer-running text adventure with multiple perspectives, lots of personality on the splash screen, multiple routes, and lots of easter eggs.

Thanks to my debugging-filled weekend, the gameplay of this here game ain't exactly riveting. I want to fix that. Add more pictures and big ui changes to fit the atmosphere.

One big feature I really wanted to add was a calendar for the week, always on screen. Sadly, time is limited. Maybe when I get back home! 🥰