js13k 2023 Portolani Post Mortem

This is still WIP, will continue to be updated.


Many years back a friend told me about JS13K. The idea always intruiged me. However too many years of trying to write readable code has made extreme code-golfing cause much mental distress.

This year, roblouie/js13k-typescript-starter gave hope. Using that template as a basis, it seemed entering JS13K 2023 was an option.

Design around the 13th-century theme

With the theme of “13th-century”, it was off to Wikipedia to see what happened during that time period. One find was the portolan charts. It seemed like an interesting starting point. A few years back, a group of friends played SailNavSim together. So the “sailing sim + make chart of ports” concept was born.

What went well

TypeScript + Google Closure Complier + Road Roller. TODO

Entity Component System (ECS). TODO


What didn’t go well

Using fonts instead of icons. TODO

Dynamically rendering audio in Safari. TODO

Using fonts for icons. TODO


Knowledge and lessons learned along the way

Lesson: Test output Google Closure Complier and Road Roller regularly. TODO

Knowledge: Spyglasses weren’t invented until the 17th century. History of the telescope.

Knowledge: Karplus–Strong string synthesis. On the JS13K Slack channel, burntcustard mentioned this algorithm. At the time Portolani had no soundtrack. Into the rabbit hole of music gen! TODO

Knowledge: CSS backdrop-filter: blur(<value>). TODO

Knowledge: KeyboardEvent.code vs KeyboardEvent.key. TODO

Knowledge: SVG Paths. Not finding a mono-color fish icon in the Unicode space, creating one was looking to be the only option. “Understanding SVG Paths” by Nanda Syahrasyad was incredibly useful in learning about how the paths are constructed.