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