Compare commits

..

No commits in common. "2491560cd233fc7036bbda660a11a0e23e725ecc" and "28cbb1791b1fa1688f964c138a01bb0188a5ff5f" have entirely different histories.

12 changed files with 162 additions and 542 deletions

View File

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

View File

@ -2,9 +2,21 @@
{ {
"id": 1, "id": 1,
"name": "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"
} }
] ]

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -5,40 +5,22 @@ export interface Line {
id: number id: number
/** E.g.: `10` */ /** E.g.: `10` */
name: string name: string
/** name of the district of origin */
district: string
/** color of the routes on the map */
// map_color: string
/** Hex code */ /** Hex code */
color: string color: string
hover_bg: string
hover_on_bg: string
} }
export type Routes = Array<Route> export type Routes = Array<Route>
export type Point = [number, number]
export type ArrowPoints = [Point,Point,Point,Point]
export interface Route { 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 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>
} }

View File

@ -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),
];
}

View File

@ -1,22 +1,14 @@
import { saveAs } from "file-saver";
import L from "leaflet"; 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; let map: L.Map | null = null;
export function Editor() { export function Editor() {
const container = <div class="h-[98vh] rounded-lg dark:opacity-60" />; 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(() => { onMount(() => {
map = L.map(container as HTMLElement) map = L.map(container as HTMLElement)
@ -25,63 +17,111 @@ export function Editor() {
L.tileLayer("/tiles/{z}/{x}/{y}.jpg", { L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
maxZoom: 18, maxZoom: 18,
minZoom: 12, 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); }).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 ( return (
<div class="grid grid-cols-[20rem_auto]"> <div class="grid grid-cols-[30rem_auto]">
<div> <div>
<h1 class="text-c-primary text-center font-bold text-2xl py-4">AQP combi</h1> <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"> <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
Creador de rutas Creador de rutas
</h2> </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> </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> </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> </div>
<div class="py-[0.5vh] pr-2"> <div class="py-[0.5vh] pr-2">
@ -94,86 +134,3 @@ export function Editor() {
</div> </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>
);
}

View File

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

View File

@ -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 { LineSegmentsIcon } from "../icons/LineSegmentsIcon";
import { Line, Lines, Route, Routes } from "../new_types"; 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() { 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(() => { onMount(() => {
global_map = L.map(container as HTMLElement) const l_map = map(container as HTMLElement)
.setView([-16.40171, -71.53040], 13); .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, maxZoom: 17,
minZoom: 12, 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 ( 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> <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"> <h2 class="bg-c-primary text-white py-2 px-2 font-bold text-lg">
@ -31,8 +31,8 @@ export function Index2() {
<LinesEl /> <LinesEl />
</div> </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)" style="box-shadow: inset 0 0 5px 0px var(--main)"
> >
{container} {container}
@ -68,21 +68,15 @@ function LineEl(props: { line: Line }) {
}); });
return ( 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} /> <LineSegmentsIcon class="px-1" fill={props.line.color} />
<span class="px-2" title={props.line.district}> <span class="px-2">
Linea {props.line.name} Linea {props.line.name}
</span> </span>
<Suspense> <Suspense>
<For each={routesData() ?? []}> <For each={routesData() ?? []}>
{(r) => ( {(r) => (
<RouteEl <RouteEl route={r} color={props.line.color} />
line_name={props.line.name}
route={r}
color={props.line.color}
/>
)} )}
</For> </For>
</Suspense> </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 ( 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} 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>
); );
} }

View File

@ -7,11 +7,6 @@ module.exports = {
extend: { extend: {
colors: { colors: {
"c-primary": "var(--main)", "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)",
}, },
}, },
}, },