components: first fully successful game!

src/components/App/App.tsx

@@ -9,15 +9,16 @@ export default function App(): JSX.Element {
   return (
     <div className="App">
       <div />
+      <div>
         <Logo />
+        <div>
+          controls: 1231414214
+        </div>
+      </div>
       <div />
       <div />
       <div>
-        <Board
+        <Board numBoard={1}/>
-          numRows={10}
-          numCols={10}
-          numLines={2}
-        />
       </div>
       <div />
     </div>

src/components/Board/Board.scss

@@ -19,7 +19,6 @@
 .Board {
   display: grid;
   justify-content: center;
-  grid-template-columns: repeat(10, 60px);
 }
 
 .Cell {

src/components/Board/Board.tsx

@@ -14,6 +14,11 @@ export type Bar = {
   end: Point,
 }
 
+type Solution = {
+  bar: Bar;
+  key: string;
+}
+
 type Selection = {
   bar: Bar,
   isVisible: boolean;
@@ -21,41 +26,39 @@ type Selection = {
 }
 
 interface IBoardProps {
-  numRows: number;
+  numBoard: number;
-  numCols: number;
-  numLines: number;
 }
 
 interface IBoardState {
-  cells: string[][];
+  score: number;
-  selections: Selection[];
   wasSelecting: boolean;
+  selections: Array<Selection>;
   bar: Bar;
 }
 
-const SOLUTIONS: Array<Bar> = [
-  {start: {x: 0, y: 0}, end: {x: 5, y: 0}},
-  {start: {x: 2, y: 2}, end: {x: 4, y: 4}},
-]
-
 export default class Board extends React.Component<IBoardProps, IBoardState> {
+  private readonly cells: Array<Array<string>>;
+  private readonly solutions: Array<Solution>;
+
   constructor(props: IBoardProps) {
     super(props);
 
-    const selection: Selection = {
+    const crosski: any = require(`../../constants/${props.numBoard}.json`)
-      bar: {
+    this.cells = crosski.cells;
-        start: {x: 0, y: 0},
+    this.solutions = crosski.solutions;
-        end: {x: 0, y: 0},
+
-      },
+    const selections = [...new Array(this.solutions.length)].map(() =>
+      Object.assign({}, {
+        bar: {start: {x: 0, y: 0}, end: {x: 0, y: 0}},
         isCorrect: false,
         isVisible: true,
-    }
+      }));
 
     this.state = {
-      cells: Array(props.numCols).fill(Array(props.numRows).fill('A')),
+      score: 0,
-      selections: [...new Array(props.numLines)].map(() => Object.assign({}, selection)),
+      selections,
       wasSelecting: false,
-      bar: {start: {x: 0, y: 0}, end: {x: 0, y: 0}}
+      bar: {start: {x: 0, y: 0}, end: {x: 0, y: 0}},
     }
   }
 
@@ -64,32 +67,33 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
   }
 
   updateSelection(pos: Point, isSelecting: boolean, isMoving: boolean = false): void {
-    if (isMoving && !this.state.wasSelecting)
+    let score = this.state.score;
-      return;
-
     const selections = this.state.selections.slice();
     const s = selections.find(v => !v.isCorrect);
 
-    if (!s)
+    // skip if there are no lines left or the mouse is moving but not selecting
-      return this.gameOver();
+    if (!s || (isMoving && !this.state.wasSelecting))
+      return;
 
     const x = Math.abs(pos.x - this.state.bar.start.x);
     const y = Math.abs(pos.y - this.state.bar.start.y);
     const isValidMove = x === 0 || y === 0 || x === y;
     const isMouseDown = isSelecting && !this.state.wasSelecting;
     const isMouseUp = !isSelecting && this.state.wasSelecting && isValidMove;
-
     const start: Point = isMouseDown ? pos : this.state.bar.start;
     const bar: Bar = {start, end: pos};
+    const str = JSON.stringify;
 
     if (isValidMove)
       s.bar = bar;
 
-    if (isMouseUp)
+    if (isMouseUp && this.solutions.some(v => str(v.bar) === str(bar)))
-      s.isCorrect = SOLUTIONS.some(v =>
+      [s.isCorrect, score] = [true, score + 1];
-        JSON.stringify(v) === JSON.stringify(bar));
 
-    this.setState({...this.state, bar, selections, wasSelecting: isSelecting});
+    this.setState({...this.state, score, bar, selections, wasSelecting: isSelecting});
+
+    if (score === this.solutions.length)
+      this.gameOver();
   }
 
   renderCell(s: string, pos: Point): JSX.Element {
@@ -120,7 +124,7 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
 
   render(): JSX.Element {
     let cells =
-      this.state.cells.map((oy, y) =>
+      this.cells.map((oy, y) =>
         oy.map((s, x) =>
           this.renderCell(s, {x, y})));
 
@@ -130,7 +134,10 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
     return (
       <div className="Container">
         <div className="Content">
-          <div className="Board">
+          <div
+            className="Board"
+            style={{gridTemplateColumns: `repeat(${this.cells.length}, 60px)`}}
+          >
             {cells}
           </div>
         </div>

src/constants/1.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": [
+    ["X", "R", "W", "P", "A", "R", "Y", "Ż", "R", "S", "S", "L", "I"],
+    ["A", "K", "S", "W", "D", "K", "K", "B", "A", "O", "T", "P", "W"],
+    ["H", "P", "Z", "R", "A", "I", "O", "B", "Y", "Y", "T", "A", "O"],
+    ["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"],
+    ["Y", "A", "A", "K", "M", "F", "O", "L", "L", "I", "A", "A", "M"],
+    ["I", "W", "A", "G", "A", "H", "N", "E", "P", "O", "K", "D", "N"],
+    ["K", "R", "Z", "T", "A", "L", "E", "R", "Z", "E", "W", "O", "B"]
+  ],
+  "solutions": [
+    {"bar": {"start": {"x":  3, "y":  0}, "end": {"x":  7, "y":  0}}, "key": "PARYŻ"},
+    {"bar": {"start": {"x":  4, "y":  8}, "end": {"x":  9, "y":  8}}, "key": "DUBLIN"},
+    {"bar": {"start": {"x":  8, "y":  9}, "end": {"x":  4, "y":  9}}, "key": "PERŁA"},
+    {"bar": {"start": {"x": 10, "y": 11}, "end": {"x":  2, "y": 11}}, "key": "KOPENHAGA"},
+    {"bar": {"start": {"x":  3, "y": 12}, "end": {"x":  9, "y": 12}}, "key": "TALERZE"},
+    {"bar": {"start": {"x":  0, "y":  3}, "end": {"x":  0, "y":  7}}, "key": "KLAUN"},
+    {"bar": {"start": {"x":  1, "y":  2}, "end": {"x":  1, "y":  8}}, "key": "PLASTYK"},
+    {"bar": {"start": {"x":  2, "y":  1}, "end": {"x":  2, "y":  9}}, "key": "SZTOKHOLM"},
+    {"bar": {"start": {"x":  4, "y":  2}, "end": {"x":  4, "y": 10}}, "key": "AMSTERDAM"},
+    {"bar": {"start": {"x": 10, "y":  3}, "end": {"x": 10, "y": 10}}, "key": "AKROBATA"},
+    {"bar": {"start": {"x": 11, "y":  9}, "end": {"x": 11, "y":  2}}, "key": "TANCERKA"},
+    {"bar": {"start": {"x": 12, "y":  3}, "end": {"x": 12, "y":  9}}, "key": "TALLINN"},
+    {"bar": {"start": {"x":  0, "y":  8}, "end": {"x":  4, "y": 12}}, "key": "PRAGA"},
+    {"bar": {"start": {"x":  5, "y": 10}, "end": {"x":  1, "y":  6}}, "key": "FAGOT"},
+    {"bar": {"start": {"x":  3, "y":  5}, "end": {"x":  8, "y": 10}}, "key": "WERBEL"},
+    {"bar": {"start": {"x":  7, "y":  7}, "end": {"x":  3, "y":  3}}, "key": "MINSK"},
+    {"bar": {"start": {"x":  3, "y":  1}, "end": {"x": 10, "y":  8}}, "key": "WARSZAWA"},
+    {"bar": {"start": {"x":  4, "y":  1}, "end": {"x":  9, "y":  6}}, "key": "DIADEM"},
+    {"bar": {"start": {"x":  4, "y":  0}, "end": {"x": 11, "y":  7}}, "key": "AKORDEON"},
+    {"bar": {"start": {"x": 12, "y":  4}, "end": {"x":  8, "y":  0}}, "key": "AKTOR"},
+    {"bar": {"start": {"x":  2, "y":  5}, "end": {"x":  6, "y":  1}}, "key": "KOMIK"},
+    {"bar": {"start": {"x":  1, "y":  8}, "end": {"x":  9, "y":  0}}, "key": "KONTRABAS"},
+    {"bar": {"start": {"x":  5, "y":  6}, "end": {"x": 10, "y":  1}}, "key": "MADRYT"},
+    {"bar": {"start": {"x": 10, "y":  3}, "end": {"x":  6, "y":  7}}, "key": "ATENY"}
+  ]
+}