Adapt to mobile device

package.json

 {
-  "name": "@verdi8/blob-analysis-lab-demo",
+  "name": "blob-analysis-lab-ecole",
   "version": "1.0.0",
   "description": "Un projet éphémère d'analyse de photos de blobs",
   "private": true,
@@ -11,6 +11,9 @@
   "keywords": [],
   "author": "Verdi8",
   "license": "(c) Laurent Knoll",
+  "contributors": [
+    {"name":"Benjamin Bardiaux","url":"https://gitlab.pasteur.fr/bardiaux/"},
+  ],
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
@@ -24,6 +27,7 @@
     "jquery": "3.6.0",
     "paper": "0.12.15",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.2"
     "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0"
   },

src/assets/images/here.svg

@@ -17,7 +17,7 @@
         </g>
     </g>
     <g transform="translate(10 52.27716039866368) rotate(0 34.5 13)">
-        <text x="34.5" y="19" font-family="Indie Flower" font-size="20px" text-anchor="middle" fill="black"
+        <text x="70" y="5" font-family="Indie Flower" font-size="20px" text-anchor="middle" fill="black"
               style="white-space: pre;" direction="ltr">départ
         </text>
     </g>

src/instruments/instrument.ts

@@ -2,6 +2,7 @@ import * as paper from "paper";
 import {Lab} from "../lab";
 import {Coords} from "../data/coords/coords";
 import {PaperUtils} from "../utils/paperUtils";
+import {isMobile} from "react-device-detect";
 
 /**
  * Un instrument d'analyse
@@ -97,6 +98,10 @@ export abstract class AbstractInstrument<C extends Coords> implements Instrument
         // Le dessin de l'instrument
         this.drawIn(this.coords, this.drawGroup);
         this.drawGroup.strokeWidth = 1;
+	// Make strike larger on mobile devices
+	if (isMobile) {
+           this.drawGroup.strokeWidth = 2;
+	}
         this.drawGroup.strokeScaling = false;
         this.drawGroup.strokeColor = this.outlineColor(this.active);
         this.drawGroup.fillColor = this.fillColor(this.active, this.coords);
@@ -107,6 +112,11 @@ export abstract class AbstractInstrument<C extends Coords> implements Instrument
                 let location = this.locateHandle(this.coords, handle);
                 if (location != null) {
 		    let path = new paper.Path.RegularPolygon(location, 4, PaperUtils.absoluteDimension(5));
+		    // make handles circle and larger for mobil devices
+		    if (isMobile) {
+                        path = new paper.Path.Circle(location, PaperUtils.absoluteDimension(18));
+			path.opacity = 0.6;
+		    }
                     path.strokeColor = new paper.Color("black");
                     path.fillColor = new paper.Color("white");
                     if (handle.moveable) {

src/instruments/ruler.ts

@@ -20,13 +20,19 @@ export class Ruler extends AbstractInstrument<VectorCoords> implements Instrumen
         group.addChild(new paper.Path.Line(coords.start, coords.end));
         let tickCount = this.lab.data.rulerTickCount;
         let vector = this.coords.asPointVector();
-        for (let i = 0; i < tickCount; i++) {
-            let tickCircle = new paper.Path.Circle(this.coords.start.add(vector.multiply(i / tickCount)), PaperUtils.absoluteDimension(1));
+        for (let i = 0; i <= tickCount; i++) {
+            let tickCircle = new paper.Path.Circle(this.coords.start.add(vector.multiply(i / tickCount)), PaperUtils.absoluteDimension(3));
             group.addChild(tickCircle);
         }
 
     }
 
+    // change color of ruler when inactive
+    protected override fillColor(active: boolean, coords: VectorCoords): paper.Color | null {
+        let fillColor = active ? new paper.Color("yellow") : new paper.Color("olive");
+        return fillColor;
+    }
+
     locateHandle(coords: VectorCoords, handle: Handle): paper.Point {
         if(handle.name == "startHandle") {
             return coords.start;

src/ui/steps/rulerStep.tsx

@@ -2,6 +2,7 @@ import {Step, StepProps, StepState} from "./step";
 import * as React from "react";
 import {Alert, Button, Form, FormText, InputGroup} from "react-bootstrap";
 import {DEBUG_MODE, DEFAULT_RULER_TICK_COUNT, MAX_RULER_TICK_COUNT, MIN_RULER_TICK_COUNT} from "../../lab";
+import {isMobile} from "react-device-detect";
 
 
 interface RulerStepState extends StepState {