All I wanted to do was take a game I made in love2d and embed it in my Sveltekit webpage. Simple, right?
Well, to get love2d working on web, I needed to use a page generator called love.js. But, the HTML pages generated by love.js contain a lot of code that I wouldn't touch with a ten-foot pole — the type of magic Javascript that makes you run away to the nearest framework. So, I did the sensible thing. I forked love.js to strip down the generated webpage to the bare minimum, moved that site into /static/games/dig/index.html, and referenced it from /src/routes/games/dig/+page.svelte, inside of an iframe where hopefully it would never touch my webpage. Svelte gave me a warning, saying I shouldn't include raw HTML, but if it works, it works.
It did work but, something inexplicable started to happen, something that nothing seemed to fix. Going from my homepage to the Dig game, the game loaded perfectly. However, going straight to the URL, the game would fail to load, and even more strangely, the webpage would have no elements on it except for the game.
Turns out, this is the issue that I ran into. By the time I realized that this was my issue, I had already solved it. Yes, since two different files were competing for the same route, Sveltekit would serve either the raw HTML from the /static folder, or it would serve the correctly rendered Svelte webpage, all depending on how the user navigates to the page. To fix it, I renamed index.html to _index.html, and now it loads perfectly. Admittedly, I didn't even know that client-side navigation was a part of Sveltekit until I encountered this issue. Well, now I definitely know!
Keep this in mind when using a web framework with this sort of magic routing — it's very easy to cause a route conflict by putting static content in the same place as your framework code. IMO /static feels like a hack, it's sort of a fallback for when the framework simply hasn't yet covered the ground you're trying to cover. When Svelte didn't allow me to put vanilla JS into my project, I fell back on putting things in /static. Maybe there's a better solution. Think so? Comment below.
Top comments (1)
Thanks for sharing the game, its fun!
I feel the article could benefit with some code snippets, and you have this wonderful game to showcase! Posting a screenshot would make great eye candy. The link itself could be more descriptive. It doesn't communicate that you can click there to try it out for free.
Nice work, fellow game dev 💪