peter.hudec/game-scotland-yard-helper
1
0
Fork 0
Code Pull Requests Releases 1 Activity

addedd images

Browse Source
This commit is contained in:
Peter Hudec
2023-12-17 14:43:04 +01:00
parent a80f2f841c
commit cbdc445539
202 changed files with 1294 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
game.html
View File

@ -4,7 +4,8 @@
<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">
<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>
@ -12,42 +13,68 @@
<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 v-model="police_players">
</p>
<p>
Position of the tief
<input name="tief_posistion" type="number" min="1" max="199" required v-model="tief_start">
</p>
<button type="submit" v-bind:disabled="isGameStarted == true">Start the hunting</button>
<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>
<div v-show="isGameStarted" v-for="r in rounds">
Tief:
<span class="border border-primary rounded-circle" v-for="pos in r.tief">{{ pos }}</span>
Police:
<span class="border border-primary rounded-circle" 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 class="border border-primary rounded-circle" v-for="pos in round.tief">{{ pos }}</span>
Police:
<input v-for="(police, index) in round.police" v-model="round.police[index]" 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>
<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">Move</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
@ -69,8 +96,8 @@
},
mounted() {
axios.get("data/graph.json")
.then(response => { this.graph = response.data })
.catch(err => console.log("Axios err: ", err))
.then(response => { this.graph = response.data })
.catch(err => console.log("Axios err: ", err))
},
methods: {
gameStart(e) {
@ -104,8 +131,8 @@
}
this.round.police = new Array(this.police_players).fill(0);
this.round.transport = null
this.round.tief = new Set(tief)
},
this.round.tief = Array.from(new Set(tief))
},
listPossibleTransports(round) {
let values = []
for (let item in round.tief) {
@ -115,6 +142,9 @@
}
values = new Set(values);
return values
},
getVertexImage(number) {
return 'data/'+number+".svg"
}
},
computed: {