diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx index 9c08589..898b05b 100644 --- a/lightning/src/components/BadassMap.tsx +++ b/lightning/src/components/BadassMap.tsx @@ -3,10 +3,11 @@ import * as maplibre from 'maplibre-gl'; import MapControls from './MapControls'; import type { JSX } from 'solid-js'; +import type { MapOptions } from 'maplibre-gl'; // deck.gl import { unstable_clientOnly } from 'solid-start'; -const MapScatLayer = unstable_clientOnly( () => import('~/components/MapScatLayer')); +const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer')); const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')); import { arcData, scatData, viewport, setViewport } from '~/root'; @@ -15,25 +16,23 @@ import StyleJson from '~/style/style.json'; export default function BadassMap() { - return ( - <> - setViewport(evt)} - transitionType="flyTo" - > - - - - - - ) as JSX.Element; + return ( setViewport(evt)} + transitionType="flyTo" + > + + + + + + ) as JSX.Element; }; diff --git a/lightning/src/components/MapArcLayer.tsx b/lightning/src/components/MapArcLayer.tsx index 4518a69..6e7a625 100644 --- a/lightning/src/components/MapArcLayer.tsx +++ b/lightning/src/components/MapArcLayer.tsx @@ -4,19 +4,17 @@ import { Layer } from 'solid-map-gl'; import type { JSX } from 'solid-js'; -export default function MapArcLayer(props: any) { - return ( - d.source, - getTargetPosition: (d: any) => d.target, - getSourceColor: [200, 0, 0], - getTargetColor: [0, 230, 0], - getWidth: 6, - } as any)} /> - ) as JSX.Element; +export default function MapArcLayer(props: any) { + return ( d.source, + getTargetPosition: (d: any) => d.target, + getSourceColor: [200, 0, 0], + getTargetColor: [0, 230, 0], + getWidth: 6, + } as any)} />) as JSX.Element; }; diff --git a/lightning/src/components/MapControls.tsx b/lightning/src/components/MapControls.tsx index 0dcc55d..70e1859 100644 --- a/lightning/src/components/MapControls.tsx +++ b/lightning/src/components/MapControls.tsx @@ -10,54 +10,51 @@ import type { export default function MapControls() { + return (<> - return ( - <> + - + - + - + - - - - ) as JSX.Element; + ) as JSX.Element; }; diff --git a/lightning/src/components/MapScatLayer.tsx b/lightning/src/components/MapScatLayer.tsx index 1e6c643..1363e2b 100644 --- a/lightning/src/components/MapScatLayer.tsx +++ b/lightning/src/components/MapScatLayer.tsx @@ -6,17 +6,14 @@ import type { JSX } from 'solid-js'; export default function MapScatLayer(props: any) { - - return ( - d.coordinates, - getRadius: 30, - getFillColor: [255, 140, 0], - getLineColor: [0, 0, 0,], - } as any)} /> - ) as JSX.Element; + return ( d.coordinates, + getRadius: 30, + getFillColor: [255, 140, 0], + getLineColor: [0, 0, 0,], + } as any)} />) as JSX.Element; }; diff --git a/lightning/src/components/MapScenegraphLayer.tsx b/lightning/src/components/MapScenegraphLayer.tsx index 1d80a50..dc40425 100644 --- a/lightning/src/components/MapScenegraphLayer.tsx +++ b/lightning/src/components/MapScenegraphLayer.tsx @@ -4,22 +4,20 @@ import { Layer } from 'solid-map-gl'; import type { JSX } from 'solid-js'; -export default function MapScenegraphLayer(props: any) { - return ( - d.coordinates, - getOrientation: d => [0, Math.random() * 180, 90], - _animations: { - '*': { speed: 5 } - }, - sizeScale: 500, - _lighting: 'pbr', - } as any)} /> - ) as JSX.Element; +export default function MapScenegraphLayer(props: any) { + return ( d.coordinates, + getOrientation: d => [0, Math.random() * 180, 90], + _animations: { + '*': { speed: 5 } + }, + sizeScale: 500, + _lighting: 'pbr', + } as any)} />) as JSX.Element; }; diff --git a/lightning/src/components/StationsContext.tsx b/lightning/src/components/StationsContext.tsx index 808e54e..20e0318 100644 --- a/lightning/src/components/StationsContext.tsx +++ b/lightning/src/components/StationsContext.tsx @@ -2,6 +2,7 @@ import { createContext, useContext, createResource } from "solid-js"; import type { JSX } from "solid-js"; + type ChargingStation = { Name: string PhoneNumer: string @@ -45,20 +46,21 @@ const TEST_PACKET: StationRequest = { const StationsContext = createContext(); +const [stations] = createResource(async () => { + const response = await fetch("https://kevinfwu.com/getnearest", { + method: "POST", + cache: 'default', + body: JSON.stringify(TEST_PACKET), + headers: { 'Content-Type': 'application/json' } + }); return await response.json() as Promise; +}); + + export function StationsProvider(props: any) { - const [stations] = createResource(async () => { - const response = await fetch("https://kevinfwu.com/getnearest", { - method: "POST", - cache: 'default', - body: JSON.stringify(TEST_PACKET), - headers: { 'Content-Type': 'application/json' } - }); return await response.json() as Promise; - }); - return ( - - {props.children} - - ) as JSX.Element; + return ( + {props.children} + ) as JSX.Element; }; + export function getStations() { return useContext(StationsContext); }; diff --git a/lightning/src/components/Toolbox.tsx b/lightning/src/components/Toolbox.tsx index 2eb617d..75a13a5 100644 --- a/lightning/src/components/Toolbox.tsx +++ b/lightning/src/components/Toolbox.tsx @@ -5,25 +5,22 @@ import { setViewport } from '~/root'; export function Toolbox() { + return (
    +

    Toolbox

    - return ( -
      -

      Toolbox

      +
      • -
      • +
      • -
      • - -
    - ) as JSX.Element; +
) as JSX.Element; }; diff --git a/lightning/src/root.css b/lightning/src/root.css index 6f66be5..c4c0889 100644 --- a/lightning/src/root.css +++ b/lightning/src/root.css @@ -4,12 +4,11 @@ body { font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } + a { margin-right: 1rem; } -main { - background-color: hsla(230, 19%, 17%, 0); -} + h1 { color: #36EEE0; text-transform: uppercase; @@ -17,14 +16,19 @@ h1 { font-weight: 300; line-height: 1.1; } + p { line-height: 1.35; } + @media (min-width: 480px) { + h1 { max-width: none; } + p { max-width: none; } + } diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx index 96c344c..a64efbe 100644 --- a/lightning/src/root.tsx +++ b/lightning/src/root.tsx @@ -1,11 +1,20 @@ // @refresh reload -import { Suspense, createSignal, createEffect } from "solid-js"; +import { Suspense, createSignal } from "solid-js"; import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start"; import "./root.css"; import BadassMap from './components/BadassMap'; -import { StationsProvider } from "./components/StationsContext"; import type { Viewport } from "solid-map-gl"; +import type { JSX } from "solid-js"; + +type ScatData = { + coordinates: number[] +} + +type ArcData = { + source: number[], + target: number[] +} const TEST = { FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] }, @@ -16,7 +25,7 @@ const TEST = { NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], }, }; -export const [scatData, setScatData] = createSignal([ +export const [scatData, setScatData] = createSignal([ { coordinates: TEST.FAN.coords }, { coordinates: TEST.GDT.coords }, { coordinates: TEST.BBC.coords }, @@ -25,7 +34,7 @@ export const [scatData, setScatData] = createSignal([ { coordinates: TEST.NSE.coords }, ]); -export const [arcData, setArcData] = createSignal([ +export const [arcData, setArcData] = createSignal([ { source: TEST.FAN.coords, target: TEST.GDT.coords }, { source: TEST.FAN.coords, target: TEST.BBC.coords }, { source: TEST.FAN.coords, target: TEST.GAR.coords }, @@ -33,32 +42,29 @@ export const [arcData, setArcData] = createSignal([ ]); export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike); - export const [viewport, setViewport] = createSignal(); export default function Root() { - return ( - - - Ride the Lightning - - - - - - - - Map - About - - - - - - - - - - - ); + return ( + + Ride the Lightning + + + + + + + + Map + About + + + + + + + + + + ) as JSX.Element; }; diff --git a/lightning/src/routes/[...404].tsx b/lightning/src/routes/[...404].tsx index fa43b53..73750d0 100644 --- a/lightning/src/routes/[...404].tsx +++ b/lightning/src/routes/[...404].tsx @@ -1,19 +1,24 @@ -import { Title } from "solid-start"; -import { HttpStatusCode } from "solid-start/server"; +import { Title } from 'solid-start'; +import { HttpStatusCode } from 'solid-start/server'; + +import type { JSX } from 'solid-js'; + export default function NotFound() { - return ( -
- Not Found - -

Page Not Found

-

- Visit{" "} - - start.solidjs.com - {" "} - to learn how to build SolidStart apps. -

-
- ); -} + return (
+ Not Found + + + +

Page Not Found

+ +

+ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +

+ +
) as JSX.Element; +}; diff --git a/lightning/src/routes/about.tsx b/lightning/src/routes/about.tsx index 04d5abc..95addef 100644 --- a/lightning/src/routes/about.tsx +++ b/lightning/src/routes/about.tsx @@ -4,59 +4,52 @@ import type { JSX } from 'solid-js'; export default function Home() { + return (
+ About Lightning - return ( -
- About Lightning -

About

- - -

- - github.com/adoyle0/maps - -

-
- ) as JSX.Element; +

About

+ + + + + +

+ github.com/adoyle0/maps +

+ +
) as JSX.Element; }; diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx index c737baf..2fa45b9 100644 --- a/lightning/src/routes/index.tsx +++ b/lightning/src/routes/index.tsx @@ -4,9 +4,8 @@ import type { JSX } from 'solid-js'; export default function Home() { - return ( -
- Ride the Lightning -
- ) as JSX.Element; + return (
+ Ride the Lightning + +
) as JSX.Element; };