add data structures, basic style
This commit is contained in:
Sorrel Bri
parent
d5b56f25c9
commit
8f07e5bfcd
5 changed files with 356 additions and 66 deletions
14
.vscode/launch.json
vendored
Normal file
14
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Program",
|
||||||
|
"program": "${workspaceFolder}/js/main.js"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
#### Minimum Deliverable Product
|
#### Minimum Deliverable Product
|
||||||
|
|
||||||
a working game of go for a 9x9 board that
|
a working game of go for a 9x9 board that
|
||||||
* displays well on mobile
|
* displays well on mobile or desktop
|
||||||
* initiates a game with suggested handicap and komi according to rank input
|
* initiates a game with suggested handicap and komi according to rank input
|
||||||
* * displays how to play in open screen
|
* * displays how to play in open screen
|
||||||
* lets the user know whose turn it is
|
* lets the user know whose turn it is
|
||||||
|
|
@ -11,7 +11,6 @@ a working game of go for a 9x9 board that
|
||||||
* * implement a search algorithm to avoid moving into dead space
|
* * implement a search algorithm to avoid moving into dead space
|
||||||
* correctly removes captured stones and adds them to capturing player's score
|
* correctly removes captured stones and adds them to capturing player's score
|
||||||
* logs game record
|
* logs game record
|
||||||
* maintains a one move game state history for 'undo mismove'
|
|
||||||
* allows players to pass or resign
|
* allows players to pass or resign
|
||||||
* * ends game upon 2 consecutive passes
|
* * ends game upon 2 consecutive passes
|
||||||
* calculates estimated score at game end
|
* calculates estimated score at game end
|
||||||
|
|
@ -21,6 +20,7 @@ a working game of go for a 9x9 board that
|
||||||
|
|
||||||
stretch goals
|
stretch goals
|
||||||
* uses stone placement GUI for resign and pass
|
* uses stone placement GUI for resign and pass
|
||||||
|
* maintains a one move game state history for 'undo mismove'
|
||||||
* converts string to .sgf format
|
* converts string to .sgf format
|
||||||
* allows users to edit game info mid game
|
* allows users to edit game info mid game
|
||||||
* add stone placement sounds
|
* add stone placement sounds
|
||||||
|
|
|
||||||
103
css/main.css
103
css/main.css
|
|
@ -1,5 +1,6 @@
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-screen {
|
.full-screen {
|
||||||
|
|
@ -13,3 +14,105 @@
|
||||||
pre-game record will display instructions
|
pre-game record will display instructions
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
content {
|
||||||
|
background-color: #61a6c2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 100vmin;
|
||||||
|
grid-template-rows: 1fr 100vmin 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"white-pos"
|
||||||
|
"board-space"
|
||||||
|
"black-pos"
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-pos {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-pos#white-pos {
|
||||||
|
grid-area: white-pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-pos#black-pos {
|
||||||
|
grid-area: black-pos;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kifu {
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bowl {
|
||||||
|
order: -1;
|
||||||
|
margin: 20px;
|
||||||
|
height: 8vh;
|
||||||
|
width: 8vh;
|
||||||
|
border: solid black;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caps {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#board-space {
|
||||||
|
margin: 0 auto;
|
||||||
|
grid-area: board-space;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #EAB24E;
|
||||||
|
width: 90vmin;
|
||||||
|
height: 90vmin;
|
||||||
|
padding: 1vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 81vmin;
|
||||||
|
width: 81min;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 9vmin;
|
||||||
|
width: 9vmin;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
td[id^="0,"] {
|
||||||
|
background: conic-gradient( 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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#row-8 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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
td[id$="0"] {
|
||||||
|
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) 99%, #000 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
td[id$="8"] {
|
||||||
|
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, 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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
td[id="0,0"] {
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
td#0,8 {
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
td#8,0 {
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
td#8,8 {
|
||||||
|
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%);
|
||||||
|
}
|
||||||
119
index.html
119
index.html
|
|
@ -5,9 +5,8 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<link rel="stylesheet" href="css/reset.css" type="stylesheet">
|
<link rel="stylesheet" href="css/reset.css" type="stylesheet">
|
||||||
<link rel="stylesheet" href="css/main.css" type="stylesheet">
|
<link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/main.js"></script>
|
||||||
<script src="js/main.js"></script>
|
<title>Browser Go</title>
|
||||||
<title>Go Cats</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="menu" class="full-screen">
|
<div id="menu" class="full-screen">
|
||||||
|
|
@ -16,14 +15,116 @@
|
||||||
<!-- may need add'l .full-screen or other div for board overlay -->
|
<!-- may need add'l .full-screen or other div for board overlay -->
|
||||||
<content>
|
<content>
|
||||||
<div id="white-pos" class="player-pos">
|
<div id="white-pos" class="player-pos">
|
||||||
<div id="white-bowl" class="bowl"></div>
|
<div id="white-bowl" class="bowl">White Bowl</div>
|
||||||
<div id="white-caps" class="caps"></div>
|
<div id="white-caps" class="caps">White Captures</div>
|
||||||
|
</div>
|
||||||
|
<div id="board-space">
|
||||||
|
<table id="board">
|
||||||
|
<tr id="row-0">
|
||||||
|
<td id="0,0"></td>
|
||||||
|
<td id="0,1"></td>
|
||||||
|
<td id="0,2"></td>
|
||||||
|
<td id="0,3"></td>
|
||||||
|
<td id="0,4"></td>
|
||||||
|
<td id="0,5"></td>
|
||||||
|
<td id="0,6"></td>
|
||||||
|
<td id="0,7"></td>
|
||||||
|
<td id="0,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-1">
|
||||||
|
<td id="1,0"></td>
|
||||||
|
<td id="1,1"></td>
|
||||||
|
<td id="1,2"></td>
|
||||||
|
<td id="1,3"></td>
|
||||||
|
<td id="1,4"></td>
|
||||||
|
<td id="1,5"></td>
|
||||||
|
<td id="1,6"></td>
|
||||||
|
<td id="1,7"></td>
|
||||||
|
<td id="1,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-2">
|
||||||
|
<td id="2,0"></td>
|
||||||
|
<td id="2,1"></td>
|
||||||
|
<td id="2,2"></td>
|
||||||
|
<td id="2,3"></td>
|
||||||
|
<td id="2,4"></td>
|
||||||
|
<td id="2,5"></td>
|
||||||
|
<td id="2,6"></td>
|
||||||
|
<td id="2,7"></td>
|
||||||
|
<td id="2,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-3">
|
||||||
|
<td id="3,0"></td>
|
||||||
|
<td id="3,1"></td>
|
||||||
|
<td id="3,2"></td>
|
||||||
|
<td id="3,3"></td>
|
||||||
|
<td id="3,4"></td>
|
||||||
|
<td id="3,5"></td>
|
||||||
|
<td id="3,6"></td>
|
||||||
|
<td id="3,7"></td>
|
||||||
|
<td id="3,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-4">
|
||||||
|
<td id="4,0"></td>
|
||||||
|
<td id="4,1"></td>
|
||||||
|
<td id="4,2"></td>
|
||||||
|
<td id="4,3"></td>
|
||||||
|
<td id="4,4"></td>
|
||||||
|
<td id="4,5"></td>
|
||||||
|
<td id="4,6"></td>
|
||||||
|
<td id="4,7"></td>
|
||||||
|
<td id="4,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-5">
|
||||||
|
<td id="5,0"></td>
|
||||||
|
<td id="5,1"></td>
|
||||||
|
<td id="5,2"></td>
|
||||||
|
<td id="5,3"></td>
|
||||||
|
<td id="5,4"></td>
|
||||||
|
<td id="5,5"></td>
|
||||||
|
<td id="5,6"></td>
|
||||||
|
<td id="5,7"></td>
|
||||||
|
<td id="5,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-6">
|
||||||
|
<td id="6,0"></td>
|
||||||
|
<td id="6,1"></td>
|
||||||
|
<td id="6,2"></td>
|
||||||
|
<td id="6,3"></td>
|
||||||
|
<td id="6,4"></td>
|
||||||
|
<td id="6,5"></td>
|
||||||
|
<td id="6,6"></td>
|
||||||
|
<td id="6,7"></td>
|
||||||
|
<td id="6,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-7">
|
||||||
|
<td id="7,0"></td>
|
||||||
|
<td id="7,1"></td>
|
||||||
|
<td id="7,2"></td>
|
||||||
|
<td id="7,3"></td>
|
||||||
|
<td id="7,4"></td>
|
||||||
|
<td id="7,5"></td>
|
||||||
|
<td id="7,6"></td>
|
||||||
|
<td id="7,7"></td>
|
||||||
|
<td id="7,8"></td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-8">
|
||||||
|
<td id="8,0"></td>
|
||||||
|
<td id="8,1"></td>
|
||||||
|
<td id="8,2"></td>
|
||||||
|
<td id="8,3"></td>
|
||||||
|
<td id="8,4"></td>
|
||||||
|
<td id="8,5"></td>
|
||||||
|
<td id="8,6"></td>
|
||||||
|
<td id="8,7"></td>
|
||||||
|
<td id="8,8"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div id="board"></div>
|
|
||||||
<div id="black-pos" class="player-pos">
|
<div id="black-pos" class="player-pos">
|
||||||
<div id="black-bowl" class="bowl"></div>
|
<div id="black-bowl" class="bowl">Black Bowl</div>
|
||||||
<div id="black-caps" class="caps"></div>
|
<div id="black-caps" class="caps">Black Captures</div>
|
||||||
<div id="kifu"></div>
|
<div id="kifu">kifu</div>
|
||||||
</div>
|
</div>
|
||||||
</content>
|
</content>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
84
js/main.js
84
js/main.js
|
|
@ -1,12 +1,64 @@
|
||||||
// global constants declared
|
/*----- constants -----*/
|
||||||
|
// game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures}
|
||||||
|
const gameState = {
|
||||||
|
winner: null,
|
||||||
|
turn: null, // turn logic depends on handicap stones
|
||||||
|
pass: null,
|
||||||
|
komi: null, // komi depends on handicap stones
|
||||||
|
handicap: null,
|
||||||
|
playerState: {
|
||||||
|
bCaptures: null,
|
||||||
|
wCaptures: null
|
||||||
|
},
|
||||||
|
gameMeta: { // declared at game start and not editable after
|
||||||
|
date: null// contains metadata
|
||||||
|
},
|
||||||
|
playerMeta: { // editable during game
|
||||||
|
b: {
|
||||||
|
name: null,
|
||||||
|
rank: null,
|
||||||
|
rankCertain: false
|
||||||
|
},
|
||||||
|
w: {
|
||||||
|
name: null,
|
||||||
|
rank: null,
|
||||||
|
rankCertain: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
gameRecord : []
|
||||||
|
}
|
||||||
|
|
||||||
// boardState, lastState, overlay (copy of boardState holding pre-move object, game end group state)
|
// boardState [point objects-contain overlay] lastState (created from boardState)
|
||||||
// bCaptures, wCaptures, gameInfo object, playerInfo object, turn, pass, gameRecord,
|
// groups?
|
||||||
// handicapStones, deadShapes{}
|
// deadShapes{}
|
||||||
|
|
||||||
|
// index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) }
|
||||||
|
const handiPlace = [ 0,
|
||||||
|
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 } ],
|
||||||
|
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 } ],
|
||||||
|
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 }, { rPos: 7, cPos: 3 } ]];
|
||||||
|
|
||||||
|
/*----- app's state (variables) -----*/
|
||||||
|
|
||||||
// define initial game state
|
// define initial game state
|
||||||
|
let boardState;
|
||||||
|
|
||||||
|
// Class Point {
|
||||||
|
// rPos: 1,
|
||||||
|
// cPos: 1,
|
||||||
|
// neighbors: {
|
||||||
|
// top: null,
|
||||||
|
// btm: null,
|
||||||
|
// lft: null,
|
||||||
|
// rgt: null
|
||||||
|
// }
|
||||||
|
// checkLegal: function() {
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// modeling 1,1 point for
|
||||||
// define boardState and overlay as 2d 9x9 arrays
|
// define boardState and overlay as 2d 9x9 arrays
|
||||||
// boardState accepts values of 0, 1, -1
|
// boardState accepts values of 0, 1, -1
|
||||||
// overlay accepts values of 0, 1, -1, 'k', 'd', 'chk', 'hold', 'l', 'x'
|
// overlay accepts values of 0, 1, -1, 'k', 'd', 'chk', 'hold', 'l', 'x'
|
||||||
|
|
@ -15,12 +67,12 @@
|
||||||
// game-end integer represent points of territory, 'd' represents dame,
|
// game-end integer represent points of territory, 'd' represents dame,
|
||||||
|
|
||||||
|
|
||||||
// cached elements
|
/*----- cached element references -----*/
|
||||||
// store #menu for displaying game info
|
// store #menu for displaying game info
|
||||||
// store
|
// store
|
||||||
|
|
||||||
|
|
||||||
// set event listeners
|
/*----- event listeners -----*/
|
||||||
// input listeners for player names, ranks, rank certainty (editable during game)
|
// input listeners for player names, ranks, rank certainty (editable during game)
|
||||||
//input lister for handicap + komi (only editable pre-game)
|
//input lister for handicap + komi (only editable pre-game)
|
||||||
// ::hover-over on board to preview move (with legal move logic)
|
// ::hover-over on board to preview move (with legal move logic)
|
||||||
|
|
@ -29,6 +81,26 @@
|
||||||
// click on menu items
|
// click on menu items
|
||||||
// click on kifu to display game menu
|
// click on kifu to display game menu
|
||||||
|
|
||||||
|
/*----- functions -----*/
|
||||||
|
init();
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
gameState.winner = null;
|
||||||
|
// gameState.turn = ? : ; // get turn from consequences of player input
|
||||||
|
gameState.pass = null;
|
||||||
|
// gameState.komi = ; // get komi from player input
|
||||||
|
// gameState.handicap = ; // get handicap from player input
|
||||||
|
gameState.playerState.bCaptures = 0;
|
||||||
|
gameState.playerState.wCaptures = 0;
|
||||||
|
// gameState.gameMeta.date = // get from browser window
|
||||||
|
// get any future meta from player input
|
||||||
|
// gameState.playerMeta.b // get from player input
|
||||||
|
// gameState.playerMeta.w // get from player input
|
||||||
|
gameState.gameRecord = []; // clear game record from previous game
|
||||||
|
// gameState.boardState // create board from user input
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// functions
|
// functions
|
||||||
// initialize game
|
// initialize game
|
||||||
// set handicap stones
|
// set handicap stones
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue