macabeus / klo-gba.js

🧢 Reverse engineering tool for the Klonoa's GBA game

Welcome!

---

🧪   Do you want to study with my personal projects?

I love to explore computers subjects that normally we won't use on a workday. I'm sure that you'll love to explore too!

	Learn about reverse engineering using a GBA game as a case study	🎥 With talks (🇺🇸) 📄 With blogposts (🇺🇸 / 🇧🇷 / 🇪🇸)
	Demystifying compilers by writing your own	🎥 With talks (🇺🇸 / 🇧🇷)

🧑‍💻   VSCode-related stuffs

Are you like VSCode? Check my projects about that!

🔧   Currently working on...

You could check on my profile the projects I've helped. Sometimes I'm working on my own initiatives, sometimes on communities' projects. I'm currently working on:

• wesnoth: contributing for this amazing and nostalgic opensource game

🌐   More

• Site
• Twitter

klo-gba.js's Issues

Refactor Body component

Body is a huge component, that store many states and have a big render.
We need to desacople it. Some ideas:

• create a new component, MapActionsBar/index.js, to bar above the map
• ???

Add tests

We have none tests... 😢
We need to create it in order to keep the code sanity 🚑

Maybe we could remove the "ROMProvider"?

ROMProvider is an old provider created when the project was earlying.
It is responsible to store everything about the ROM itself, like buffer, load...

But, maybe it is unnecessary, increasing the code complexity without gain.
We could just use a component instead of a provider, or merge it on the VisionProvider creating a single provider to manage Vision and ROM.

Needs better error handler at C code

We are using code written in C at Scissors to resolve compress logic. This code is compiled using emscripten.
To interop the compiled code with the rest of project we have one wrapper to huffman and another wrapper to lzss.

But we have some problems in this interop:

• since printed messages at C is only passed to console at browser when a \n is printed, some error messages (for example, line 276 at huffman.c and line 227 at lzss.c) isn't showed
• these errors isn't handled at JS either showed to the user

These errors happens currently. I think that it happens because we are using the same filename to read and to write (see wrappers). We should test if using a different file names these errors are resolved - but we still need make these erros more noticeable.

Better experience when loading the tilemap

Currently, we have a very slowly and boring loading when select a vision to display the tilemap.
To load a tilemap is a very heavy task, because we need to create thousands of PointTile components, one for each tile at the map.

The first load takes ~3 seconds, and the second load takes ~13 seconds!! Probably because the cache miss at all PointTile elements)

We need to provide a better experience to the user. For example:

• displaying a nice loading component
• displaying the tilemap in parts
• resolve the cache miss
• optimize it (maybe creating less PointTile components following an algorithm?)

Build and host it as a static web page at GitHub Pages

We are making a static website, then we need build it to host it on an amazing place like GitHub Pages - so the users can to enjoy it!

Add a empty state on Map

When a ROM is loaded, the Map component start blankly, which is weird.
The user could think that something wrong happened, because no information is showing.

Then we need an empty state in Map component, to show informations to say how to load a map and it will show here.

Only works on USA ROM

For some reason, this application only works on USA ROM.
This is a "ghost" bug, because the ROM can be uploaded without errors, but when the user try to display a vision, crash.

At the first moment, we could to do show an error message saying that it only works on USA ROM, and at another moment we can make to work on European and Japan ROM.

Error running webassembly command

After running the sh ./shellscript/compile-webassembly.sh command, I've got the following error:

sh ./shellscript/compile-webassembly.sh 
./shellscript/compile-webassembly.sh: 1: ./shellscript/compile-webassembly.sh: function: not found
./shellscript/compile-webassembly.sh: 2: local: not in a function

The script successfully executed with bash ./shellscript/compile-webassembly.sh

PS: I've got this error on Ubuntu 18.04 LTS.

Project depends on Docker

In order to execute the project, actually, you'll need to have docker installed on your machine since it uses it to compile the webassembly code.

Maybe we should put this as a dependency on the README, or compile the webassembly code without using docker at all.

