WIP

src/board/styles-pieces/index.ts

@@ -9,9 +9,13 @@ import governor from "./governor";
 import horsey from "./horsey";
 import maestro from "./maestro";
 import magnetic from "./magnetic";
+import mark from "./mark";
 import maya from "./maya";
 import merida from "./merida";
-import simple from "./simple";
+import motif from "./motif";
+import pirat from "./pirat";
+import regular from "./regular";
+import smart from "./smart";
 import staunty from "./staunty";
 import tatiana from "./tatiana";
 
@@ -27,9 +31,13 @@ const piecesSets = {
   horsey,
   maestro,
   magnetic,
+  mark,
   maya,
   merida,
-  simple,
+  motif,
+  pirat,
+  regular,
+  smart,
   staunty,
   tatiana,
 };

src/board/styles-pieces/mark.ts

@@ -0,0 +1,16 @@
+const mark = {
+  kw: "/pieces/mark/kw.svg",
+  qw: "/pieces/mark/qw.svg",
+  rw: "/pieces/mark/rw.svg",
+  bw: "/pieces/mark/bw.svg",
+  nw: "/pieces/mark/nw.svg",
+  pw: "/pieces/mark/pw.svg",
+  kb: "/pieces/mark/kb.svg",
+  qb: "/pieces/mark/qb.svg",
+  rb: "/pieces/mark/rb.svg",
+  bb: "/pieces/mark/bb.svg",
+  nb: "/pieces/mark/nb.svg",
+  pb: "/pieces/mark/pb.svg",
+};
+
+export default mark;

src/board/styles-pieces/motif.ts

@@ -0,0 +1,16 @@
+const motif = {
+  kw: "/pieces/motif/kw.svg",
+  qw: "/pieces/motif/qw.svg",
+  rw: "/pieces/motif/rw.svg",
+  bw: "/pieces/motif/bw.svg",
+  nw: "/pieces/motif/nw.svg",
+  pw: "/pieces/motif/pw.svg",
+  kb: "/pieces/motif/kb.svg",
+  qb: "/pieces/motif/qb.svg",
+  rb: "/pieces/motif/rb.svg",
+  bb: "/pieces/motif/bb.svg",
+  nb: "/pieces/motif/nb.svg",
+  pb: "/pieces/motif/pb.svg",
+};
+
+export default motif;

src/board/styles-pieces/pirat.ts

@@ -0,0 +1,16 @@
+const pirat = {
+  kw: "/pieces/pirat/kw.svg",
+  qw: "/pieces/pirat/qw.svg",
+  rw: "/pieces/pirat/rw.svg",
+  bw: "/pieces/pirat/bw.svg",
+  nw: "/pieces/pirat/nw.svg",
+  pw: "/pieces/pirat/pw.svg",
+  kb: "/pieces/pirat/kb.svg",
+  qb: "/pieces/pirat/qb.svg",
+  rb: "/pieces/pirat/rb.svg",
+  bb: "/pieces/pirat/bb.svg",
+  nb: "/pieces/pirat/nb.svg",
+  pb: "/pieces/pirat/pb.svg",
+};
+
+export default pirat;

src/board/styles-pieces/regular.ts

@@ -0,0 +1,16 @@
+const regular = {
+  kw: "/pieces/regular/kw.svg",
+  qw: "/pieces/regular/qw.svg",
+  rw: "/pieces/regular/rw.svg",
+  bw: "/pieces/regular/bw.svg",
+  nw: "/pieces/regular/nw.svg",
+  pw: "/pieces/regular/pw.svg",
+  kb: "/pieces/regular/kb.svg",
+  qb: "/pieces/regular/qb.svg",
+  rb: "/pieces/regular/rb.svg",
+  bb: "/pieces/regular/bb.svg",
+  nb: "/pieces/regular/nb.svg",
+  pb: "/pieces/regular/pb.svg",
+};
+
+export default regular;

src/board/styles-pieces/simple.ts

@@ -1,16 +0,0 @@
-const simple = {
-  kw: "/pieces/simple/kw.svg",
-  qw: "/pieces/simple/qw.svg",
-  rw: "/pieces/simple/rw.svg",
-  bw: "/pieces/simple/bw.svg",
-  nw: "/pieces/simple/nw.svg",
-  pw: "/pieces/simple/pw.svg",
-  kb: "/pieces/simple/kb.svg",
-  qb: "/pieces/simple/qb.svg",
-  rb: "/pieces/simple/rb.svg",
-  bb: "/pieces/simple/bb.svg",
-  nb: "/pieces/simple/nb.svg",
-  pb: "/pieces/simple/pb.svg",
-};
-
-export default simple;

src/board/styles-pieces/smart.ts

