From 262b36e22be80ba638872f837332f79aa8e8a8c6 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sat, 20 Jun 2020 10:28:34 -0700
Subject: [PATCH] Add a reference diagram of the 19 glyphs of Scribe
Trying my hand at using the <svg> element within HTML for the first
time. It's actually quite nice and I might start using it more
frequently rather than trying to fight browser layout mechanisms when
I'm trying to draw something very explicit, (like a board game).
---
scribe/scribe.css | 20 +++++++
scribe/scribe.jsx | 149 ++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 169 insertions(+)
diff --git a/scribe/scribe.css b/scribe/scribe.css
index 6b1e5a6..c3852b1 100644
--- a/scribe/scribe.css
+++ b/scribe/scribe.css
@@ -75,3 +75,23 @@
.square.open:hover {
background-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;
+ justify-content: center;
+ align-items: center;
+}
+
+.glyph {
+ width: 8vw;
+ height: 8vw;
+}
diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index 7815594..7b68ff0 100644
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -165,6 +165,39 @@ function PlayerInfo(props) {
);
}
+function Glyph(props) {
+
+ const glyph_dots = [];
+
+ for (let row = 0; row < 3; row++) {
+ for (let col = 0; col < 3; col++) {
+ if (props.squares[3 * row + col]) {
+ let cy = 10 + 20 * row;
+ let cx = 10 + 20 * col;
+ glyph_dots.push(
+ <circle
+ cx={cx}
+ cy={cy}
+ r="8"
+ />
+ );
+ }
+ }
+ }
+
+ return (<div className="glyph-and-name">
+ {props.name}
+ <div className="glyph">
+ <svg viewBox="0 0 60 60">
+ <g fill="#287789">
+ {glyph_dots}
+ </g>
+ </svg>
+ </div>
+ </div>
+ );
+}
+
function Square(props) {
let className = "square";
@@ -415,6 +448,122 @@ class Game extends React.Component {
onClick={(i,j) => this.handle_click(i, j, first_move)}
/>
</div>
+ </div>,
+ <div key="glyphs" className="glyphs">
+ <Glyph
+ name="Single"
+ squares={[1,0,0,
+ 0,0,0,
+ 0,0,0]}
+ />
+ <Glyph
+ name="Double"
+ squares={[1,1,0,
+ 0,0,0,
+ 0,0,0]}
+ />
+ <Glyph
+ name="Line"
+ squares={[1,1,1,
+ 0,0,0,
+ 0,0,0]}
+ />
+ <Glyph
+ name="Pipe"
+ squares={[0,0,1,
+ 1,1,1,
+ 0,0,0]}
+ />
+ <Glyph
+ name="Squat-T"
+ squares={[1,1,1,
+ 0,1,0,
+ 0,0,0]}
+ />
+ <Glyph
+ name="4-block"
+ squares={[1,1,0,
+ 1,1,0,
+ 0,0,0]}
+ />
+ <Glyph
+ name="T"
+ squares={[1,1,1,
+ 0,1,0,
+ 0,1,0]}
+ />
+ <Glyph
+ name="Cross"
+ squares={[0,1,0,
+ 1,1,1,
+ 0,1,0]}
+ />
+ <Glyph
+ name="6-block"
+ squares={[1,1,1,
+ 1,1,1,
+ 0,0,0]}
+ />
+ <Glyph
+ name="Bomber"
+ squares={[1,1,1,
+ 0,1,1,
+ 0,0,1]}
+ />
+ <Glyph
+ name="Chair"
+ squares={[0,0,1,
+ 1,1,1,
+ 1,0,1]}
+ />
+ <Glyph
+ name="J"
+ squares={[0,0,1,
+ 1,0,1,
+ 1,1,1]}
+ />
+ <Glyph
+ name="Earring"
+ squares={[0,1,1,
+ 1,0,1,
+ 1,1,1]}
+ />
+ <Glyph
+ name="House"
+ squares={[0,1,0,
+ 1,1,1,
+ 1,1,1]}
+ />
+ <Glyph
+ name="H"
+ squares={[1,0,1,
+ 1,1,1,
+ 1,0,1]}
+ />
+ <Glyph
+ name="U"
+ squares={[1,0,1,
+ 1,0,1,
+ 1,1,1]}
+ />
+ <Glyph
+ name="Ottoman"
+ squares={[1,1,1,
+ 1,1,1,
+ 1,0,1]}
+ />
+ <Glyph
+ name="O"
+ squares={[1,1,1,
+ 1,0,1,
+ 1,1,1]}
+ />
+ <Glyph
+ name="9-block"
+ squares={[1,1,1,
+ 1,1,1,
+ 1,1,1]}
+ />
</div>
];
}
--
2.45.2