Pownie/js_backgammon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished board

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -15,7 +15,7 @@
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="typescript/func.js"></script>
<div>
<div id="topStuff">
<p id="roll" style="font-size: 20px"></p>
<button onclick="noMovesAvailable()">No moves can be done :(</button>
Toggle pubeval?<input type="checkbox" id="myCheck" onclick="togglePubeval()">
@ -23,10 +23,11 @@
<button onclick="toggleDemoOn()">Demo on?</button>
<button onclick="toggleDemoOff()">Demo off?</button>
</div>
<div id="pinsContainer">
<div id="pins">
</div>
</div>
</body>
</html>

44
style.css
View File

@ -1,11 +1,20 @@
body {
background-color: green;
font-family: Helvetica;
}
#pinsContainer {
border:4px solid black;
background-color: #4C2E00;
}
#pins {
display: grid;
grid-template-columns: auto auto auto;
margin: 1.5em;
grid-gap: 30px;
padding: 10px;
@ -16,6 +25,10 @@ body {
border: 1px solid rgba(0, 0, 0, 0.8);
}
p {
font-size: 25px;
}
.ul {
padding-top:50px;
width:100px;
@ -23,6 +36,8 @@ body {
div.checkers {
height: 100%;
margin-left: -1em;
margin-top: -2.5em;
}
ul.checkers_list {
@ -37,6 +52,35 @@ div.pin {
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 {
// -webkit-clip-path: polygon(100% 0%, 1% 0%, 50% 100%);
// clip-path: polygon(100% 0%, 1% 0%, 50% 100%);

42
typescript/func.js
View File

@ -1,6 +1,7 @@
var interval;
const ip = "http://127.0.0.1";
const port = "35270";
var roll;
var totalRoll = 0;
var quad = false;
var prevBoard = [];
@ -15,15 +16,7 @@ $(function () {
const white = "#E8E077";
const brown = "#4C2E00";
var color = white;
var 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());
handleRoll();
console.log("Initial roll:");
console.log(roll);
// Build pins
@ -49,8 +42,13 @@ $(function () {
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_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);
div.append(checkers_div);
div.append(pinNumber);
$("#pins").append(div);
}
var div = $("<div style='background-color:black'/>").addClass("pin").addClass("pin-26").attr('id', 'pin-26');
@ -61,9 +59,9 @@ $(function () {
$("#pins").append(div);
convertToPins(init_board);
//prevBoard = convertToBoard();
let initBotResult = getBotMove(init_board);
prevBoard = initBotResult.board;
convertToPins(prevBoard);
// let initBotResult = getBotMove(init_board);
// prevBoard = initBotResult.board;
// convertToPins(prevBoard);
prevBoard = convertToBoard();
$(".checkers_list").sortable({
connectWith: ".checkers_list",
@ -113,14 +111,7 @@ $(function () {
let botResult = getBotMove(prevBoard);
prevBoard = botResult.board;
convertToPins(prevBoard);
roll = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1];
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;
}
handleRoll();
}
}
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() {
prevBoard = convertToBoard();
if (!toggled) {

45
typescript/func.ts
View File

@ -1,6 +1,7 @@
var interval;
const ip: string = "http://127.0.0.1";
const port: string = "35270";
var roll;
var totalRoll = 0;
var quad = false;
var prevBoard = []
@ -21,17 +22,7 @@ $(function () {
var color = white;
var 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());
handleRoll();
console.log("Initial roll:");
console.log(roll);
@ -66,9 +57,13 @@ $(function () {
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 pinNumber = $("<div />").addClass("pinNumber-"+pos);
if (i != 0 && i != 25) {
pinNumber.append("<p>"+i+"</p>")
}
checkers_div.append(checkers_list);
div.append(checkers_div);
div.append(pinNumber);
$( "#pins" ).append(div);
}
@ -83,7 +78,7 @@ $(function () {
convertToPins(init_board);
//prevBoard = convertToBoard();
prevBoard = convertToBoard();
let initBotResult = getBotMove(init_board);
prevBoard = initBotResult.board;
convertToPins(prevBoard);
@ -150,15 +145,8 @@ $(function () {
prevBoard = botResult.board;
convertToPins(prevBoard);
roll = [Math.floor(Math.random() * 6)+1, Math.floor(Math.random() * 6)+1]
totalRoll = roll[0] + roll[1];
handleRoll();
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;
@ -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() {
prevBoard = convertToBoard();