From 7e9a5d924bb51554008792dbd898c11840c2914e Mon Sep 17 00:00:00 2001
From: Vincent Hardouin <vincenthardouin@icloud.com>
Date: Tue, 23 Apr 2024 08:35:11 +0200
Subject: [PATCH] feat: allow to toggle stop

---
 src/App.vue             |  6 +--
 src/Game.js             | 16 ++++++++
 src/components/Game.vue | 85 ++++++++++++++++++++++++++++-------------
 src/map.js              |  9 ++++-
 4 files changed, 86 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 38ff555..bbd9f50 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,9 @@ import Game from './components/Game.vue';
 </script>
 
 <template>
-  <Navbar/>
-  <AboutModal/>
-  <Game/>
+  <Navbar />
+  <AboutModal />
+  <Game />
 </template>
 
 <style scoped>
diff --git a/src/Game.js b/src/Game.js
index 6617ed2..c3b5607 100644
--- a/src/Game.js
+++ b/src/Game.js
@@ -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);
+  }
 }
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 8a5b31c..288f770 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -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();
@@ -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 = '';
   }
 }
@@ -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 }}
@@ -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>
diff --git a/src/map.js b/src/map.js
index b23ad48..537a9d8 100644
--- a/src/map.js
+++ b/src/map.js
@@ -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');
@@ -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 {