Use stable values in pileon font-size calculations

kangasta · Jun 4, 2024 · c16bbe4 · c16bbe4
1 parent dc06034
commit c16bbe4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 35 deletions.
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
@@ -65,7 +65,6 @@
     font-family: sans-serif
     position: relative
     user-select: none
-    transition: height 250ms, width 250ms
 
     width: 5em
     height: 7em

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -19,7 +19,7 @@
 <style>
   footer {
     font-size: 1rem;
-    padding: 2rem 0 1rem 0;
+    padding: 1rem 0 0.5rem;
     text-align: center;
   }
 </style>
diff --git a/src/global.css b/src/global.css
@@ -31,25 +31,25 @@ body {
 	flex-direction: column;
 }
 
-@media (max-width: 5em) and (max-height: 7em) {
+@media (max-width: 5rem) and (max-height: 7rem) {
 	body {
 		font-size: 50%;
 	}
 }
 
-@media (min-width: 10em) and (min-height: 14em) {
+@media (min-width: 10rem) and (min-height: 14rem) {
 	body {
 		font-size: 150%;
 	}
 }
 
-@media (min-width: 15em) and (min-height: 21em) {
+@media (min-width: 15rem) and (min-height: 21rem) {
 	body {
 		font-size: 200%;
 	}
 }
 
-@media (min-width: 20em) and (min-height: 28em) {
+@media (min-width: 20rem) and (min-height: 28rem) {
 	body {
 		font-size: 300%;
 	}

diff --git a/src/utils/pileon.ts b/src/utils/pileon.ts
@@ -15,25 +15,18 @@ const getStacksGrid = (
   return [5, 3];
 };
 
-export const fillerStacks = (
-  mainWidth: number,
-  innerHeight: number,
-): { length: number } => {
-  const [i, j] = getStacksGrid(mainWidth, innerHeight);
+export const fillerStacks = (i: number, j: number): { length: number } => {
   return { length: i * j - 15 };
 };
 
-const calculateTableEmSize = (
+export const calculateTableEmSize = (
   size: ICardSize,
   columns: number,
   rows: number,
 ): [number, number] => {
-  const tableWidthEm =
-    stackWidthEm(4, size) * columns +
-    (size !== "small" ? 0.666 : 0.333) * columns * 2;
+  const tableWidthEm = stackWidthEm(4, size) * columns + 0.5 * (columns - 1);
   const tableHeightEm =
-    getCardDimensionsEm(size).height * rows +
-    (size !== "small" ? 0.5 : 0.25) * rows * 2;
+    getCardDimensionsEm(size).height * rows + 0.5 * (rows - 1);
 
   return [tableWidthEm, tableHeightEm];
 };
@@ -50,13 +43,12 @@ export const calculateDimensions = (
   size: ICardSize,
   mainWidth: number,
   mainHeight: number,
-  innerHeight: number,
 ): TableDimensions => {
-  // Limit play area aspect ratio to 16:9
-  const tableHeight = mainHeight > 600 ? mainHeight : innerHeight;
-  const tableWidth = Math.min(mainWidth, tableHeight * (16 / 9));
+  // Limit play area aspect ratio to 21:9
+  const tableHeight = mainHeight;
+  const tableWidth = Math.min(mainWidth, tableHeight * (21 / 9));
 
-  const [columns, rows] = getStacksGrid(mainWidth, innerHeight);
+  const [columns, rows] = getStacksGrid(tableWidth, mainHeight);
   const [tableWidthEm, tableHeightEm] = calculateTableEmSize(
     size,
     columns,
@@ -67,7 +59,7 @@ export const calculateDimensions = (
   const fontSizeH = (tableHeight * 0.95) / tableHeightEm;
 
   return {
-    fontSize: Math.min(fontSizeW, fontSizeH),
+    fontSize: Math.max(Math.min(fontSizeW, fontSizeH), 10),
     columns,
     rows,
     tableWidthEm,

diff --git a/src/views/Pileon/Pileon.svelte b/src/views/Pileon/Pileon.svelte
@@ -18,6 +18,7 @@
     getEqualValues,
     calculateDimensions,
     fillerStacks,
+    calculateTableEmSize,
   } from "../../utils/pileon";
   import { getStackDataTransfer, stackWidthEm } from "../../utils/stack";
   import { newEvent } from "../../utils/statistics";
@@ -28,7 +29,6 @@
 
   let mainWidth: number;
   let mainHeight: number;
-  let innerHeight: number;
 
   let appearance = createCardAppearance((settings: ISettings) => ({
     size: settings.size === "default" ? "bridge" : settings.size,
@@ -37,7 +37,7 @@
 
   $: {
     const defaultSize: ICardSize =
-      mainWidth < 800 || innerHeight < 500 ? "small" : "bridge";
+      mainWidth < 800 || mainHeight < 400 ? "small" : "bridge";
 
     setCardAppearance((settings: ISettings) => ({
       size: settings.size === "default" ? defaultSize : settings.size,
@@ -144,7 +144,7 @@
   };
 
   $: size = $appearance.size;
-  $: d = calculateDimensions(size, mainWidth, mainHeight, innerHeight);
+  $: d = calculateDimensions(size, mainWidth, mainHeight);
 
   onMount(() => {
     actions.update((prev) => ({ ...prev, help, shuffle, undo }));
@@ -158,16 +158,15 @@
       undo: undefined,
     }));
   });
+  $: [tableWidth5x3, _] = calculateTableEmSize(size, 5, 3);
 </script>
 
-<svelte:window bind:innerHeight />
-
 <main
   bind:clientHeight={mainHeight}
   bind:clientWidth={mainWidth}
-  class="pileon"
+  class="pileon deal-{d.columns}x{d.rows}"
   style:font-size="{d.fontSize}px"
-  style:width="{d.tableWidthEm * 1.25}em"
+  style:max-width="{tableWidth5x3 * 1.25}em"
 >
   {#each piles as pile, index}
     <div class="pile">
@@ -184,7 +183,7 @@
       />
     </div>
   {/each}
-  {#each fillerStacks(mainWidth, innerHeight) as _}
+  {#each fillerStacks(d.columns, d.rows) as _}
     <div class="pile" style={`min-width: ${stackWidthEm(4, size)}em`} />
   {/each}
 </main>
@@ -202,12 +201,12 @@
   .pileon
     flex: 1
     flex-wrap: wrap
-    font-size: 0.7em
+    font-size: 10px
     display: flex
     align-content: center
     align-items: center
     justify-content: center
-    max-width: 100vw
+    width: 100vw
     column-gap: 0.5em
     row-gap: 0.5em
     margin: auto
@@ -218,9 +217,9 @@
   .pile
     flex-basis: 16.7% /* Just above 1/6 */
 
-    @media (max-aspect-ratio: 4/3)
+    &.deal-4x4
       flex-basis: 20.1% /* Just above 1/5 */
 
-    @media (max-aspect-ratio: 3/4)
+    &.deal-3x5
       flex-basis: 25.1% /* Just above 1/4 */
 </style>