From 87cfc2b8a94ebd653b789e341e8b12fcfe1b933d Mon Sep 17 00:00:00 2001 From: Alexander Munch-Hansen Date: Thu, 14 Jun 2018 15:31:24 +0200 Subject: [PATCH] finished board --- index.html | 7 ++++--- style.css | 46 +++++++++++++++++++++++++++++++++++++++++++++- typescript/func.js | 42 ++++++++++++++++++++++-------------------- typescript/func.ts | 45 ++++++++++++++++++++++++--------------------- 4 files changed, 95 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index f8887c2..c6fd6bd 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ -
+

Toggle pubeval? @@ -23,10 +23,11 @@
-
+
+
+
- diff --git a/style.css b/style.css index 0bb0c1f..3d63396 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,21 @@ 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%); diff --git a/typescript/func.js b/typescript/func.js index f805973..b95adc0 100644 --- a/typescript/func.js +++ b/typescript/func.js @@ -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 = $("
").addClass("pin").addClass("pin-" + pos).attr('id', 'pin-' + i); var checkers_div = $("
").addClass("checkers").attr('id', 'checkers-' + i); var checkers_list = $("
    ").addClass("checkers_list").attr('id', 'checkers_list-' + i).attr('pinId', i); + var pinNumber = $("
    ").addClass("pinNumber-" + pos); + if (i != 0 && i != 25) { + pinNumber.append("

    " + i + "

    "); + } checkers_div.append(checkers_list); div.append(checkers_div); + div.append(pinNumber); $("#pins").append(div); } var div = $("
    ").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) { diff --git a/typescript/func.ts b/typescript/func.ts index 19bc56c..8a75abd 100644 --- a/typescript/func.ts +++ b/typescript/func.ts @@ -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 = $("
    ").addClass("checkers").attr('id', 'checkers-'+i); var checkers_list = $("
      ").addClass("checkers_list").attr('id', 'checkers_list-'+i).attr('pinId', i); - + var pinNumber = $("
      ").addClass("pinNumber-"+pos); + if (i != 0 && i != 25) { + pinNumber.append("

      "+i+"

      ") + } 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();