package.json

@@ -4,7 +4,7 @@
   "description": "",
   "scripts": {
     "start": "vite",
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },

public/n/lines.json

@@ -2,9 +2,21 @@
     {
         "id": 1,
         "name": "1",
-        "district": "Hunter/Tiabaya",
+        "color": "#ea4fb2"
-        "color": "#ea4fb2",
+    },
-        "hover_bg": "#ea4fb2",
+    {
-        "hover_on_bg": "white"
+        "id": 2,
+        "name": "2",
+        "color": "black"
+    },
+    {
+        "id": 3,
+        "name": "3",
+        "color": "#eab308"
+    },
+    {
+        "id": 4,
+        "name": "4",
+        "color": "#ff7300"
     }
 ]

src/App.tsx

@@ -3,7 +3,6 @@ import { Index } from "./pages/Index";
 import { Route, Router } from "@solidjs/router";
 import { Editor } from "./pages/Editor";
 import { Index2 } from "./pages/Index2";
-import { Arrow } from "./pages/Arrow";
 
 export default function() {
     return (
@@ -12,7 +11,6 @@ export default function() {
                 <Route path="/" component={Index} />
                 <Route path="/new" component={Index2} />
                 <Route path="/editor" component={Editor} />
-                <Route path="/arrow" component={Arrow} />
             </Router>
         </>
     );

src/new_types.ts

@@ -5,40 +5,22 @@ export interface Line {
     id: number
     /** E.g.: `10` */
     name: string
-    /** name of the district of origin */
-    district: string
-    /** color of the routes on the map */
-    // map_color: string
     /** Hex code */
     color: string
-    hover_bg: string
-    hover_on_bg: string
 }
 
 export type Routes = Array<Route>
 
-export type Point = [number, number]
-export type ArrowPoints = [Point,Point,Point,Point]
-
 export interface Route {
-    /**
+    /** Name that differentiates this route from others
-     * Name that identifies this route
+     * from the same line.
+     *
+     * May contain any combinatior of letters and numbers.
+     *
+     * E.g.: `A`, `B2-A`
      */
     name: string
-    /**
+    /** `[lat,lng]`, stored as arrays to save space in JSON */
-     * Set of points that buses running this route go to
+    points: Array<[number, number]>
-     */
-    departure: Array<Point>
-    /**
-     * Arrows that indicate in which direction the buses go
-     */
-    departure_arrows: Array<ArrowPoints>
-    /**
-     * Set of points that buses running this route go to
-     */
-    return: Array<Point>
-    /**
-     * Arrows that indicate in which direction the buses go
-     */
-    return_arrows: Array<ArrowPoints>
 }
+

src/pages/Arrow.tsx

@@ -1,195 +0,0 @@
-import L from "leaflet";
-import { createEffect, createSignal, onMount } from "solid-js";
-
-let map: L.Map | null = null;
-
-export function Arrow() {
-    const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
-    const [first_point, set_first_point] = createSignal<L.LatLng | null>(null);
-    const [second_point, set_second_point] = createSignal<L.LatLng | null>(null);
-    const [points, setPoints] = createSignal<Array<[number, number]>>([]);
-    let arrows: Array<[L.LatLng, L.LatLng, L.LatLng, L.LatLng]> = [];
-
-    onMount(() => {
-        map = L.map(container as HTMLElement)
-            .setView([-16.40171, -71.53040], 13);
-
-        L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
-            maxZoom: 18,
-            minZoom: 12,
-            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
-        }).addTo(map);
-
-        // Set up click logic
-        map.addEventListener("click", (ev) => {
-            const point = ev.latlng;
-
-            if (first_point() === null) {
-                // Set first point
-                set_first_point(point);
-                return;
-            }
-            if (second_point() === null) {
-                set_second_point(point);
-
-                // Compute the triangle
-                const p1 = first_point()!;
-
-                const points = compute_triangle_points(p1, point);
-
-                // Draw the arrow.
-                L.polygon(points, { color: "red" }).addTo(map!);
-                arrows.push(points);
-
-                // Reset
-                set_first_point(null);
-                set_second_point(null);
-            }
-        });
-    });
-
-    let current_polyline: L.Polyline | null = null;
-    createEffect(() => {
-        const dots = points().map(([lat, lng]) => ({ lat, lng }));
-        if (dots.length === 0) {
-            current_polyline?.removeFrom(map!);
-            current_polyline = null;
-        }
-
-        current_polyline = L.polyline(dots, { color: "red" });
-        current_polyline.addTo(map!);
-    });
-
-
-    return (
-        <div class="grid grid-cols-[30rem_auto]">
-            <div>
-                <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
-                <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
-                    Creador de flechas
-                </h2>
-
-                <p class="px-2">
-                    Ingresá una ruta.
-                    <br />
-                    Haz click en un punto de la ruta (punto inicial)
-                    <br />
-                    Haz click en otro punto de la ruta (punto final)
-                    <br />
-                    Un triangulo se creará en el medio, apuntdando hacia
-                    el punto final
-                </p>
-
-                <div class="px-2 py-4">
-                    Ruta:
-                    <br />
-                    <textarea
-                        class="inline-block w-full bg-black text-white p-1 my-2 rounded"
-                        name="" id=""
-                        onInput={(e) => setPoints(JSON.parse(e.target.value))}
-                    />
-
-                    Puntos:
-
-                    <div>
-                        Punto 1: {first_point()?.lat ?? "<vacio>"}, {first_point()?.lng ?? "<vacio>"}
-                        <br />
-                        Punto 2: {second_point()?.lat ?? "<vacio>"}, {second_point()?.lng ?? "<vacio>"}
-                    </div>
-
-                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
-                        onClick={() => {
-                            navigator.clipboard.writeText(JSON.stringify(arrows))
-                                .then(() => alert("copiado"))
-                                .catch(() => alert("error copiando"));
-                        }}
-                    >
-                        Copiar flechas
-                    </button>
-                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
-                        onClick={() => {
-                            const confirmation = confirm("¿Estas seguro? Se perderán todos los puntos");
-                            if (confirmation) {
-                                setPoints([]);
-                                set_first_point(null);
-                                set_second_point(null);
-                                arrows = [];
-                            }
-                        }}
-                    >
-                        Reiniciar
-                    </button>
-                </div>
-            </div>
-            <div class="py-[0.5vh] pr-2">
-                <div class="rounded-lg overflow-hidden p-1"
-                    style="box-shadow: inset 0 0 5px 0px var(--main)"
-                >
-                    {container}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-
-/**
- *    p0
- *    /\
- *   /__\
- * p1    p2
- *
- * [p0, p1, p2]
- *
- * Calculates the points for a isosceles triangle
- * that points toward the passed line
- *
- * @param start The starting point
- */
-function compute_triangle_points(start: L.LatLng, end: L.LatLng): [L.LatLng, L.LatLng, L.LatLng, L.LatLng] {
-    // Determines the size of the triangle
-    const delta = (start.lat < end.lat) ? 0.0002 : -0.0002;
-
-    const { lat: x1, lng: y1 } = start;
-    const { lat: x2, lng: y2 } = end;
-    // Middle point
-    const [x3, y3] = [(x1 + x2) / 2, (y1 + y2) / 2];
-
-    // Compute the angle of the rect
-    // what do you call the "pendiente" of a rect?
-    const pendiente = (y2 - y1) / (x2 - x1);
-    const angle = Math.atan(pendiente);
-
-    // Vector pointing upwards
-    const [vx, vy] = [delta, 0];
-
-    // Rotate that vector to get the delta for each component
-    const [nvx, nvy] = [
-        (vx * Math.cos(angle)) - (vy * Math.sin(angle)),
-        (vx * Math.sin(angle)) + (vy * Math.cos(angle)),
-    ];
-    // Round to 5 decimals
-    const [x_delta, y_delta] = [
-        (Math.round(nvx * 100000)) / 100000,
-        (Math.round(nvy * 100000)) / 100000,
-    ];
-
-    // Use x_delta and y_delta to get the neccesary points
-
-    // Top
-    const [x4, y4] = [x3 + x_delta, y3 + y_delta];
-    // Bottom
-    const [x5, y5] = [x3 - x_delta, y3 - y_delta];
-    // Left
-    const [x6, y6] = [x5 + y_delta, y5 - x_delta];
-    // Right
-    const [x7, y7] = [x5 - y_delta, y5 + x_delta];
-
-    return [
-        new L.LatLng(x4, y4),
-        new L.LatLng(x6, y6),
-        new L.LatLng(x3, y3),
-        new L.LatLng(x7, y7),
-    ];
-}
-

src/pages/Editor.tsx

@@ -1,22 +1,14 @@
+import { saveAs } from "file-saver";
 import L from "leaflet";
-import { Accessor, createEffect, createResource, createSignal, For, onMount, Setter } from "solid-js";
+import { createEffect, createSignal, For, onMount } from "solid-js";
-import { Line, Route } from "../new_types";
 
 let map: L.Map | null = null;
 
 export function Editor() {
     const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
-    const [route_name, set_route_name] = createSignal("");
+    const [points, setPoints] = createSignal<Array<L.LatLng>>([]);
-    const [departure_points, set_departure_points] = createSignal<Array<L.LatLng>>([]);
-    const [return_points, set_return_points] = createSignal<Array<L.LatLng>>([]);
 
-    const [lines] = createResource<Array<Line>>(async() => {
+    let currentPolyline: L.Polyline | null = null;
-        const data = await fetch("/n/lines.json");
-        if (!data.ok) {
-            throw new Error("Error fetching");
-        }
-        return data.json();
-    });
 
     onMount(() => {
         map = L.map(container as HTMLElement)
@@ -25,63 +17,111 @@ export function Editor() {
         L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
             maxZoom: 18,
             minZoom: 12,
-            attribution: "Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
         }).addTo(map);
+
+        // Set up click logic
+        map.addEventListener("click", (ev) => {
+            const click_lat_lng = ev.latlng;
+
+            // Update the state
+            setPoints((x) => [...x, click_lat_lng]);
+            console.log(click_lat_lng);
+        });
     });
 
-    const gen_route = () => {
+    // Re-draws the polyline
-        const new_route: Route = {
+    createEffect(() => {
-            name: route_name(),
+        const p = points();
-            departure: departure_points().map(({lat,lng}) => [lat,lng]),
+
-            departure_arrows: [],
+        // Delete the polyline
-            return: return_points().map(({lat,lng}) => [lat,lng]),
+        if (p.length === 0) {
-            return_arrows: [],
+            if (currentPolyline !== null) {
+                currentPolyline.removeFrom(map!);
+            }
+            //
+        } else {
+            // delete previous polyline, if any
+            if (currentPolyline !== null) {
+                currentPolyline.removeFrom(map!);
+            }
+
+            currentPolyline = L.polyline(p, {color: "red"});
+            currentPolyline.addTo(map!);
+        }
+
+    });
+
+    const saveJson = () => {
+        const jsonData = JSON.stringify(points().map((obj) => [obj.lat,obj.lng]));
+        const file = new Blob([jsonData], {type: "application/json"});
+        saveAs(file, "output.json");
     };
 
-        navigator.clipboard.writeText(JSON.stringify(new_route))
+    const copyPoints = () => {
-            .then(() => alert("Copied to clipboard"))
+        const jsonData = JSON.stringify(points().map((obj) => [obj.lat,obj.lng]));
-            .catch(() => alert("Error copying to clipboard"));
+        navigator.clipboard.writeText(jsonData)
+            .then(() => alert("Copiado"))
+            .catch(() => alert("Error al copiar."));
     };
 
     return (
-        <div class="grid grid-cols-[20rem_auto]">
+        <div class="grid grid-cols-[30rem_auto]">
             <div>
                 <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
                 <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
                     Creador de rutas
                 </h2>
 
-                <div class="px-2">
+                <p class="px-2">
-                    <p>Selecciona una linea:</p>
+                    Haz click en cualquier parte del mapa para empezar.
-                    <select name="line_selection" class="bg-c-bg text-c-on-bg w-full border border-c-on-bg rounded p-2">
+                    <br />
-                        <For each={lines()}>
+                    Luego, haz click izquierdo en el mapa para agregar un
-                            {(line) => <option value=":D">{line.id} - {line.district}</option>}
+                    punto.
+                    <br />
+                    Haz click en el boton "Retroceder" para borrar el último punto.
+                    <br />
+                    Haz click en el boton "Reiniciar" para borrar todos los puntos.
+                    <br />
+                    Presiona el boton "Guardar" para generar las
+                    coordenadas de la ruta.
+                </p>
+
+                <div class="px-2 py-4">
+                    Puntos:
+                    <br />
+                    <div class="h-40 overflow-scroll p-2 my-2 rounded border-2 border-c-primary">
+                        <For each={points()}>
+                            {(p) => <p class="font-mono">{p.lat},{p.lng}</p>}
                         </For>
-                    </select>
-                    <p class="pt-2 pb-1">Nombre de la ruta (ejm: B2-A):</p>
-                    <input type="text" class="bg-c-bg text-c-on-bg w-full border border-c-on-bg rounded p-2"
-                        value={route_name()}
-                        onInput={(e) => set_route_name(e.target.value)}
-                    />
-
-                    <RouteSelector route_type="Ida" district={"TODO"} color="red"
-                        points={departure_points}
-                        setPoints={set_departure_points}
-                    />
-                    <RouteSelector route_type="Vuelta" district={"TODO"} color="blue"
-                        points={return_points}
-                        setPoints={set_return_points}
-                    />
-
-                    <div class="text-left">
-
-                        <button
-                            class="bg-green-400 text-black py-1 px-4 rounded"
-                            onClick={gen_route}
-                        >
-                            Copiar JSON
-                        </button>
                     </div>
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={() => {
+                            if (points().length >= 1) {
+                                setPoints((x) => x.slice(0, -1));
+                            }
+                        }}
+                    >
+                        Retroceder
+                    </button>
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={() => {
+                            const confirmation = confirm("¿Estas seguro? Se perderán todos los puntos");
+                            if (confirmation) setPoints([]);
+                        }}
+                    >
+                        Reiniciar
+                    </button>
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={copyPoints}
+                    >
+                        Copiar puntos
+                    </button>
+                    <button class="bg-c-primary text-white py-2 px-4 rounded mr-2"
+                        onClick={saveJson}
+                    >
+                        Guardar
+                    </button>
                 </div>
             </div>
             <div class="py-[0.5vh] pr-2">
@@ -94,86 +134,3 @@ export function Editor() {
         </div>
     );
 }
-
-function RouteSelector(props: {
-    route_type: "Ida"|"Vuelta",
-    district: string,
-    color: string,
-    points: Accessor<Array<L.LatLng>>,
-    setPoints: Setter<Array<L.LatLng>>,
-}) {
-    const [active, setActive] = createSignal(false);
-    const [points, setPoints] = [props.points, props.setPoints];
-    let current_polyline: L.Polyline | undefined = undefined;
-
-    const click_listener: L.LeafletMouseEventHandlerFn = (ev) => {
-        const latlng = ev.latlng;
-        setPoints((x) => [...x, latlng]);
-    };
-
-    const toggle_status = () => {
-        const new_status = !(active());
-        setActive(new_status);
-
-        if (new_status === true) {
-            map!.addEventListener("click", click_listener);
-        } else {
-            map!.removeEventListener("click", click_listener);
-        }
-    };
-
-    createEffect(() => {
-        const latlngs = points();
-        if (latlngs.length === 0) {
-            current_polyline?.removeFrom(map!);
-            current_polyline = undefined;
-        } else {
-            current_polyline?.removeFrom(map!);
-            current_polyline = L.polyline(latlngs, {color: props.color});
-            current_polyline.addTo(map!);
-        }
-    });
-
-    const pop = () => {
-        setPoints((p) => p.slice(0, -1));
-    };
-
-    const active_classes = () => `${active() ? "border-green-400" : "border-transparent"}`;
-    const button_classes = () => `${active() ? "animate-pulse" : ""}`;
-    const direction_text = () => {
-        if (props.route_type === "Ida") return `Desde ${props.district} hacia el centro`;
-        else return `Desde el centro hacia ${props.district}`;
-    };
-    return (
-        <div class={`p-1 rounded my-2 border-2 ${active_classes()}`}>
-            <h2 class="text-lg underline">Ruta de {props.route_type}</h2>
-            <p>{direction_text()}</p>
-
-            <div class="border border-c-on-bg rounded p-1 my-2">
-                Puntos:
-                <br />
-                <div class="h-32 overflow-x-hidden overflow-y-scroll">
-                    <For each={points()}>
-                        {(point) => <div class="whitespace-nowrap overflow-hidden text-sm">{point.lat}; {point.lng}</div>}
-                    </For>
-                </div>
-            </div>
-
-            <div class="text-right">
-                <button
-                    class={"bg-green-400 text-black py-1 px-2 mr-1 rounded"}
-                    onClick={pop}
-                >
-                    Retroceder
-                </button>
-                <button
-                    class={`bg-green-400 text-black py-1 px-4 rounded ${button_classes()}`}
-                    onClick={toggle_status}
-                >
-                    {active() ? "Seleccionando..." : "Empezar selección"}
-                </button>
-            </div>
-        </div>
-    );
-}
-

src/pages/Index.tsx

@@ -97,20 +97,23 @@ function RouteEl(props: { route: Route, parent_id: number, color: string }) {
     });
 
     createEffect(() => {
+        if (points.state === "ready") {
             // Render the dots into the map
-        if (!points()) return;
             const coords = points()!.data[0]!.ruta_json;
 
             const line = polyline(coords, { color: props.color});
             line.addTo(g_map!);
+        }
     });
 
     createEffect(() => {
+        if (return_points.state === "ready") {
             // Render the dots into the map
             const coords = return_points()!.data[0]!.ruta_json;
 
             const line = polyline(coords, { color: props.color});
             line.addTo(g_map!);
+        }
     });
 
     return (

src/pages/Index2.tsx

@@ -1,28 +1,28 @@
-import L from "leaflet";
+import { Map, map, polyline, tileLayer } from "leaflet";
-import { createEffect, createResource, createSignal, For, onMount, Suspense } from "solid-js";
+import { createResource, For, onMount, Suspense } from "solid-js";
 import { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
 import { Line, Lines, Route, Routes } from "../new_types";
 
-let global_map: L.Map | null = null;
+let g_map: Map | null = null;
-const [global_count, set_global_count] = createSignal(0);
 
 export function Index2() {
-    const container = <div class="md:h-[98vh] h-[65vh] md:rounded-lg dark:opacity-60" />;
+    const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />;
 
     onMount(() => {
-        global_map = L.map(container as HTMLElement)
+        const l_map = map(container as HTMLElement)
             .setView([-16.40171, -71.53040], 13);
+        g_map = l_map;
 
-        L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
+        tileLayer("/tiles/{z}/{x}/{y}.jpg", {
             maxZoom: 17,
             minZoom: 12,
-            attribution: "Map data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+            attribution: "&copy; Map data <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
-        }).addTo(global_map);
+        }).addTo(l_map);
     });
 
     return (
-        <div class="grid md:grid-cols-[15rem_auto] md:grid-rows-none grid-rows-[65vh_35vh]">
+        <div class="grid grid-cols-[15rem_auto]">
-            <div class="md:h-screen overflow-scroll">
+            <div class="h-screen overflow-scroll">
                 <h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1>
 
                 <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
@@ -31,8 +31,8 @@ export function Index2() {
 
                 <LinesEl />
             </div>
-            <div class="md:py-[0.5vh] md:pr-2">
+            <div class="py-[0.5vh] pr-2">
-                <div class="md:rounded-lg overflow-hidden md:p-1"
+                <div class="rounded-lg overflow-hidden p-1"
                     style="box-shadow: inset 0 0 5px 0px var(--main)"
                 >
                     {container}
@@ -68,21 +68,15 @@ function LineEl(props: { line: Line }) {
     });
 
     return (
-        <div
+        <div style={`color: ${props.line.color}`}>
-            style={`color: ${props.line.color};--hover-bg: ${props.line.hover_bg};--hover-on-bg: ${props.line.hover_on_bg}`}
-        >
             <LineSegmentsIcon class="px-1" fill={props.line.color} />
-            <span class="px-2" title={props.line.district}>
+            <span class="px-2">
                 Linea {props.line.name}
             </span>
             <Suspense>
                 <For each={routesData() ?? []}>
                     {(r) => (
-                        <RouteEl
+                        <RouteEl route={r} color={props.line.color} />
-                            line_name={props.line.name}
-                            route={r}
-                            color={props.line.color}
-                        />
                     )}
                 </For>
             </Suspense>
@@ -90,132 +84,17 @@ function LineEl(props: { line: Line }) {
     );
 }
 
-function RouteEl(props: {
+function RouteEl(props: { route: Route, color: string }) {
-    line_name: string,
+    // Render the dots into the map
-    route: Route,
+    const coords = props.route.points.map(([lat,lng]) => ({lat, lng}));
-    color: string,
+    const line = polyline(coords, { color: props.color});
-}) {
+    line.addTo(g_map!);
-    const [departure_active, set_departure_active] = createSignal(false);
-    const [return_active, set_return_active] = createSignal(false);
-    const [departure_count, set_departure_count] = createSignal(0);
-    const [return_count, set_return_count] = createSignal(0);
 
-    // Create departure and return polylines
-    const departure_polyline = L.polyline(props.route.departure, { color: props.color });
-    const return_polyline = L.polyline(props.route.return, { color: props.color });
-
-    // Rended the lines into the map
-    createEffect(() => {
-        if (global_count() === 0 || departure_count() > 0) {
-            departure_polyline.addTo(global_map!);
-        } else {
-            departure_polyline.removeFrom(global_map!);
-        }
-    });
-    createEffect(() => {
-        // if global count === 0, then no route is focused.
-        // in that case, all routes should be rendered
-        if (global_count() === 0 || return_count() > 0) {
-            return_polyline.addTo(global_map!);
-        } else {
-            return_polyline.removeFrom(global_map!);
-        }
-    });
-
-    const toggle_departure = () => {
-        const currently_active = departure_active();
-        if (currently_active) {
-            set_global_count((c) => c - 1);
-            set_departure_count((c) => c - 1);
-            set_departure_active(false);
-        } else {
-            set_global_count((c) => c + 1);
-            set_departure_count((c) => c + 1);
-            set_departure_active(true);
-        }
-    };
-    const toggle_return = () => {
-        const currently_active = return_active();
-        if (currently_active) {
-            set_global_count((c) => c - 1);
-            set_return_count((c) => c - 1);
-            set_return_active(false);
-        } else {
-            set_global_count((c) => c + 1);
-            set_return_count((c) => c + 1);
-            set_return_active(true);
-        }
-    };
-
-    const departure_classes = () => {
-        if (departure_count() > 0) {
-            return "bg-r-hover-bg text-r-hover-on-bg";
-        } else {
-            return "";
-        }
-    };
-    const return_classes = () => {
-        if (return_count() > 0) {
-            return "bg-r-hover-bg text-r-hover-on-bg";
-        } else {
-            return "";
-        }
-    };
     return (
-        <button
+        <div class="pl-10">
-            class="grid grid-cols-[auto_2.75rem_3.5rem] w-full text-left cursor-pointer"
-        >
-            <span
-                class={"pl-10 border-2 border-transparent hover:border-r-hover-bg"}
-                onMouseEnter={() => {
-                    set_global_count((c) => c + 1);
-                    set_departure_count((c) => c + 1);
-                    set_return_count((c) => c + 1);
-                }}
-                onMouseLeave={() => {
-                    set_global_count((c) => c - 1);
-                    set_departure_count((c) => c - 1);
-                    set_return_count((c) => c - 1);
-                }}
-                onClick={() => {
-                    if (departure_count() === 1) {
-                        toggle_departure();
-                    }
-                    if (return_count() === 1) {
-                        toggle_return();
-                    }
-                }}
-            >
             Ruta {props.route.name}
-            </span>
+        </div>
-            <span
-                class={`text-center border-2 border-transparent ${departure_classes()}`}
-                onMouseEnter={() => {
-                    set_global_count((c) => c + 1);
-                    set_departure_count((c) => c + 1);
-                }}
-                onMouseLeave={() => {
-                    set_global_count((c) => c - 1);
-                    set_departure_count((c) => c - 1);
-                }}
-                onClick={toggle_departure}
-            >
-                Ida
-            </span>
-            <span
-                class={`text-center border-2 border-transparent ${return_classes()}`}
-                onMouseEnter={() => {
-                    set_global_count((c) => c + 1);
-                    set_return_count((c) => c + 1);
-                }}
-                onMouseLeave={() => {
-                    set_global_count((c) => c - 1);
-                    set_return_count((c) => c - 1);
-                }}
-                onClick={toggle_return}
-            >
-                Vuelta
-            </span>
-        </button>
     );
 }
+
+

tailwind.config.js

@@ -7,11 +7,6 @@ module.exports = {
         extend: {
             colors: {
                 "c-primary": "var(--main)",
-                "c-bg": "var(--bg)",
-                "c-on-bg": "var(--on-bg)",
-                // colors for the routes colors
-                "r-hover-bg": "var(--hover-bg)",
-                "r-hover-on-bg": "var(--hover-on-bg)",
             },
         },
     },