diff options
| author | Yuval Adam <_@yuv.al> | 2025-09-24 11:03:09 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-09-24 11:03:09 +0200 |
| commit | 0af176b7511640cf85d3a074afc890099ef0ca04 (patch) | |
| tree | 042100dd805b62cbdeb36b4ee72e7d617d80f887 /src | |
| parent | 305ca679a4454add442f9dfb745be4e2bbb5d14b (diff) | |
Remove old src/ files
Diffstat (limited to 'src')
| -rw-r--r-- | src/Datetime.tsx | 28 | ||||
| -rw-r--r-- | src/Geshem.css | 30 | ||||
| -rw-r--r-- | src/Geshem.test.tsx | 9 | ||||
| -rw-r--r-- | src/Geshem.tsx | 80 | ||||
| -rw-r--r-- | src/Map.tsx | 99 | ||||
| -rw-r--r-- | src/Slider.tsx | 45 | ||||
| -rw-r--r-- | src/config.tsx | 19 | ||||
| -rw-r--r-- | src/index.css | 14 | ||||
| -rw-r--r-- | src/index.tsx | 13 | ||||
| -rw-r--r-- | src/react-app-env.d.ts | 1 | ||||
| -rw-r--r-- | src/setupTests.ts | 5 |
11 files changed, 0 insertions, 343 deletions
diff --git a/src/Datetime.tsx b/src/Datetime.tsx deleted file mode 100644 index 0a8fbcf..0000000 --- a/src/Datetime.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; -import { DateTime as LuxonDateTime } from "luxon"; - -interface DateTimeProps { - images: string[], - slider: number -} - -export function DateTime({ images, slider }: DateTimeProps) { - let datetime = null; - - if (images.length > 0) { - const ds = images[slider].substring(5, 18); - datetime = LuxonDateTime.fromFormat(ds, "yyyyMMdd/HHmm", { - zone: "utc", - }).setZone("Asia/Jerusalem"); - } - - const date = datetime ? datetime.toFormat("dd/MM/y") : ""; - const time = datetime ? datetime.toFormat("HH:mm") : ""; - - return ( - <div id="datetime"> - <div id="date">{date}</div> - <div id="time">{time}</div> - </div> - ); -} diff --git a/src/Geshem.css b/src/Geshem.css deleted file mode 100644 index 2e0f58e..0000000 --- a/src/Geshem.css +++ /dev/null @@ -1,30 +0,0 @@ -#datetime { - position: absolute; - top: 20px; - left: 20px; - color: white; - font-family: monospace; -} - -#date { - font-size: 1.4em; -} - -#time { - font-size: 2.8em; -} - -#slider { - position: fixed; - bottom: 8vh; - width: 30vw; - margin-left: 35vw; -} - -@media only screen and (max-device-width: 812px) { - #slider { - width: 80vw; - margin-left: 8vw; - z-index: 10; - } -} diff --git a/src/Geshem.test.tsx b/src/Geshem.test.tsx deleted file mode 100644 index 8e4652d..0000000 --- a/src/Geshem.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Geshem } from './Geshem'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(<Geshem />, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/Geshem.tsx b/src/Geshem.tsx deleted file mode 100644 index 6e88f19..0000000 --- a/src/Geshem.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { BrowserRouter, Route, Routes } from "react-router-dom"; - -import { Map } from "./Map"; -import { Slider } from "./Slider"; -import { DateTime } from "./Datetime"; - -import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config"; - -import "./Geshem.css"; -import "rc-slider/assets/index.css"; - -export function App() { - return ( - <BrowserRouter> - <Routes> - <Route path="/" element={<Geshem />} /> - <Route path="/history/:date" element={<Geshem />} /> - </Routes> - </BrowserRouter> - ); -} - -interface GeshemProps { - date?: string -} - - -export function Geshem({ date }: GeshemProps) { - const [images, setImages] = useState<string[]>([]); - const [playback] = useState( - date || - new URL(window.location.toString()).searchParams.get("history") || - undefined - ); - const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9); - - useEffect(() => { - const fetchImages = async () => - fetch(`${IMAGES_BASE_URL}/imgs.json`) - .then(res => res.json()) - .then(imgs => imgs["280"]) - .then(setImages); - - const buildPlayback = async () => { - const date = playback; - const hours = Array.from(Array(PLAYBACK_HOURS).keys()).map( - h => `${String(h).padStart(2, "0")}` - ); - const minutes = Array.from(Array(6).keys()).map( - m => `${String(m * 10).padStart(2, "0")}` - ); - const paths = hours.reduce<string[]>( - (acc, h) => - acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)), - [] - ); - setImages(paths); - }; - - let timer: number; - if (playback) buildPlayback(); - else { - fetchImages(); - timer = window.setInterval(fetchImages, 60 * 1000); - } - - return () => { - if (timer !== undefined) clearInterval(timer); - }; - }, [playback]); - - return ( - <> - <Map images={images} slider={slider} /> - <DateTime images={images} slider={slider} /> - <Slider slider={slider} playback={playback} setSlider={setSlider} /> - </> - ); -} diff --git a/src/Map.tsx b/src/Map.tsx deleted file mode 100644 index 39f28fa..0000000 --- a/src/Map.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; -// @ts-ignore -import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax - -import { - MAPBOX_ACCESS_TOKEN, - IMAGE_COORDINATES, - IMAGES_BASE_URL -} from "./config"; - -import "mapbox-gl/dist/mapbox-gl.css"; - -interface MapProps { - slider: number, - images: string[], -} - -export function Map({ slider, images }: MapProps) { - const mapContainer = useRef(null); - const map = useRef<mapboxgl.Map>(null); - - const [lng] = useState(35); - const [lat] = useState(31.9); - const [zoom] = useState(6.3); - const [loaded, setLoaded] = useState(false); - - const prevImages = useRef(images).current; - - useEffect(() => { - if (map.current) return; - - map.current = new mapboxgl.Map({ - accessToken: MAPBOX_ACCESS_TOKEN, - container: mapContainer.current, - style: "mapbox://styles/mapbox/dark-v9", - center: [lng, lat], - zoom: zoom, - minZoom: 5, - maxZoom: 10, - hash: false, - }); - - map.current.on("style.load", () => { - setLoaded(true); - }); - }); - - useEffect(() => { - if (!loaded) return; - - // remove old layers - prevImages.forEach((img) => { - if (!images.includes(img)) { - map.current.removeLayer(`layer-${img}`); - map.current.removeSource(`source-${img}`); - } - }); - - // add new layers - images.forEach((img, i) => { - if (!prevImages.includes(img) && !map.current.getSource(`source-${img}`)) { - map.current.addSource(`source-${img}`, { - type: "image", - url: `${IMAGES_BASE_URL}/${img}`, - coordinates: IMAGE_COORDINATES - }); - map.current.addLayer({ - id: `layer-${img}`, - source: `source-${img}`, - type: "raster", - paint: { - "raster-opacity": 0, - "raster-opacity-transition": { - duration: 0 - } - } - }); - } - }); - }, [loaded, prevImages, images]); - - useEffect(() => { - if (!loaded || !images.length) return; - images[slider] && map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85); - return () => { - // callback will hide the previous layer with the previous slider value - map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0); - } - }, [loaded, slider, images]); - - return ( - <div> - <div ref={mapContainer} className="map-container" style={{ - height: "100vh", - width: "100vw" - }} /> - </div> - ); -} diff --git a/src/Slider.tsx b/src/Slider.tsx deleted file mode 100644 index 50223fc..0000000 --- a/src/Slider.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider'; -import { PLAYBACK_SLOTS } from "./config"; - -// use workaround from: https://github.com/react-component/slider/issues/835#issuecomment-1201805736 -const CustomSlider = RcSlider as React.ForwardRefExoticComponent<SliderProps<number> & React.RefAttributes<SliderRef>>; - -interface GeshemSliderProps { - playback?: string, - slider: number, - setSlider: React.Dispatch<React.SetStateAction<number>> -} - -export function Slider({ playback, slider, setSlider }: GeshemSliderProps) { - const handleStyle = { - height: 40, - width: 40, - border: 0, - marginTop: -10, - boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)" - }; - - const railStyle = { - height: 20, - backgroundColor: "#3498db" - }; - - const trackStyle = { - display: "none" - }; - - return ( - <div id="slider"> - <CustomSlider - min={0} - max={playback ? PLAYBACK_SLOTS : 9} - defaultValue={slider} - handleStyle={handleStyle} - railStyle={railStyle} - trackStyle={trackStyle} - onChange={val => setSlider(val)} - /> - </div> - ); -} diff --git a/src/config.tsx b/src/config.tsx deleted file mode 100644 index 4ca4578..0000000 --- a/src/config.tsx +++ /dev/null @@ -1,19 +0,0 @@ -const hostname = window && window.location && window.location.hostname; - -const PRODUCTION = hostname.includes("geshem"); - -export const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : ""; - -export const MAPBOX_ACCESS_TOKEN = - "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw"; - -export const IMAGE_COORDINATES = [ - [31.7503896894, 34.4878044232], - [37.8574239563, 34.5078463729], - [37.7157066403, 29.4538271687], - [31.9347389087, 29.4373462909] -]; - -export const PLAYBACK_HOURS = 2; - -export const PLAYBACK_SLOTS = (PLAYBACK_HOURS * 6) - 1;
\ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 822eb36..0000000 --- a/src/index.css +++ /dev/null @@ -1,14 +0,0 @@ -body { - margin: 0; - padding: 0; - position: fixed; - overflow: hidden; - width: 100vw; - height: 100vh; - user-select: none; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 353cebb..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import { App } from './Geshem'; - -console.log() - -const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); -root.render( - <React.StrictMode> - <App /> - </React.StrictMode > -);
\ No newline at end of file diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5..0000000 --- a/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// <reference types="react-scripts" /> diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; |
