components: first fully successful game!
This commit is contained in:
Artur Tamborski
parent
b1ba2b6209
commit
f3a39a3bf2
@ -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
|
||||
numRows={10}
|
||||
numCols={10}
|
||||
numLines={2}
|
||||
/>
|
||||
<Board numBoard={1}/>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
.Board {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(10, 60px);
|
||||
}
|
||||
|
||||
.Cell {
|
||||
|
||||
@ -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<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 = {
|
||||
bar: {
|
||||
start: {x: 0, y: 0},
|
||||
end: {x: 0, y: 0},
|
||||
},
|
||||
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<IBoardProps, IBoardState> {
|
||||
}
|
||||
|
||||
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<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>
|
||||
|
||||
46
src/constants/1.json
Normal file
46
src/constants/1.json
Normal file
@ -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"}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user