Josekle Development

yebellz · February 10, 2022, 7:19pm

Layout Experimentation

I’ve been experimenting with a simplified, and hopefully improved, method of automatically laying out the Josekle page, while remaining responsive and filling the window.

As many may have already noticed, Josekle automatically toggles between landscape and portrait modes, depending on the aspect ratio of the window you are viewing it from. If you have not seen this, trying rotating your phone or resizing your browser window.

However, the current behavior does not handle almost-square aspect ratios very well, and there was an odd layout bug when switching from landscape to portrait mode specifically from viewing it as page is “added to the home screen” (at least on my phone).

Hence, I’ve been working on some updates that are now live on my development fork:
https://yewang.github.io/josekle/

Please check this out and let me know if you run into any issues. On mobile, please also try adding the page to the home screen and testing if the layout responds well to rotation.

If you want more details and wish to consider one final remaining layout issue, click here to view.

Reference images

Note: these all show the cases for almost-square windows. Most users might never encounter these.

The familiar layout for more rectangular windows should remain largely unaffected.

For reference, here is how the old version (still live on main) treats windows that are almost-square:

In landscape mode, to avoid squashing the panels, the entire interface is shrunk leaving empty whitespace (which is especially jarring for dark mode):

The overall page background could be colored in, but it’s still inefficient usage of space.

In portrait mode, no anti-squashing is performed, but the control, tree, and hint panels do not have enough room to be usable:

Here is the new behavior for almost square windows

When the board is fully zoomed out, it is shrunk to leave enough room for the control panels

However, something funny still happens when the board is zoomed in and the window is almost square:

The board display generator is actually cropping the viewbox to less than what is shown. Somehow portions of the SVG outside of the viewbox are revealed. Actually, since the viewbox is zoomed in on a square region, it’s not terrible to display some more information outside of it (and making the board display rectangular overall), since the space left for the board is rectangular. However, it would be more efficient to align the SVG with make use of the remaining margin (to the top in landscape mode, and to the right in portrait mode). I’ve been trying to fix that, but have not figured out how to get the CSS to properly style it. Any input is welcome.

Groin · February 10, 2022, 7:51pm

Opera/Android
Seems the cropping is tougth
(Wekk i don’t use this orientation myself)

yebellz · February 10, 2022, 7:52pm

If you drag up (on the blue region) to scroll down, does it hide the address and navigation bars to give more room? Or does that not work?

I hope the portrait mode is okay?

Groin · February 10, 2022, 7:55pm

Yes

Groin · February 10, 2022, 7:56pm

yebellz · February 10, 2022, 7:59pm

Thanks for sharing those screenshots.

I think this behavior is an overall improvement. I noticed that with the previous version, it’s not quite possible to get rid of the address bar (when viewing from a standard mobile browser interface). So at least with being able to scroll the page down a bit to dismiss it, it gives a bit more space to the interface, and one can still access the address bar by scrolling back up.

yebellz · February 10, 2022, 8:08pm

I definitely agree that we need something like this. For me, the trickiest thing is figuring out how to properly make a pop-up like this. I’m a bit of an amateur when it comes to this web development stuff.

However, here is a short blurb of help text to potentially copy-paste, when sharing, and maybe eventually work into a built-in help dialog:

By the way, thanks for sharing all of that awesome feedback!

Groin · February 10, 2022, 8:17pm

That text is good
The button should be in UL corner but well, out of context. So maybe at right of submit LR? (It’s about ppl reading a screen in diagonal)

okonomichiyaki · February 10, 2022, 8:18pm

I messed around a little with the old version and think I saw the issue you’re talking about, and it’s fixed in the new version, at least in my phone (ios)

on my ipad I saw this, feel like the layout could be tweaked. but I don’t think it’s high priority…

#10 spoilers

you can scroll the list of guesses but only that little area

CSS stuff like this is black magic as far as I’m concerned

shinuito · February 10, 2022, 8:24pm

Something like

?

yebellz · February 10, 2022, 8:27pm

I think I need to play with the minimum panel height and width values a bit, which I think could resolve that. Currently, it is just 250 pixels, which is clearly is still not enough. Maybe a dragger to set how much space is given to the board vs the panels would be nice, but I have no idea how to do that.

Yeah, it’s tricky stuff. Actually, my solution is still not that elegant, since it involves using a bit a JS code to add a window resize listener that queries the view dimensions and sets heights and widths manually.

Ideally, it should all be done in CSS, but I’m not sure how to actually do that. A particular stumbling block is that we have an SVG board image embedded in the page, and that behaves in a way that I don’t quite understand with regards to CSS layouts.

Thanks for tip, @shinuito! I’ll try that out later.

antonTobi · February 10, 2022, 9:33pm

I think it may be good to clarify somehow that a purple white stone could actually be black in the solution, but I’m not sure how to say this in a clear and succinct way.

yebellz · February 10, 2022, 9:37pm

How about this?

Purple means that the point is in the sequence, but not at the right timing, and may be a different color.

okonomichiyaki · February 10, 2022, 9:48pm

It’s much harder to explain clearly than I thought I had some other ideas but discarded them because they’re not really better.

only thing is I would just add “stone”:

Purple means that the point is in the sequence, but not at the right timing, and may be a different color stone.

since there’s already colors going on too

Gooplet · February 10, 2022, 9:48pm

“But the timing and/or som stone color are incorrect” is a succinct way to put it that a few folks have suggested elsewhere

Edited to specify “stone color”

yebellz · February 10, 2022, 9:51pm

Oh, wow, I didn’t think about the dual meaning of “color” in this case.

One of these hints is always lying, while the other only tells the truth…

Gooplet · February 10, 2022, 10:02pm

Also what about including images in the explanation? For example:

Guess the hidden joseki by submitting move sequences.
Green indicates that the move is at the correct place and timing within the sequence.
Purple indicates that the point is part of the sequence, but the timing and/or stone color is incorrect.
The red indicates points that are not part of the joseki.
A new puzzle is available every day!

(But instead of the emojis, using images of the empty circles)
Or maybe including both the emoji and the image, so that red x = white circle is clear?

Gooplet · February 10, 2022, 10:04pm

Do you think passing/tenuki should ever be included? That would allow for double approach joseki

Edit: on second thought this might make it nearly impossible to solve, if people don’t consider the option. Might make the puzzle too frustrating

shinuito · February 10, 2022, 10:51pm

You can kind of get them with a 3 space pincer. Not exactly the same but still

Groin · February 11, 2022, 1:43am

Want to make my pedant here… Not the same to have that pincer stone. Or i will never pincer again…