wait player 1

<!DOCTYPE html>
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wait player 1</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Tangerine:700" rel="stylesheet">
<style type="text/css">

body,html
{
 background:#fff;
 margin:0vw;
 padding:0vw;
 font-family: 'Roboto', sans-serif;
}

#thecards{
    width:60vw;
    height:50vh;
    margin-top:0vh;
    position:fixed;
    background-color:green;
    padding-left:20vw;
    padding-right:20vw;
}
.thecard_card{
    width:10vw;
    height:14vw;
    padding-top:3.5vw;
    position:relative;
    background-color:white;
     margin-left:2.5vw;
    margin-right:2.5vw;
    position:relative;
    float:left;
    margin-top:4vw;
    font-size:3vw;
    text-align:center;
    white-space: normal

}
.thecard_cardholder{
    background-color:none;
    width:10vw;
    height:20.5vw;

}
.thecard_name{
    width:8.5vw;
    height:1.5vw;
    padding:0.75vw;
    font-size:1.4vw;
    text-align:center;
    color:white;
}

#mycards{
    width:92vw;
    height:50vh;
    margin-top:50vh;
    position:fixed;
    background-color:green;
    padding-left:4vw;
    padding-right:4vw;
}
.mycard_card{
    background-color:white;
    padding:none;
    width:8vw;
    height:10vw;
    padding-top:3vw;
    margin-left:1.75vw;
    margin-right:1.75vw;
    position:relative;
    float:left;
    margin-top:3vw;
    font-size:3vw;
    text-align:center;
    white-space: normal
}
#info_game{

    width:10vw;
    height:20.5vw;
    margin-top:4vw;
    margin-left:5.75vw;
    background-color:white;
    position:fixed;
    z-index:300;


}


</style>
<script src="jquery/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body>

<?php
    $test = 1;
    $rij = "10 7 8 9 B D H A";
    $kaartarray = explode(" ", $rij);


    $dbhost = "dedroomvogel.be.mysql";
    $dbuser = "dedroomvogel_be";
    $dbpass = "dedroomvogel";
    $dbname = "dedroomvogel_be";

    $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

    $sql = "SELECT gameplay FROM manillen";
    $result = mysqli_query($conn, $sql);

//check if game is started (for give everyone the cards)
    if(mysqli_fetch_assoc($result)["gameplay"] == 0){


        $cards = range(1, 32);
        shuffle($cards);
        shuffle($cards);
        shuffle($cards);
        shuffle($cards);
        shuffle($cards);
        shuffle($cards);
        shuffle($cards);
        shuffle($cards);

        $len = count($input);

        $cards_player_1 = array_slice($cards, 0, 8);
        $cards_player_2 = array_slice($cards, 8,8);
        $cards_player_3 = array_slice($cards, 16, 8);
        $cards_player_4 = array_slice($cards, 24,8);

        asort($cards_player_1);
        asort($cards_player_2);
        asort($cards_player_3);
        asort($cards_player_4);

        $cardpp1 = implode("?", $cards_player_1);
        $cardpp2 = implode("?", $cards_player_2);
        $cardpp3 = implode("?", $cards_player_3);
        $cardpp4 = implode("?", $cards_player_4);

        $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

        $sql = "UPDATE manillen SET rowgk1='$cardpp1', rowgk2='$cardpp2', rowgk3='$cardpp3', rowgk4='$cardpp4',
        hk1='0', hk2='0', hk3='0', hk4='0', gameplay='1' WHERE id=1";
        mysqli_query($conn, $sql);


        echo "set gameplay";

    }

/////////////////////////////////////////////////

//get cards for player 1
    $sql = "SELECT rowgk1 FROM manillen";
    $result = mysqli_query($conn, $sql);
    $arraycardsp1 = explode("?",mysqli_fetch_assoc($result)["rowgk1"]);
////////////////////////////////////////////////


?>


    <div id="info_game">
        <div id="game_troef"> </div>
        <div id="game_figuur"> </div>
        <div id="game_score_13">  </div>
        <div id="game_score_24">  </div>

    </div>


    <div id="thecards">

        <?php

        $sqll = "SELECT hk1, hk2, hk3, hk4 FROM manillen";
        $resultt = mysqli_query($conn, $sqll);
        $huidigekaarten = array(mysqli_fetch_assoc($resultt)["hk1"], mysqli_fetch_assoc($resultt)["hk2"],mysqli_fetch_assoc($resultt)["hk3"],
        mysqli_fetch_assoc($resultt)["hk4"]);

        for($j = 1; $j <= 4; $j++){

        $hk = $huidigekaarten[($j-1)];
        $idcard = "thecard_".$j;


        if($hk>=1 && $hk <=8){$logokaartt = "&#9829;"; $kleurkaart = "red";}//harten
        if($hk>=9 && $hk <=16){$logokaartt = "&#9827;"; $kleurkaart = "black";}//klaver
        if($hk>=17 && $hk <=24){$logokaartt = "&#9830;"; $kleurkaart = "red";}//koeken
        if($hk>=25 && $hk <=32){$logokaartt = "&#9824;"; $kleurkaart = "black";}//piekens

        $karte = $kaartarray[($hk%8)];

        if($hk == 0){$logokaartt = ""; $karte = "";}


        ?>

        <div class="thecard_card" style="color:<?php echo $kleurkaart; ?>" id="<?php echo $idcard ?>" > <?php echo $karte; echo "<br>".$logokaartt; ?></div>


      <?php
        }


      ?>

    </div>


       <div id="mycards">

        <?php
        if(count($arraycardsp1) >= 1){

        for($i=0;$i<count($arraycardsp1);$i++){
        $aa = $i+1;
        $iddiv = "mycard_".$aa;
        if($arraycardsp1[$i]>=1 && $arraycardsp1[$i] <=8){$logokaart = "&#9829;"; $kleurkaart = "red";}//harten
        if($arraycardsp1[$i]>=9 && $arraycardsp1[$i] <=16){$logokaart = "&#9827;"; $kleurkaart = "black";}//klaver
        if($arraycardsp1[$i]>=17 && $arraycardsp1[$i] <=24){$logokaart = "&#9830;"; $kleurkaart = "red";}//koeken
        if($arraycardsp1[$i]>=25 && $arraycardsp1[$i] <=32){$logokaart = "&#9824;"; $kleurkaart = "black";}//piekens


        ?>

        <div class="mycard_card" style="color:<?php echo $kleurkaart; ?>" id= <?php echo $iddiv ?> > <?php echo $kaartarray[($arraycardsp1[$i]%8)];echo "<br>".$logokaart; ?></div>


      <?php
        }}

      ?>

    </div>


</body>
</html>