ldc-babyweb/index.php

<?php
require_once 'Db.php';

$db = new Database('localhost', 'babyweb', 'root', '');

$ranking = $db->requestAll("SELECT * FROM players ORDER BY score DESC");
$players = $db->requestAll("SELECT * FROM players ORDER BY name");

?>

<html>
<head>
    <title>BabyWeb</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        table {
            font-size: 40px;
        }
        .main {
            height: 100vh;
            display: flex;
            justify-content: center;
        }
        .ranking, .add-match {
            padding-top: 150px;
            display: flex;
            justify-content: center;
            flex: 1;
        }
        .double {
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="app">
    <section class="main">
        <div class="ranking" style="background-color: lightcoral">
            <table>
                <tr>
                    <th>#</th>
                    <th>Player</th>
                    <th>Score</th>
                </tr>
                <tr v-for="(rank, i) in ranking">
                    <td>{{ i + 1 }}</td>
                    <td>{{ rank.name }}</td>
                    <td>{{ rank.score }}</td>
                </tr>
            </table>
        </div>
        <div class="add-match" style="background-color: lightblue">
           <div>
               <label for="1v1">1 vs 1</label>
               <input id="1v1" type="radio" v-model="match_type" value="1v1">
               <label for="2v2">2 vs 2</label>
               <input id="2v2" type="radio" v-model="match_type" value="2v2">
               <br><br>
               <label>Joueur Rouge 1</label>
               <select v-model="red_p1">
                   <option v-for="player in players" :value="player.id">{{ player.name }}</option>
               </select>
               <div v-show="match_type === '2v2'" class="double">
                   <label>Joueur Rouge 2</label>
                   <select v-model="red_p2">
                       <option value="NULL">Vide</option>
                       <option v-for="player in players" :value="player.id">{{ player.name }}</option>
                   </select>
               </div>
               <br><br>
               <label>Joueur Bleu 1</label>
               <select v-model="blue_p1">
                   <option v-for="player in players" :value="player.id">{{ player.name }}</option>
               </select>
               <div v-show="match_type === '2v2'" class="double">
                   <label>Joueur Bleu 2</label>
                   <select v-model="blue_p2">
                       <option value="NULL">Vide</option>
                       <option v-for="player in players" :value="player.id">{{ player.name }}</option>
                   </select>
               </div>
               <br><br>
               <label>Score Bleu</label>
               <input type="number" v-model="blue_score" min="1" max="15">
               <label>Score Rouge</label>
               <input type="number" v-model="red_score" min="1" max="15">
               <br><br>
               <input type="submit" value="Ajouter" @click="addMatch">
           </div>
        </div>
    </section>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            players: <?= json_encode($players); ?>,
            ranking: <?= json_encode($ranking); ?>,
            match_type: '1v1',
            red_p1: '',
            red_p2: 'NULL',
            blue_p1: '',
            blue_p2: 'NULL',
            red_score: 0,
            blue_score: 0,
        },
        watch: {
            match_type(){
                if (this.match_type === '1v1'){
                    this.red_p2 = 'NULL';
                    this.blue_p2 = 'NULL';
                }
            }
        },
        methods: {
            addMatch(){
                if (this.match_type === '1v1'){
                    if (this.red_p1 !== '' && this.blue_p1 !== '' && this.red_score !== 0 && this.blue_score !== 0 && this.red_p1 !== this.blue_p1){
                        let _this2 = this;
                        axios.post('/add_score.php', {
                            red_score: this.red_score,
                            blue_score: this.blue_score,
                            red_p1: this.red_p1,
                            red_p2: this.red_p2,
                            blue_p1: this.blue_p1,
                            blue_p2: this.blue_p2,
                        }).then(function (response) {
                            console.log(response)
                            _this2.ranking = response.data;
                        }).catch(function (error) {
                            console.log(error);
                            alert('Une erreur est survenue.');
                        });
                    }else{
                        alert("Veuillez remplir tous les champs.");
                    }
                }else{
                    if (this.red_p1 !== '' && this.blue_p1 !== '' && this.red_p2 !== '' && this.blue_p2 !== '' && this.red_score !== 0 && this.blue_score !== 0 && this.red_p1 !== this.blue_p1 && this.red_p2 !== this.blue_p2){
                        let _this2 = this;
                        axios.post('/add_score.php', {
                            red_score: this.red_score,
                            blue_score: this.blue_score,
                            red_p1: this.red_p1,
                            red_p2: this.red_p2,
                            blue_p1: this.blue_p1,
                            blue_p2: this.blue_p2,
                        }).then(function (response) {
                            console.log(response)
                            _this2.ranking = response.data;
                        }).catch(function (error) {
                            console.log(error);
                            alert('Une erreur est survenue.');
                        });
                    }else{
                        alert("Veuillez remplir tous les champs.");
                    }
                }
            }
        }
    })
</script>
</body>
</html>