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.
.glyph {
width: 8vw;
- height: 8vw;
}
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]) {
let cx = 10 + 20 * col;
glyph_dots.push(
<circle
+ key={3 * row + col}
cx={cx}
cy={cy}
r="8"
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>