Testing/feedback request for the web version of a code wheel feelie

In addition to working on a game, I’m also producing a bunch of feelies and documentation to go along with it. My intent is to provide most of the feelies in both print-and-make versions and as standalone interactive web content.

One of the feelies is a code wheel. I’ve tested the web version in Firefox, Chrome, and Safari, but I’d be interested in additional feedback or problem reports for various browser and OS versions.

I’d also like feedback on basic usability, and whether or not its easy to figure out how to interact with the thing without additional documentation (there’s a tooltip on the page but that’s it).

The wheel itself has placeholder values (just A-Z several times) so it’s not the actual finished feelie, but I’m just looking for feedback on whether it works a web app, not the puzzles it is used for in the (unreleased) game.

In giving feedback it would help if you provide the browser and browser version you’re using (Chromium 143.0.7499.109, as an example), as well as the OS and OS version.

This is a graphical widget, so it’s not very accessible. My intent is to provide an accessible alternative, probably in game. If anyone has ideas about how to make the web version more accessible I’d absolutely be interested, though.

The test page is hosted on github: here.

3 Likes

Firefox on Linux, I had no difficulty figuring out how to turn the various wheels!

2 Likes

This is fun. I love old school feelies. Seems to work fine on MacOS Firefox 145.0.2, Chrome 142.0.7444.177, Safari 17.6 and mobile Safari. I see you’re using Pixi.js, which is super mature and stable. I don’t think you’ll have much luck making it accessible in its current form, because the html canvas element is basically a black box to screen readers. You might try building it with SVG elements – though as I think about it, even then it’d probably be difficult to make it orderly for screen readers - probably your best bet would be to print the results of each spin as an ordered list to a visually hidden DOM element, so a screen reader user could just ignore the spinner entirely and use arrow keys to rotate the ordered list.

2 Likes

Works just fine in Microsoft Edge.

2 Likes

Yeah, I started writing things in “pure” javascript and CSS, but decided to use a third-party library largely to handle cross-browser portability stuff. The widget itself is written in Phaser (a lightweight opensource JavaScript 2D game library), which uses Pixi under the hood. And in addition to helping with browser compatibility, it also provides tweening/easing for the animations, as well as logic for (theoretically) pixel-perfect click detection that respects transparency (important because the images are squares and so there’s substantial overlap).

The wheels are actually put together by a script that outputs SVG, so I had originally used the SVGs directly in the widget. But it turns out that browser support for SVG text is wildly inconsistent (it is essentially broken in Firefox, for example). So my present workflow is to generate them in SVG (the scripting making it easy to change the text), convert the SVG to PNG, and then stuff the PNGs into inline data URIs for the widget to use.

For accessibility I could in theory use the wheel rotations to figure out how things are lined up and which letters are presently visible in the windows. But since the TADS3 game itself already has to have all the code wheel logic to actually implement the puzzles, I’m planning on providing an in-game, entirely text-base version where you do something like >ALIGN FOO WITH BAR (the strings in the two outer rings in the “real” wheel are unique) and it reports which letters are visible in all the windows. And so in the game you can in principle do the whole thing without the feelie (it’s not copy protection), and the physical and web-based code wheel are just there for flavor.

Anyway, thanks to you and @rovarsson and @Draconis for the feedback.

4 Likes

Works well in Firefox ESR (140.6.0esr on Debian Linux) and is very cute.
(Doesn’t require WebGL, which is nice.)

In the browser console I see this. Is there meant to be audio? (I don’t hear any.)

An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. wheel.html:13:621905
   Phaser CE v2.20.2 | Pixi.js | Canvas | WebAudio     http://phaser.io ♥♥♥ wheel.html:13:290014

The whole thing isn’t visible on my screen at once, but my monitor resolution is currently artificially small (1280×800) because reasons. It’s still usable.

2 Likes

That’s very cool! Smooth animation and easy to manipulate.

Firefox Developer 147.0b4 (64-bit), Windows 11

2 Likes

The library itself supports rendering via WebGL, but I elected to use the basic canvas renderer instead for greatest compatibility. I also figured that, since it’s such a basic little widget anyway, anything that would have performance problems with canvas rendering would also be likely to lack WebGL support anyway.

There’s no sound. The warning in the console is because phaser automatically tries to create an audio context for the “game” when initialized, and some browsers, like Firefox, prohibit that before there’s been any interaction by the user (like clicking on something).

This could be handled by adding some sort of click-to-begin thing before displaying the wheel, but that doesn’t seem worth it to suppress a warning in the console.

Thanks to you and @dsherwood for the feedback.

2 Likes

Everything’s working smoothly for me too! I gave these a quick test:

Phone - Samsung Galaxy S24 - Android 16

  • Google Chrome - 143.0.7499.109
  • Samsung Internet - 29.0.1.11

Laptop - Windows 10 (64-bit) - 19045.6691

  • Microsoft Edge - 143.0.3650.80
  • Google Chrome - 143.0.7499.42
  • Firefox - 138.0.3

The only issue I see is that, like JTN, I can’t get the entire wheel on my screen at once. I’m using the default settings for my computer’s resolution:

It looks like this on Chromium browsers:

And seems a little worse on Firefox:

But it responds very well to changes in the browser’s zoom, so it’s not a real problem!

2 Likes

Hm. Not sure why it’s not scaling appropriately for a 1080p screen size…locally I’m testing on linux and iOS, and Chrome, Firefox, and Safari all scale correctly down to a 640x640 window size.

