- Edit src/App.js and save to reload.
-
+
+
+
);
}
diff --git a/src/GameGrid/GameGrid.jsx b/src/GameGrid/GameGrid.jsx
new file mode 100644
index 0000000..bfa8f0d
--- /dev/null
+++ b/src/GameGrid/GameGrid.jsx
@@ -0,0 +1,148 @@
+import React, { Component } from "react";
+import Tiles from "./Tiles/Tiles";
+import WinLine from "./WinLine/WinLine";
+import "./GameGrid.scss";
+
+class GameGrid extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ gameboard: ["", "", "", "", "", "", "", "", ""],
+ usedSquares: [],
+ isXturn: true,
+ endOfGame: false,
+ isWinLineHidden: true,
+ winLinePos: ""
+ };
+ }
+
+ IsEndGame = () => {
+ let board = this.state.gameboard;
+ let turns = this.state.usedSquares.length;
+ console.log(this.state.usedSquares.length);
+
+ for (let i = 0; i <= 6; i = i + 3) {
+ if (
+ board[i] !== "" &&
+ board[i] === board[i + 1] &&
+ board[i + 1] == board[i + 2]
+ ) {
+ this.setState({
+ winLinePos: "r" + i
+ }, () => {
+ console.log(board[i] + " " + this.state.winLinePos + " -won horizontaly");
+ return true;
+ })
+ }
+ }
+
+ for (let i = 0; i <= 2; i = i + 1) {
+ if (
+ board[i] !== "" &&
+ board[i] === board[i + 3] &&
+ board[i + 3] == board[i + 6]
+ ) {
+ this.setState({
+ winLinePos: "c" + i
+ }, () => {
+ console.log(board[i] + " " + this.state.winLinePos + " -won vertically");
+ return true;
+ })
+ }
+ }
+
+ for (let i = 0, j = 4; i <= 2; i = i + 2, j = j - 2) {
+ if (
+ board[i] !== "" &&
+ board[i] == board[i + j] &&
+ board[i + j] === board[i + 2 * j]
+ ) {
+ this.setState({
+ winLinePos: "d" + i
+ }, () => {
+ console.log(board[i] + " " + this.state.winLinePos + "-won diagonaly");
+ return true;
+ })
+ }
+ }
+
+ if (turns === 9) {
+ console.log("draw game");
+ return true;
+ }
+
+ return false;
+ };
+
+ SetPosition = pos => {
+ if (this.state.gameboard[pos] === "" && this.state.isXturn) {
+ let onPlaygrid = [...this.state.gameboard];
+ onPlaygrid[pos] = "X";
+ this.setState(
+ {
+ gameboard: onPlaygrid,
+ isXturn: !this.state.isXturn,
+ usedSquares: [...this.state.usedSquares, pos]
+ },
+ () => {
+ if (!this.IsEndGame()) {
+ console.log(this.state.usedSquares.length);
+ this.ChooseOmove();
+ }
+ }
+ );
+ }
+ };
+
+ ChooseOmove = () => {
+ let num = Math.floor(Math.random() * 8);
+ return this.state.usedSquares.includes(num)
+ ? this.ChooseOmove()
+ : this.botPlaying(num);
+ };
+
+ botPlaying = Omove => {
+ if (this.state.gameboard[Omove] === "") {
+ let onPlaygrid = [...this.state.gameboard];
+ onPlaygrid[Omove] = "O";
+ this.setState(
+ {
+ gameboard: onPlaygrid,
+ isXturn: !this.state.isXturn,
+ usedSquares: [...this.state.usedSquares, Omove]
+ },
+ () => {
+ this.IsEndGame();
+ }
+ );
+ } else {
+ this.ChooseOmove();
+ }
+ };
+
+ tileBlock = index => {
+ return (
+ Tik-Tak-Toe
+
+ );
+ }
+}
+
+export default GameGrid;
diff --git a/src/GameGrid/GameGrid.scss b/src/GameGrid/GameGrid.scss
new file mode 100644
index 0000000..76e349a
--- /dev/null
+++ b/src/GameGrid/GameGrid.scss
@@ -0,0 +1,11 @@
+.container {
+ width: 70%;
+ margin: 0 auto;
+ min-height: 200px;
+}
+
+.grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/src/GameGrid/Tiles/Tiles.jsx b/src/GameGrid/Tiles/Tiles.jsx
new file mode 100644
index 0000000..a75ce61
--- /dev/null
+++ b/src/GameGrid/Tiles/Tiles.jsx
@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import "./Tiles.scss";
+
+class Tiles extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ handleClick = () => {
+ let index = this.props.idx;
+ this.props.positionClick(index);
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default Tiles;
diff --git a/src/GameGrid/Tiles/Tiles.scss b/src/GameGrid/Tiles/Tiles.scss
new file mode 100644
index 0000000..2f316a6
--- /dev/null
+++ b/src/GameGrid/Tiles/Tiles.scss
@@ -0,0 +1,10 @@
+.tiles-bts {
+ display: block;
+ width: calc(33.3% - 12px);
+ height: 25vh;
+ border: solid 1px #000000;
+ padding: 4px;
+ margin: 6px;
+ background: #ffffffd9;
+ font-size: 5rem;
+}
\ No newline at end of file
diff --git a/src/GameGrid/WinLine/WinLine.jsx b/src/GameGrid/WinLine/WinLine.jsx
new file mode 100644
index 0000000..1d816db
--- /dev/null
+++ b/src/GameGrid/WinLine/WinLine.jsx
@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+
+class WinLine extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+ {!this.state.isWinLineHidden && }
+ {this.state.gameboard.map((i, index) => {
+ return this.tileBlock(index);
+ })}
+
+ Hello, World!
+ );
+ }
+}
+
+export default WinLine;
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100755
index 6b60c10..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-