Tweaked portrait rendering to match landscape

ProLoser · Nov 3, 2024 · 21d10e4 · 21d10e4
1 parent 125fa3b
commit 21d10e4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/src/Board/Board.css b/src/Board/Board.css
@@ -170,17 +170,25 @@ order:
 @media (max-aspect-ratio: 1) {/* Portrait layout (mobile phone) */
     #board {
         flex-direction: column;
+        flex-wrap: wrap-reverse;
+    }
+    #toolbar {
+        order: 6;
+    }
+    .dice {
+        order: 1;
     }
     .home {
         width: 50%;
     }
     .point {
         width: 50%;
+
         &:nth-child(even):hover::before {
-            /* border-left-color: var(--primary-hover) !important; */
+            /* border-right-color: var(--primary-hover) !important; */
         }
         &:nth-child(odd):hover::before {
-            /* border-left-color: var(--secondary-hover) !important; */
+            /* border-right-color: var(--secondary-hover) !important; */
         }
 
         &::before {
@@ -190,14 +198,16 @@ order:
                 border-bottom: 3vmax solid transparent;
         }
         :nth-child(-n+12 of &) {/* top */
+            flex-direction: row-reverse !important;
+
             &::before {
-                border-left: 40vmin solid var(--primary);
-                left: 0;
+                border-right: 40vmin solid var(--primary);
+                right: 0;
             }
 
             &:nth-child(odd)::before {
-                border-left-color: var(--secondary);
-                border-left-width: 40vmin;
+                border-right-color: var(--secondary);
+                border-right-width: 40vmin;
             }
             /* Stack Pieces */
             .piece:nth-child(n+6) {
@@ -215,18 +225,17 @@ order:
         }
 
         :nth-child(n+13 of &) {/* bottom */
-            flex-direction: row-reverse !important;
             &::before {
-                border-left: none;
-                border-right: 40vmin solid var(--primary);
-                right: 0;
+                border-right: none;
+                border-left: 40vmin solid var(--primary);
+                left: 0;
             }
             &:hover::before {
-                /* border-right-color: var(--primary-hover) !important; */
+                /* border-left-color: var(--primary-hover) !important; */
             }
             &:nth-child(even)::before {
-                border-right-color: var(--secondary);
-                border-right-width: 40vmin;
+                border-left-color: var(--secondary);
+                border-left-width: 40vmin;
             }
             /* Stack Pieces */
             .piece:nth-child(n+6) {

diff --git a/src/Utils.ts b/src/Utils.ts
@@ -31,6 +31,13 @@ export const newGame = (oldGame?: GameType) => ({
     status: oldGame?.status || null
 } as GameType);
 
+/**
+ * 
+ * @param state 
+ * @param from 
+ * @param to 
+ * @returns moveLabel is not returned if the move is blocked
+ */
 export function calculate(state: GameType, from: number | "white" | "black", to: number) {
     if (from === to) return { state }; // no move
     const nextGame: GameType = newGame(state);