<?php

$perso1= $_SESSION['personnage1'];
$perso2= $_SESSION['personnage2'];

$perso1->setName($_SESSION['personnage1']->getName());
$perso2->setName($_SESSION['personnage2']->getName());

$perso1->setHp($_SESSION['personnage1']->getHp());
$perso2->setHp($_SESSION['personnage2']->getHp());

$perso1->setAtk($_SESSION['personnage1']->getAtk());
$perso2->setAtk($_SESSION['personnage2']->getAtk());

$perso1->setDef($_SESSION['personnage1']->getDef());
$perso2->setDef($_SESSION['personnage2']->getDef());
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../styles/fight.css">
    <link rel="icon" type="image/jpg" href="../img/logo.png">
    <title>Fight</title>
    
</head>
<body>
    <h1>Écran de Combat</h1>

    <div class='music-control'>
    <audio src="../music/battle.mp3" id='audio' loop></audio>
        <h3>Musique de l'écran de combat</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>


    <div class="fight_container">
        <div class="Persona">
                    <p>Personnage 1 : <?php echo $_SESSION['personnage1']->getName(); ?></p>
                    <div class="stat">
                        <p>Atk : <?php echo $_SESSION['personnage1']->getAtk(); ?></p>
                        <p>Def : <?php echo $_SESSION['personnage1']->getDef(); ?></p>
                        <p>PV : <span> <?php echo $_SESSION['personnage1']->getHp(); ?></span></p>
                        <p>Buff : <span> <?php echo $_SESSION['personnage1']->getDb(); ?>/3</span></p>
                        <p>Débuff : <span> <?php echo $_SESSION['personnage1']->getDd(); ?>/3</span></p>
                    </div>
                    <img src="../img/<?php echo $_SESSION['personnage1']->getImage(); ?>" alt="Image de <?php echo $_SESSION['personnage1']->getName(); ?>">

            <div class="action">
                <form method="POST" action="index.php?action=attack">
                    <button type='submit' name='attack'>Attaquer</button>
                </form>

                <form method="POST" action="index.php?action=debuff_def">
                    <button type='submit' name='debuff_def'>Débuff dèf</button>
                </form>

                <form method="POST" action="index.php?action=debuff_atk">
                    <button type='submit' name='debuff_atk'>Débuff atk</button>
                </form>

                <form method="POST" action="index.php?action=buff_def">
                    <button type='submit' name='buff_def'>Buff def</button>
                </form>

                <form method="POST" action="index.php?action=buff_atk">
                    <button type='submit' name='buff_atk'>Buff atk</button>
                </form>
            </div>
        </div>

        <img src="../img/VS.png" alt="versus" class='vs'>

        <div class="Persona">
                    <p>Personnage 2 : <?php echo $_SESSION['personnage2']->getName(); ?></p>
                    <div class="stat">
                        <p>Atk : <?php echo $_SESSION['personnage2']->getAtk(); ?></p>
                        <p>Def : <?php echo $_SESSION['personnage2']->getDef(); ?></p>
                        <p>PV : <span> <?php echo $_SESSION['personnage2']->getHp(); ?></span></p>
                        <p>Buff : <span> <?php echo $_SESSION['personnage2']->getDb(); ?>/3</span></p>
                        <p>Débuff : <span> <?php echo $_SESSION['personnage2']->getDd(); ?>/3</span></p>
                    </div>
                    <img src="../img/<?php echo $_SESSION['personnage2']->getImage(); ?>" alt="Image de <?php echo $_SESSION['personnage2']->getName(); ?>">
        </div>
    </div>



    <form class="overlayButton" method="post" action="index.php?action=start">
                <button type="submit" name="start" value="start" class="button">Retour accueil</button>
    </form>

<script src='script.js'></script>
<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>

