\\n Onitama is simple and quick variation on chess. Games typically take 5-15 minutes.\\n\\n
\\n Onitama is simple and quick variation on chess. Games typically take 5-15 minutes.\\n
\\n
diff --git a/notes_bugs.md b/notes_bugs.md
index 377d4b9..e136ff6 100644
--- a/notes_bugs.md
+++ b/notes_bugs.md
@@ -1,7 +1,13 @@
-## Known Bugs
+## Known Bugs && WIP
+`grid.placePiece` and `grid.removePiece`
+ - possible error, does not remove opposite color object if capture?
+`grid.winStone` and `grid.winStream`
+ - designed to set grid attr to the winning color on true
+ - have not decided where to call, issue with place and remove methods need resolution first
+
diff --git a/src/scripts/board.js b/src/scripts/board.js
index f78314e..ee9bec0 100644
--- a/src/scripts/board.js
+++ b/src/scripts/board.js
@@ -4,7 +4,7 @@ import Piece from "./piece";
export default class Board {
constructor() {
// this.player = currentPlayer;
- this.grid = [];
+ this.grid = [];
for (let i = 0; i < 5; i++) {
let row = [];
for (let j = 0; j < 5; j++) {
@@ -14,6 +14,10 @@ export default class Board {
}
this.grid.push(row);
}
+ this.redShrine = this.grid[4][2];
+ this.blueShrine = this.grid[0][2];
+ this.winStone = null;
+ this.winStream = null;
window.Piece = Piece; // add to window
}
@@ -53,16 +57,10 @@ export default class Board {
// after move gets rid of piece view
viewRemovePiece(pos) {
let that = this;
- // debugger;
let posStr = JSON.stringify(pos);
let square = document.getElementById(posStr);
let child = square.firstChild;
-
- // setTimeout(() => square.child.style = 'opacity = 0.5' , 500);
- // setTimeout(() => square.child.style = 'opacity = 0.3' , 1000);
- // setTimeout(() => square.child.style = 'opacity = 0.2' , 2000);
- setTimeout(() => square.removeChild(child), 3000);
-
+ setTimeout(() => square.removeChild(child), 2000);
}
placePiece(pos, piece) {
@@ -71,8 +69,21 @@ export default class Board {
that.viewPlacePiece(pos, piece);
piece.position = pos;
return (that.grid[pos[0]][pos[1]] = piece);
- } else {
- throw new Error('That position is not valid');
+ }
+ }
+
+
+ // win condition capture
+ winStone(endPos, piece) {
+
+ }
+
+ // win condition shrine
+ winStream(endPos, piece) {
+ if (piece.type === "master" && piece.color === "blue" && pos === this.redShrine) {
+ this.winStream === "blue";
+ } else if (piece.type === "master" && piece.color === "red" && pos === this.blueShrine) {
+ this.winStream === "red";
}
}
@@ -81,11 +92,6 @@ export default class Board {
}
movePiece(posStart, posEnd) {
- // posStart = clicked piece
- // posEnd = clicked space (highlighted)
- // if current player color = selected piece color
- // if selected end position = valid (highlighted)
- // if move options include (highlighted)
let pawn = this.getPiece(posStart);
this.removePiece(posStart);
return this.placePiece(posEnd, pawn);
diff --git a/src/scripts/game.js b/src/scripts/game.js
index f54f4ba..084a9aa 100644
--- a/src/scripts/game.js
+++ b/src/scripts/game.js
@@ -57,7 +57,6 @@ export default class Game {
this.onDeckCard = this.deck.deal();
this.activeGame = true;
this.board.setBoard();
-
}
// all moves
diff --git a/src/scripts/modal.js b/src/scripts/modal.js
index 2f00c4b..7a30524 100644
--- a/src/scripts/modal.js
+++ b/src/scripts/modal.js
@@ -1,11 +1,12 @@
export const modalFill =
`
How to Play Onitama
-
+
Onitama is simple and quick variation on chess. Games typically take 5-15 minutes.
-
+
Setup and the Board
+
- Press the Start Game button.
@@ -23,9 +24,9 @@ export const modalFill =
- Player 1 goes first!
-
+
1. Move and Attack
-
+
- Select (click) one of your pawns. Selected pawns will highlight yellow.
- Select (click) one of your cards. Selected cards will highlight yellow.
@@ -34,23 +35,23 @@ export const modalFill =
- If the tile contains an enemy pawn, it will be 'captured' and removed from the board.
-
+
2. Swap Turns and Cards
-
+
- The move card you used will flip and be exchanged for the move card outside the board, a new movement for next turn!
- Be careful! At the end of your opponents turn they will also exchange, and gain the move you just used!
-
+
3. Win the Game
-
+
There are two ways to win the game:
- Way of the Stone: win by capturing your opponent's 'Master' pawn.
- Way of the Stream: win by moving your own 'Master' into your opponents 'Temple Arch' space (the 'Master' starting space).
-
+
About
Onitama is a two-player chess variant where the player moves pawns across a 5x5 grid using a set of five movement cards.
diff --git a/src/styles/index.css b/src/styles/index.css
index 6400914..5e44800 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -5,25 +5,14 @@
}
body {
- /* background: rgb(236,190,70);
- background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, rgb(241, 236, 225) 90%); */
- /* background-color: #EEEE; */
- /* background-color: #b8c6db;
- background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%); */
- /* background-color: #ffffff;
- background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%); */
- /* background-color: #2f4353;
- background-image: linear-gradient(315deg, #2f4353 0%, #d2ccc4 74%); */
background-color: #aee1f9;
background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%);
-
margin: 1px;
}
#container {
width: 100%;
- height: 100%;
-
+ height: 100%;
}
@@ -62,8 +51,8 @@ header {
#board {
display: grid;
- grid-template-columns: repeat(5, 1fr); /* five equal 'fractioned' tracks */
- box-sizing: border-box; /*within container */
+ grid-template-columns: repeat(5, 1fr); /* equal 'fractioned' tracks */
+ box-sizing: content-box; /*within container */
padding: 0px;
/* border: 2px solid black; */
border-radius: 6px;
@@ -71,7 +60,6 @@ header {
}
-
.opponent-row {
grid-column: 2 / 4;
grid-row: 2 / 3;
@@ -149,7 +137,7 @@ header {
.modal__howTo {
height: 100%;
- width: 100%;
+ max-width: 100%;
display: flex;
position: fixed;
background-color: rgba(0, 0, 0, 0.25);
@@ -173,7 +161,7 @@ header {
font-size: 1rem;
color: #302f2f;
z-index: 4;
- overflow-y: scroll
+ overflow: auto;
}
.modal__fill-active {