From 89b7f6b2d8cf6f237310dad0a8f1d796fb98862a Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sat, 20 Jun 2020 10:48:26 -0700
Subject: [PATCH 1/1] Don't waste space for glyphs that are not full height.

For "Single" through" Squat-T" only two rows of dots are needed to
display the full glyph, so it's wasteful to have a full-size glyph. We
fix this by dynamically computing a correct viewBox for the glyph's
SVG given the dots that are present, and then letting the "glyph"
class styling automatically determine a height based on its children,
rather than explicitly setting it to the full height, assuming a
square.
---
 scribe/scribe.css |  1 -
 scribe/scribe.jsx | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/scribe/scribe.css b/scribe/scribe.css
index c3852b1..a3b5d2c 100644
--- a/scribe/scribe.css
+++ b/scribe/scribe.css
@@ -93,5 +93,4 @@
 
 .glyph {
     width: 8vw;
-    height: 8vw;
 }
diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index 7b68ff0..3caf03c 100644
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -169,6 +169,16 @@ function Glyph(props) {
 
   const glyph_dots = [];
 
+  let last_square = 0;
+  for (let i = 0; i < 9; i++) {
+    if (props.squares[i])
+      last_square = i;
+  }
+
+  const height = Math.floor(20 * (Math.floor(last_square / 3) + 1));
+
+  const viewbox=`0 0 60 ${height}`;
+
   for (let row = 0; row < 3; row++) {
     for (let col = 0; col < 3; col++) {
       if (props.squares[3 * row + col]) {
@@ -176,6 +186,7 @@ function Glyph(props) {
         let cx = 10 + 20 * col;
         glyph_dots.push(
           <circle
+            key={3 * row + col}
             cx={cx}
             cy={cy}
             r="8"
@@ -188,7 +199,7 @@ function Glyph(props) {
   return (<div className="glyph-and-name">
             {props.name}
             <div className="glyph">
-              <svg viewBox="0 0 60 60">
+              <svg viewBox={viewbox}>
                 <g fill="#287789">
                   {glyph_dots}
                 </g>
-- 
2.43.0