+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>
+ );
+}
+