finished board
This commit is contained in:
parent
62e35d868b
commit
87cfc2b8a9
|
@ -15,7 +15,7 @@
|
||||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||||
<script src="typescript/func.js"></script>
|
<script src="typescript/func.js"></script>
|
||||||
|
|
||||||
<div>
|
<div id="topStuff">
|
||||||
<p id="roll" style="font-size: 20px"></p>
|
<p id="roll" style="font-size: 20px"></p>
|
||||||
<button onclick="noMovesAvailable()">No moves can be done :(</button>
|
<button onclick="noMovesAvailable()">No moves can be done :(</button>
|
||||||
Toggle pubeval?<input type="checkbox" id="myCheck" onclick="togglePubeval()">
|
Toggle pubeval?<input type="checkbox" id="myCheck" onclick="togglePubeval()">
|
||||||
|
@ -23,10 +23,11 @@
|
||||||
<button onclick="toggleDemoOn()">Demo on?</button>
|
<button onclick="toggleDemoOn()">Demo on?</button>
|
||||||
<button onclick="toggleDemoOff()">Demo off?</button>
|
<button onclick="toggleDemoOff()">Demo off?</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="pinsContainer">
|
||||||
<div id="pins">
|
<div id="pins">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
44
style.css
44
style.css
|
@ -1,11 +1,20 @@
|
||||||
body {
|
body {
|
||||||
background-color: green;
|
background-color: green;
|
||||||
|
font-family: Helvetica;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#pinsContainer {
|
||||||
|
border:4px solid black;
|
||||||
|
background-color: #4C2E00;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
#pins {
|
#pins {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto auto;
|
grid-template-columns: auto auto auto;
|
||||||
|
margin: 1.5em;
|
||||||
|
|
||||||
grid-gap: 30px;
|
grid-gap: 30px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@ -16,6 +25,10 @@ body {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.8);
|
border: 1px solid rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
.ul {
|
.ul {
|
||||||
padding-top:50px;
|
padding-top:50px;
|
||||||
width:100px;
|
width:100px;
|
||||||
|
@ -23,6 +36,8 @@ body {
|
||||||
|
|
||||||
div.checkers {
|
div.checkers {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
margin-left: -1em;
|
||||||
|
margin-top: -2.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.checkers_list {
|
ul.checkers_list {
|
||||||
|
@ -37,6 +52,35 @@ div.pin {
|
||||||
width: 5.5em;
|
width: 5.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#topStuff {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinNumber-bottom {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 55px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinNumber-top {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -55px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinNumber-top > p {
|
||||||
|
// background-color: #4d1a00;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinNumber-bottom > p {
|
||||||
|
// background-color: #4d1a00;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
div.pin-top {
|
div.pin-top {
|
||||||
// -webkit-clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
|
// -webkit-clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
|
||||||
// clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
|
// clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
var interval;
|
var interval;
|
||||||
const ip = "http://127.0.0.1";
|
const ip = "http://127.0.0.1";
|
||||||
const port = "35270";
|
const port = "35270";
|
||||||
|
var roll;
|
||||||
var totalRoll = 0;
|
var totalRoll = 0;
|
||||||
var quad = false;
|
var quad = false;
|
||||||
var prevBoard = [];
|
var prevBoard = [];
|
||||||
|
@ -15,15 +16,7 @@ $(function () {
|
||||||
const white = "#E8E077";
|
const white = "#E8E077";
|
||||||
const brown = "#4C2E00";
|
const brown = "#4C2E00";
|
||||||
var color = white;
|
var color = white;
|
||||||
var roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
|
handleRoll();
|
||||||
var roll = [1, 2];
|
|
||||||
totalRoll = roll[0] + roll[1];
|
|
||||||
if (roll[0] == roll[1]) {
|
|
||||||
totalRoll = roll[0] * 4;
|
|
||||||
roll = [roll[0], roll[0], roll[0], roll[0]];
|
|
||||||
quad = true;
|
|
||||||
}
|
|
||||||
$("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
|
||||||
console.log("Initial roll:");
|
console.log("Initial roll:");
|
||||||
console.log(roll);
|
console.log(roll);
|
||||||
// Build pins
|
// Build pins
|
||||||
|
@ -49,8 +42,13 @@ $(function () {
|
||||||
var div = $("<div style='background-color:" + color + "'/>").addClass("pin").addClass("pin-" + pos).attr('id', 'pin-' + i);
|
var div = $("<div style='background-color:" + color + "'/>").addClass("pin").addClass("pin-" + pos).attr('id', 'pin-' + i);
|
||||||
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-' + i);
|
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-' + i);
|
||||||
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-' + i).attr('pinId', i);
|
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-' + i).attr('pinId', i);
|
||||||
|
var pinNumber = $("<div />").addClass("pinNumber-" + pos);
|
||||||
|
if (i != 0 && i != 25) {
|
||||||
|
pinNumber.append("<p>" + i + "</p>");
|
||||||
|
}
|
||||||
checkers_div.append(checkers_list);
|
checkers_div.append(checkers_list);
|
||||||
div.append(checkers_div);
|
div.append(checkers_div);
|
||||||
|
div.append(pinNumber);
|
||||||
$("#pins").append(div);
|
$("#pins").append(div);
|
||||||
}
|
}
|
||||||
var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
|
var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
|
||||||
|
@ -61,9 +59,9 @@ $(function () {
|
||||||
$("#pins").append(div);
|
$("#pins").append(div);
|
||||||
convertToPins(init_board);
|
convertToPins(init_board);
|
||||||
//prevBoard = convertToBoard();
|
//prevBoard = convertToBoard();
|
||||||
let initBotResult = getBotMove(init_board);
|
// let initBotResult = getBotMove(init_board);
|
||||||
prevBoard = initBotResult.board;
|
// prevBoard = initBotResult.board;
|
||||||
convertToPins(prevBoard);
|
// convertToPins(prevBoard);
|
||||||
prevBoard = convertToBoard();
|
prevBoard = convertToBoard();
|
||||||
$(".checkers_list").sortable({
|
$(".checkers_list").sortable({
|
||||||
connectWith: ".checkers_list",
|
connectWith: ".checkers_list",
|
||||||
|
@ -113,14 +111,7 @@ $(function () {
|
||||||
let botResult = getBotMove(prevBoard);
|
let botResult = getBotMove(prevBoard);
|
||||||
prevBoard = botResult.board;
|
prevBoard = botResult.board;
|
||||||
convertToPins(prevBoard);
|
convertToPins(prevBoard);
|
||||||
roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
|
handleRoll();
|
||||||
totalRoll = roll[0] + roll[1];
|
|
||||||
if (roll[0] == roll[1]) {
|
|
||||||
console.log("huehue");
|
|
||||||
totalRoll = roll[0] * 4;
|
|
||||||
roll = [roll[0], roll[0], roll[0], roll[0]];
|
|
||||||
quad = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
currentPlayer = 1;
|
currentPlayer = 1;
|
||||||
|
@ -128,6 +119,17 @@ $(function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
function handleRoll() {
|
||||||
|
roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
|
||||||
|
// var roll = [1,2];
|
||||||
|
totalRoll = roll[0] + roll[1];
|
||||||
|
if (roll[0] == roll[1]) {
|
||||||
|
totalRoll = roll[0] * 4;
|
||||||
|
roll = [roll[0], roll[0], roll[0], roll[0]];
|
||||||
|
quad = true;
|
||||||
|
}
|
||||||
|
$("#roll").text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
||||||
|
}
|
||||||
function toggleDemoOn() {
|
function toggleDemoOn() {
|
||||||
prevBoard = convertToBoard();
|
prevBoard = convertToBoard();
|
||||||
if (!toggled) {
|
if (!toggled) {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
var interval;
|
var interval;
|
||||||
const ip: string = "http://127.0.0.1";
|
const ip: string = "http://127.0.0.1";
|
||||||
const port: string = "35270";
|
const port: string = "35270";
|
||||||
|
var roll;
|
||||||
var totalRoll = 0;
|
var totalRoll = 0;
|
||||||
var quad = false;
|
var quad = false;
|
||||||
var prevBoard = []
|
var prevBoard = []
|
||||||
|
@ -21,17 +22,7 @@ $(function () {
|
||||||
var color = white;
|
var color = white;
|
||||||
|
|
||||||
|
|
||||||
var roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
|
handleRoll();
|
||||||
var roll = [1,2];
|
|
||||||
totalRoll = roll[0] + roll[1];
|
|
||||||
|
|
||||||
if (roll[0] == roll[1]) {
|
|
||||||
totalRoll = roll[0] * 4;
|
|
||||||
roll = [roll[0], roll[0], roll[0], roll[0]];
|
|
||||||
quad = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
$( "#roll" ).text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
|
||||||
|
|
||||||
console.log("Initial roll:");
|
console.log("Initial roll:");
|
||||||
console.log(roll);
|
console.log(roll);
|
||||||
|
@ -66,9 +57,13 @@ $(function () {
|
||||||
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-'+i);
|
var checkers_div = $("<div />").addClass("checkers").attr('id', 'checkers-'+i);
|
||||||
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-'+i).attr('pinId', i);
|
var checkers_list = $("<ul />").addClass("checkers_list").attr('id', 'checkers_list-'+i).attr('pinId', i);
|
||||||
|
|
||||||
|
var pinNumber = $("<div />").addClass("pinNumber-"+pos);
|
||||||
|
if (i != 0 && i != 25) {
|
||||||
|
pinNumber.append("<p>"+i+"</p>")
|
||||||
|
}
|
||||||
checkers_div.append(checkers_list);
|
checkers_div.append(checkers_list);
|
||||||
div.append(checkers_div);
|
div.append(checkers_div);
|
||||||
|
div.append(pinNumber);
|
||||||
$( "#pins" ).append(div);
|
$( "#pins" ).append(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,7 +78,7 @@ $(function () {
|
||||||
|
|
||||||
|
|
||||||
convertToPins(init_board);
|
convertToPins(init_board);
|
||||||
//prevBoard = convertToBoard();
|
prevBoard = convertToBoard();
|
||||||
let initBotResult = getBotMove(init_board);
|
let initBotResult = getBotMove(init_board);
|
||||||
prevBoard = initBotResult.board;
|
prevBoard = initBotResult.board;
|
||||||
convertToPins(prevBoard);
|
convertToPins(prevBoard);
|
||||||
|
@ -150,15 +145,8 @@ $(function () {
|
||||||
prevBoard = botResult.board;
|
prevBoard = botResult.board;
|
||||||
convertToPins(prevBoard);
|
convertToPins(prevBoard);
|
||||||
|
|
||||||
roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
|
handleRoll();
|
||||||
totalRoll = roll[0] + roll[1];
|
|
||||||
|
|
||||||
if (roll[0] == roll[1]) {
|
|
||||||
console.log("huehue");
|
|
||||||
totalRoll = roll[0] * 4;
|
|
||||||
roll = [roll[0], roll[0], roll[0], roll[0]]
|
|
||||||
quad = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
currentPlayer = 1;
|
currentPlayer = 1;
|
||||||
|
@ -168,6 +156,21 @@ $(function () {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function handleRoll() {
|
||||||
|
roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
|
||||||
|
// var roll = [1,2];
|
||||||
|
totalRoll = roll[0] + roll[1];
|
||||||
|
|
||||||
|
if (roll[0] == roll[1]) {
|
||||||
|
totalRoll = roll[0] * 4;
|
||||||
|
roll = [roll[0], roll[0], roll[0], roll[0]];
|
||||||
|
quad = true;
|
||||||
|
}
|
||||||
|
$( "#roll" ).text("roll: " + roll.toString() + " total moves: " + totalRoll.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function toggleDemoOn() {
|
function toggleDemoOn() {
|
||||||
prevBoard = convertToBoard();
|
prevBoard = convertToBoard();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user