If you get a chance please take another look, refreshing the page. Almost all of the scaling logic is handled automatically by the library, but I added a little bit of additional size hinting that might help. If that doesn’t help (and I’m guessing it probably won’t) then I’ll have to hunt up a Win10 machine.

Thanks for the report.

1 Like

I think the issue there is that it’s only responsive horizontally, not vertically. Because a circle is square, if you view it in a window with an aspect ratio that’s any wider than 1:1, the bottom of the wheel gets cropped. If you want it to fit in any window height, you can set your canvas element to max-height: calc( 100vh - 4em )

2 Likes

That’s more or less what it was doing, only with the offset as a percentage instead of a multiple of em.

In principle it shouldn’t matter, because the library is supposed to be listening for resize events and scaling the canvas to fit the viewport, but it apparently isn’t doing so for all browser/OS combinations.

The change that I made was to the meta tag for viewport, which is a common gotcha on mobile devices scaling incorrectly when resizing.

1 Like

Ah! I think the “only using a percentage instead of an em” was the problem. The behavior with percentage units (in max-width and max-height) appears to be inconsistent. I think that’s an implementation foible because it’s valid CSS (and it appears to work fine in setting magins everywhere).

I just pushed an update to the demo, let me know if that improves the experience.

1 Like

I can confirm that fixed it for me (on all browsers)! :slightly_smiling_face:

2 Likes

Outstanding. Thanks.

1 Like

Debian Testing with Firefox 146.0 from Debian Unstable here. I can confirm this is completely unusable with the Orca screenreader.

2 Likes

Maybe for screenreader support, replace it with a simple shift cipher? Something with a similar solving method but without the 2-D interface.

2 Likes

Yeah, sorry. It’s emulating a physical code wheel made of two circular pieces of cardstock, one slightly larger than the other. Both of the circles have 26 letters placed radially along their rims. The letters line up with each other, so in the default combination you have the inner A lining up with the outer A, the inner B lining up with the outer B, and so on for all 26 letters. The wheels can be rotated relative to each other to line up other combinations.

In addition to the two sets of letters just described the larger of the two discs has six concentric rings of 26 letters (and in the demo they’re also all just boringly A through Z in order). Those are mostly not visible, however, when the code wheel is assembled with the smaller disc on top of the larger one. But the smaller disc has twelve small windows cut through it in two sets. The windows are arranged so that each set of windows makes one letter visible from each of the six concentric rings on the larger disc. In the default orientation one set of windows is rightside-up and one is upside-down. The rightside-up set is labelled one through six in red, and the upside-down set is labelled one through six in black. The windows on each set move radially one “step” clockwise in addition to moving out one ring. So the rightside-up set displays (by default) the X on the innermost ring in the number one window, Y from the second ring in the number two window, Z in the number three window, four is A, five is B, and six is C. The upside-down set similarly displays K, L, M, N, O, P.

In principle I could extract any of the information needed to narrate the current configuration of the wheel, but it isn’t clear (to me anyway) how to do that in a way that doesn’t end up being more or less identical to the in-game method of interacting with the puzzles the feelie is associated with. Basically for any configuration of the wheel there are twenty-six equivalently valid descriptions of the outer ring alignment (A is lined up with A, B is lined up with B, and so on), and as the player you’re going to be primarily interested in exactly one of those, but selecting that one for the player (instead of having them provide it) would be effectively solving the puzzle for them.

It also seems like it would be a vaguely unpleasant experience to have to listen to all of the intermediate settings you’d have to go through if you were rotating the wheel from, for example, A matching A to A matching M. Particularly if it was also enunciating all twelve window values as it went.

This is complicated further in the “real” version of the wheel, because in it the two outer rings aren’t just letters but are “words” written in strange symbols (the alphabet used in the Voynich Manuscript, if you’re familiar with it) so the outer ring, for example, is a sequence of symbols which when transliterated into Latin letters form nonsense words like “daiin”, “chol”, “chor”, and so on. So you’re not just lining up A with C, you’re lining up “daiin” with “qokeedy” or whatever.

Of course if there is some way of making this mess more accessible I’m open to suggestions. But my expectation is that I’ll probably end up asking for help with the text-only version when the game is closer to release. The actual puzzles involve some slightly unusual uses of the code wheel and so I don’t think it would be possible to fully test them without spoilers. Which will both require a more traditional beta testing thread and, oh yeah, a game that’s ready for beta testing (which mine absolutely is not, yet).

2 Likes

The two outer rings by themselves can, with their current alphabets (that is, A through Z in order on both) be used for any Caesar cipher…that is, the kind of shift cipher you’re talking about.

But keep in mind that with one or both outer ring alphabets in non-alphabetical orders they can be used for non-Caesar monoalphabetic ciphers. And because the six inner rings can also be arbitrary alphabets, this wheel format can, and in the game does, implement polyalphabetic substitution ciphers.

But yeah, the logic for doing the related puzzles in a text-only interface is already in the game code. I released a TADS3 module that implements a bunch of cipher algorithms last year and in slightly modified form that’s what’s used in the game.

1 Like

I also confirmed that the whole wheel now fits in the browser window on Firefox 140.6.0esr.
I additionally tested on Firefox-on-Android (actually Fennec F-Droid, 146.0.0); worked well there too.

2 Likes