gabrielflorit / script-8.github.io

A JavaScript-based (React + Redux) fantasy computer for making, sharing, and playing tiny retro-looking games.
https://script-8.github.io/
MIT License
645 stars 34 forks source link

Highlight Draw Call on Mouse Hover #309

Closed Kethku closed 4 years ago

Kethku commented 4 years ago

In progress PR which highlights the draw call under the mouse in game by subtracting 1 from the draw color.

This rewrites function calls under the current mouse position by injecting a special symbol that tells the framebufferapi to draw pixels one step brighter. With some polish I think this could be a super unique feature and would be incredibly useful to when exploring someone else's code.

The same technique could be used more broadly, but this is my first stab at it.

Also it still requires some cleanup before its production ready.

Kethku commented 4 years ago

One problem I haven't figured out how to fix is that the iframe code thinks that the game was modified when the mouse hovers over a call. I'm not sure what the cleanest way to fix that is, so I'm interested in suggestions

gabrielflorit commented 4 years ago

For reference, Keith wrote a detailed blog post on how he coded this. Read here: http://02credits.com/blog/day95-script-8-learnable-programming/

gabrielflorit commented 4 years ago

One problem I haven't figured out how to fix is that the iframe code thinks that the game was modified when the mouse hovers over a call. I'm not sure what the cleanest way to fix that is, so I'm interested in suggestions

1) Is this a problem? I mean, when you hover over a call, how often does the iframe code re-eval? Is it just once, just like when you type an extra character? Or is it 60fps for as long as you're hovering? 2) If it is a problem, one simple (and probably not clever) way is to add a boolean to the payload Output.js is sending to Iframe.js, with a message like DONOTEVAL.

Kethku commented 4 years ago

Its only a problem in that its weird. I don't think it could cause any functional issues as when you move your mouse off of the text editor to go save the cart, the injected code would be gone. That said, its its a bit of an oddity, so it should probably be fixed.

As for how often does it happen, I think it only happens when the mouse moves, and when the call under the mouse actually changes (I think... in my testing outside of the project I implemented the change but I need to double check thats actually happening here), so performance wise its no worse this way than before. Eval only happens when the code changes, so 60 fps is kinda unrelated maybe? I don't remember for sure.

To really fix it I think we need to set a "dontSave" flag in the redux state and have the changed indicator check the "dontSave" flag before updating its UI. Maybe that would be a more principled solution?

I'd be happy to work on these and update my PR, I just wanted feedback first.

Kethku commented 4 years ago

I'm confused. I think it has to be evaled because thats how the graphics get changed to reflect the hovered function. The struggle is that the current path for evaled code also updates what code would be stored in a gist. Thats the bit I don't know how to tease apart.

gabrielflorit commented 4 years ago

Oh of course. I see.