Storybook

We really need start to use the Storybook!
We have many components with many states, and we'll create even more new components.

Using the Storybook is useful in order to create uncoupled components easy to test and with a documentation about the states.

SelectVision component start wrongly with "Vision 1-1" selected

When a ROM is loaded, the user can't select "Vision 1-1", because it is falsely already selected.

The correct behaviour is this component start with no vision select.

Isn't possible to open an already existing custom ROM

If we create a custom ROM, isn't possible to open it, because:

• there isn't a button to open ROM when we already load one
• the code to check if the ROM is the USA doesn't work very well with the custom tilemap

Bug when you drag objects

There are two types of bugs that are happening when Vision objects are dragged.
The first happens when I click on the same object several times, sometimes pressing both mouse buttons at the same time. This happens most easily using the "eraser" tool. The object begins to follow the mouse:

The bug seems to get worse when you select Vision objects and start repositioning them in the scenes, I did it several times and the object now follows the mouse away.

The second bug is when I place Vision objects at the top of the screen. It is virtually impossible to reposition them there. With luck you can click on them again.

Eyedropper

It would be interesting to create an “Eyedropper” tool (like Photoshop) so that I can choose any Vision tile without having to go to the bottom of the site. This will optimize the speed with which I can modify the Vision.

Apply naming convention

We need a naming convention in project. It is important to sanitize our code.

For example, at some places we have noun before the verb (such as visionUpdate) when the correct is verb before noun (updateVision).

N-ary vision crashes when saving a tilemap for vision N-1

Since we are replacing the tilemap for a vision to an other tilemap, we are overwriting its memory space.

But, sometimes our tilemap is larger than the old tilemap, so it'll overwrite the next memory space of the next vision, breaking it!

We need a way to fix it! Maybe reducing the size of the tilemap?

Memory Leak 💢

For some unknown reason, we have a very annoying memory leak on the project.
I don't know exactly when it started, but I guess that it is because of the web assembly - or maybe because of the canvas.

After some reloads at the page, we need to close it and open a new tab because web assembly can't start since haven't enough memory.

We need a logo!

Always nice projects has a nice visual identity. Then, we need a nice logo!

Map component is always rendered, still when didn't need

For some reason, Map component is always rendered at each time, still when it don't have any change.
A simple way to check it is adding a console.log in this function.

It's an awful behaviour because this render function is very heavy.

How could be the UI?

We need define how will be the UI for this project, which components should be create and how the user will interact with they.

In the first moment, I think that we could create something like it:

We already have the components 1 (Head), 2 (Map) and 3 (MapFooter). The components 4 (OAMTable?), 5 (Hexdump?) and 6 (FloatingMapOptions?) should be create.

The OAMTable will list the OAMs on the map, showing the name, position, and other informations for each OAM. When a line is hover, the map should highlight it. When a table line is selected, the Hexdump should show informations about this OAM.
An important detail is that the game "recycle" the OAM at each vision step, then we need a friendly way to abstract it but we need keep the limits about it. Maybe slip this table in three sections, one section for step?

The Hexdump will be used to user can view and edit the informations about the OAM and (maybe also) the map. Would be nice if we can describe each byte, something like it:

Another good example is this web tool.
But, at the first moment, we can just use this React component, because it is already working.
I think that this hexdump component could be an isolated react component.

The FloatingMapOptions will be a floating and draggable box on map, that has some options to change the map display. When the mouse is far from it, should has a little opacity.
At the first moment, I think that nice options is "Show/hide OAM" and `Show/hide grid".

Some questions:

• which others components we can create to improve the UI/UX?
• which columns the OAMTable should have?
• how should be the highlight on map when a line at OAMTable is hovered?
• which options the FloatingMapOptions should have?

When the tilemap is larger than the browser window, the layout broken

When the user loads a tilemap horizontally larger than the browser window, a part of the tilemap is shown outside of the card, breaking the layout.

The correct behaviour is to show the tilemap inside of the card, and the card has a scrollbar to user can navigate in the tilemap.