From 6f4af5913e7d4c50d3cd62e3b63d402d78cbed0c Mon Sep 17 00:00:00 2001
From: Peter Hudec <peter.hudec@securcom.me>
Date: Sun, 17 Dec 2023 17:24:58 +0100
Subject: [PATCH] typo fix

---
 game.html | 171 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 game.html
diff --git a/game.html b/game.html
new file mode 100644
index 0000000..0375f1f
--- /dev/null
+++ b/game.html
@@ -0,0 +1,171 @@
+<!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>Scotland Yard Helper</title>
+</head>
+
+<body>
+
+    <div id="app" class="container">
+        <h1>Starting Position</h1>
+        <form v-on:submit.prevent="gameStart" id="form_start">
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="policePlayers">Number of players</label>
+                    <input class="form-control" id="policePlayers" type="number" min="3" max="6" required
+                        v-model="police_players" form="form_start">
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="tiefPosition">Position of the tief</label>
+                    <input class="form-control" id="tiefPosition" type="number" min="1" max="199" required
+                        v-model="tief_start" form="form_start">
+                </div>
+                <button type="submit" v-bind:disabled="isGameStarted == true" form="form_start">Start the hunting</button>
+            </div>
+        </form>
+        <h1>Game Moves</h1>
+        <form id="form_move" v-on:submit.prevent="gameRound" name="form_move">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th scope="col">Tief</th>
+                    <th scope="col">Police</th>
+                    <th scope="col">Transport</th>
+                    <th scope="col">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-if="isGameStarted" v-for="r in rounds">
+                    <td>
+                        <img width="40px" v-for="pos in r.tief" v-bind:src="getVertexImage(pos)"/>
+                    </td>
+                    <td>
+                        <img width="40px" v-for="pos in r.police" v-bind:src="getVertexImage(pos)"/>
+                    </td>
+                    <td>
+                        <span>{{ r.transport }}</span>
+                    </td>
+                    <td>
+                    </td>
+                </tr>
+                <tr v-if="isGameStarted">
+                        <td>
+                            <img width="40px" v-for="pos in round.tief" v-bind:src="getVertexImage(pos)"/>
+                        </td>
+                        <td>
+                            <input v-for="(police, index) in round.police" v-model="round.police[index]" type="number"
+                                min="1" max="199" required name="police" form="form_move">
+                        </td>
+                        <td>
+                            <select v-model="round.transport" name="transport" required form="form_move">
+                                <option disabled value="">Please select one</option>
+                                <option v-for="transport in listPossibleTransports(round)">{{ transport }}</option>
+                                <option>hidden</option>
+                            </select>
+                        </td>
+                        <td>
+                            <button type="submit" class="btn btn-outline-primary">Move</button>
+                            <button v-if="rounds.length" type="button" class="btn btn-outline-danger" v-on:click="gameBack">Back</button>
+                        </td>
+                </tr>
+            </tbody>
+        </table>
+        </form>
+    </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_start: 0,
+                    rounds: [],
+                    round: {
+                        tief: null,
+                        police: null,
+                        transport: null
+                    },
+                    graph: null
+                }
+            },
+            mounted() {
+                axios.get("data/graph.json")
+                    .then(response => { this.graph = response.data })
+                    .catch(err => console.log("Axios err: ", err))
+            },
+            methods: {
+                gameStart(e) {
+                    console.log(this.tief_start)
+                    this.round.police = new Array(this.police_players).fill(0);
+                    this.round.transport = null;
+                    this.round.tief = [this.tief_start];
+                },
+                gameRound(e) {
+                    this.rounds.push({
+                        'tief': this.round.tief.slice(),
+                        'transport': this.round.transport,
+                        'police': this.round.police.slice(),
+                    })
+                    // clear values
+
+                    let tief = new Array()
+                    for (vertex in this.round.tief) {
+                        let tief_pos = this.round.tief[vertex]
+                        // iterate edges
+                        for (edge in this.graph[tief_pos].siblings) {
+                            let sibbling = this.graph[tief_pos].siblings[edge]
+                            if (this.round.police.includes(sibbling.vertex)) {
+                                console.log("skip vertex, police there")
+                            } else if (sibbling.edge == this.round.transport) {
+                                tief.push(sibbling.vertex)
+                            } else if (this.round.transport == 'hidden') {
+                                tief.push(sibbling.vertex)
+                            }
+                        }
+                    }
+                    this.round.police = new Array(this.police_players).fill(0);
+                    this.round.transport = null
+                    this.round.tief = Array.from(new Set(tief))
+                },
+                gameBack(e) {
+                    if (this.rounds.lenght == 0) {
+                        return
+                    }
+                    last = this.rounds.pop()
+                    this.round.police = last.police
+                    this.round.transport = last.transport
+                    this.round.tief = last.tief
+                },
+                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
+                },
+                getVertexImage(number) {
+                    return 'data/'+number+".svg"
+                }
+            },
+            computed: {
+                isGameStarted() {
+                    return this.round.tief !== null
+                },
+            }
+        })
+        app.mount('#app')
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
