Skip to content

Commit b465415

Browse files
jeppekroghitkjeppekroghitk
committed
added route completion, and fixed minors noticed on hulk
1 parent 41118bf commit b465415

File tree

5 files changed

+97
-78
lines changed

5 files changed

+97
-78
lines changed

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function App() {
9797

9898

9999
return (
100-
<div className="App h-full min-h-screen w-screen p-3 text-zinc-800 dark:text-white bg-zinc-100 dark:bg-zinc-800 overflow-hidden touch-none">
100+
<div className="App h-full min-h-screen w-screen p-3 text-zinc-800 dark:text-white bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
101101
<LatLongContext.Provider value={contextLatLong}>
102102
<CacheContext.Provider value={cacheContext}>
103103
<PermissionContext.Provider value={geolocationAvailableContext}>

‎src/components/map/MapWrapper.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ function MapWrapper({ mapData, goToView, hideMapOverlay }) {
6969
map.getView().animate({
7070
center: [destinationLat, destinationLong],
7171
zoom: zoomValue,
72+
rotation: 0,
7273
duration: 800,
7374
});
7475
}
@@ -189,7 +190,7 @@ function MapWrapper({ mapData, goToView, hideMapOverlay }) {
189190
// TODO: Remove zoom and info btn
190191

191192
return (
192-
<div className="map-container absolute left-0 top-0 h-screen px-3 pt-12 pb-3">
193+
<div className="map-container absolute left-0 top-0 h-screen px-3 pt-12 pb-3 touch-none">
193194
<div ref={mapElement} className="map rounded-xl overflow-hidden" id="map">
194195
<div id="tooltip" className="tooltip" />
195196
</div>

‎src/components/points-of-interest/PointOfInterest.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function PointOfInterest({
2626
index,
2727
destinationChanged,
2828
nextUnlockableId,
29-
setSource
29+
setSource,
3030
}) {
3131
const { lat, long } = useContext(LatLongContext);
3232
const [proximity, setProximity] = useState(null);
@@ -50,7 +50,7 @@ function PointOfInterest({
5050
);
5151
setProximity(distance);
5252
if (!unlocked && id === nextUnlockableId) {
53-
setUnlocked(distance < 51); // todo magic number/get from config
53+
setUnlocked(distance < 50); // todo magic number/get from config
5454
}
5555
}
5656
}, [latitude, longitude, lat, long, geolocationAvailable]);

‎src/components/routes/RouteCarousel.jsx‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,45 +15,57 @@ function RouteCarousel({
1515
selectedRoute,
1616
}) {
1717
return (
18-
<div className="absolute flex justify-end h-56 left-0 bottom-0 right-0 rounded-lg overflow-hidden w-full">
18+
<>
1919
{!hideMapOverlay && (
20+
<div className="absolute flex justify-end h-56 left-0 bottom-0 right-0 rounded-lg overflow-hidden w-full">
21+
<button
22+
type="button"
23+
className="h-10 mr-3 mt-5 p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
24+
>
25+
<Link
26+
className=""
27+
to={selectedRoute && `/route/${selectedRoute.id}`}
28+
>
29+
<IconCirclePlay className="w-6 h-6" />
30+
</Link>
31+
</button>
32+
<button
33+
onClick={() => setHideMapOverlay(!hideMapOverlay)}
34+
type="button"
35+
className="h-10 mr-5 mt-5 p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
36+
>
37+
<IconMap className="w-6 h-6" />
38+
</button>
39+
<Carousel
40+
className="absolute left-0 bottom-0 right-0 m-5 rounded-lg overflow-hidden max-h-96 md:max-w-lg"
41+
showThumbs={false}
42+
showStatus={false}
43+
showIndicators={false}
44+
autoplay
45+
infiniteLoop
46+
showArrows
47+
swipeable
48+
useKeyboardArrows
49+
emulateTouch
50+
onChange={(index) => onCarouselChange(index)}
51+
>
52+
{routes.map((route) => {
53+
const id = getIdFromApiEndpoint(route);
54+
return <Route key={id} id={id} />;
55+
})}
56+
</Carousel>
57+
</div>
58+
)}
59+
{hideMapOverlay && (
2060
<button
61+
onClick={() => setHideMapOverlay(!hideMapOverlay)}
2162
type="button"
22-
className="h-10 mr-3 mt-5 p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
63+
className="h-10 absolute bottom-5 right-5 p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
2364
>
24-
<Link className="" to={selectedRoute && `/route/${selectedRoute.id}`}>
25-
<IconCirclePlay className="w-6 h-6" />
26-
</Link>
65+
<IconMap className="w-6 h-6" />
2766
</button>
2867
)}
29-
<button
30-
onClick={() => setHideMapOverlay(!hideMapOverlay)}
31-
type="button"
32-
className="h-10 mr-5 mt-5 p-2 rounded text-zinc-100 dark:text-zinc-800 bg-zinc-800 dark:bg-zinc-100 drop-shadow"
33-
>
34-
<IconMap className="w-6 h-6" />
35-
</button>
36-
{!hideMapOverlay && (
37-
<Carousel
38-
className="absolute left-0 bottom-0 right-0 m-5 rounded-lg overflow-hidden max-h-96 md:max-w-lg"
39-
showThumbs={false}
40-
showStatus={false}
41-
showIndicators={false}
42-
autoplay
43-
infiniteLoop
44-
showArrows
45-
swipeable
46-
useKeyboardArrows
47-
emulateTouch
48-
onChange={(index) => onCarouselChange(index)}
49-
>
50-
{routes.map((route) => {
51-
const id = getIdFromApiEndpoint(route);
52-
return <Route key={id} id={id} />;
53-
})}
54-
</Carousel>
55-
)}
56-
</div>
68+
</>
5769
);
5870
}
5971

‎src/components/routes/RoutePage.jsx‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@ function RoutePage() {
2828
const [destinationDistance, setDestinationDistance] = useState(null);
2929
const [destinationIndex, setDestinationIndex] = useState(0);
3030
const [nextUnlockableId, setNextUnlockableId] = useState(null);
31+
const [routeComplete, setRouteComplete] = useState(false);
3132
const [source, setSource] = useState(null);
3233
const { userLatitude, userLongitude } = useContext(LatLongContext);
3334
const { geolocationAvailable } = useContext(PermissionContext);
3435
const audioRef = useRef();
36+
const { fileUrl } = useContext(ApiEndpointContext);
3537
const isIOS =
3638
navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
3739
navigator.userAgent.match(/AppleWebKit/);
@@ -137,6 +139,9 @@ function RoutePage() {
137139
const destinationChanged = () => {
138140
if (pointsOfInterest) {
139141
const destinationPoint = getRelevantDestinationPoint(pointsOfInterest);
142+
if (destinationPoint.length === 0) {
143+
return setRouteComplete(true);
144+
}
140145
const index = pointsOfInterest.findIndex(
141146
(poi) => destinationPoint[0].id === poi.id
142147
);
@@ -145,17 +150,17 @@ function RoutePage() {
145150
setDestinationLatitude(destinationPoint[0].latitude);
146151
setDestinationLongitude(destinationPoint[0].longitude);
147152
}
153+
return false;
148154
};
149155
useEffect(() => {
150156
destinationChanged();
151157
}, [pointsOfInterest]);
152158

153159
if (selectedRoute === null) return null;
154160

155-
const { fileUrl } = useContext(ApiEndpointContext);
156161

157162
return (
158-
<div className="flex flex-col place-items-start pb-28">
163+
<div className="flex flex-col place-items-start pb-36">
159164
<BackButton>Afslut</BackButton>
160165
<h1 className="text-xl font-bold my-3">{selectedRoute.name}</h1>
161166
<div className="relative w-full rounded-lg flex flex-col-reverse gap-1">
@@ -171,49 +176,50 @@ function RoutePage() {
171176
/>
172177
))}
173178
</div>
174-
{/* TODO: Make room for audio player below when playing */}
175179
<div className="fixed flex flex-col left-3 bottom-3 right-3 bg-zinc-200 dark:bg-zinc-700 gap-3 rounded-lg p-3 pb-15 divide-x dark:divide-zinc-200/5">
176-
<div className="flex flex-row justify-between">
177-
<div>
178-
<div className="text-sm text-bold">
179-
Afstand til del
180-
<span className="ml-1 px-2 font-bold rounded-full bg-emerald-700 text-zinc-100 text-sm">
181-
{destinationIndex + 1}
182-
</span>
183-
</div>
184-
<div className="">
185-
{destinationDistance && `${destinationDistance} meter`}
180+
{routeComplete && <h3>You completed the route. Congratulations!</h3>}
181+
{!routeComplete && (
182+
<div className="flex flex-row justify-between">
183+
<div>
184+
<div className="text-sm text-bold">
185+
Afstand til del
186+
<span className="ml-1 px-2 font-bold rounded-full bg-emerald-700 text-zinc-100 text-sm">
187+
{destinationIndex + 1}
188+
</span>
189+
</div>
190+
<div className="">
191+
{destinationDistance && `${destinationDistance} meter`}
192+
</div>
186193
</div>
187-
</div>
188-
<div className="pl-3">
189-
{/* TODO: Make this check for compass */}
190-
{(!orientation || !angle) && (
191-
<button
192-
className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
193-
type="button"
194-
onClick={() => startWaypointer()}
195-
>
196-
Vis mig vej
197-
</button>
198-
)}
199-
{/* TODO: Make this check for compass */}
200-
{orientation && angle && (
201-
<div>
202-
<div className="flex justify-between">
203-
<span className="text-sm text-bold mr-5">Retning</span>
204-
<span className="w-1/2">
205-
<LocationArrow
206-
className="inline w-5"
207-
style={{
208-
transform: `rotate(${-rotation}deg)`,
209-
}}
210-
/>
211-
</span>
194+
<div className="pl-3">
195+
{(!orientation || !angle) && (
196+
<button
197+
className="bg-zinc-700 dark:bg-zinc-200 dark:text-zinc-800 rounded text-sm py-1 px-3"
198+
type="button"
199+
onClick={() => startWaypointer()}
200+
>
201+
Vis mig vej
202+
</button>
203+
)}
204+
{orientation && angle && (
205+
<div>
206+
<div className="flex justify-between">
207+
<span className="text-sm text-bold mr-5">Retning</span>
208+
<span className="w-1/2">
209+
<LocationArrow
210+
className="inline w-5"
211+
style={{
212+
transform: `rotate(${-rotation}deg)`,
213+
}}
214+
/>
215+
</span>
216+
</div>
212217
</div>
213-
</div>
214-
)}
218+
)}
219+
</div>
215220
</div>
216-
</div>
221+
)}
222+
217223
<div>
218224
<audio
219225
className="w-full"

0 commit comments

Comments
 (0)