Live demo : jslegenddev.github.io/react-kaplay/
Live demo controls :
Arrow keys to move around.
Use the space key to close the text box once it appears.

Source code : github.com/JSLegendDev/react-kaplay

Get the assets + fonts here : github.com/JSLegendDev/react-kaplay/tree/master/pu…

RESOURCES :
How to Display an HTML Based UI on Top of a JavaScript Game Made With Kaplay : jslegenddev.substack.com/p/how-to-display-an-html-…
Kaplay docs : kaplayjs.com/
React docs : react.dev/
Jotai docs : jotai.org/
Framer Motion docs : www.framer.com/motion/

CREDITS :
Peter's X : x.com/petergencur
Peter's GitHub : github.com/imaginarny
Tileset based of : the-pixel-nook.itch.io/gb-studio-character-pack and the-pixel-nook.itch.io/gb-studio-overworld-rpg-til…
Gameboy font used is from : www.dafont.com/early-gameboy.font

💼 Business Inquiries: jslegend@protonmail.com

CHAPTERS :

0:00 Intro
4:14 Project Setup
17:05 Implementing The Game Example
48:38 Using Jotai to Pass Data Between React and The Game
54:36 Writing CSS to Make UI Scale with Canvas
1:02:59 Building our React UI + Connecting it with Jota