Check out Chess with Different Armies, our featured variant for July, 2024.


[ Help | Earliest Comments | Latest Comments ]
[ List All Subjects of Discussion | Create New Subject of Discussion ]
[ List Latest Comments Only For Pages | Games | Rated Pages | Rated Games | Subjects of Discussion ]

Comments/Ratings for a Single Item

Later Reverse Order Earlier
Hannibal Chess with Gryphon and Falcon. Expansion for hannibal chess. (10x9, Cells: 90) [All Comments] [Add Comment or Rating]
🕸Fergus Duniho wrote on Thu, Jan 4 02:32 AM UTC in reply to Fergus Duniho from 02:04 AM:

The solution that seems to be working is to use this CSS without a container query:

  #board0 TD {
    aspect-ratio: 1 / 1;
    width: min(10vw, 9vh, 54px) !important;
    height: min(10vw, 9vh, 54px) !important;
  }

Instead of setting the height to auto, this just sets width and height to the same value. Instead of giving a single value for height and width, it uses the minimum of three different values. The first two are in viewport units. The viewport is normally 100vw wide and 100vh tall. Since there are 10 files and 11 ranks, the largest possible square width that will let the board fit on the screen is 10vw, and the largest possible square height that will let the board fit on the screen is 9.090909090909091vh, which I have rounded down to 9vh. Taking the minimum of these and the desired size gives the best size for displaying the board on the screen. On both my Android phone and the iPhone, the board is now displaying at a small enough size to remain visible on the screen in both portrait and landscape, and it is sticking close to a 1/1 aspect ratio for the spaces.


🔔Notification on Thu, Jan 4 02:20 AM UTC:

The editor Fergus Duniho has revised this page.


🕸Fergus Duniho wrote on Thu, Jan 4 02:04 AM UTC in reply to Fergus Duniho from Tue Jan 2 08:51 PM:

While changing the aspect-ratio of the board to auto fixes the problem on the iPad, it appears to be causing a new problem at small sizes. On my Android phone and when I make the window narrow on Windows, it displays a black horizontal bar instead of the board. At least the iPhone I tested it on doesn't have this problem. So, I have to fix this or find a solution that doesn't have either problem.


🕸Fergus Duniho wrote on Tue, Jan 2 09:05 PM UTC in reply to Fergus Duniho from 08:51 PM:

Since pages are cached differently through chessvariants.com and chessvariants.org, I tried the pages using my fork through chessvariants.org on Safari and Chrome on my iPad, and they no longer had the problem of showing extra space.


🕸Fergus Duniho wrote on Tue, Jan 2 08:51 PM UTC in reply to Fergus Duniho from 06:15 PM:

I mostly solved both problems. Looking at the difference between code generated by betza.js and betzaNew.js, I saw that the latter included the style "aspect-ratio: 10 / 11" for the board. To test whether this was the problem, I added this CSS to this page:

  #board0 {aspect-ratio: auto !important}

When I loaded the page on my iPad, it no longer had the problem with extra space showing up. As a further test, I commented out line 108 in my fork, and I loaded pages that used it on my iPad. This fixed the problem on Firefox and Edge, though not on Chrome and Safari. Maybe it's a caching issue with these two, though I did try clearing the browser cache without it helping, and the script was called with the query string "?nocache=true".

While using the iPad, I noticed that I could click on a piece in the Pieces table and click where I wanted it to go in the diagram. I tried this on my Android tablet, and it worked. Although dragging is not working, it's enough to have an alternative to dragging that will work.


🕸Fergus Duniho wrote on Tue, Jan 2 06:15 PM UTC:

@HGMuller

The Interactive Diagram is giving me different problems on my iPad and my Android tablet. On the iPad, I'm getting unwanted blocks of white space where elements of the diagram are hidden. This happens in Safari, Edge, Chrome, and Firefox. I believe all iOS browsers are forced to use webkit, which may be at the root of this problem. I don't get this problem on my Android tablet. While it doesn't have Safari, I tried Dolphin, which is supposed to use webkit, but it still displayed without the unwanted white space. On my iPad browsers, this is happening even when grid is not being employed to rearrange things in two columns, and it is even happening on pages without the grid code, such as Frog Chess with Manticore and Falcon, which I have not touched yet. Where everything appears as one column, I can see that the white space is only between message0 and the board. But it is not happening with Chess, which uses betza.js instead of betzaNew.js. Looking at the generated code with Firefox's Web Developer Tools on my Windows PC, I have not been able to detect what the difference might be.

The problem on the Android tablet is that I cannot drag pieces to the board. When I longpress on a piece, I get a pop-up menu. Although an image of the piece will follow my finger when I move it to the board, it does not deposit the piece there or decrement the count in the table.


🕸Fergus Duniho wrote on Tue, Jan 2 04:23 PM UTC in reply to Aurelian Florea from 03:46 PM:

There are two possible reasons I can think of for this. Either your screen width is too narrow, or your browser does not support CSS grid. What is your screen width, and what browser are you using?


💡📝Aurelian Florea wrote on Tue, Jan 2 03:46 PM UTC in reply to Fergus Duniho from 01:50 PM:

Yes!


🕸Fergus Duniho wrote on Tue, Jan 2 01:50 PM UTC in reply to Aurelian Florea from 07:49 AM:

Are you saying everything appears in a single column instead of in two side-by-side columns?


💡📝Aurelian Florea wrote on Tue, Jan 2 07:49 AM UTC in reply to Fergus Duniho from Mon Jan 1 09:38 PM:

