<?php
//session_start();
if (isset($_SESSION['gagnant'], $_SESSION['gagnant_img'])) {
    $gagnant = $_SESSION['gagnant'];
    $gagnant_img = $_SESSION['gagnant_img'];
    session_destroy();
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../styles/win_screen.css">
    <link rel="icon" type="image/jpg" href="../img/logo.png">
    <title>Fin du combat</title>
</head>
<body>
    
    <div class='music-control'>
    <audio src="../music/Results.mp3" id='audio' loop></audio>
        <h3>Musique de l'écran de victoire</h3>
        <a href="javascript:void(0)" onclick=changeState(0) class='btn'>Play</a>
        <a href="javascript:void(0)" onclick=changeState(1) class='btn'>Pause</a>
        <a href="javascript:void(0)" onclick=changeState(2) class='btn active'>Stop</a>
    </div>
    <h1>Fin du combat</h1>
    <div id="end">

        <div class='img_gagnant'>
            <h2><?php echo $gagnant; ?> a gagné !</h2>
            <img src="../img/<?php echo $gagnant_img; ?>" alt="Image de <?php echo $gagnant; ?>">
        </div>
        <p><a href="index.php?action=exit" class='button'>Recommencer le jeu</a></p>
    </div>

    <script>
    //controles de la musique
    function changeState(x){
    let btns = document.querySelectorAll(".btn");
    let audio = document.querySelector("#audio");
    for(let i = 0; i < btns.length; i++){
        btns[i].classList.remove("active");
    }
    btns[x].classList.add("active");

    if(x == 0){
        audio.play();
    }
    if(x == 1){
        audio.pause();
    }
    if(x == 2){
        audio.pause();
        audio.currentTime = 0;
    }
}
</script>
</body>
</html>
