<!--HTML--><style>
    .main_game {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
        background-color: transparent;
        position: relative;
    }
    .board {
        display: grid;
        grid-template-columns: repeat(8, 80px);
        grid-template-rows: repeat(8, 80px);
        gap: 2px;
        background: url(https://i.pinimg.com/736x/46/ee/50/46ee50f177f6355e5627830b7364834e.jpg);
        padding: 10px;
        border-radius: 20px;
        position: relative;
    }
    .cell {
        width: 75px;
        height: 75px;
        border: 2px solid #fff;
        border-radius: 50%;
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        background-color: white;
        margin: 4px;
        z-index: 1;
    }
    .cell:hover .popup {
        display: block;
    }
    .popup {
        display: none;
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px;
        border-radius: 5px;
        font-size: 12px;
        white-space: nowrap;
    }
    .token {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: white;
        text-align: center;
        overflow: hidden;
        z-index: 4;
    }
    .token img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .arrow {
        position: absolute;
        width: 2px;
        background-color: black;
        z-index: 3;
    }
    .arrow::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        border-right: 2px solid black;
        border-bottom: 2px solid black;
    }
</style>

<div class="main_game">
    <div class="board" id="board"></div>
</div>

<script>
    const board = document.getElementById("board");
    const rows = 8;
    const cols = 8;
    
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            let index = row % 2 === 0 ? (row * cols) + (cols - col - 1) : (row * cols) + col;
            
            const cell = document.createElement("div");
            cell.classList.add("cell");
            cell.dataset.index = index;
            cell.innerText = index == 0 ? "СТАРТ" : index == 63 ? "ФИНИШ" : index + 1;
            
            const popup = document.createElement("div");
            popup.classList.add("popup");
            popup.innerText = `Клетка ${index+1}`;
            cell.appendChild(popup);
            
            board.appendChild(cell);
        }
    }


    function addToken(tokenIndex, cellIndex, text, imageUrl, bgColor, textColor) {
        const token = document.createElement("div");
        token.classList.add("token");
        token.dataset.tokenIndex = tokenIndex;
        token.innerHTML = text ? `<span>${text}</span>` : '';
        token.style.backgroundColor = bgColor || "red";
        token.style.color = textColor || "white";
        
        if (imageUrl) {
            const img = document.createElement("img");
            img.src = imageUrl;
            token.innerHTML = "";
            token.appendChild(img);
        }
        document.querySelector(".main_game").appendChild(token);
        moveToken(token, cellIndex);
    }
    
    function moveToken(token, cellIndex) {
        const targetCell = document.querySelector(`.cell[data-index='${cellIndex}']`);
        if (targetCell) {
            const rect = targetCell.getBoundingClientRect();
            token.style.left = `${rect.left + rect.width / 2 - 20}px`;
            token.style.top = `${rect.top + rect.height / 2 - 20}px`;
        }
    }
    
    function drawArrow(fromIndex, toIndex, color = "black") {
        const fromCell = document.querySelector(`.cell[data-index='${fromIndex}']`);
        const toCell = document.querySelector(`.cell[data-index='${toIndex}']`);
        
        if (fromCell && toCell) {
            const fromRect = fromCell.getBoundingClientRect();
            const toRect = toCell.getBoundingClientRect();
            
            const arrow = document.createElement("div");
            arrow.classList.add("arrow");
            arrow.style.left = `${fromRect.left + fromRect.width / 2}px`;
            arrow.style.top = `${fromRect.top + fromRect.height}px`;
            arrow.style.height = `${toRect.top - fromRect.top}px`;
            arrow.style.backgroundColor = color;
            
            document.querySelector(".main_game").appendChild(arrow);
        }
    }

    function setCellInfo(cellIndex, info, styles) {
            const cell = document.querySelector(`.cell[data-index='${cellIndex}']`);
            if (cell) {
                cell.querySelector('.popup').innerText = info;
                cell.style.cssText = styles;
            }
        }

    addToken(0, 10, "A", "", "blue", "white");
    addToken(1, 40, "B", "", "green", "black");
    addToken(2, 30, "", "https://i.imgur.com/JXdgjZ2.png", "", "");
    addToken(3, 20, "D", "https://i.imgur.com/3vJYqPi.png", "purple", "yellow");

    setCellInfo(0, "Стартовая", "background-color: lightblue; color: black;");
        setCellInfo(62, "Специальная зона", "background: url(https://i.imgur.com/OHNi59Q.png); color: black; border: 2px dashed white;");
        setCellInfo(59, "Специальная зона", "background: url(https://i.imgur.com/awRBaFH.png); color: black; border: 2px dashed white;");   
        setCellInfo(48, "Специальная зона", "background: url(https://i.imgur.com/FMWW8c1.png); color: black; border: 2px dashed white;"); 
        setCellInfo(43, "Специальная зона", "background: url(https://i.imgur.com/iHSQFAX.png); color: black; border: 2px dashed white;"); 
        setCellInfo(32, "Специальная зона", "background: url(https://i.imgur.com/semHvsZ.png); color: black; border: 2px dashed white;"); 
        setCellInfo(28, "Специальная зона", "background: url(https://i.imgur.com/e0o6XgD.png); color: black; border: 2px dashed white;"); 
        setCellInfo(24, "Специальная зона", "background: url(https://i.imgur.com/AYnsPHZ.png); color: black; border: 2px dashed white;"); 
        setCellInfo(20, "Специальная зона", "background: url(https://i.imgur.com/gu4oi8A.png); color: black; border: 2px dashed white;"); 
        setCellInfo(38, "Специальная зона", "background: url(https://i.imgur.com/Z4GHgvh.png); color: black; border: 2px dashed white;"); 
        setCellInfo(12, "Специальная зона", "background: url(https://i.imgur.com/IOYkqtL.png); color: black; border: 2px dashed white;"); 
        setCellInfo(5, "Специальная зона", "background: url(https://i.imgur.com/nx3Ivf6.png); color: black; border: 2px dashed white;"); 
    
    drawArrow(8, 16, "red");
    drawArrow(16, 24, "blue");
    drawArrow(24, 32, "green");
</script>