const tiles = [
{left:650, top:390},
{left:600, top:390},
{left:543, top:390},
{left:486, top:390},
{left:433, top:390},
{left:370, top:390},
{left:316, top:390},
{left:260, top:390},
{left:214, top:390},
{left:184, top:344},
{left:195, top:290},
{left:247, top:290},
{left:296, top:290},
{left:350, top:290},
{left:409, top:290},
{left:462, top:290},
{left:521, top:290},
{left:575, top:290},
{left:630, top:290},
{left:661, top:224},
{left:658, top:160},
{left:611, top:150},
{left:560, top:150},
{left:504, top:150},
{left:445, top:150},
{left:395, top:150},
{left:340, top:150},
{left:280, top:150},
{left:225, top:150},
{left:90, top:150},
]

const tilesBot = [
{left:650, top:430},
{left:600, top:430},
{left:543, top:430},
{left:486, top:430},
{left:433, top:430},
{left:370, top:430},
{left:316, top:430},
{left:260, top:430},
{left:214, top:430},
{left:162, top:369},
{left:175, top:290},
{left:247, top:260},
{left:296, top:260},
{left:350, top:260},
{left:409, top:260},
{left:462, top:260},
{left:521, top:260},
{left:575, top:260},
{left:630, top:260},
{left:688, top:224},
{left:680, top:160},
{left:611, top:110},
{left:560, top:110},
{left:504, top:110},
{left:445, top:110},
{left:395, top:110},
{left:340, top:110},
{left:280, top:110},
{left:225, top:110},
{left:90, top:110},
]



let rollHistory = [];
let currentPosition = 0; // starting positon

function rollDice() {
return Math.floor(Math.random() * 6) + 1;
}


const el = document.getElementById('roll-history');

function updateHistory(roll) {
rollHistory.push(roll);
el.innerHTML = '';
rollHistory.forEach((record, i) => {
const recordDiv = document.createElement('div');
recordDiv.innerHTML = `${(i + 1)}: ${record}`;
el.appendChild(recordDiv);
});
}



const tilesWrapper = document.getElementById('tiles-wrapper');

tiles.forEach(tile =>{
const tileDiv = document.createElement('div');
tileDiv.className = 'tile';
tileDiv.style.left = tile.left + 'px';
tileDiv.style.top = tile.top + 'px';
tilesWrapper.appendChild(tileDiv);
});

tilesBot.forEach(tile =>{
const tileDiv = document.createElement('div');
tileDiv.className = 'tileBot';
tileDiv.style.left = tile.left + 'px';
tileDiv.style.top = tile.top + 'px';
tilesWrapper.appendChild(tileDiv);
});



const button = document.getElementById('rollbtnid');
const piece = document.getElementById('piece');
const pieceBot = document.getElementById('pieceBot');
button.addEventListener('click', (e) => {
const roll = rollDice();
updateHistory(roll);

if (currentPosition + roll >= tiles.length) {

currentPosition = tiles.length - 1;
} else {
currentPosition += roll;
}

piece.style.left = tiles[currentPosition].left + 'px';
piece.style.top = tiles[currentPosition].top + 'px';
pieceBot.style.left = tilesBot[currentPosition].left + 'px';
pieceBot.style.top = tilesBot[currentPosition].top + 'px';


if (currentPosition === tiles.length - 1) {
setTimeout(() => alert('You win!'), 1);
}
});