2023-12-17 08:22:01 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
2023-12-17 14:43:04 +01:00
|
|
|
<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">
|
2023-12-17 17:37:24 +01:00
|
|
|
<title>Scotland Yard</title>
|
2023-12-17 08:22:01 +01:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="app" class="container">
|
|
|
|
|
<h1>Starting Position</h1>
|
2023-12-17 14:43:04 +01:00
|
|
|
<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>
|
2023-12-17 08:22:01 +01:00
|
|
|
</form>
|
|
|
|
|
<h1>Game Moves</h1>
|
2023-12-17 14:43:04 +01:00
|
|
|
<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>
|
2023-12-17 14:55:35 +01:00
|
|
|
<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>
|
2023-12-17 14:43:04 +01:00
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</form>
|
2023-12-17 08:22:01 +01:00
|
|
|
</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,
|
2023-12-17 11:28:17 +01:00
|
|
|
tief_start: 0,
|
2023-12-17 08:22:01 +01:00
|
|
|
rounds: [],
|
|
|
|
|
round: {
|
|
|
|
|
tief: null,
|
|
|
|
|
police: null,
|
|
|
|
|
transport: null
|
|
|
|
|
},
|
|
|
|
|
graph: null
|
|
|
|
|
}
|
|
|
|
|
},
|
2023-12-17 11:28:17 +01:00
|
|
|
mounted() {
|
|
|
|
|
axios.get("data/graph.json")
|
2023-12-17 14:43:04 +01:00
|
|
|
.then(response => { this.graph = response.data })
|
|
|
|
|
.catch(err => console.log("Axios err: ", err))
|
2023-12-17 11:28:17 +01:00
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
gameStart(e) {
|
|
|
|
|
console.log(this.tief_start)
|
|
|
|
|
this.round.police = new Array(this.police_players).fill(0);
|
2023-12-17 08:22:01 +01:00
|
|
|
this.round.transport = null;
|
2023-12-17 11:28:17 +01:00
|
|
|
this.round.tief = [this.tief_start];
|
2023-12-17 08:22:01 +01:00
|
|
|
},
|
|
|
|
|
gameRound(e) {
|
|
|
|
|
this.rounds.push({
|
|
|
|
|
'tief': this.round.tief.slice(),
|
|
|
|
|
'transport': this.round.transport,
|
2023-12-17 11:28:17 +01:00
|
|
|
'police': this.round.police.slice(),
|
2023-12-17 08:22:01 +01:00
|
|
|
})
|
|
|
|
|
// clear values
|
2023-12-17 12:17:08 +01:00
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-12-17 11:28:17 +01:00
|
|
|
this.round.police = new Array(this.police_players).fill(0);
|
2023-12-17 08:22:01 +01:00
|
|
|
this.round.transport = null
|
2023-12-17 14:43:04 +01:00
|
|
|
this.round.tief = Array.from(new Set(tief))
|
|
|
|
|
},
|
2023-12-17 14:55:35 +01:00
|
|
|
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
|
|
|
|
|
},
|
2023-12-17 08:22:01 +01:00
|
|
|
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
|
2023-12-17 14:43:04 +01:00
|
|
|
},
|
|
|
|
|
getVertexImage(number) {
|
|
|
|
|
return 'data/'+number+".svg"
|
2023-12-17 08:22:01 +01:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
isGameStarted() {
|
|
|
|
|
return this.round.tief !== null
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
app.mount('#app')
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
