add board index, click and hover listeners
This commit is contained in:
Sorrel Bri
parent
ff6d72a1ba
commit
39eb90be67
3 changed files with 404 additions and 140 deletions
58
css/main.css
58
css/main.css
|
|
@ -87,32 +87,74 @@ td {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
td[id^="0,"] {
|
td[id^="1,"] {
|
||||||
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%);
|
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 {
|
#row-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) 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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
td[id$="0"] {
|
td[id$="1"] {
|
||||||
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%);
|
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"] {
|
td[id$="9"] {
|
||||||
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%);
|
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"] {
|
td[id="1,1"] {
|
||||||
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%);
|
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 {
|
td[id="1,9"] {
|
||||||
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%);
|
||||||
}
|
}
|
||||||
td#8,0 {
|
td[id="9,1"] {
|
||||||
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%);
|
||||||
}
|
}
|
||||||
td#8,8 {
|
td[id="9,9"] {
|
||||||
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%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
td .stone {
|
||||||
|
width: 85%;
|
||||||
|
height: 85%;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
td .stone .dot {
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
td .stone .ko {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .stone .white {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .stone .black {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
td .stone .transparent {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .dot .white {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .dot .black {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .dot .transparent {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .dot .dame {
|
||||||
|
|
||||||
|
}
|
||||||
|
td .dot .seki {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
336
index.html
336
index.html
|
|
@ -4,8 +4,12 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-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 href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/main.js"></script>
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/reset.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="css/main.css" type="text/css" />
|
||||||
|
<!-- <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
|
||||||
|
<script defer src="js/main.js"></script>
|
||||||
<title>Browser Go</title>
|
<title>Browser Go</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -20,104 +24,266 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="board-space">
|
<div id="board-space">
|
||||||
<table id="board">
|
<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">
|
<tr id="row-1">
|
||||||
<td id="1,0"></td>
|
<td id="1,1">
|
||||||
<td id="1,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1,2"></td>
|
</td>
|
||||||
<td id="1,3"></td>
|
<td id="1,2">
|
||||||
<td id="1,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1,5"></td>
|
</td>
|
||||||
<td id="1,6"></td>
|
<td id="1,3">
|
||||||
<td id="1,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1,8"></td>
|
</td>
|
||||||
|
<td id="1,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="1,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="1,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="1,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="1,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="1,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-2">
|
<tr id="row-2">
|
||||||
<td id="2,0"></td>
|
<td id="2,1">
|
||||||
<td id="2,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2,2"></td>
|
</td>
|
||||||
<td id="2,3"></td>
|
<td id="2,2">
|
||||||
<td id="2,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2,5"></td>
|
</td>
|
||||||
<td id="2,6"></td>
|
<td id="2,3">
|
||||||
<td id="2,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2,8"></td>
|
</td>
|
||||||
|
<td id="2,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="2,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="2,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="2,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="2,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="2,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-3">
|
<tr id="row-3">
|
||||||
<td id="3,0"></td>
|
<td id="3,1">
|
||||||
<td id="3,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3,2"></td>
|
</td>
|
||||||
<td id="3,3"></td>
|
<td id="3,2">
|
||||||
<td id="3,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3,5"></td>
|
</td>
|
||||||
<td id="3,6"></td>
|
<td id="3,3">
|
||||||
<td id="3,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3,8"></td>
|
</td>
|
||||||
|
<td id="3,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="3,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="3,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="3,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="3,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="3,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-4">
|
<tr id="row-4">
|
||||||
<td id="4,0"></td>
|
<td id="4,1">
|
||||||
<td id="4,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4,2"></td>
|
</td>
|
||||||
<td id="4,3"></td>
|
<td id="4,2">
|
||||||
<td id="4,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4,5"></td>
|
</td>
|
||||||
<td id="4,6"></td>
|
<td id="4,3">
|
||||||
<td id="4,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4,8"></td>
|
</td>
|
||||||
|
<td id="4,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="4,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="4,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="4,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="4,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="4,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-5">
|
<tr id="row-5">
|
||||||
<td id="5,0"></td>
|
<td id="5,1">
|
||||||
<td id="5,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5,2"></td>
|
</td>
|
||||||
<td id="5,3"></td>
|
<td id="5,2">
|
||||||
<td id="5,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5,5"></td>
|
</td>
|
||||||
<td id="5,6"></td>
|
<td id="5,3">
|
||||||
<td id="5,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5,8"></td>
|
</td>
|
||||||
|
<td id="5,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="5,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="5,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="5,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="5,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="5,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-6">
|
<tr id="row-6">
|
||||||
<td id="6,0"></td>
|
<td id="6,1">
|
||||||
<td id="6,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6,2"></td>
|
</td>
|
||||||
<td id="6,3"></td>
|
<td id="6,2">
|
||||||
<td id="6,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6,5"></td>
|
</td>
|
||||||
<td id="6,6"></td>
|
<td id="6,3">
|
||||||
<td id="6,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6,8"></td>
|
</td>
|
||||||
|
<td id="6,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="6,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="6,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="6,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="6,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="6,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-7">
|
<tr id="row-7">
|
||||||
<td id="7,0"></td>
|
<td id="7,1">
|
||||||
<td id="7,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7,2"></td>
|
</td>
|
||||||
<td id="7,3"></td>
|
<td id="7,2">
|
||||||
<td id="7,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7,5"></td>
|
</td>
|
||||||
<td id="7,6"></td>
|
<td id="7,3">
|
||||||
<td id="7,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7,8"></td>
|
</td>
|
||||||
|
<td id="7,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="7,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="7,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="7,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="7,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="7,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="row-8">
|
<tr id="row-8">
|
||||||
<td id="8,0"></td>
|
<td id="8,1">
|
||||||
<td id="8,1"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8,2"></td>
|
</td>
|
||||||
<td id="8,3"></td>
|
<td id="8,2">
|
||||||
<td id="8,4"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8,5"></td>
|
</td>
|
||||||
<td id="8,6"></td>
|
<td id="8,3">
|
||||||
<td id="8,7"></td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8,8"></td>
|
</td>
|
||||||
|
<td id="8,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="8,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="8,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="8,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="8,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="8,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="row-9">
|
||||||
|
<td id="9,1">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,2">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,3">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,4">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,5">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,6">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,7">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,8">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
|
<td id="9,9">
|
||||||
|
<div class="stone"><div class="dot"></div></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
90
js/main.js
90
js/main.js
|
|
@ -1,11 +1,27 @@
|
||||||
/*----- 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 = {
|
||||||
|
'-1': 'white',
|
||||||
|
'0': 'transparent',
|
||||||
|
'1': 'black',
|
||||||
|
'k': 'ko'
|
||||||
|
}
|
||||||
|
|
||||||
|
const DOTS_CLASS = {
|
||||||
|
'-1': 'white',
|
||||||
|
'0': 'transparent',
|
||||||
|
'1': 'black',
|
||||||
|
'd': 'dame',
|
||||||
|
's': 'seki'
|
||||||
|
}
|
||||||
|
|
||||||
const gameState = {
|
const gameState = {
|
||||||
winner: null,
|
winner: null,
|
||||||
turn: null, // turn logic depends on handicap stones
|
turn: null, // 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,
|
||||||
|
boardSize: 9,
|
||||||
playerState: {
|
playerState: {
|
||||||
bCaptures: null,
|
bCaptures: null,
|
||||||
wCaptures: null
|
wCaptures: null
|
||||||
|
|
@ -25,38 +41,54 @@ const gameState = {
|
||||||
rankCertain: false
|
rankCertain: false
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
groups: {},
|
||||||
gameRecord : []
|
gameRecord : []
|
||||||
}
|
}
|
||||||
|
|
||||||
// boardState [point objects-contain overlay] lastState (created from boardState)
|
|
||||||
// groups?
|
|
||||||
// deadShapes{}
|
// deadShapes{}
|
||||||
|
|
||||||
// index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) }
|
// index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) }
|
||||||
const handiPlace = [ 0,
|
const handiPlace = [ 0,
|
||||||
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 } ],
|
[ [ 3, 3 ], [ 7, 7 ] ],
|
||||||
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 } ],
|
[ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ] ],
|
||||||
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 }, { rPos: 7, cPos: 3 } ]];
|
[ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ], [ 7, 3 ] ] ];
|
||||||
|
|
||||||
/*----- app's state (variables) -----*/
|
/*----- app's state (variables) -----*/
|
||||||
|
|
||||||
// define initial game state
|
// define initial game state
|
||||||
let boardState;
|
|
||||||
|
|
||||||
// Class Point {
|
class Point {
|
||||||
// rPos: 1,
|
constructor(x, y) {
|
||||||
// cPos: 1,
|
this.pos = [ x, y ]
|
||||||
// neighbors: {
|
this.stone = 0; // this is where move placement will go 0, 1, -1 'k'
|
||||||
// top: null,
|
this.overlay = 0; // this is where 'chk', 'l'
|
||||||
// btm: null,
|
this.neighbors = {
|
||||||
// lft: null,
|
top: {},
|
||||||
// rgt: null
|
btm: {},
|
||||||
// }
|
lft: {},
|
||||||
|
rgt: {}
|
||||||
|
},
|
||||||
|
// neighbor exists it's point is stored as { rPos, cPos}
|
||||||
|
this.neighbors.top = x > 1 ? [ 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.lft = y < gameState.boardSize ? [ x, y + 1 ] : null;
|
||||||
// checkLegal: function() {
|
// checkLegal: function() {
|
||||||
|
// this.cellValue = (for neighbor in this.neighbors) {
|
||||||
|
// boardState.find( val => {
|
||||||
|
// if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ }
|
||||||
|
// });
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// boardState [point objects-contain overlay] lastState (created from boardState)
|
||||||
|
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
|
// modeling 1,1 point for
|
||||||
// define boardState and overlay as 2d 9x9 arrays
|
// define boardState and overlay as 2d 9x9 arrays
|
||||||
|
|
@ -76,13 +108,35 @@ let boardState;
|
||||||
// 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)
|
||||||
|
document.getElementById('board').addEventListener('mousemove', checkLegal);
|
||||||
// click on board to play move
|
// click on board to play move
|
||||||
|
document.getElementById('board').addEventListener('click', placeStone);
|
||||||
// ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
|
// ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
|
||||||
// click on menu items
|
// click on menu items
|
||||||
// click on kifu to display game menu
|
// click on kifu to display game menu
|
||||||
|
|
||||||
/*----- functions -----*/
|
/*----- functions -----*/
|
||||||
init();
|
// init();
|
||||||
|
|
||||||
|
function checkLegal(evt) {
|
||||||
|
let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
|
||||||
|
console.log(hover);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
gameState.winner = null;
|
gameState.winner = null;
|
||||||
|
|
@ -98,6 +152,8 @@ init();
|
||||||
// gameState.playerMeta.w // get from player input
|
// gameState.playerMeta.w // get from player input
|
||||||
gameState.gameRecord = []; // clear game record from previous game
|
gameState.gameRecord = []; // clear game record from previous game
|
||||||
// gameState.boardState // create board from user input
|
// gameState.boardState // create board from user input
|
||||||
|
|
||||||
|
//need init player meta
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue