Improve canvas resize handling (partial fix for #88 and #59)

[itsthisjustin]

Summary

This PR adds partial support for canvas resizing in response to browser window size changes, addressing the limitations described in issues #88 and #59.

Changes Made

JavaScript (index.html - both release and compat)

• Added resizeCanvas() function that monitors and responds to canvas size changes
• Updates canvas element dimensions when the browser window resizes
• Attempts to trigger SDL resize events to notify the LÖVE engine
• Handles window resize events, fullscreen changes, and includes periodic checking

CSS (love.css - both release and compat)

• Made canvas responsive with max-width: 100% and max-height: 100vh
• Maintains aspect ratio while adapting to window size
• Prevents content cutoff on window resize

Documentation (readme.md)

• Added comprehensive note about canvas resizing (Note love.filesystem.read/load crash when file doesn't exist #9)
• Clearly documents current capabilities and limitations
• Explains that game viewport doesn't automatically scale (engine limitation)
• References issues resolution resizing issue #88 and love.resize is not called when changing the size of the love.js canvas #59 for context

What This Fixes

✅ Canvas element no longer cuts off content when window resizes
✅ Better responsive behavior for different screen sizes
✅ Improved fullscreen handling
✅ Canvas adapts to browser window size changes

Known Limitations

This is a partial fix that improves the current behavior but doesn't fully resolve the underlying limitation:

• ⚠️ Game content renders at the size specified in conf.lua (e.g., 1280x720)
• ⚠️ Canvas element resizes, but the game's internal viewport doesn't scale to fill it
• ⚠️ love.window.setMode() from game code still won't dynamically resize the canvas
• ⚠️ love.resize() callback may not be triggered on canvas size changes

These remaining limitations exist because SDL/Emscripten in the current LÖVE build doesn't properly handle dynamic canvas resizing without deeper engine-level modifications.

Why This Approach?

A complete fix would require:

1. Modifying the LÖVE engine's SDL/Emscripten integration
2. Adding emscripten_set_canvas_element_size() calls to the window module
3. Rebuilding the LÖVE binaries with these changes

This PR provides immediate value by fixing the "content cutoff" issue while being honest about what still needs engine-level work.

Testing

Tested with a production game (Knave) deployed to Cloudflare Pages. The canvas now properly resizes with the browser window instead of cutting off content.

Backwards Compatibility

✅ Fully backwards compatible - existing games will work exactly as before, but will now handle window resizing better.

Related Issues

• Closes resolution resizing issue #88 (partially)
• Closes love.resize is not called when changing the size of the love.js canvas #59 (partially)

---

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

[itsthisjustin]

Additional Changes - Mobile Responsive Design

Added comprehensive mobile responsive design and fullscreen improvements:

Mobile Responsiveness

• ✅ All UI elements (header, footer, canvas, loading screen) now scale properly on mobile devices
• ✅ Added CSS media queries for tablets (≤768px) and phones (≤480px)
• ✅ Loading screen dynamically sizes based on container width with responsive fonts
• ✅ Footer is now fixed, full-width, and centered on all screen sizes

Fullscreen Improvements

Desktop:

• ✅ Header now automatically hides when entering fullscreen mode (using CSS :fullscreen pseudo-class)

Mobile:

• ✅ Canvas now properly fills 100vh by setting actual canvas buffer dimensions to window.innerWidth x window.innerHeight
• ✅ Removed all CSS constraints by setting maxWidth/maxHeight to none
• ✅ Footer and header are hidden when in fullscreen
• ✅ Body background set to black to prevent color bleed-through
• ✅ Canvas truly takes up entire screen without gaps or bars

These changes ensure a seamless fullscreen experience across all devices while maintaining proper mobile responsiveness when not in fullscreen mode.

[itsthisjustin]

Sorry did not mean to push that mobile keyboard support thing. Stupid claude was way too eager there. I've reverted it.

[itsthisjustin]

Also if anyone wants to test how this works, I've built my game with it at https://playknave.com (try opening this on your phone)