finished board

This commit is contained in:
Alexander Munch-Hansen 2018-06-14 15:31:24 +02:00
parent 62e35d868b
commit 87cfc2b8a9
4 changed files with 95 additions and 45 deletions

View File

@ -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="pins"> <div id="pinsContainer">
<div id="pins">
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,12 +1,21 @@
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%);

View File

@ -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) {

View File

@ -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();