(null);
24 |
25 | const { hideMap, mapFollowsHeading, mapHasBorder, mapIs3d, mapIsCircular, mapZoom, pulseMarker, timeAtBottom } = flagStore.get();
26 | const { heading, location, theme } = globalStore.get();
27 | const { mapboxKey } = keyStore.get();
28 |
29 | mapboxgl.accessToken = mapboxKey;
30 |
31 | useEffect(() => {
32 | if (mapContainer.current) {
33 | mapContainer.current.innerHTML = '';
34 | const map = new mapboxgl.Map({
35 | style: theme,
36 | center: [location.longitude, location.latitude],
37 | zoom: parseInt(mapZoom),
38 | pitch: mapIs3d ? 45 : 0,
39 | bearing: mapFollowsHeading ? heading : 0,
40 | container: mapContainer.current,
41 | antialias: true,
42 | attributionControl: false,
43 | });
44 | const size = 100;
45 | const pulsingDot: IPulsingDot = {
46 | width: size,
47 | height: size,
48 | data: new Uint8ClampedArray(size * size * 4),
49 |
50 | onAdd: function () {
51 | const canvas = document.createElement('canvas');
52 | canvas.width = this.width;
53 | canvas.height = this.height;
54 | this.context = canvas.getContext('2d', { willReadFrequently: true });
55 | },
56 |
57 | render: function () {
58 | const duration = 1500;
59 | const t = (performance.now() % duration) / duration;
60 |
61 | const radius = (size / 2) * 0.3;
62 | const outerRadius = (size / 2) * 0.3 * t + radius;
63 |
64 | if (this.context) {
65 | const context = this.context;
66 | const colours = {
67 | mainFill: 'rgba(0, 255, 255, 1)',
68 | outerFill: 'rgba(96, 96, 96, 1)',
69 | pulse: { red: 96, green: 96, blue: 96, alpha: 1 }
70 | }
71 | if (pulseMarker) {
72 | // Draw the outer circle.
73 | context.clearRect(0, 0, this.width, this.height);
74 | context.beginPath();
75 | context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
76 | context.fillStyle = `rgba(${colours.pulse.red}, ${colours.pulse.green}, ${colours.pulse.blue}, ${colours.pulse.alpha - t})`;
77 | context.fill();
78 | }
79 | // Draw the inner circle.
80 | context.beginPath();
81 | context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
82 | context.fillStyle = colours.mainFill;
83 | context.strokeStyle = colours.outerFill;
84 | context.lineWidth = 1 + 4 * (1 - t);
85 | context.fill();
86 | pulseMarker && context.stroke();
87 |
88 | this.data = context.getImageData(0, 0, this.width, this.height).data;
89 | map.triggerRepaint();
90 |
91 | return true;
92 | }
93 | return false;
94 | }
95 | };
96 |
97 | map.on('load', () => {
98 | map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
99 |
100 | map.addSource('dot-point', {
101 | type: 'geojson',
102 | data: {
103 | type: 'FeatureCollection',
104 | features: [{
105 | type: 'Feature',
106 | geometry: {
107 | type: 'Point',
108 | coordinates: [location.longitude, location.latitude]
109 | },
110 | properties: {}
111 | }]
112 | }
113 | });
114 |
115 | map.addLayer({
116 | id: 'layer-with-pulsing-dot',
117 | type: 'symbol',
118 | source: 'dot-point',
119 | layout: {
120 | 'icon-image': 'pulsing-dot'
121 | }
122 | });
123 |
124 | map.on('move', () => {
125 | const newCenter = map.getCenter();
126 | const source = map.getSource('dot-point') as mapboxgl.GeoJSONSource;
127 | if (source) {
128 | source.setData({
129 | type: 'FeatureCollection',
130 | features: [{
131 | type: 'Feature',
132 | geometry: {
133 | type: 'Point',
134 | coordinates: [newCenter.lng, newCenter.lat]
135 | },
136 | properties: {}
137 | }]
138 | });
139 | }
140 | });
141 |
142 | mapIs3d && map.addLayer(
143 | {
144 | 'id': 'add-3d-buildings',
145 | 'source': 'composite',
146 | 'source-layer': 'building',
147 | 'filter': ['==', 'extrude', 'true'],
148 | 'type': 'fill-extrusion',
149 | 'minzoom': 0,
150 | 'paint': {
151 | 'fill-extrusion-color': '#aaa',
152 | 'fill-extrusion-height': ['get', 'height'],
153 | 'fill-extrusion-base': 0,
154 | 'fill-extrusion-opacity': 0.7
155 | }
156 | },
157 | );
158 | });
159 | setMap3D(map);
160 | }
161 |
162 | return () => {
163 | map3D?.remove();
164 | setMap3D(null)
165 | };
166 | }, [theme]); // eslint-disable-line react-hooks/exhaustive-deps
167 |
168 | useEffect(() => {
169 | if (map3D) {
170 | map3D.easeTo({
171 | center: [location.longitude, location.latitude],
172 | zoom: parseInt(mapZoom),
173 | bearing: mapFollowsHeading ? heading : 0,
174 | });
175 | }
176 | }, [location, heading, mapZoom]); // eslint-disable-line react-hooks/exhaustive-deps
177 |
178 | return (
179 |
180 | {timeAtBottom ?
:
}
181 |
189 |
190 | {timeAtBottom ?
:
}
191 |
14 | Altitude: {useImperial ? imperial : metric}
15 |
16 | )
17 | }
18 |
19 | export default Altitude
--------------------------------------------------------------------------------
/src/components/Metrics/Altitude/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Altitude';
--------------------------------------------------------------------------------
/src/components/Metrics/Distance/Distance.tsx:
--------------------------------------------------------------------------------
1 | import valueFormatter from "@functions/valueFormatter";
2 |
3 | import flagStore from "@store/flagStore"
4 | import globalStore from "@store/globalStore"
5 |
6 | const Distance = () => {
7 | const { showDistance, useImperial } = flagStore.get();
8 | const { totalDistance } = globalStore.get();
9 |
10 | const { metric, imperial } = valueFormatter('distance', totalDistance)
11 |
12 | return (
13 |
14 | Distance: {useImperial ? imperial : metric}
15 |
16 | )
17 | }
18 |
19 | export default Distance
--------------------------------------------------------------------------------
/src/components/Metrics/Distance/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Distance';
--------------------------------------------------------------------------------
/src/components/Metrics/Heading/Heading.tsx:
--------------------------------------------------------------------------------
1 | import flagStore from "@store/flagStore";
2 | import globalStore from "@store/globalStore";
3 |
4 | const Heading = () => {
5 | const { heading } = globalStore.get();
6 | const { showHeading } = flagStore.get();
7 |
8 | const compass = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
9 | const cardinal = compass[(((heading + 22.5) % 360) / 45) | 0];
10 |
11 | return (
12 | Heading:
13 | {cardinal}
14 | {heading}°
15 |
16 | )
17 | }
18 |
19 | export default Heading
--------------------------------------------------------------------------------
/src/components/Metrics/Heading/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Heading';
--------------------------------------------------------------------------------
/src/components/Metrics/Heartrate/Heartrate.tsx:
--------------------------------------------------------------------------------
1 | import flagStore from "@store/flagStore"
2 | import globalStore from "@store/globalStore"
3 |
4 | const Heartrate = () => {
5 | const { showHeartrate } = flagStore.get();
6 | const { heartrate } = globalStore.get();
7 | return (
8 | {heartrate === 0 ? `Heartrate: ${heartrate} bpm` : ''}
9 | )
10 | }
11 |
12 | export default Heartrate
13 |
--------------------------------------------------------------------------------
/src/components/Metrics/Heartrate/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Heartrate';
--------------------------------------------------------------------------------
/src/components/Metrics/Metrics.scss:
--------------------------------------------------------------------------------
1 | .metrics-container {
2 | bottom: 8px;
3 | color: #ffffff;
4 | font-family: 'Anek Latin', sans-serif;
5 | font-size: 18px;
6 | height: fit-content;
7 | margin-bottom: -5px;
8 | position: absolute;
9 | right: 266px;
10 | text-align: right;
11 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
12 | width: 500px;
13 | }
--------------------------------------------------------------------------------
/src/components/Metrics/Metrics.tsx:
--------------------------------------------------------------------------------
1 | import Altitude from '@components/Metrics/Altitude';
2 | import Distance from '@components/Metrics/Distance';
3 | import Heading from '@components/Metrics/Heading'
4 | import Heartrate from '@components/Metrics/Heartrate';
5 | import Speed from '@components/Metrics/Speed';
6 |
7 | import flagStore from '@store/flagStore';
8 |
9 | import './Metrics.scss';
10 |
11 | const OtherMetrics = () => {
12 | const { showMetrics } = flagStore.get();
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
12 | Speed: {useImperial ? imperial : metric}
13 |
14 | )
15 | }
16 |
17 | export default Speed
--------------------------------------------------------------------------------
/src/components/Metrics/Speed/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Speed';
--------------------------------------------------------------------------------
/src/components/Metrics/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Metrics';
--------------------------------------------------------------------------------
/src/components/Neighbourhood/Neighbourhood.scss:
--------------------------------------------------------------------------------
1 | .neighbourhood-container {
2 | position: absolute;
3 | width: 100vw;
4 | height: 100vh;
5 | right: 10px;
6 | top: -4px;
7 | text-align: right;
8 |
9 | font-family: 'Hiragino Kaku Gothic Pro', 'Blinker', sans-serif;
10 |
11 | color: #fff;
12 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
13 | 1px 1px 0 #000;
14 | will-change: transform;
15 | transition: transform 0.1s linear;
16 | }
17 |
18 | .neighbourhood {
19 | display: inline-block;
20 | text-align: center;
21 | position: inline-flex;
22 | width: fit-content;
23 | font-size: 24px;
24 | }
--------------------------------------------------------------------------------
/src/components/Neighbourhood/Neighbourhood.tsx:
--------------------------------------------------------------------------------
1 | import { useSpring, animated } from 'react-spring';
2 |
3 | import isJapanese from '@functions/isJapanese';
4 |
5 | import handleSpringProps from '@handlers/handleSpringProps';
6 | import flagStore from '@store/flagStore';
7 | import globalStore from '@store/globalStore';
8 | import triggerStore from '@store/triggerStore';
9 |
10 | import './Neighbourhood.scss';
11 |
12 | const Neighbourhood = () => {
13 | const { disableAnimation } = flagStore.get();
14 | const { neighbourhood } = globalStore.get();
15 | const { show } = triggerStore.neighbourhood.get();
16 |
17 | const neighbourhoodProps = useSpring(handleSpringProps('neighbourhood', show));
18 |
19 | const renderWithMixedFonts = (text) => {
20 | return text.split(/(\s+)/).map((word, index) => {
21 | const style = isJapanese(word) ? { fontFamily: "'Hiragino Kaku Gothic Pro', sans-serif" } : { fontFamily: "'Blinker', sans-serif" };
22 | return {word};
23 | });
24 | };
25 |
26 | const content = neighbourhood || 'Locating...';
27 | const styledText = renderWithMixedFonts(content);
28 |
29 | if (disableAnimation) {
30 | return (
31 |
34 | );
35 | } else {
36 | return (
37 |
38 |
{styledText}
39 |
40 | );
41 | }
42 | };
43 |
44 | export default Neighbourhood;
45 |
--------------------------------------------------------------------------------
/src/components/Neighbourhood/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Neighbourhood';
--------------------------------------------------------------------------------
/src/components/RotatingElements/RotatingElements.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { useSpring, animated } from 'react-spring';
3 |
4 | const RotatingElements = ({ elements, intervalTime = 10000 }) => {
5 | const [index, setIndex] = useState(0);
6 | const [visible, setVisible] = useState(true);
7 |
8 | useEffect(() => {
9 | const interval = setInterval(() => {
10 | setVisible(false);
11 | setTimeout(() => {
12 | setIndex((prevIndex) => (prevIndex + 1) % elements.length);
13 | setVisible(true);
14 | }, 500); // Change element after fade out
15 | }, intervalTime);
16 | return () => clearInterval(interval);
17 | }, [elements.length, intervalTime]);
18 |
19 | const fade = useSpring({
20 | opacity: visible ? 1 : 0,
21 | config: { duration: 500 },
22 | });
23 |
24 | return (
25 |
26 |
27 | {elements[index]}
28 |
29 |
24 | {streamElementsSubscribed
25 | ?
26 | :
27 | }
28 |
29 | )
30 | } else return (
31 |
32 | {streamElementsSubscribed
33 | ?
34 | :
35 | }
36 |
37 | );
38 | };
39 |
40 | export default Rotator;
41 |
--------------------------------------------------------------------------------
/src/components/Rotator/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './Rotator';
--------------------------------------------------------------------------------
/src/components/StreamElements/LatestCheer.tsx:
--------------------------------------------------------------------------------
1 | import globalStore from "@store/globalStore";
2 |
3 | const LatestCheer = () => {
4 | const value = globalStore.streamElements['cheer-latest'].get();
5 |
6 | return (
7 |
8 | {value && (
9 | <>
10 |
Latest Cheer:
11 |
12 | {value.name && `${value.name} - ${value.amount} bits`}
13 |
14 |
15 | )}
16 |
17 |
7 |
Latest Follow:
8 | {value && (
9 |
10 | {value.name && `${value.name}`}
11 |
12 | )}
13 |
14 |
15 |
Latest Sub:
16 | {value && (
17 |
18 | {value.name && `${value.name} - ${value.amount} ${value.amount > 1 ? 'months' : 'month'} - (${tier[value['tier']]})`}
19 |
20 | )}
21 |
22 |
8 | {value && (
9 | <>
10 |
Latest Tip:
11 |
12 | {value.name && `${value.name} - $${value.amount.toFixed(2)} `}
13 |
14 |
15 | )}
16 |
17 |
13 | {value && (
14 | <>
15 |
Recent Cheers:
16 |
17 | {value.map(
18 | (cheer: ICheerProps, index: number) => {
19 | if (index > 0 && index <= 4) {
20 | return (
21 |
22 | {cheer.name && `${cheer.name} - ${cheer.amount} bits `}
23 |
24 | );
25 | } else return null;
26 | }
27 | )}
28 |
29 |
30 | )}
31 |
32 |
12 |
Recent Followers:
13 |
14 | {value.map(
15 | (follow: IFollowProps, index: number) => {
16 | if (index > 0 && index <= 4) {
17 | return (
18 |
19 | {follow['name'] && follow['name']}
20 |
21 | );
22 | } else return null;
23 | }
24 | )}
25 |
26 |
22 |
Recent Subs:
23 |
24 | {value.map((sub, index) => {
25 | if (index < 5) {
26 | return (
27 |
28 | {sub.name && `${sub.name} - ${sub.amount} ${sub.amount > 1 ? 'months' : 'month'} - (${tier[sub.tier]})`}
29 |
30 | );
31 | } else return null;
32 | })}
33 |
34 |
35 |
12 | {value && (
13 | <>
14 |
Recent Tips:
15 |
16 | {value.map(
17 | (tip: ITipProps, index: number) => {
18 | if (index > 0 && index <= 4) {
19 | return (
20 |
21 | {tip.name && `${tip.name} - $${tip.amount.toFixed(2)} `}
22 |
23 | );
24 | } else return null;
25 | }
26 | )}
27 |
28 |
29 | )}
30 |
31 |
23 |
24 |
25 |
26 |
27 |
28 | );
29 | };
30 |
31 | export default StreamElements;
32 |
--------------------------------------------------------------------------------
/src/components/StreamElements/index.tsx:
--------------------------------------------------------------------------------
1 | export { default } from './StreamElements';
--------------------------------------------------------------------------------
/src/components/Weather/Weather.scss:
--------------------------------------------------------------------------------
1 | .weather-container {
2 | position: absolute;
3 | width: 100vw;
4 | height: 100vh;
5 | right: 0;
6 | top: 0;
7 | text-align: right;
8 | font-family: 'Anek Latin', sans-serif;
9 | color: #fff;
10 | text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
11 | font-size: 20px;
12 | }
13 |
14 | .icon-container {
15 | display: inline-flex;
16 | align-items: center; // Aligns the SVG vertically in the center
17 | }
18 |
19 | .icon-main {
20 | padding-top: 10px;
21 |
22 | svg {
23 | height: 2em;
24 | width: 2em;
25 | }
26 | }
27 |
28 | .icon {
29 | svg {
30 | height: 1.5em;
31 | width: 1.5em;
32 | }
33 | }
34 |
35 | .text {
36 | display: inline-flex;
37 | align-items: center; // Aligns the text vertically in the center
38 | padding-bottom: 0.25em;
39 | }
--------------------------------------------------------------------------------
/src/components/Weather/Weather.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from 'react';
2 | import { SvgLoader } from 'react-svgmt';
3 |
4 | import valueFormatter from '@functions/valueFormatter';
5 |
6 | import flagStore from '@store/flagStore';
7 | import globalStore from '@store/globalStore';
8 |
9 | import './Weather.scss';
10 |
11 | const Weather = () => {
12 | const { useImperial } = flagStore.get();
13 | const { locationData } = globalStore.get();
14 |
15 | const icon = `assets/${locationData?.weather?.[0]?.icon}.svg`;
16 | const max = `assets/cloud-arrow-up.svg`
17 | const min = `assets/cloud-arrow-down.svg`
18 |
19 | const feels_like = valueFormatter('temperature', locationData.main.feels_like)
20 | const temp = valueFormatter('temperature', locationData.main.temp)
21 | const temp_max = valueFormatter('temperature', locationData.main.temp_max)
22 | const temp_min = valueFormatter('temperature', locationData.main.temp_min)
23 |
24 | return (
25 | }>
26 |
27 |
28 | {locationData.weather[0].main} /{' '}
29 | {locationData.weather[0].description}
30 |
31 |
32 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | {useImperial ? temp_min.imperial : temp_min.metric}
45 | -
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | {useImperial ? temp_max.imperial : temp_max.metric}
55 |
56 |
57 |
58 |
59 | Current: {useImperial ? temp.imperial : temp.metric}
60 |
61 | Feels like: {useImperial ? feels_like.imperial : feels_like.metric}
62 |
63 |