Red Panda - The Zoo Demo

Red Panda - The Zoo Demo

17 devlogs
13h 41m
•  Ship certified
Created by Ghost of L87

This is a static Svelte site run on Github Pages and a demo project for a soon to be proposed YSWS, "The Zoo". Participants make a static Svelte app about any animal (real or not). I decided to make this demo about a Red Panda named Kitsu. Super excited to make a YSWS draft and tutorial on how to make a site like this in the near future!

Timeline

Ship 1

1 payout of shell 305.0 shells

Ghost of L87

about 1 month ago

Ghost of L87 Covers 17 devlogs and 13h 41m

Added in more responsive updates. Before I had just tested up to what size my Mac window could go, but I was able to iron all the issues pretty quickly once I ran it on my phone. Should have ran it on the port im realizing now but it's shapable now so we learn and move on w^

Update attachment

Site is officially deployed at lynn89-sudo.github.io/red-panda

Just need to iron out responsive design bugs and I'll ship

Update attachment

everything is done!

Completed a quick Endangered Status page. For a demo it's more than fine, but if the program gets accepted I'll probably make it a bit better.

Update attachment

Kitsu Page is complete!!

Both night (sleeping) and day (eating) sequences work, might have to squash some bugs but I think I got them all.

Final part is making the endangered status page then shipping! w^

Update attachment

Kitsu now attacks when you disturb her too much while sleeping.

Now you may be asking, what does Kitsu do to attack? I can't tell you... I can only say she doesn't give up easily...

Update attachment

You can now over-pet Kitsu. She has 3 phases for more angry: normal, annoyed, very annoyed, angry.

I plan to make it so that when she reaches peak angry you get redirected from the page before she gets aggressive.

Update attachment

Added in the Angry Face, will work more on this at a later time

Update attachment

Added in a Splash Text label that dynamically updates

  • If sleeping, just leave Kitsu alone
  • If awake, either feed or play with her depending on a random generated hunger level
Update attachment

Added in sleepy Kitsu!!

Kitsu automatically wakes up around dawn and dusk, and sleeps the rest of the day. Red Pandas sleep the majority of the day away! Quite lucky, but they are an endangered species so maybe not a great survival strategy.

Otherwise in love with this site, one of my favorite projects in a long time.

Update attachment

Working really well so far. Using position relative on the container and position fixed on the images, they stack on top of each other. I made the images so that they have the exact same dimensions and the placements of the parts are relative to the whole body. Also added an infinite CSS tail wagging animation.

Unfortunately the time spent making the art assets didn't get tracked >:(

Update attachment

Panel unlocks properly and button links to the page, need to build the kitsu page now

Update attachment

Started working on Red Panda art for the Meet Kitsu page, also decided to eventually make a page on the endangered status of Red Pandas.

Facts Panel is complete and unlocks the other pages when you go through all 5 facts, may add a timer minimum to this but still deciding

Update attachment

Got the arrows to work, had to use a button instead of plain span.

Also tried using the preload feature on Svelte to load the json, but kept running into issues. I might try again later, but it's presentable as is.

Update attachment

Got the icons to work properly now, the issue was related to how I used google icons on the banner.

First fact works properly, now I need to create back and forth arrows to cycle through.

Update attachment

facts.json is working mostly properly now, I have no clue why google fonts icon isn't working right now, given it's working for the banner :|

Forgot runes existed in Svelte 5 so I am using those now instead of the Svelte 3/4 syntax

Update attachment

Added in a Svelte component that participants will import, which will link to the main site when it exists

Update attachment

Started the app, going a bit smoother given I know more of what I'm doing. SvelteKit makes it much easier.

Debating between Kitsu and Mochi for the names, but that's beside the point.

Update attachment