Skip to content

Commit

Permalink
feat: allow to toggle stop
Browse files Browse the repository at this point in the history
  • Loading branch information
VincentHardouin committed Apr 23, 2024
1 parent 251869c commit 7e9a5d9
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 30 deletions.
6 changes: 3 additions & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import Game from './components/Game.vue';
</script>

<template>
<Navbar/>
<AboutModal/>
<Game/>
<Navbar />
<AboutModal />
<Game />
</template>

<style scoped>
Expand Down
16 changes: 16 additions & 0 deletions src/Game.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,20 @@ export class Game {
}),
};
}

getAddedStops() {
return [...this.addedStations.values()].filter(stop => stop.stop_name !== this.pick.start.stop_name && stop.stop_name !== this.pick.end.stop_name);
}

toggleStop(stopId) {
if (this.addedStations.has(stopId))
this.removeStation(stopId);
else
this.addStation({ station: stations.find(d => d.stop_unique_id === stopId).stop_name });
}

removeStation(stopId) {
this.addedStations.delete(stopId);
this.parisMap.removeStation(stopId);
}
}
85 changes: 59 additions & 26 deletions src/components/Game.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script setup>
import {onMounted, ref} from 'vue';
import { onMounted, ref } from 'vue';
import * as bootstrap from 'bootstrap';
import {Game} from '../Game.js';
import { Game } from '../Game.js';
import { getUniqueStops } from '../utils.js';
import { searchStations } from '../utils.front.js';
import RulesModal from './RulesModal.vue';
import {getUniqueStops} from '../utils.js';
import {searchStations} from '../utils.front.js';
import FinishModal from './FinishModal.vue';
const sortedStations = getUniqueStops().map(d => d.stop_name).sort();
Expand All @@ -22,19 +22,28 @@ const information = ref(null);
const searchResults = ref([]);
const dropdownIsVisible = ref(false);
const isValid = ref(true);
const addedStops = ref([]);
onMounted(() => {
game.init();
instruction.value = game.instruction;
});
function tryStop() {
const stationName = station.value;
try {
const isFinish = game.addStation({station: stationName});
const isFinish = game.addStation({ station: stationName });
addedStops.value = game.getAddedStops();
if (isFinish) {
information.value = game.getInformation();
const modal = new bootstrap.Modal(document.getElementById('finish-modal'));
modal.show();
}
} catch (e) {
}
catch (e) {
isValid.value = false;
} finally {
}
finally {
station.value = '';
}
}
Expand All @@ -59,33 +68,33 @@ function addNameToInput(event) {
station.value = event.target.textContent;
}
onMounted(() => {
game.init();
instruction.value = game.instruction;
});
function toggleStop(event) {
const stopId = event.target.id;
game.toggleStop(stopId);
}
</script>

<template>
<RulesModal/>
<FinishModal :information="information"/>
<RulesModal />
<FinishModal :information="information" />
<div class="container">
<h1>{{ title }}</h1>
<p id="instruction" v-html="instruction"/>
<svg id="carte"/>
<p id="instruction" v-html="instruction" />
<svg id="carte" />
<div class="dropdown">
<label for="station" class="form-label">Nom d'une station</label>
<input
id="station"
v-model="station"
class="form-control"
:class="{ show: dropdownIsVisible }"
type="text"
placeholder="Rechercher une station à ajouter"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-describedby="station-validation"
@input="handleDropDownVisibility"
@click="handleDropDownVisibility"
id="station"
v-model="station"
class="form-control"
:class="{ show: dropdownIsVisible }"
type="text"
placeholder="Rechercher une station à ajouter"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-describedby="station-validation"
@input="handleDropDownVisibility"
@click="handleDropDownVisibility"
>
<div id="station-validation" class="invalid-feedback" :class="{ 'is-invalid': !isValid }">
{{ invalidFeedback }}
Expand All @@ -101,9 +110,33 @@ onMounted(() => {
<button class="btn btn-primary" @click="tryStop">
Essayer
</button>
<div v-if="addedStops.length > 0" class="stop-list-section">
<p>Stations ajoutées</p>
<ul class="stop-list">
<li v-for="(stop, index) in addedStops" :key="index" class="form-check stop-list__item">
<input
:id="stop.stop_unique_id" class="form-check-input" type="checkbox" :value="stop.stop_unique_id" checked
@click="toggleStop"
>
<label class="form-check-label" :for="stop.stop_unique_id">
{{ stop.stop_name }}
</label>
</li>
</ul>
</div>
</div>
</template>

<style scoped>
.stop-list-section {
margin-top: 1rem;
}
.stop-list {
list-style-type: none;
}
.stop-list__item {
padding-left: 0;
}
</style>
9 changes: 8 additions & 1 deletion src/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ class ParisMap {
.attr('cx', this.#projection(point)[0])
.attr('cy', this.#projection(point)[1])
.attr('r', 3)
.attr('data-stop-id', station.stop_unique_id)
.style('fill', color)
.on('mouseover', () => {
this.#tooltip.style('visibility', 'visible');
Expand All @@ -114,9 +115,15 @@ class ParisMap {
.attr('d', d3.line()(adjacentStop.path.map(p => this.#projection(p))))
.attr('stroke', `#${color}`)
.attr('stroke-width', 2)
.attr('fill', 'none');
.attr('fill', 'none')
.attr('data-stop-ids', `${adjacentStop.from_stop_unique_id},${adjacentStop.to_stop_unique_id}`);
});
}

removeStation(stopId) {
this.#stationsNode.selectAll(`[data-stop-id="${stopId}"]`).remove();
this.#stationsNode.selectAll(`[data-stop-ids*="${stopId}"]`).remove();
}
}

export {
Expand Down

0 comments on commit 7e9a5d9

Please sign in to comment.