add simple move logic, preview and move rendering

This commit is contained in:
Sorrel Bri 2019-08-02 23:42:49 -07:00
parent 39eb90be67
commit 56a0f22e8d
2 changed files with 97 additions and 58 deletions

View file

@ -85,6 +85,9 @@ td {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
border-radius: 50% solid black; border-radius: 50% solid black;
color: black; color: black;
margin: auto;
padding: 0;
vertical-align: middle;
} }
td[id^="1,"] { td[id^="1,"] {
@ -122,34 +125,40 @@ td .stone {
height: 85%; height: 85%;
border-radius: 50%; border-radius: 50%;
margin: auto; margin: auto;
vertical-align: middle;
display: flex;
flex-direction: column;
justify-content: center;
} }
td .stone .dot { td .stone .dot {
width: 35%; width: 35%;
height: 35%; height: 35%;
border-radius: 50%; border-radius: 50%;
margin: auto; margin: auto;
vertical-align: middle;
} }
td .stone .ko { td .stone[data-stone="ko"] {
background-color: transparent;
border: 1vmin solid red;
} }
td .stone .white { td .stone[data-stone="white"] {
background-color: white;
} }
td .stone .black { td .stone[data-stone="black"] {
background-color: black; background-color: black;
} }
td .stone .transparent { td .stone[data-stone="none"] {
background-color: transparent;
} }
td .dot .white { td .dot[data-dot="white"] {
background-color: white;
} }
td .dot .black { td .dot[data-dot="black"] {
background-color: black;
} }
td .dot .transparent { td .dot[data-dot="none"] {
background-color: transparent;
} }
td .dot .dame { td .dot .dame {

View file

@ -1,23 +1,24 @@
/*----- constants -----*/ /*----- constants -----*/
// game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures} // game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures}
const STONES_CLASS = { const STONES_DATA = {
'-1': 'white', '-1': 'white',
'0': 'transparent', '0': 'none',
'1': 'black', '1': 'black',
'k': 'ko' 'k': 'ko'
} }
const DOTS_CLASS = { const DOTS_DATA = {
'-1': 'white', '-1': 'white',
'0': 'transparent', '0': 'none',
'1': 'black', '1': 'black',
'd': 'dame', 'd': 'dame',
'l': 'legal',
's': 'seki' 's': 'seki'
} }
const gameState = { const gameState = {
winner: null, winner: null,
turn: null, // turn logic depends on handicap stones turn: 1, // turn logic depends on handicap stones
pass: null, pass: null,
komi: null, // komi depends on handicap stones komi: null, // komi depends on handicap stones
handicap: null, handicap: null,
@ -58,37 +59,38 @@ const handiPlace = [ 0,
// define initial game state // define initial game state
class Point { class Point {
constructor(x, y) { constructor(x, y) {
this.pos = [ x, y ] this.pos = [ x, y ]
this.stone = 0; // this is where move placement will go 0, 1, -1 'k' this.stone = 0; // this is where move placement will go 0, 1, -1 'k'
this.overlay = 0; // this is where 'chk', 'l' this.overlay = 0; // this is where 'chk', 'l'
this.neighbors = { this.neighbors = {
top: {}, top: {},
btm: {}, btm: {},
lft: {}, lft: {},
rgt: {} rgt: {}
}, },
// neighbor exists it's point is stored as { rPos, cPos} // neighbor exists it's point is stored as { rPos, cPos}
this.neighbors.top = x > 1 ? [ x - 1, y ] : null; this.neighbors.top = x > 1 ? [ x - 1, y ] : null;
this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null; this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null;
this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null; this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null;
this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null; this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null;
// checkLegal: function() { // checkLegal: function() {
// this.cellValue = (for neighbor in this.neighbors) { // this.cellValue = (for neighbor in this.neighbors) {
// boardState.find( val => { // boardState.find( val => {
// if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ } // if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ }
// }); // });
// } // }
// } // }
} }
}; };
// boardState [point objects-contain overlay] lastState (created from boardState) // boardState [point objects-contain overlay] lastState (created from boardState)
let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3), let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3),
new Point(2,1), new Point(2,2), new Point(2,3), new Point(2,1), new Point(2,2), new Point(2,3),
new Point(3,1), new Point(3,2), new Point(3,3), new Point(3,1), new Point(3,2), new Point(3,3),
]; ];
// modeling 1,1 point for // modeling 1,1 point for
// define boardState and overlay as 2d 9x9 arrays // define boardState and overlay as 2d 9x9 arrays
@ -116,26 +118,28 @@ const handiPlace = [ 0,
// click on kifu to display game menu // click on kifu to display game menu
/*----- functions -----*/ /*----- functions -----*/
// init(); init();
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
function checkLegal(evt) { function checkLegal(evt) {
let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
console.log(hover); let point = findPointFromIdx(hover);
//first step in logic: is stone occupied
point.overlay = point.stone !== 0 ? 0 : 'l';
render(point);
} }
function placeStone(evt) { function placeStone(evt) {
console.log('click!'); console.log('click!');
let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
// checks for placement and pushes to cell
let point = findPointFromIdx(placement);
//checks that this placement was marked as legal //checks that this placement was marked as legal
// checks for placement and pushes to cell point.stone = point.overlay === 'l' ? gameState.turn : point.stone;
boardState.find( point => { gameState.turn*= -1;
// gets board point and ensures legal render();
point.stone = point.pos[0] === placement[0] && point.pos[1] === placement[1]
&& point.overlay === 'l'
? turn : point.stone;
});
} }
function init() { function init() {
@ -154,8 +158,34 @@ function init() {
// gameState.boardState // create board from user input // gameState.boardState // create board from user input
//need init player meta //need init player meta
render();
}; };
function render(hoverPoint) {
// console.log('render');
renderBoard();
renderPreview(hoverPoint);
}
function renderBoard() {
boardState.forEach(val => {
let stone = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1];
// console.log(stone);
stone.setAttribute("data-stone", STONES_DATA[val.stone]);
// console.log(val.stone);
// console.log(stone);
})
}
function renderPreview(hoverPoint) {
boardState.forEach(val => {
let dot = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1].childNodes[0];
console.log();
dot.setAttribute("data-dot", val.overlay === 'l' && val.pos[0] === hoverPoint.pos[0] && val.pos[1] === hoverPoint.pos[1] ? DOTS_DATA[gameState.turn] : DOTS_DATA[0]);
})
}
// functions // functions
// initialize game // initialize game