I am currently working on a card game project but I keep encountering an error that says "unexpected end of input". This error is completely new to me, so any assistance or guidance would be greatly appreciated. Additionally, the codepen isn't displaying anything and is also throwing the same error, along with the compiler in StackOverflow. Any help on this issue would be highly valued.
var turn = true;
var enemyCards = document.getElementById('enemy-cards');
var friendlyCards = document.getElementById('friendly-cards');
var friendlyHealth = document.getElementById('friendly-health-value');
var enemyHealth = document.getElementById('enemy-health-value');
var goodHealth=20;
var badHealth=20;
var enemyCardArray = [[2, 3], [2, 4]];
var friendlyCardArray = [[4, 3], [3,2]];
function initialSetup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
}
function setup() {
enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop
friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop
for (var i = 0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
//enemyCards.innerHTML = "";
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
for (var i = 0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
//friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
}
function battle() {
if (turn === true){
for (var i = 0; i<friendlyCardArray.length; i++) {
if (friendlyCardArray.length == enemyCardArray.length){
enemyCardArray[i][1] -= friendlyCardArray[i][0];
if (enemyCardArray[i][1] < 1){
enemyCardArray.splice(i, 1);
}
}if(friendlyCardArray.length>enemyCardArray.length){
for (var i=0; i<enemyCardArray.length; i++){
enemyCardArray[i][1] -= friendlyCardArray[i][0];
if (enemyCardArray[i][1] < 1){
enemyCardArray.splice(i, 1);
}
}
for (var i=enemyCardArray.length+1; i>enemyCardArray.length; i++){
badHealth-=friendlyCardArray[i][0];
if (i == frienlyCardArray.length+1){
break;
}
}
}if(friendlyCardArray.length<enemyCardArray.length){
for (var i=0; i<friendlyCardArray.length; i++){
enemyCardArray[i][1] -= friendlyCardArray[i][0];
if (enemyCardArray[i][1] < 1){
enemyCardArray.splice(i, 1);
}
}
}if (turn === false){
}
}
initialSetup();
battle();
setup();
body {
margin: 0;
font-family: sans-serif;
position: relative;
}
#enemy-cards{
background-color: #873a00;
width: 100%;
height: 270px;
}
#friendly-cards{
background-color: #873a00;
width: 100%;
height: 270px;
position: fixed;
bottom: 0;
}
.card {
width: 150px;
height: 250px;
background-color: #afafaf;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
position: relative;
float:left;
}
.damage {
text-align: left;
position: absolute;
bottom:0;
left: 20px;
}
.health {
text-align: right;
position: absolute;
bottom:0;
right: 20px;
}
#friendly-health{
float:left;
width: 50%;
background-color: lightgreen;
height: 200px;
}
#friendly-health-value{
position: fixed;
left: 25%;
vertical-align: middle;
color: white;
}
#enemy-health-value{
position: fixed;
left: 75%;
vertical-align: middle;
color: white;
}
#enemy-health{
float:left;
width: 50%;
background-color: #f73f27;
height: 200px;
}<div id="game">
<div id="enemy-cards">
</div>
<div id="health">
<div id="friendly-health">
<h1 id="friendly-health-value">20</h1>
</div>
<div id="enemy-health">
<h1 id="enemy-health-value">20</h1>
</div>
</div>
<div id="friendly-cards">
</div>
</div>