single player pong unnecessary scrolling due to extra width

[twiddlingbits]

Windows 11, Chrome

In single Player pong, it seems to be creating a canvas (or perhaps other HTML element) that is unnecessarily large ot the right (width), that causes a scroll bar to appear and interfere with the right arrow/left arrow movement of the paddle. Using the debug console in chrome to shows this, but i imagine you could also get the issue to appear by reducing the width of the browser window.

[JohnDog3112]

The main problem with this is it seems like changing the canvas size without recreating the render context causes it to just stretch the original resolution to the new one. So I would either need to use the scale function before rendering anything or there needs to be some way to reset the context.

[twiddlingbits]

as we discussed, i think the best thing is to add something like d2d_resize_canvas (or probably an io_resize type call that operates on the twrConCanvas.) See io_setfocus for something roughy similar. Alternaty would be a function to create and delete consoles from C. Something I have been mulling over adding for a while. This concept can be extended to allow the creation, deletion of any twrLibrary derived class from C.

[JohnDog3112]

I'm not quite sure what interface I would add it to. If it's going to by an interface, I would assume it would be applied to IConsoleTerminal, and IConsoleCanvas. However, the only interface they both share is IConsoleBase and I'm not sure what resize would do for IConsoleDiv or IConsoleDebug unless it's expanding the div. For now, I'll create a direct implementation for the d2dconsole, however I'll extend it once I figure out the above.

[twiddlingbits]

we'll, if we decide to add a "resize" option (as opposed to delete and recreate), then there are a few options. You can see that I added twrConSetFocus to IConsoleStreamIn which is used by IConsoleTerminal and IConsoleDiv. That made sense because focus applies to key input.

For a resize, as you say, it could apply to a canvas 'console" (d2d), a terminal (which is built on a canvas, but that is besides the point), and it would also apply to a div console. I think i would add a new interface, IConsoleResizable. And use it like this:

export interface IConsoleCanvas extends IConsoleBase, IConsoleDrawable, IConsoleResizeable {}

But then you have to extend:

struct IoConsole {
   struct IoConsoleHeader header;  	
   struct IoCharRead charin;  			
   struct IoCharWrite charout;	
   struct IoDisplay display;
   struct IoReize resize; // ADDED THIS
};

and add:

io_resize()

Seems like a lot. You could punt on making it general purpose, and add it to IConsoleDrawable.

Another option would to have a set_prop() function. But you want to set width and height at the same time. Which would be a complexity.

Another option, like i mentioned before, is to just have the ability to delete a console and create a new one (with a new size, from C). In this case, the create would not be tied to an existing canvas. It would create a canvas. This would also allow you to create an off-screen d2d surface as well.

Perhaps we should talk about it. I'm going to send you a seperate email.

[JohnDog3112]

I haven't worked on io_resize or something similar quite yet, however, I did find a temporary fix for this issue. When I implemented deeplinks, I set it up so it would refresh the page when going to a new "link" and just have it load from the state saved in the URL. Because of this, I was able to add a few lines of code to change the canvas size before loading the WASM module. So, at least for this issue, the size issue has been fixed.