feat: add buttons to zoom in and out

src/components/Game.vue

@@ -80,7 +80,17 @@ function toggleStop(event) {
   <div class="container">
     <h1>{{ title }}</h1>
     <p id="instruction" v-html="instruction" />
-    <svg id="carte" />
+    <div class="map">
+      <svg id="carte" />
+      <div class="btn-group-vertical map__actions">
+        <button id="map-zoom-in" type="button" class="btn btn-outline-primary" aria-label="Zoomer la carte">
+          +
+        </button>
+        <button id="map-zoom-out" type="button" class="btn btn-outline-primary" aria-label="Dézoomer la carte">
+          -
+        </button>
+      </div>
+    </div>
     <div class="dropdown">
       <label for="station" class="form-label">Nom d'une station</label>
       <input
@@ -139,4 +149,14 @@ function toggleStop(event) {
 .stop-list__item {
   padding-left: 0;
 }
+
+.map {
+  position: relative;
+}
+
+.map__actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
 </style>

src/map.js

@@ -63,6 +63,13 @@ class ParisMap {
       const scale = delta > 0 ? 1.2 : 0.8; // Determine whether to zoom in or out based on the direction of the scroll
       this.#svg.transition().call(zoom.scaleBy, scale);
     });
+
+    d3.select('#map-zoom-in').on('click', () => {
+      zoom.scaleBy(this.#svg.transition().duration(750), 1.2);
+    });
+    d3.select('#map-zoom-out').on('click', () => {
+      zoom.scaleBy(this.#svg.transition().duration(750), 0.8);
+    });
   }
 
   #resize() {