aboutsummaryrefslogtreecommitdiff
path: root/emccpre.js (follow)
Commit message (Collapse)AuthorAge
* js: When opening a dialogue box, try to focus itBen Harris2022-12-10
| | | | This will make using menus from the keyboard more convenient.
* js: Add a mode where the puzzle tries to fill the viewportBen Harris2022-12-10
| | | | | | | | | | | | | | | | This is activated by putting the puzzle in an element with id "puzzlecanvascontain". In that case, the puzzle's default size is as close to filling that element as is achievable. Unlike in the normal mode, this sets the CSS size of the canvas directly. Because it might take a little while for the page to settle down after loading, and because the size of the viewport might change, this listens for "resize" and "load" events, and only bothers changing anything when the page is fully loaded. Waiting for the document to be complete might be a problem if we had images and so forth that we could plausibly be waiting for, but we don't.
* js: Allow CSS to set the font used by the puzzleBen Harris2022-12-10
| | | | | | | | | | | | | | This means that the calculated font properties of the HTML canvas now control what font is used. The size is overridden, and for monospaced text so is the family. I'd like to be able to also specify the monospaced font, maybe using a CSS variable, but that looks like being quite a lot of extra complexity. My experience when testing this was that constructing a valid "font" string for a canvas context is prone to breakage, but broke in a way that left the font unchanged, so we always set a simple specification first before trying to construct one from CSS.
* js: Bypass our own dialogue box when loadingBen Harris2022-12-05
| | | | | | | | By constructing the <input type=file> off screen and activating it from JavaScript, we can jump straight to the browser's upload dialogue box without interposing our own one. This gives a smoother experience, and also avoids the difficult-to-handle <input type=file> ever being visible.
* js: Correct a comment describing timer_callbackBen Harris2022-12-03
|
* js: Simplify drawing context managementBen Harris2022-12-03
| | | | | | | | | | | | | There's not much point in re-requesting the drawing context from the offscreen canvas at the start of each drawing operation. The canvas keeps the context around and returns it on every call to getContext(), so we may as well just keep our reference to it too. This does mean that the front-end won't detect puzzles drawing outside of a redraw operation, but I think it's the mid-end's job to assert things like that. Rumours that I'm doing this because I had a mysterious bug whereby ctx was unexpectedly null are entirely true.
* js: Switch to using the resize handle in the HTMLBen Harris2022-12-02
|
* js: Don't bother resizing offscreen canvas at startupBen Harris2022-12-02
| | | | | It will get its size set soon enough once we know the size of the puzzle anyway.
* js: Remove a JavaScript construct that confused emcc -O3Ben Harris2022-12-02
|
* js: Allow for putting a resize handle in HTMLBen Harris2022-11-29
|
* js: Correct co-ordinate-mapping function for what CSS actually doesBen Harris2022-11-25
| | | | | | | | | By default, CSS uses "object-fit: fill", which means that an object is independently scaled in both dimensions to fit its containing box. This is simpler than what I'd assumed (which was "object-fill: contain"). Obviously, the HTML could be changed to use a different object-fit, in which case this code would have to detect it, but for now following the CSS default is more correct than not.
* js: If the HTML contains a dialogue-box form, delete itBen Harris2022-11-24
| | | | | | This is so that (given time for caches to expire) I can switch to having a persistent dialogue box in HTML rather than fabricating it from scratch in JavaScript each time it's used.
* js: Disable menu keyboard controls when dialogue box is activeBen Harris2022-11-24
| | | | | I think this is broadly the wrong approach, but it's an improvement until I implement the right one.
* js: Add actions for more keys in menusBen Harris2022-11-23
| | | | | | I expect Escape to exit the menu, and SoftRight should do that as well for KaiOS. Backspace goes up one level through the menus, again because that's conventional on KaiOS and not too confusing elsewhere.
* js: Move global keyboard handler to capturing phaseBen Harris2022-11-23
| | | | | | | In the bubbling phase it managed to catch the "Enter" keypress that opened a dialogue box from the menu and use it to close the dialogue box again. I think it's probably reasonable to have it run earlier and just permanently steal any keypresses it wants.
* js: Move focus-tracking to entirely "focus" eventsBen Harris2022-11-23
| | | | | | | | | When we disable a button, it loses focus but doesn't generate a "blur" event. This means our "focus-within" class goes wrong. Instead of relying on "blur" events to remove the class, remove it from any inappropriate elements in the "focus" handler. This requires attaching the handler to the root element of the document, but I've got plans that need that anyway.
* js: Replace :focus-within with JS-maintained .focus-withinBen Harris2022-11-23
| | | | | | | Old browsers (like KaiOS 2.5) don't have :focus-within, but it's pretty easy to replace the pseudo-class with a real .focus-within class maintained by JavaScript event handlers. This is made only marginally fiddlier by the odd fact that "focus" and "blur" events don't bubble.
* js: Add keyboard navigation for menusBen Harris2022-11-23
| | | | | | | Once the input focus is in the menu system (for instance by Shift+Tab from the puzzle), you can move left and right through the menu bar and up and down within each menu. Enter selects a menu item. The current menu item is tracked by giving it the input focus.
* js: Tiny comment fixBen Harris2022-11-21
|
* js: Allow status bar to be present in the HTMLBen Harris2022-11-20
| | | | | | | I'm generally in favour of putting HTML in HTML rather the constructing it in JavaScript, and this will allow for simplifying the code eventually. This only changes the JavaScript to make sure that's in people's caches before I change the HTML itself.
* js: Create the puzzle resize handle only if the puzzle is resizableBen Harris2022-11-15
| | | | | If there's no resizable div to attach it to, there's not much point in creating the handle and the doing nothing with it.
* js: Substantially simplify timer codeBen Harris2022-11-13
| | | | | | | | | | The C code in the Emscripten front-end already keeps a timer_active variable to ensure that the timer can be activated only when it's inactive, and deactivated only when it's active. Adjusting the JavaScript side to rely on this makes the code much simpler. The only oddity is that it now requests a new animation frame before calling the callback so that it's ready to be cancelled if the callback decides to deactivate the timer.
* js: Give keyboard focus to the puzzle canvas at startup againBen Harris2022-11-12
| | | | | | | I think this has been broken since a752e73, when the canvas changed to being hidden, and hence unable to receive keyboard focus, when the page loaded. I've now moved the focus() call to after the canvas gets displayed.
* js: Add a way to have environment variablesBen Harris2022-11-12
| | | | | | | | | | | | They can now be specified by sticking some JSON in a <script> element in the Web page: <script id="environment" type="application/json"> { "LOOPY_DEFAULT": "20x10t11dh" } </script> This isn't brilliantly useful, but it does allow for changing settings without recompiling.
* js: Label all form controls and put controls inside labelsBen Harris2022-11-12
| | | | | This should help with accessibility and means we don't need to give IDs to tick-boxes.
* js: Convert menus to use semantically appropriate HTML elementsBen Harris2022-11-12
| | | | | | | | | | | | | | | | | Presets are now radio buttons with labels, and menu items that take actions are now buttons. The <li> representing each menu item is now a thin wrapper around another element: a <label> for radio buttons, a <button> for other buttons, and a <div> for submenu headings. All of the things that previously applied to the <li> now apply to that inner element instead. This means that presets can now use the standard "checked" attribute to indicate which one is selected, and buttons can be disabled using the standard "disabled" attribute. It also means that we can query and set the state of all the presets at once through their RadioNodeList. I think this should also make the menus more accessible, and make it easier to make them keyboard-controllable.
* js: Add various missing variable declarationsBen Harris2022-11-10
|
* js: Reinstate a missing variable declarationBen Harris2022-11-09
| | | | | | ... and then decide there was no excuse for renaming the variable, so now it has the same name it had before I started using Window.requestAnimationFrame().
* js: Switch to window.requestAnimationFrame() for timingBen Harris2022-11-09
| | | | | | | | | | This is an API specifically designed for the purposes of timing animations. Unlike setInterval, it tries to synchronise with the screen refresh rate. It naturally passes us timing information, saving the need to construct a Date object every frame. It has the nice feature that browsers (at least Firefox 91) will call it less frequently when the puzzle page isn't visible, which saves CPU time in puzzles that run a timer continuously.
* js: Cancel UI events when the mid end says they've been handledBen Harris2022-11-08
| | | | | This means that if a key doesn't do anything in a puzzle, it can operate the browser instead.
* js: Move much of the handling of device pixel ratios to the mid-endBen Harris2022-11-08
| | | | | Now that the mid-end knows how to do it, we can remove some complexity from the front end.
* js: Make update_pixel_ratio() more robustBen Harris2022-11-08
| | | | | | | | | | | With very small tile sizes, js_canvas_find_font_midpoint() can throw an exception. When it was called from update_pixel_ratio(), this prevented the new MediaQueryList from being created, which meant that the puzzle stopped noticing changes of device pixel ratio. Now update_pixel_ratio() establishes a new MediaQueryList before calling rescale_puzzle(), so the exception can't break it. Catching the exception properly would be even better, of course.
* js: Tolerate the non-existence of some HTML elementsBen Harris2022-10-29
| | | | Specifically, the permalinks, the apology, and the resizable div.
* js: Distinguish manual resizes from device pixel ratio changesBen Harris2022-10-27
| | | | | | | | | | This adds a new callback, rescale_puzzle(), that's called when the device pixel ratio changes. This means that resize_puzzle() can safely set the nominal canvas size, which means that manual resizing of the puzzle now sticks. Still missing: paying attention to the device pixel ratio when choosing the initial (or reset) size.
* js: Very bad attempt at making puzzles change size when zoomingBen Harris2022-10-27
| | | | | | This has the entertaining consequence that repeatedly zooming in and out causes puzzles to gradually shrink, thus demonstrating that recording the nominal size correctly will be necessary.
* js: Make update_pixel_ratio more backward-compatibleBen Harris2022-10-26
| | | | | | | | Despite my stylistic downgrades, it still used two features not present in Firefox 48, and hence KaiOS 2.5: passing options to addEventListener, and calling addEventListener on a MediaQueryList at all. Now it uses the older addListener method and explicitly removes each listener as soon as it's called.
* js: Be more subtle about cancelling keydown eventsBen Harris2022-10-25
| | | | | | | | | Now we only cancel a keydown event if the C keyboard handler recognises the key and passes it on to the midend. This doesn't necessarily mean that the midend has actually done anything with it, of course. Still, this is enough to allow F12 to open the developer tools even when the input focus is on the puzzle. It also allows for tabbing out of the puzzle into the links below it.
* js: Remove keypress handlerBen Harris2022-10-25
| | | | | | | | | | | At least in modern browsers (and I suspect in all browsers), cancelling a keydown event ensures that the subsequent keypress event doesn't fire. See <https://w3c.github.io/uievents/#keys-cancelable-keys>. So there's no point in having a handler on keypress events that just tries to cancel them as well. Removing the handler doesn't do much now, but it opens the possibility of being a bit more selective about which keydown events we cancel.
* js: Use KeyboardEvent.key for ASCII keystrokesBen Harris2022-10-24
| | | | | | | | | | This requires passing in KeyboardEvent.location from JavaScript so that we can detect the numeric keypad properly. Out of caution we currently only set MOD_NUM_KEYPAD on numbers, like we always have, but we have enough information to set it on arrow keys, Enter, "+", etc. This finally gets '/' and '\' working in Slant again.
* js: Remove the charCode argument from key()Ben Harris2022-10-24
| | | | It hasn't been used in a while.
* js: Use less-modern syntax in update_pixel_ratioBen Harris2022-10-23
| | | | | | | | Stealing code from the MDN has the consequence that it uses shiny ES6 features like "const", "let", and "=>". This looks a bit odd among the more conservative style of the rest of Puzzles, so I've downgraded it to "var" and "function". I'll let the template string stay because that actually helps readability.
* js: Make resizing of puzzles work properly againBen Harris2022-10-22
| | | | | | This requires looking at the CSS size of the puzzle canvas rather than its internal size, and then adjusting the new size to account for the device pixel ratio.
* js: Pay attention to changes in device pixel ratioBen Harris2022-10-22
| | | | | | | Because it's the simplest thing to do, when we notice such a change we keep the current puzzle at its existing size measured in device pixels. This has the rather odd consequence that when changing the text size in Firefox, the size of the puzzle remains constant.
* js: Map mouse co-ordinates correctly even when CSS scales our canvasBen Harris2022-10-22
| | | | | | | | | | | | Our system for mapping mouse coordinates to canvas coordinates assumed that the puzzle canvas had the same dimensions in CSS as its own internal width and height. This is true in the current wrapper HTML, but it's very easy to accidentally change and there are circumstances where we might want to deliberately change it in future. To fix this, we now inspect the CSS size of the canvas when processing mouse events, and map the coordinates through the scaling and translation necessary to convert CSS pixels into canvas pixels.
* js: Percent-encode game IDs in URLs and decode them again on inputBen Harris2022-10-21
| | | | | | | | | | | | This is necessary to allow all random seeds to round-trip properly. It's probably not currently necessary for descriptive game IDs, but it won't hurt. I've deliberately gone for encoding only those characters that are not valid in fragment identifiers to minimise the ugliness of the generated URLs. For slightly interesting historical reasons, '#' is not valid in a fragment identifier, so all random seed links end up a little bit ugly.
* js: Read save files as text rather than binary stringsBen Harris2022-10-21
| | | | If I'm going to insist they're text I should be consistent about it.
* Revert "WASM: move save file encoding from JS into C."Ben Harris2022-10-21
| | | | | | | | | | | | Now that save files are (even more) officially ASCII, it's perfectly safe to pass them to JavaScript as UTF-8 strings. This means that the form in which save files are shipped from C to JavaScript is the same is the form in which they're shipped from JavaScript to C. That allows for doing new things with them, like writing them to local storage. This reverts commit f729f51e475ff98d0caf529f0723ef810b1c88ef.
* js: Make the dialogue box heading actually be an <h2>Ben Harris2022-10-18
| | | | This is semantically more correct and less ugly as well.
* js: When making a hidden element visible, just remove "display: none"Ben Harris2022-10-17
| | | | | | | | | | | This removes any assumption in the JavaScript code about precisely what "display" setting the element should have. This means that now the only places where the JavaScript manipulates elements' styles are to set the width of the puzzle container and to mark and unmark elements with "display: none". These both seem like reasonable kinds of semantic markup that just happen to be expressed as styles.
* js: Move dialogue-box sizing and positioning from JavaScript to CSSBen Harris2022-10-17
| | | | | This has the advantage that if you resize the window while a dialogue box is active, the dialogue box adjusts itself accordingly.
generated by cgit v1.1 at 2026-05-20 12:57:29 +0000