From f3a39a3bf29880fbfdef0c58caa8067b334929c9 Mon Sep 17 00:00:00 2001 From: Artur Tamborski Date: Mon, 7 Dec 2020 13:10:34 +0100 Subject: [PATCH] components: first fully successful game! --- src/components/App/App.tsx | 13 +++--- src/components/Board/Board.scss | 1 - src/components/Board/Board.tsx | 73 ++++++++++++++++++--------------- src/constants/1.json | 46 +++++++++++++++++++++ 4 files changed, 93 insertions(+), 40 deletions(-) create mode 100644 src/constants/1.json diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index ccbccbc..de78745 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -9,15 +9,16 @@ export default function App(): JSX.Element { return (
- +
+ +
+ controls: 1231414214 +
+
- +
diff --git a/src/components/Board/Board.scss b/src/components/Board/Board.scss index 8c033e8..7c3fbf4 100644 --- a/src/components/Board/Board.scss +++ b/src/components/Board/Board.scss @@ -19,7 +19,6 @@ .Board { display: grid; justify-content: center; - grid-template-columns: repeat(10, 60px); } .Cell { diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx index 9b11844..389f481 100644 --- a/src/components/Board/Board.tsx +++ b/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; - numCols: number; - numLines: number; + numBoard: number; } interface IBoardState { - cells: string[][]; - selections: Selection[]; + score: number; wasSelecting: boolean; + selections: Array; bar: Bar; } -const SOLUTIONS: Array = [ - {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 { + private readonly cells: Array>; + private readonly solutions: Array; + constructor(props: IBoardProps) { super(props); - const selection: Selection = { - bar: { - start: {x: 0, y: 0}, - end: {x: 0, y: 0}, - }, - isCorrect: false, - isVisible: true, - } + const crosski: any = require(`../../constants/${props.numBoard}.json`) + this.cells = crosski.cells; + this.solutions = crosski.solutions; + + 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')), - selections: [...new Array(props.numLines)].map(() => Object.assign({}, selection)), + score: 0, + 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 { } updateSelection(pos: Point, isSelecting: boolean, isMoving: boolean = false): void { - if (isMoving && !this.state.wasSelecting) - return; - + let score = this.state.score; const selections = this.state.selections.slice(); const s = selections.find(v => !v.isCorrect); - if (!s) - return this.gameOver(); + // skip if there are no lines left or the mouse is moving but not selecting + 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) - s.isCorrect = SOLUTIONS.some(v => - JSON.stringify(v) === JSON.stringify(bar)); + if (isMouseUp && this.solutions.some(v => str(v.bar) === str(bar))) + [s.isCorrect, score] = [true, score + 1]; - 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 { 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 { return (
-
+
{cells}
diff --git a/src/constants/1.json b/src/constants/1.json new file mode 100644 index 0000000..1febd4a --- /dev/null +++ b/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"} + ] +}