first commit

2023-12-17 08:22:01 +01:00
commit 5abd24b102
15 changed files with 6111 additions and 0 deletions
--- a/game.html
+++ b/game.html
@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <title>Scontland Yard</title>
+</head>
+
+<body>
+
+    <div id="app" class="container">
+        <h1>Starting Position</h1>
+        <form v-on:submit.prevent="gameStart" name="form_start">
+            <p>
+                Number of players
+                <input name="police_players" type="number" min="3" max="6" required
+                    placeholder="how many players do we have ?" v-model="police_players">
+            </p>
+            <p>
+                Position of the tief
+                <input name="tief_posistion" type="number" min="1" max="199" required placeholder="tief position"
+                    v-model="tief_position_start">
+            </p>
+            <button type="submit" v-bind:disabled="isGameStarted == true">Start the hunting</button>
+        </form>
+        <h1>Game Moves</h1>
+
+        <div v-show="isGameStarted" v-for="r in rounds">
+                Tief:
+                <span v-for="pos in r.tief">{{ pos }}</span>
+                Police:
+                <span v-for="pos in r.police">{{ pos }}</span>
+                Transport:
+                <span>{{ r.transport }}</span>
+        </div>
+        <div v-show="isGameStarted">
+            <form v-on:submit.prevent="gameRound" name="form_move">
+                Tief:
+                <span v-for="pos in round.tief">{{ pos }}</span>
+                Police:
+                <input v-for="pos in police_players" type="number" min="1" max="199"  required name="police">
+                Transport:
+                <select v-model="round.transport" name="transport" required>
+                    <option disabled value="">Please select one</option>
+                    <option v-for="transport in listPossibleTransports(round)">{{ transport }}</option>
+                    <option>hidden</option>
+                </select>
+                <button type="submit">Move</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script>
+        const app = Vue.createApp({
+            data() {
+                return {
+                    police_players: 3,
+                    tief_position_start: null,
+                    rounds: [],
+                    round: {
+                        tief: null,
+                        police: null,
+                        transport: null
+                    },
+                    graph: null
+                }
+            },
+            methods: {
+                gameStart(e) {
+                    axios.get("data/graph.json")
+                        .then(response => { this.graph = response.data })
+                        .catch(err => console.log("Axios err: ", err))
+                    this.round.tief = [this.tief_position_start];
+                    this.round.police = new Array(this.police_players);
+                    this.round.transport = null;
+                },
+                gameRound(e) {
+                    let police = new Array(this.police_players)
+                    for (i in e.target.elements.police) {
+                        police.push(e.target.elements.police[i].value)
+                        e.target.elements.police[i].value = null
+                    }
+                    this.rounds.push({
+                        'tief': this.round.tief.slice(),
+                        'transport': this.round.transport,
+                        'police': police
+                    })
+                    // clear values
+                    this.round.police = null
+                    this.round.transport = null
+                    this.round.tief.push(4)
+                },       
+                listPossibleTransports(round) {
+                    let values = []
+                    for (let item in round.tief) {
+                        let tief_pos = round.tief[item].toString()
+                        let vertex = this.graph[tief_pos]
+                        values = values.concat(vertex['transport'])
+                    }
+                    values = new Set(values);
+                    return values
+                }
+            },
+            computed: {
+                isGameStarted() {
+                    return this.round.tief !== null
+                },
+            }
+        })
+        app.mount('#app')
+    </script>
+
+</body>
+
+</html>