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%);
border-radius: 50% solid black;
color: black;
margin: auto;
padding: 0;
vertical-align: middle;
}
td[id^="1,"] {
@ -122,34 +125,40 @@ td .stone {
height: 85%;
border-radius: 50%;
margin: auto;
vertical-align: middle;
display: flex;
flex-direction: column;
justify-content: center;
}
td .stone .dot {
width: 35%;
height: 35%;
border-radius: 50%;
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;
}
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 {

View file

@ -1,23 +1,24 @@
/*----- constants -----*/
// game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures}
const STONES_CLASS = {
const STONES_DATA = {
'-1': 'white',
'0': 'transparent',
'0': 'none',
'1': 'black',
'k': 'ko'
}
const DOTS_CLASS = {
const DOTS_DATA = {
'-1': 'white',
'0': 'transparent',
'0': 'none',
'1': 'black',
'd': 'dame',
'l': 'legal',
's': 'seki'
}
const gameState = {
winner: null,
turn: null, // turn logic depends on handicap stones
turn: 1, // turn logic depends on handicap stones
pass: null,
komi: null, // komi depends on handicap stones
handicap: null,
@ -58,7 +59,7 @@ const handiPlace = [ 0,
// define initial game state
class Point {
class Point {
constructor(x, y) {
this.pos = [ x, y ]
this.stone = 0; // this is where move placement will go 0, 1, -1 'k'
@ -85,10 +86,11 @@ const handiPlace = [ 0,
};
// 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(3,1), new Point(3,2), new Point(3,3),
];
];
// modeling 1,1 point for
// define boardState and overlay as 2d 9x9 arrays
@ -116,26 +118,28 @@ const handiPlace = [ 0,
// click on kifu to display game menu
/*----- functions -----*/
// init();
init();
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
function checkLegal(evt) {
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) {
console.log('click!');
let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
//checks that this placement was marked as legal
// checks for placement and pushes to cell
boardState.find( point => {
// gets board point and ensures legal
point.stone = point.pos[0] === placement[0] && point.pos[1] === placement[1]
&& point.overlay === 'l'
? turn : point.stone;
});
let point = findPointFromIdx(placement);
//checks that this placement was marked as legal
point.stone = point.overlay === 'l' ? gameState.turn : point.stone;
gameState.turn*= -1;
render();
}
function init() {
@ -154,8 +158,34 @@ function init() {
// gameState.boardState // create board from user input
//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
// initialize game