<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {background-color: black;}
.player-0-panel {position: absolute; width: 30%; float: left; height: 50px; background-color: black; top: 10px; left :10px;}
.player-1-panel {position: absolute; width: 30%; float: left; height: 50px; background-color: black; top: 10px; left :250px;}
.player-name {position: absolute; font-size: 20px; text-align: center; text-transform: uppercase; letter-spacing: 3px; margin-top: 5px; margin-bottom: 20px; color: white; top: 10px; left :60px;}
.player-score-0 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center ; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 50px; left :50px;}
.player-score-1 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center ; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 100px; left :100px;}
.player-score-2 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 150px; left :150px;}
.player-score-3 {position: absolute; border-radius: 50%; width: 40px; height: 40px; padding: 6px; background: grey; border: 5px solid green; text-align: center; font-size: 30px; font-weight: 100; color: white; margin-top: 10px; margin-bottom: 10px; top: 200px; left :200px;}
.active-0 { background: pink;}
.active-1 { background: blue;}
/*Change colour of players' dice box*/
/*Change font of the label inside players' dice box*/
.player-dieroll-score {font-size: 40px;}
.player-dieroll-label {text-transform: uppercase; margin-bottom: 10px; margin: 0 auto; font-size: 25px; color: blue;}
.player-dieroll-box-0 {position: absolute; background-color: pink; color: black; width: 150px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 300px; left: 45px;}
.player-dieroll-box-1 {position: absolute; background-color: green; color: black; width: 150px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 300px; left: 100px;}
.player-troopScore-score {font-size: 30px;}
.player-troopScore-label {text-transform: uppercase; margin-bottom: 10px; margin: 0 auto; font-size: 15px; color: blue;}
.player-troopScore-box-0 {position: absolute; background-color: white; color: pink; width: 150px; height: 50px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 100px; left:550px;}
.player-troopScore-box-1 {position: absolute; background-color: white; color: black; width: 150px; height: 50px; padding: 12px; text-align: center; margin: auto; padding: 12px; text-align: center; top: 200px; left: 310px;}
/*Create message box informing players' actions*/
.message-box {position: absolute; background-color: crimson; color: black; width: 60%; padding: 12px; text-align: center; top: 450px; left :50px;}
.message-label {text-transform: uppercase; margin-bottom: 10px; font-size: 30px; color: blue;}
.message-score {font-size: 30px;}
.btn-Arg {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 65px; left: 65px;}
.btn-Ama {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 115px; left: 115px;}
.btn-Mex {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 165px; left: 165px;}
.btn-Bel {position: absolute; border-radius: 50%; width: 50px; height: 50px; padding: 6px; text-align: center; cursor: pointer; background: none; border: 5px none; font-family: Lato; font-size: 20px; font-weight: 100; margin-top: 10px; margin-bottom: 10px; top: 215px; left: 215px;}
.btn-player1AttFrom {position: absolute; width: 50px; height: 50px; padding: 50px; text-align: center; margin-top: 30px; margin-bottom: 30px; top: 110px; left: 110px;}
.btn-player1AttTo {position: absolute; width: 50px; height: 50px; padding: 50px; text-align: center; margin-top: 30px; margin-bottom: 30px; top: 110px; left: 370px;}
.btn-AttStop {position: absolute; width: 80px; padding: 10px; text-align: center; margin-top: 5px; color: willow; background-color: grey; margin-bottom: 30px; top: 240px; left: 400px; cursor: pointer;}
.btn-Add1 {position: absolute; width: 100px; height: 30px; padding: 5px; text-align: center; color: willow; background: grey; margin-top: 5px; margin-bottom: 5px; top: 100px; left: 400px; cursor: pointer;}
.btn-Add2 {position: absolute; width: 100px; height: 30px; padding: 5px; text-align: center; margin-top: 5px; color: willow; background: grey; margin-top: 5px; margin-bottom: 5px; top: 140px; left: 400px; cursor: pointer;}
.btn-Add3 {position: absolute; width: 100px; height: 30px; padding: 5px; text-align: center; margin-top: 5px; color: willow; background: grey; margin-top: 5px; margin-bottom: 5px; top: 180px; left: 400px; cursor: pointer;}
</style>
</head>
<body>
<!--Set CSS for use -->
<div class="player-0-panel active-0">
<div class="player-name" id="name-0"></div>
<div class="player-dieroll-box-0">
<div class="player-dieroll-label">Die Roll 1</div>
<div class="player-dieroll-score" id="dieroll-0"></div>
</div>
<div class="player-troopScore-box-0">
<div class="player-troopScore-label">Player 1 Troops</div>
<div class="player-troopScore-score" id="troopScore-0"></div>
</div>
</div>
<div class="player-score-0" id="score-0">0</div>
<div class="player-score-1" id="score-1">0</div>
<div class="player-score-2" id="score-2">0</div>
<div class="player-score-3" id="score-3">0</div>
<div class="player-1-panel active-1">
<div class="player-name" id="name-1"></div>
<div class="player-dieroll-box-1">
<div class="player-dieroll-label">Die Roll 2</div>
<div class="player-dieroll-score" id="dieroll-1"></div>
</div>
<div class="player-troopScore-box-1">
<div class="player-troopScore-label">Player 2 Troops</div>
<div class="player-troopScore-score" id="troopScore-1"></div>
</div>
</div>
<!--issue with ama arg 1 or 2 etc and about adding more regions -->
<!--Set message box for player messages-->
<div class="message-box">
<div class="message-label">Player action</div>
<div class="message-score" id="message">Add one to an empty space</div>
</div>
<button class="btn-Arg" title = "Argentina" id="Arg"></button>
<button class="btn-Ama" title = "Amazon" id="Ama"></button>
<button class="btn-Mex" title = "Mexico" id="Mex"></button>
<button class="btn-Bel" title = "Belize" id="Bel"></button>
<button class="btn-player1AttFrom" id="player1AttFrom" disabled hidden> </button>
<button class="btn-player1AttTo" id="player1AttTo" disabled hidden> </button>
<button class="btn-AttStop" id="Stop" disabled hidden >Stop attack</button>
<button class="btn-Add1" id="Add1" disabled hidden>Add1</button>
<button class="btn-Add2" id="Add2" disabled hidden>Add2</button>
<button class="btn-Add3" id="Add3" disabled hidden>Add3</button>
<script>
var troopScore, energyScore, activePlayer, gamePlaying, scores;
//buttons to be used are defined
var btnArg = document.querySelector('.btn-Arg');
var btnAma = document.querySelector('.btn-Ama');
var btnMex = document.querySelector('.btn-Mex');
var btnBel = document.querySelector('.btn-Bel');
var btnAdd1 = document.querySelector('.btn-Add1');
var btnAdd2 = document.querySelector('.btn-Add2');
var btnAdd3 = document.querySelector('.btn-Add3');
///nothing happenns without an onclick or on hover function!
init();
function Arghover() //{if
//((document.getElementById("Add3").style.backgroundColor == "red")&&
//(document.querySelector('#name-0').backgroundColor = "pink")&&
//(document.getElementById("score-0").style.backgroundColor == "orange"))
{document.getElementById('Arg').style.background = "yellow";}//}
function Argout() {document.getElementById('Arg').style.background = "none";}
function Amahover() {document.getElementById('Ama').style.background = "yellow";}
function Amaout() {document.getElementById('Ama').style.background = "none";}
function Mexhover() {document.getElementById('Mex').style.background = "yellow";}
function Mexout() {document.getElementById('Mex').style.background = "none";}
function Belhover() {document.getElementById('Bel').style.background = "yellow";}
function Belout() {document.getElementById('Bel').style.background = "none";}
function Add1hover() {document.getElementById('Add1').style.background = "yellow";}
function Add1out() {document.getElementById('Add1').style.background = "grey";}
function Add2hover() {document.getElementById('Add2').style.background = "yellow";}
function Add2out() {document.getElementById('Add2').style.background = "grey";}
function Add3hover() {document.getElementById('Add3').style.background = "yellow";}
function Add3out() {document.getElementById('Add3').style.background = "grey";}
//position of next player can affect outcomes
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Arg() { if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-0").style.background = "orange"; document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-0").style.background = "orange";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-0").style.background = "orange";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-0").style.background = "orange";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-0").style.background = "red";
document.getElementById("score-0").textContent = "1";
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
document.querySelector('#message').textContent = "Add 3 to owned territories";
document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;
document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;
troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];
troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
nextPlayer();
}
///////////////////////////////////////////////////////////////////////////////////////
else if ((document.getElementById("score-0").textContent == "1")|| (document.getElementById("score-1").textContent != "1")|| (document.getElementById("score-2").textContent != "1")||
(document.getElementById("score-3").textContent != "1")
&&
(document.getElementById("Add3").background == "red"))
{ document.getElementById("score-0").textContent = "4";
troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
document.getElementById("Arg").disabled = true;
document.getElementById("Arg").style.background = "none";
document.getElementById("Add3").disabled = false;
nextPlayer();
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Ama() {if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer();}
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-1").style.background = "orange";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-1").style.background = "red";
document.getElementById("score-1").textContent = "1";
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
document.querySelector('#message').textContent = "Add 3 to owned territories";
document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;
document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;
troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];
troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
nextPlayer();
}
///////////////////////////////////////////////////////////////////////////////////////
else if ((document.getElementById("score-0").textContent != "1")|| (document.getElementById("score-1").textContent == "1")|| (document.getElementById("score-2").textContent != "1")||
(document.getElementById("score-3").textContent != "1")
&&
(document.getElementById("Add3").background == "red"))
{ document.getElementById("score-1").textContent = "4";
troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
document.getElementById("Ama").disabled = true;
document.getElementById("Ama").style.background = "none";
document.getElementById("Add3").disabled = false;
nextPlayer();
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Mex() {if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer();}
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0") && (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-2").style.background = "orange";
document.getElementById("score-2").textContent = "1";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "1"))
{ document.getElementById("score-2").style.background = "red";
document.getElementById("score-2").textContent = "1";
document.querySelector('#message').textContent = "Add 3 to owned territories";
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;
document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;
troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];
troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
nextPlayer();
}
///////////////////////////////////////////////////////////////////////////////////////
else if ((document.getElementById("score-0").textContent != "1")|| (document.getElementById("score-1").textContent != "1")|| (document.getElementById("score-2").textContent == "1")||
(document.getElementById("score-3").textContent != "1")
&&
(document.getElementById("Add3").background == "red"))
{ document.getElementById("score-2").textContent = "4";
troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
document.getElementById("Mex").disabled = true;
document.getElementById("Mex").style.background = "none";
document.getElementById("Add3").disabled = false;
nextPlayer();
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Bel() {if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer();}
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "0")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "0")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer();}
else if ((document.getElementById("score-0").textContent == "0")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "orange";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer(); }
else if ((document.getElementById("score-0").textContent == "1")&& (document.getElementById("score-1").textContent == "1")&& (document.getElementById("score-2").textContent == "1")&&
(document.getElementById("score-3").textContent == "0"))
{ document.getElementById("score-3").style.background = "red";
document.getElementById("score-3").textContent = "1";
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer();
document.querySelector('#message').textContent = "Add 3 to owned territories";
document.getElementById("Add1").disabled = false;
document.getElementById("Add1").hidden = false;
document.getElementById("Add2").disabled = false;
document.getElementById("Add2").hidden = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").hidden = false;
troopScore[activePlayer+1] += 10;
document.querySelector('#troopScore-' + (activePlayer+1)).textContent = troopScore[activePlayer+1];
troopScore[activePlayer] += 10;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
}
///////////////////////////////////////////////////////////////////////////////////////
else if ((document.getElementById("score-0").textContent != "1")|| (document.getElementById("score-1").textContent != "1")|| (document.getElementById("score-2").textContent != "1")||
(document.getElementById("score-3").textContent == "1")
&&
(document.getElementById("Add3").background == "red"))
{ document.getElementById("score-3").textContent = "4";
troopScore[activePlayer] -= 3;
document.querySelector('#troopScore-' + (activePlayer)).textContent = troopScore[activePlayer];
document.getElementById("Bel").disabled = true;
document.getElementById("Bel").style.background = "none";
nextPlayer();
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Add3() {
if ((document.getElementById("score-0").textContent == "1")
&&
(document.querySelector('.active-0').background = "pink") &&
(document.getElementById("score-0").style.background == "orange"))
{document.getElementById("Arg").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}
///////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-0").textContent == "1")
&&
(document.querySelector('.active-1').background = "blue") &&
(document.getElementById("score-0").style.background == "red"))
{document.getElementById("Arg").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-1").textContent == "1")
&&
(document.querySelector('.active-0').background = "pink") &&
(document.getElementById("score-1").style.background == "orange"))
{document.getElementById("Ama").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}
///////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-1").textContent == "1")
&&
(document.querySelector('.active-1').background = "blue") &&
(document.getElementById("score-1").style.background == "red"))
{document.getElementById("Ama").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-2").textContent == "1")
&&
(document.querySelector('.active-0').background = "pink") &&
(document.getElementById("score-2").style.background == "orange"))
{document.getElementById("Mex").disabled = false;
document.getElementById("Add3").disabled = false;
document.getElementById("Add3").style.background = "red";
}
///////////////////////////////////////////////////////////////////////////////////////
if ((document.getElementById("score-2").textContent == "1")
&&
(document.querySelector('.active-1').background = "blue") &&
(document.getElementById("score-2").style.background == "red"))
{document.getElementById("Mex").disabled = false;
document.getElementById("Add3").style.background = "red";
document.getElementById("Add3").disabled = false;
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
let ar = document.getElementById('Arg');
ar.addEventListener("mouseover", Arghover);
ar.addEventListener("mouseout", Argout);
ar.addEventListener("click", Arg);
let am = document.getElementById('Ama');
am.addEventListener("mouseover", Amahover);
am.addEventListener("mouseout", Amaout);
am.addEventListener("click", Ama);
let me = document.getElementById('Mex');
me.addEventListener("mouseover", Mexhover);
me.addEventListener("mouseout", Mexout);
me.addEventListener("click", Mex);
let be = document.getElementById('Bel');
be.addEventListener("mouseover", Belhover);
be.addEventListener("mouseout", Belout);
be.addEventListener("click", Bel);
let add1 = document.getElementById('Add1');
add1.addEventListener("mouseover", Add1hover);
add1.addEventListener("mouseout", Add1out);
add1.addEventListener("click", Add1);
let add2 = document.getElementById('Add2');
add2.addEventListener("mouseover", Add2hover);
add2.addEventListener("mouseout", Add2out);
add2.addEventListener("click", Add2);
var add3 = document.getElementById('Add3');
add3.addEventListener("mouseover", Add3hover);
add3.addEventListener("mouseout", Add3out);
add3.addEventListener("click", Add3);
//init2();
//document.querySelector('.btn-Arg').addEventListener('click', function()
//{
//if (gamePlaying && (scores[activePlayer+1] ==0) && (scores[activePlayer] ==0)) {
//scores[activePlayer] += 1;
//document.querySelector('#score-' + (activePlayer)).textContent = scores[activePlayer];
//document.querySelector('.player-score-' + [activePlayer]).style.backgroundColor = 'orange';}
//else if (gamePlaying && (scores[activePlayer] == 1) && (scores[activePlayer+1] =0))
//{
//scores[activePlayer] += 1;
//document.querySelector('#score-' + (activePlayer)).textContent = scores[activePlayer];
//document.querySelector('.player-score-' + [activePlayer]).style.backgroundColor = 'red';}
// nextPlayer();
//});
//document.querySelector('.btn-Ama').addEventListener('click', function()
//{
//if ( gamePlaying && (scores[activePlayer+1] == 0) && (scores[activePlayer] == 0) ) {
//scores[activePlayer+1] += 1;
//document.querySelector('#score-' + (activePlayer+1)).textContent = scores[activePlayer+1];
//document.querySelector('.player-score-' + [activePlayer+1]).style.backgroundColor = 'orange';}
//else if ( gamePlaying && (scores[activePlayer] == 0) && (scores[activePlayer+1] = 1) ) {
//scores[activePlayer] += 1;
//document.querySelector('#score-' + (activePlayer)).textContent = scores[activePlayer];
//document.querySelector('.player-score-' + [activePlayer]).style.backgroundColor = 'red';}
//nextPlayer();
// });
function init()
{
scores = [0,0];
roundScore = 0;
activePlayer = 0;
troopScore = [0,0];
gamePlaying = true;
//energyScore = 0;
//argScore = [0,0];
//amaScore = [0,0];
document.getElementById('score-0').textContent = '0';
document.getElementById('score-1').textContent = '0';
document.getElementById('score-2').textContent = '0';
document.getElementById('score-3').textContent = '0';
document.getElementById('troopScore-0').textContent = '0';
document.getElementById('troopScore-1').textContent = '0';
document.getElementById('dieroll-0').textContent = ".";
document.getElementById('dieroll-1').textContent = '0';
document.querySelector('#name-0').textContent = 'Player 1';
document.querySelector('#name-1').textContent = 'Player 2';
document.querySelector('.player-0-panel').classList.add('active-0');
//sets up initial classList needed
}
function nextPlayer() {
var icons = document.getElementsByTagName('i');
for (i=0; i < icons.length; i++) //classlist remove
{icons.classList.remove('color-' + activePlayer);}
document.querySelector('.player-' + [activePlayer] + '-panel').classList.remove('active-' + [activePlayer]);
activePlayer ===0? activePlayer = 1 : activePlayer = 0;
for (i=0; i < icons.length; i++) //classlist add
{icons.classList.add('color-' + [activePlayer]);}
document.querySelector('.player-' + [activePlayer] + '-panel').classList.add('active-' + [activePlayer]);
document.querySelector('#dieroll-0').textContent = '.';
document.querySelector('#dieroll-1').textContent = '0';
}
</script>
</body>
</html>
PS. I would say that i am very knew to this. I don't know if i should post everything etc... it's quite a lot of junk