To me the diagram appears bellow still.


🕸Fergus Duniho wrote on Mon, Jan 1 09:38 PM UTC:

I adjusted the grid areas so that when the description or legend appears by itself, each uses some of the same space as the other would. When both are displayed, each partially appears alongside the board, which helps make the whole diagram fit the window height better when everything is displayed.

I edited the new text a little and published this page.


💡📝Aurelian Florea wrote on Mon, Jan 1 09:11 AM UTC in reply to Fergus Duniho from 12:44 AM:

Ok, Fergus! I'll do it later today!


🕸Fergus Duniho wrote on Mon, Jan 1 12:44 AM UTC:

I cleaned up the grid CSS by using grid-area to place every element where it should go in the grid. I used a container query for the code to preserve the aspect-ratio of spaces at small sizes. This container query goes into effect if and only if the container query for the grid code does not, which eliminates the conflict between the two.

I'm now waiting for Aurelian to update the rules for this page, as he had entered the same text for both the Rules and the Notes section.


🕸Fergus Duniho wrote on Sun, Dec 31, 2023 05:50 PM UTC:

I got the grid CSS to work, but I gave up on getting the squares to maintain their aspect ratio when a small window size causes them to become narrower. The solution that worked for this involved setting the height of each table cell to auto. The problem with this was that it would let the following sections of the page overlap with the diagram. This was apparently because it now had no height for the table.


🕸Fergus Duniho wrote on Sat, Dec 30, 2023 10:45 PM UTC in reply to H. G. Muller from 10:23 PM:

I think what you have in mind would involve rewriting the HTML whenever someone resizes the window. We already have a simple CSS solution that works well without needing to do that. All my fork does is add some containing DIVs around the HTML generated for the idiagram, and these allow for a responsive display with just a small amount of CSS code.


H. G. Muller wrote on Sat, Dec 30, 2023 10:23 PM UTC in reply to Fergus Duniho from 10:15 PM:

But JavaScript can read the screen width, not? So you could make it responsive in any way you want.


🕸Fergus Duniho wrote on Sat, Dec 30, 2023 10:15 PM UTC in reply to H. G. Muller from 09:52 PM:

I am not really familiar with this grid business. But when I want side-by-side display I just use a table of one row and two columns, put the ID in the left cell, and the piece list or piece table in the right cell as a satellite HTML table (or a list or paragraph).

I was seeing what I could do without forking betzaNew.js. Using tables is not a responsive solution, because you would still have them on a small screen.

In the standard script the Diagram only fills the element with class=idiagram (which I usually take as a div) with a diagram. But it should be possible to have it generate such a table with the Diagram proper in the left cell, when a parameter would request this, and put the stuff that normally goes underneath it in the rightmost cell of that table. It is just a matter of creating the 'anchors' in a slightly different way.

The fork I made already distributes the code between two different divs that can be placed side-by-side with a small bit of flex CSS.

It probably could even be made to calculate if there is room to do that.

With the flex solution, there is no need for that. It displays the board and pieces alongside each other when the screen is wide enough for that, and it displays everything in a single column when it isn't wide enough.

Since the grid solution is not working as well as the flex solution, I recommend incorporating the changes I made in my /fergus/betzaNew.js fork into the official betzaNew.js script. Then I can just change this page to use the flex solution with the official betzaNew.js script.


H. G. Muller wrote on Sat, Dec 30, 2023 09:52 PM UTC in reply to Fergus Duniho from 09:25 PM:

I am not really familiar with this grid business. But when I want side-by-side display I just use a table of one row and two columns, put the ID in the left cell, and the piece list or piece table in the right cell as a satellite HTML table (or a list or paragraph). I specify a width for the left cell large enough to hold the Diagram; I know how large it is (squareSize*files).

In the standard script the Diagram only fills the element with class=idiagram (which I usually take as a div) with a diagram. But it should be possible to have it generate such a table with the Diagram proper in the left cell, when a parameter would request this, and put the stuff that normally goes underneath it in the rightmost cell of that table. It is just a matter of creating the 'anchors' in a slightly different way. It probably could even be made to calculate if there is room to do that.


🕸Fergus Duniho wrote on Sat, Dec 30, 2023 09:25 PM UTC:

@HGMuller

I have made more progress toward making this display properly with grid. I put all the grid code in a container query for the wrapper div. So, when it's not wide enough, it just displays everything as block elements. The problem is that when it does display as a grid, children elements of the idiagram are also displaying as grids, because they are set to display: inherit, and this is messing up how some of them look. In particular, the bar with the control buttons is displaying as a single column. I have tried some things, but nothing I've tried is getting it to display properly without stopping the main grid from working.


🕸Fergus Duniho wrote on Sat, Dec 30, 2023 02:00 AM UTC:

I'm done working on this for tonight. Instead of using CSS flex with a fork of betzaNew.js, I used CSS grid with the official betzaNew.js to make the piece table appear alongside the board. To reference the idiagram div, I put a wrapper div around the whole idiagram code with an id of wrapper. Since its display value is inherit, I gave its surrounding div a display of grid. It doesn't work as fluidly as the flex version, but it may be good enough if you aren't switching screen sizes to test it.

The Rules section and the Notes section were the same, and I divided the text between them. Compared with Frog Chess with Gryphon and Falcon, it appears that the Notes were duplicated, and the Rules were omitted.


20 comments displayed

Later Reverse Order Earlier

Permalink to the exact comments currently displayed.