aboutsummaryrefslogtreecommitdiff
path: root/emccpre.js (follow)
Commit message (Collapse)AuthorAge
* js: Add a trivial error handler that alert()sBen Harris2023-02-19
| | | | | | | I'm not quite sure how useful it will be, but it does at least catch an assertion failure in main() and present an opaque message in a box, which is better than stopping and putting a message in the console where no-one will see it.
* js: Hide type menu if there's only one preset and no configurationBen Harris2023-02-16
| | | | It seems a bit silly to display it when there's only one option.
* js: Quicker keyboard access to menu itemsBen Harris2023-01-19
| | | | | | Now pressing "1" to "9" or "0" activate the first ten items of the current menu, to save so much pressing of the arrow keys. There isn't any visible indication of this, so it's a bit of an Easter egg.
* kaios: Make F10 open and close the menuBen Harris2023-01-19
| | | | | | This is no use on KaiOS itself, but provides a way to open the menu from the keyboard on desktop browsers for testing (and for keyboard-accessibility in general).
* js: Tolerate the absence of various UI elements from the HTMLBen Harris2023-01-19
| | | | | To make things more consistent, the static buttons now all have their own variables.
* js: Look up elements in the DOM as early as possibleBen Harris2023-01-19
| | | | | | | | | | | | Now that our script is loaded using <script defer>, we can rely on the DOM's being complete as soon as it starts running. So when we declare a variable to point to a DOM element, we can initialise it with that element. This saves having these odd initialisations scattered around the code, usually but not always at the site of first use. I'd like to be able to do the same thing with the variables that point to C functions, but the Module.cwrap() call isn't entirely safe before Emscripten has finished loading the C code.
* js: Simpler and more robust startup procedureBen Harris2023-01-19
| | | | | | | | | | | | | | | Previously, we initialised all of the JavaScript event handlers as soon at the DOM was loaded, and then called main() ourselves once the Emscripten runtime was ready. This was slightly dangerous since it depended on none of those event handlers' being called before main(). In practice this was difficult because most of the elements the event handlers were attached to were invisible, but it did limit what event handlers could safely be used. Now, the event handlers are initialised from main(). This makes things work in a sufficiently conventional way that we can just let the Emscripten run-time call main() in its usual way, rather than involving ourselves in the minutiae of Emscripten's startup.
* js: Make soft-key labels generate key events when clickedBen Harris2023-01-19
| | | | | This makes the app page a little easier to test on desktop browsers that don't have SoftLeft and SoftRight keys.
* kaios: Major parts of a build for KaiOSBen Harris2023-01-19
| | | | | | | | | | | | | | | | | | | | | | | | | | KaiOS (which is based on Firefox OS, formerly Boot to Gecko) runs its "native" apps in a Web browser, so this is essentially a rather specialised version of the JavaScript front-end. Indeed, the JavaScript and C parts are the same as the Web version. There are three major parts that are specific to the KaiOS build. First, there's manifest.pl, which generates a KaiOS-specific JSON manifest describing each puzzle. Second, there's a new HTML page generator, apppage.pl, that generates an HTML page that is much less like a Web page, and much more like an application, than the one generated by jspage.pl. It expects to build a single HTML page at a time and gets all its limited knowledge of the environment from its command line. This makes it gratuitously different from jspage.pl and javapage.pl, but makes it easier to run from the build system. And finally, there's the CMake glue that assembles the necessary parts for each application in a directory. This includes the manifest, the HTML, the JavaScript, the KaiOS-specific icons (generated as part of the GTK build) and a copy of the HTML documentation. The directory is assembled using CMake's install() function, and can be installed on a KaiOS device using the developer tools.
* js: Have the "SoftRight" key open the menu by focussing itBen Harris2023-01-19
|
* 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.
generated by cgit v1.1 at 2026-05-23 02:29:25 +0000