78f8bd5

css/constants.css

@@ -0,0 +1,42 @@
+:root {
+  --tile-width: 151px;
+
+  --water-color: #1691c6;
+  --sand-color: #e8d49c;
+  --sand-color-dark: color-mix(in srgb, var(--sand-color) 50%, #000);
+  --sand-color-text-dark: #9c5e15;
+
+  --trade-positive: #64b864;
+  --trade-negative: #ff4f4f;
+  /* --trade-negative: #ff4f7b; */
+
+  /* --player-1-color: #f21313; */
+  /* --player-1-color: #fb4646; */
+  --player-1-color: #e53a3a;
+
+  /* --player-2-color: #05a3f4; */
+  /* --player-2-color: #0040c8; */
+  /* --player-2-color: #5d60ff; */
+  --player-2-color: #2b70ff;
+
+  /* --player-3-color: #23ff1e; */
+  /* --player-3-color: #0b8e08; */
+  --player-3-color: #03a800;
+
+  /* --player-4-color: #ffb902; */
+  /* --player-4-color: #815d00; */
+  --player-4-color: #dc9f00;
+  /* --player-4-color: #b78400; */
+
+
+
+  --player-1-color-light: color-mix(in srgb, var(--player-1-color) 40%, #fff);
+  --player-2-color-light: color-mix(in srgb, var(--player-2-color) 40%, #fff);
+  --player-3-color-light: color-mix(in srgb, var(--player-3-color) 40%, #fff);
+  --player-4-color-light: color-mix(in srgb, var(--player-4-color) 40%, #fff);
+
+  --player-1-color-dark: color-mix(in srgb, var(--player-1-color) 100%, #000 40%);
+  --player-2-color-dark: color-mix(in srgb, var(--player-2-color) 100%, #000 40%);
+  --player-3-color-dark: color-mix(in srgb, var(--player-3-color) 100%, #000 40%);
+  --player-4-color-dark: color-mix(in srgb, var(--player-4-color) 100%, #000 40%);
+}

css/fonts.css

@@ -0,0 +1,14 @@
+@font-face { font-family: Papyrus; src: url(/css/fonts/Papyrus.ttf); }
+/* @font-face { font-family: Maconda; src: url(/css/fonts/Macondo-Regular.ttf); } */
+/* @font-face { font-family: Medieval; src: url(/css/fonts/MedievalSharp-Regular.ttf); } */
+@font-face { font-family: EagleLake; src: url(/css/fonts/EagleLake-Regular.ttf); }
+
+/* @font-face { font-family: Roboto; src: url(/css/fonts/Roboto-Thin.ttf); font-weight: 100; } */
+/* @font-face { font-family: Roboto; src: url(/css/fonts/Roboto-Light.ttf); font-weight: 200; } */
+/* @font-face { font-family: Roboto; src: url(/css/fonts/Roboto-Regular.ttf); } */
+/* @font-face { font-family: Roboto; src: url(/css/fonts/Roboto-Bold.ttf); font-weight: 600; } */
+
+/* @font-face { font-family: Raleway; src: url(/css/fonts/Raleway-ExtraLight.ttf); font-weight: 100; } */
+@font-face { font-family: Raleway; src: url(/css/fonts/Raleway-Light.ttf); font-weight: 200; }
+@font-face { font-family: Raleway; src: url(/css/fonts/Raleway-Regular.ttf); }
+@font-face { font-family: Raleway; src: url(/css/fonts/Raleway-Bold.ttf); font-weight: 600; }

css/index.css

@@ -0,0 +1,64 @@
+@import './constants.css';
+@import './resources.css';
+@import './index/all-players.css';
+@import './index/board.css';
+@import './index/current-player.css';
+@import './index/robber-drop.css';
+@import './index/trade.css';
+@import './index/res-selection.css';
+@import './index/animations.css';
+@import './index/accessibility.css';
+@import './index/alert.css';
+@import './fonts.css';
+
+body {
+  margin: 0;
+  background: var(--water-color);
+  font-family: EagleLake;
+}
+
+button {
+  display: block;
+  background: none; color: inherit; border: none;
+  font: inherit; cursor: pointer;
+  outline: inherit; appearance: unset;
+  padding: 0; padding-block: 0px; padding-inline: 0px;
+}
+
+.splash {
+  background: url(/images/catan-bg.png);
+  background-size: cover;
+  background-position: center;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+
+  &.hide {
+    opacity: 0;
+    z-index: -100;
+    transition: opacity .5s .5s linear, z-index 0s 1s linear, width .5s linear, height .5s linear;
+    /* height: 100%;
+    width: 100%; */
+  }
+}
+
+#game {
+  /* transform: scale(0.85); */
+  /* transform-origin: top left; */
+  .board-container {
+    margin: 0 auto;
+    width: fit-content;
+    display: flex; justify-content: center; flex-direction: column; align-items: center;
+  }
+}
+
+@media screen and (min-width: 994px) {
+  #game {
+    /* display: flex; */
+    /* justify-content: center; */
+  }
+}
+
+/* https: //www.catancollector.com/catan-links/how-to-identify-your-version-of-catan */

css/index/accessibility.css

@@ -0,0 +1,132 @@
+#game > .accessibility-zone {
+  position: fixed; top: 0; left: 0;
+  display: flex; flex-direction: column;
+  margin: 10px 0 0 10px; z-index: 50;
+
+  .icon {
+    width: 30px; height: 30px; box-sizing: border-box;
+    margin-bottom: 10px; margin-right: 10px;
+    background-color: #fff3; color: #fffc;
+    font-family: monospace; font-size: 20px;
+    border: 2px solid; border-radius: 100px;
+    opacity: 0.5; position: relative;
+    display: flex; align-items: flex-start; justify-content: center;
+    &:hover, &:focus {
+      opacity: 1; box-shadow: 0 0 10px 0 #0009; color: #fff; background-color: #0009;
+      &::after {
+        content: attr(title); white-space: nowrap; position: absolute; left: 35px; top: 2px;
+        background: inherit; font-size: 13px; font-family: Raleway; font-weight: normal;
+        padding: 3px 7px; border-radius: 3px;
+      }
+    }
+  }
+
+  .grouped { display: flex; }
+
+  .full-screen {
+    &::before { content: '⇱'; }
+    &.on::before { content: '⇲'; }
+  }
+  .zoom-in { padding-top: -1px; }
+  .zoom-out { padding-top: .5px; font-weight: bold; }
+  .notifications {
+    font-size: 18px; padding-left: 3px; padding-top: 1px;
+    &::before { content: '🔊'; }
+    &.off::before { content: '🔇'; }
+  }
+  .bgm {
+    position: relative; padding-top: 1px;
+    &.off::before { content: '\\'; position: absolute; left: 8px; }
+  }
+  .question-mark { padding-top: 2px; font-weight: bold; }
+  .quit {
+    font-family: Raleway, sans-serif; position: relative;
+    b::before { content: 'o'; position: absolute; top: 0px; left: 6px; font-size: 25px; line-height: 25px; font-weight: normal; }
+    b::after { content: '|'; position: absolute; top: 0px; left: 11px; font-size: 12px; font-weight: bold; font-family: EagleLake; }
+    &:hover, &:focus { opacity: 1; box-shadow: 0 0 10px 0 #0009; color: #fff; background-color: red; }
+  }
+
+  .keyboard-shortcuts {
+    position: fixed; left: 0; top: 0;
+    width: calc(100% - 90px); margin: 30px; padding: 60px 0 30px 30px;
+    background: #fff; border-radius: 10px;
+    box-shadow: 0 0 10px 0px #000;
+    font-family: Raleway, sans-serif; font-weight: 200;
+    display: flex; justify-content: flex-start; flex-wrap: wrap;
+    &::before {
+      content: 'Keyboard Shortcuts'; font-size: 1.5em;
+      margin-bottom: 20px;
+      position: absolute; top: 20px; left: 30px;
+    }
+    .shortcuts-container { display: inline-block; margin-right: 30px; flex-grow: 1; }
+    .shortcut { display: flex; padding: 10px; border-bottom: 1px solid #ccc; color: #666; }
+    .shortcut:last-child { border-bottom: none; }
+    .title { flex-grow: 1; margin-right: 30px; font-size: .9em; }
+    .key { font-family: monospace; color: #000; }
+    &.hide { display: none; }
+
+    .close {
+      position: absolute; top: 20px; right: 20px;
+      font-size: 20px; color: #ccc; font-family: monospace; font-weight: 600;
+      height: 30px; width: 30px;
+      border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      transform: scaleX(1.3);
+      &:hover, &:focus { color: var(--trade-negative); }
+    }
+  }
+
+  .info-zone {
+    position: fixed; left: 0; top: 0;
+    width: calc(100% - 120px); margin: 30px; padding: 30px;
+    max-height: calc(100% - 120px); overflow: scroll;
+    background: #fff; border-radius: 10px;
+    box-shadow: 0 0 10px 0px #000;
+    font-family: Raleway, sans-serif;
+    &.hide { display: none; }
+
+    .container {
+      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
+      .img-container {
+        display: flex; flex-direction: column; align-items: center;
+        img.logo { padding-top: 18px; margin-left: -65px; width: 80px; }
+        img.dp { width: 200px; padding: 20px 30px 30px 0; }
+      }
+      .text-container {
+        flex: 400px 1 0; color: #333;
+        .title { font-size: 3em; font-weight: 600; font-family: Papyrus; }
+        .game-title { margin-top: 1.5em; }
+        .subtitle {
+          font-size: 1.2em;
+          a { font-size: 1.3em; background-color: inherit; color: #8fc045; &:hover { background-color: inherit; filter: brightness(.75);} }
+          .social-icon {
+            background-image: url(/images/social-icons.png);
+            width: 30px; height: 30px; margin-bottom: -7px; margin-left: 5px;
+            display: inline-block; border-radius: 30px;
+            &.github { background-color: #333; background-size: 258px; background-position: -44px -101px; }
+            &.linkedin { background-color: #0274B3; background-position: -148px 5px; background-size: 260px; }
+            &.twitter { background-color: #000; background-position: -20px -242px; background-size: 270px; }
+            &.youtube { background-color: #cd201f; background-position: -26px -24px; background-size: 298px; }
+            &.email { background-color: #00AB6C; background-position: -45px -48px; background-size: 263px; }
+          }
+        }
+        .rules { font-size: 1.3em; font-family: EagleLake; }
+        b { background-color: #cfeaa5; padding: 0 3px; font-family: EagleLake; font-size: .9em; word-spacing: 2px; }
+        a { color: inherit; &:hover { background-color: #8fc045; }}
+        p { line-height: 2em; }
+        .cheers{ font-size: 2em; line-height: 0; color: #3339; font-family: Papyrus; span { color: #000; font-size: 1.5em; } }
+        img.logo { max-width: 100px; }
+      }
+    }
+
+    .close {
+      position: absolute; top: 20px; right: 20px;
+      font-size: 20px; color: #ccc; font-family: Papyrus; font-weight: 600;
+      height: 30px; width: 30px;
+      border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      transform: scaleX(1.3);
+      &:hover, &:focus { color: var(--trade-negative); text-shadow: 0 0 5px #0003;}
+    }
+  }
+}