src: add new board, select randomly from available ones

src/components/App/App.tsx

@@ -34,7 +34,8 @@ export default class App extends React.Component {
   constructor(props: object) {
     super(props);
 
-    this.game = require(`../../constants/1.json`)
+    const gameId = (Math.trunc(Math.random() * 100) % 2) + 1;
+    this.game = require(`../../constants/${gameId}.json`)
   }
 
   renderAnswers(): Array<JSX.Element> {

src/components/Board/Board.tsx

@@ -92,7 +92,7 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
   renderCell(s: string, pos: Point): JSX.Element {
     const size = `${this.props.cellSize}px`;
     const padding = `${this.props.cellSize / 4}px`;
-    const visibility = s === " " ? "hidden" : "visible";
+    const visibility = s === ' ' ? 'hidden' : 'visible';
 
     return (
       <button
@@ -127,7 +127,7 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
     let lines = this.state.answers.map((s, n) =>
       this.renderLine(s, n));
 
-    const gridTemplateColumns = `repeat(${this.props.cells.length}, ${this.props.cellSize}px)`;
+    const gridTemplateColumns = `repeat(${this.props.cells[0].length}, ${this.props.cellSize}px)`;
 
     return (
       <div className="Container">

src/constants/2.json

@@ -0,0 +1,46 @@
+{
+  "title": "Wykreślanka kwizowa",
+  "description": "To zadanie rózni się od zwykłej wykreślanki tylko tym, że wyrazy, które trzeba wykreślić z diagramu, należy odgadnąć na podstawie wskazówek.",
+  "catchword": "BRYLANTOWAKOLIA",
+  "cells": [
+    [" ", " ", " ", "P", "A", "R", "Y", "Ż", "R", "S", " ", " ", " "],
+    [" ", " ", "S", "W", "D", "K", "K", "B", "A", "O", "T", " ", " "],
+    [" ", "P", "Z", "R", "A", "I", "O", "B", "Y", "Y", "T", "A", " "],
+    ["K", "L", "T", "K", "M", "R", "A", "R", "R", "L", "A", "K", "T"],
+    ["L", "A", "O", "O", "S", "R", "S", "D", "D", "T", "K", "R", "A"],
+    ["A", "S", "K", "W", "T", "Ń", "A", "Z", "E", "E", "R", "E", "L"],
+    ["U", "T", "H", "N", "E", "M", "I", "N", "A", "M", "O", "C", "L"],
+    ["N", "Y", "O", "A", "R", "R", "Y", "M", "N", "W", "B", "N", "I"],
+    ["P", "K", "L", "G", "D", "U", "B", "L", "I", "N", "A", "A", "N"],
+    ["T", "R", "M", "O", "A", "Ł", "R", "E", "P", "W", "T", "T", "N"],
+    [" ", "A", "A", "K", "M", "F", "O", "L", "L", "I", "A", "A", " "],
+    [" ", " ", "A", "G", "A", "H", "N", "E", "P", "O", "K", " ", " "],
+    [" ", " ", " ", "T", "A", "L", "E", "R", "Z", "E", " ", " ", " "]
+  ],
+  "solutions": [
+    {"selection": {"start": {"x":  3, "y":  0}, "end": {"x":  7, "y":  0}}, "key": "PARYŻ"},
+    {"selection": {"start": {"x":  4, "y":  8}, "end": {"x":  9, "y":  8}}, "key": "DUBLIN"},
+    {"selection": {"start": {"x":  8, "y":  9}, "end": {"x":  4, "y":  9}}, "key": "PERŁA"},
+    {"selection": {"start": {"x": 10, "y": 11}, "end": {"x":  2, "y": 11}}, "key": "KOPENHAGA"},
+    {"selection": {"start": {"x":  3, "y": 12}, "end": {"x":  9, "y": 12}}, "key": "TALERZE"},
+    {"selection": {"start": {"x":  0, "y":  3}, "end": {"x":  0, "y":  7}}, "key": "KLAUN"},
+    {"selection": {"start": {"x":  1, "y":  2}, "end": {"x":  1, "y":  8}}, "key": "PLASTYK"},
+    {"selection": {"start": {"x":  2, "y":  1}, "end": {"x":  2, "y":  9}}, "key": "SZTOKHOLM"},
+    {"selection": {"start": {"x":  4, "y":  2}, "end": {"x":  4, "y": 10}}, "key": "AMSTERDAM"},
+    {"selection": {"start": {"x": 10, "y":  3}, "end": {"x": 10, "y": 10}}, "key": "AKROBATA"},
+    {"selection": {"start": {"x": 11, "y":  9}, "end": {"x": 11, "y":  2}}, "key": "TANCERKA"},
+    {"selection": {"start": {"x": 12, "y":  3}, "end": {"x": 12, "y":  9}}, "key": "TALLINN"},
+    {"selection": {"start": {"x":  0, "y":  8}, "end": {"x":  4, "y": 12}}, "key": "PRAGA"},
+    {"selection": {"start": {"x":  5, "y": 10}, "end": {"x":  1, "y":  6}}, "key": "FAGOT"},
+    {"selection": {"start": {"x":  3, "y":  5}, "end": {"x":  8, "y": 10}}, "key": "WERBEL"},
+    {"selection": {"start": {"x":  7, "y":  7}, "end": {"x":  3, "y":  3}}, "key": "MINSK"},
+    {"selection": {"start": {"x":  3, "y":  1}, "end": {"x": 10, "y":  8}}, "key": "WARSZAWA"},
+    {"selection": {"start": {"x":  4, "y":  1}, "end": {"x":  9, "y":  6}}, "key": "DIADEM"},
+    {"selection": {"start": {"x":  4, "y":  0}, "end": {"x": 11, "y":  7}}, "key": "AKORDEON"},
+    {"selection": {"start": {"x": 12, "y":  4}, "end": {"x":  8, "y":  0}}, "key": "AKTOR"},
+    {"selection": {"start": {"x":  2, "y":  5}, "end": {"x":  6, "y":  1}}, "key": "KOMIK"},
+    {"selection": {"start": {"x":  1, "y":  8}, "end": {"x":  9, "y":  0}}, "key": "KONTRABAS"},
+    {"selection": {"start": {"x":  5, "y":  6}, "end": {"x": 10, "y":  1}}, "key": "MADRYT"},
+    {"selection": {"start": {"x": 10, "y":  3}, "end": {"x":  6, "y":  7}}, "key": "ATENY"}
+  ]
+}