Limit play area aspect-ratio

Author: kangasta

src/utils/pileon.ts

@@ -23,23 +23,56 @@ export const fillerStacks = (
   return { length: i * j - 15 };
 };
 
-export const calculateFontSize = (
+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 tableHeightEm =
+    getCardDimensionsEm(size).height * rows +
+    (size !== "small" ? 0.5 : 0.25) * rows * 2;
+
+  return [tableWidthEm, tableHeightEm];
+};
+
+interface TableDimensions {
+  fontSize: number;
+  columns: number;
+  rows: number;
+  tableWidthEm: number;
+  tableHeightEm: number;
+}
+
+export const calculateDimensions = (
   size: ICardSize,
   mainWidth: number,
   mainHeight: number,
   innerHeight: number,
-): number => {
-  const [i, j] = getStacksGrid(mainWidth, innerHeight);
-  const tableWidthEm =
-    stackWidthEm(4, size) * i + (size !== "small" ? 0.666 : 0.333) * 10;
-  const fontSizeW = (mainWidth * 0.95) / tableWidthEm;
-
-  const tableHeightEm =
-    getCardDimensionsEm(size).height * j + (size !== "small" ? 0.5 : 0.25) * 6;
+): TableDimensions => {
+  // Limit play area aspect ratio to 16:9
   const tableHeight = mainHeight > 600 ? mainHeight : innerHeight;
+  const tableWidth = Math.min(mainWidth, tableHeight * (16 / 9));
+
+  const [columns, rows] = getStacksGrid(mainWidth, innerHeight);
+  const [tableWidthEm, tableHeightEm] = calculateTableEmSize(
+    size,
+    columns,
+    rows,
+  );
+
+  const fontSizeW = (tableWidth * 0.95) / tableWidthEm;
   const fontSizeH = (tableHeight * 0.95) / tableHeightEm;
 
-  return Math.min(fontSizeW, fontSizeH);
+  return {
+    fontSize: Math.min(fontSizeW, fontSizeH),
+    columns,
+    rows,
+    tableWidthEm,
+    tableHeightEm,
+  };
 };
 
 export type Piles = Card[][];

src/views/Pileon/Pileon.svelte

@@ -16,7 +16,7 @@
     drop,
     autoMove,
     getEqualValues,
-    calculateFontSize,
+    calculateDimensions,
     fillerStacks,
   } from "../../utils/pileon";
   import { getStackDataTransfer } from "../../utils/stack";
@@ -137,8 +137,7 @@
   };
 
   $: size = $appearance.size;
-  $: fontSize = calculateFontSize(size, mainWidth, mainHeight, innerHeight);
-  $: style = `font-size: ${fontSize}px`;
+  $: d = calculateDimensions(size, mainWidth, mainHeight, innerHeight);
 
   onMount(() => {
     actions.update((prev) => ({ ...prev, help, shuffle, undo }));
@@ -160,7 +159,8 @@
   bind:clientHeight={mainHeight}
   bind:clientWidth={mainWidth}
   class="pileon"
-  {style}
+  style:font-size="{d.fontSize}px"
+  style:width="{d.tableWidthEm * 1.25}em"
 >
   {#each piles as pile, index}
     <div class="pile" class:small={size === "small"}>
@@ -196,12 +196,17 @@
     flex-wrap: wrap
     font-size: 0.7em
     display: flex
+    align-content: center
     align-items: center
     justify-content: center
     max-width: 100vw
+    row-gap: 0.5em
+    margin: auto
+
+    @media (max-aspect-ratio: 9/17)
+      row-gap: 1em
 
   .pile
-    margin: 0.5em 0.666em
     flex-basis: 16.7% /* Just above 1/6 */
 
     &.small