@@ -0,0 +1,16 @@
+const smart = {
+  kw: "/pieces/smart/kw.svg",
+  qw: "/pieces/smart/qw.svg",
+  rw: "/pieces/smart/rw.svg",
+  bw: "/pieces/smart/bw.svg",
+  nw: "/pieces/smart/nw.svg",
+  pw: "/pieces/smart/pw.svg",
+  kb: "/pieces/smart/kb.svg",
+  qb: "/pieces/smart/qb.svg",
+  rb: "/pieces/smart/rb.svg",
+  bb: "/pieces/smart/bb.svg",
+  nb: "/pieces/smart/nb.svg",
+  pb: "/pieces/smart/pb.svg",
+};
+
+export default smart;

src/main.tsx

@@ -221,6 +221,17 @@ const main = async () => {
     el.preventDefault();
   });
 
+  window.addEventListener("resize", () => {
+    setState(
+      "layout",
+      window.innerWidth < window.innerHeight
+        ? "single"
+        : window.innerWidth < 1366
+        ? "double"
+        : "triple"
+    );
+  });
+
   if (!state.mobile) {
     const keyMapping: { [key: string]: () => void } = {
       ArrowLeft: handlers.prev,

src/state.ts

@@ -58,12 +58,19 @@ const initialState: State = {
   moves: [],
   ply: 0,
   mobile,
-  layout: mobile ? "single" : "triple",
+  layout:
+    window.innerWidth < window.innerHeight
+      ? "single"
+      : window.innerWidth < 1366
+      ? "double"
+      : "triple",
   activeTab: "load",
   playing: false,
   anonymous: false,
 };
 
+console.log(initialState);
+
 const [state, setState] = createStore(initialState);
 
 export { state, setState };

src/ui/App.css

@@ -51,6 +51,7 @@ body {
 .light {
   background-color: #959ea1;
   background-image: url(/img/pattern-light.png);
+  background-size: 12rem;
   color: rgb(29, 31, 32);
   --logo-url: url(/img/logo-dark.svg);
 
@@ -158,7 +159,7 @@ a:hover {
 .double {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  column-gap: 10px;
+  column-gap: 1rem;
 }
 
 .layout {
@@ -168,12 +169,37 @@ a:hover {
 
   grid-template-areas:
     "setup board moves"
-    "setup board controls";
+    "setup board moves";
 
   height: 100vh;
 }
 
-@media screen and (max-width: 1024px) {
+@media (orientation: landscape) and (max-width: 1536px) {
+  html {
+    font-size: 9px;
+  }
+}
+
+@media (orientation: landscape) and (max-width: 1366px) {
+  html {
+    font-size: 8px;
+  }
+}
+
+@media (orientation: landscape) and (max-width: 1365px) {
+  .layout {
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      "board moves"
+      "board moves";
+  }
+}
+
+@media (orientation: portrait) {
+  html {
+    font-size: 10px;
+  }
+
   .layout {
     grid-template-columns: 1fr;
     grid-template-areas:
@@ -188,6 +214,7 @@ a:hover {
 
   .board-box {
     height: auto;
+    max-height: 100vh;
     padding: var(--header-height) 0 1rem 0;
     font-size: 0;
   }

src/ui/components/Boards.css

@@ -5,10 +5,10 @@
 }
 
 .boards__ico {
-  border: solid 5px black;
-  margin: 5px;
+  border: solid 0.5rem black;
+  margin: 0.5rem;
   cursor: pointer;
-  width: 72px;
+  width: 7.2rem;
 }
 
 .boards__ico--active {

src/ui/components/Controls.css

@@ -1,23 +1,23 @@
 .controls-box {
   grid-area: controls;
-  padding: 0 20px 20px 20px;
+  padding: 0 2rem 2rem 2rem;
 }
 
 .controls {
   background: var(--color-bg-block);
-  padding: 20px;
+  padding: 2rem;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
 .controls__button {
   margin: 0 3px;
-  padding: 5px;
+  padding: 0.5rem;
   font-size: 3rem;
   text-align: center;
   border-radius: 5px;
-  width: 44px;
-  height: 44px;
+  width: 4.4rem;
+  height: 4.4rem;
 }
 
 .controls__button:hover {

src/ui/components/GameTabs.css

@@ -1,12 +1,12 @@
 .game-box {
   grid-area: moves;
-  padding: 20px;
+  padding: 2rem;
   padding-top: var(--header-margin);
-  min-width: 375px;
+  min-width: 37.5rem;
   height: 100vh;
 }
 
-@media screen and (max-width: 1024px) {
+@media (orientation: portrait) {
   .game-box {
     padding: 0;
     height: 800px;
@@ -16,7 +16,7 @@
 .game {
   height: 100%;
   display: grid;
-  grid-template-rows: 38px 195px 1fr 84px;
+  grid-template-rows: 3.8rem 19.5rem 1fr 8.4rem;
 }
 
 .game-tabs {

src/ui/components/Header.css

@@ -10,7 +10,7 @@
 }
 
 .header__logo {
-  padding: 10px 20px;
+  padding: 1rem 2rem;
   text-align: left;
   color: var(--color-text-dimmed);
 }
@@ -24,7 +24,7 @@
 }
 
 .header__options {
-  padding: 0px 20px;
+  padding: 0 2rem;
   text-align: right;
 }
 

src/ui/components/Info.css

@@ -1,11 +1,11 @@
 .info-box {
   grid-area: controls;
-  padding: 0 20px 20px 20px;
+  padding: 0 2rem 2rem 2rem;
 }
 
 .info {
   background: var(--color-bg-block);
-  padding: 30px 20px;
+  padding: 3rem 2rem;
   font-size: 1.4rem;
   text-align: left;
 }

src/ui/components/Load.css

@@ -1,13 +1,13 @@
 .load {
   background: var(--color-bg-block);
-  padding: 20px;
+  padding: 2rem;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
 .load__pgn-input {
   height: 30vh;
-  margin-top: 20px;
+  margin-top: 2rem;
 }
 
 .load__pgn-input::-webkit-scrollbar {
@@ -30,7 +30,7 @@
 }
 
 .load__pgn-file {
-  margin-top: 20px;
+  margin-top: 2rem;
 }
 
 .load__pgn-file-info {
@@ -38,10 +38,10 @@
 }
 
 .load__pgn-file-info p {
-  margin-top: 10px;
+  margin-top: 1rem;
   color: var(--color-text-dimmed);
 }
 
 .load__link-input {
-  margin-top: 20px;
+  margin-top: 2rem;
 }

src/ui/components/Moves.css

@@ -15,15 +15,15 @@
 
 .move__id {
   display: inline-block;
-  width: 40px;
+  width: 4rem;
   text-align: right;
-  margin-right: 20px;
+  margin-right: 2rem;
   color: var(--color-text);
 }
 
 .move__ply {
   display: inline-block;
-  width: 70px;
+  width: 7rem;
   color: var(--color-btn);
 }
 
@@ -37,7 +37,7 @@
   cursor: pointer;
 }
 
-@media screen and (max-width: 1024px) {
+@media (orientation: portrait) {
   .moves {
     text-align: left;
   }

src/ui/components/Pieces.css

@@ -8,7 +8,7 @@
   border: solid 5px black;
   margin: 5px;
   cursor: pointer;
-  width: 82px;
+  width: 8.2rem;
   background-color: var(--color-highlight);
 }
 

src/ui/components/SetupTabs.css

@@ -1,16 +1,16 @@
 .setup-box {
   height: 100vh;
   grid-area: setup;
-  padding: 20px;
+  padding: 2rem;
   padding-top: var(--header-margin);
-  min-width: 375px;
+  min-width: 37.5rem;
 }
 
 .setup {
   font-size: 1.6rem;
   height: 100%;
   display: grid;
-  grid-template-rows: 38px 1fr;
+  grid-template-rows: 3.8rem 1fr;
 }
 
 .setup-tabs {

src/ui/components/Share.css

@@ -5,9 +5,9 @@
 
 .share__format,
 .share__size {
-  padding: 10px;
+  padding: 1rem;
   border-radius: 0;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
   opacity: 0.5;
 }
 
@@ -42,22 +42,22 @@
 }
 
 .share__btn {
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 }
 
 .header--first {
   margin-top: 0;
-  margin-bottom: 25px;
+  margin-bottom: 2.5rem;
 }
 
 .options__button {
   margin: 3px;
-  padding: 5px;
+  padding: 0.5rem;
   font-size: 3rem;
   text-align: center;
   border-radius: 5px;
-  width: 44px;
-  height: 44px;
+  width: 4.4rem;
+  height: 4.4rem;
   opacity: 0.5;
 }
 

src/ui/components/reusable/Scrollable.css

@@ -1,7 +1,7 @@
 .scrollable {
   background: var(--color-bg-block);
   height: auto;
-  padding: 20px 10px 20px 20px;
+  padding: 2rem 1rem 2rem 2rem;
   height: 100%;
   display: flex;
   overflow: auto;
@@ -11,7 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0;
-  padding-right: 10px;
+  padding-right: 1rem;
   width: 100%;
 }
 

src/ui/components/reusable/Tab.css

@@ -1,7 +1,7 @@
 .tab {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  height: 38px;
+  height: 3.8rem;
   background: var(--color-tab);
   min-width: 4rem;
 }