Add support for detecting glyph shapes

[lmno.games] / scribe / scribe.css

diff --git a/scribe/scribe.css b/scribe/scribe.css
index 116bcbc3228a8c807867f1dc7a9b43788880353e..3bac47b40a2df6f5882cc10f63b04852898a8d4e 100644 (file)
--- a/scribe/scribe.css
+++ b/scribe/scribe.css
@@ -1,6 +1,12 @@
+:root {
+    /* Colors for the two players. */
+    --o-color: #c2dfff;
+    --plus-color: #fdd7e4;
+}
+

 /* We want our board to be the largest square that can
  * fit. Unfortunately, it requires a bit of CSS magic to make that
 /* We want our board to be the largest square that can
  * fit. Unfortunately, it requires a bit of CSS magic to make that

- * happen. We can set a wdith easily enough, but what we can't easily
+ * happen. We can set a width easily enough, but what we can't easily

  * do is to set the height to be exactly the same as the width.
  *
  * So here's the magic to get that to happen. On the board container
  * do is to set the height to be exactly the same as the width.
  *
  * So here's the magic to get that to happen. On the board container


@@ -12,8 +18,8 @@
  * any child sas "height: 100%" that will result in a 0-height child
  * and won't be what we want.
  *
  * any child sas "height: 100%" that will result in a 0-height child
  * and won't be what we want.
  *

- * So the last piece of the magic is to use absolute palcement of the
- * board (which require position:relative on its parent) and set all
+ * So the last piece of the magic is to use absolute placement of the
+ * board (which requires position:relative on its parent) and set all

  * of its edges (top, left, bottom, right) to the extents of the
  * container.
  *
  * of its edges (top, left, bottom, right) to the extents of the
  * container.
  *


@@ -51,13 +57,39 @@
 
     border-radius: 6px;
     border: 3px solid #999;
 
     border-radius: 6px;
     border: 3px solid #999;

+
+    position:relative;
+}
+
+.mini-grid.active {
+    border: 3px solid var(--accent-color-bright);
+}
+
+.mini-grid.o-wins .square, .mini-grid.plus-wins .square {
+    opacity: 0.6;
+}
+
+.mini-grid .winner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    font-size: calc(min(35vw, .35 * var(--page-max-width)));
+    font-weight: bold;
+    opacity: 0.20;

 }
 
 .square {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .square {
     display: flex;
     justify-content: center;
     align-items: center;

-    font-size: 8vmin;
+    font-size: calc(min(8vw, .08 * var(--page-max-width)));

     line-height: 0;
     font-weight: bold;
     border-bottom: 1px solid #999;
     line-height: 0;
     font-weight: bold;
     border-bottom: 1px solid #999;


@@ -72,6 +104,36 @@
     cursor: default;
 }
 
     cursor: default;
 }
 

+.square.glyph-o {
+    background: var(--o-color);
+}
+
+.square.glyph-plus {
+    background: var(--plus-color);
+}
+

 .square.open:hover {
     background-color: var(--accent-color-bright);
 }
 .square.open:hover {
     background-color: var(--accent-color-bright);
 }

+
+.square.last-move {
+    color: var(--accent-color-bright);
+}
+
+.glyphs {
+    padding-top: 0.5em;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-column-gap: 0.5em;
+    grid-row-gap: 0.25em;
+}
+
+.glyph-and-name {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.glyph {
+    width: 8vw;
+}