Add support for detecting glyph shapes
[lmno.games] / scribe / scribe.css
index 4eaea8ffc0d555a7550aed606a42c1c0a2240f5f..3bac47b40a2df6f5882cc10f63b04852898a8d4e 100644 (file)
@@ -1,32 +1,99 @@
-ol, ul {
-  padding-left: 30px;
+:root {
+    /* Colors for the two players. */
+    --o-color: #c2dfff;
+    --plus-color: #fdd7e4;
 }
 
-.board-row:after {
-  clear: both;
-  content: "";
-  display: table;
+/* 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 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
+ * we set the height to 0 and the bottom padding to 100% (which just
+ * happens to be defined as relative to the _width_). So, now we have
+ * a square element. Hurrah!
+ *
+ * The problem is that this element has a nominal height of 0, so if
+ * 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 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.
+ *
+ * Ta-da! Now our board element is square and does not have any
+ * dimensions of 0 so child elements can compute their sizes
+ * naturally.
+ */
+.board-container {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
 }
 
-.status {
-  margin-bottom: 10px;
+.board {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 1em;
+}
+
+.mini-grid {
+    width: 100%;
+    height: 100%;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+
+    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 {
-  background: #fff;
-  color: black;
-  border: 1px solid #999;
-  float: left;
-  font-size: 20px;
-  font-weight: bold;
-  line-height: 25px;
-  width: 25px;
-  height: 25px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: calc(min(8vw, .08 * var(--page-max-width)));
+    line-height: 0;
+    font-weight: bold;
+    border-bottom: 1px solid #999;
+    border-right: 1px solid #999;
 }
 
 .square.open {
@@ -37,14 +104,36 @@ ol, ul {
     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:focus {
-  outline: none;
+.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;
 }
 
-.kbd-navigation .square:focus {
-  background: #ddd;
+.glyph {
+    width: 8vw;
 }