summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYuval Adam <_@yuv.al>2025-09-24 11:03:09 +0200
committerYuval Adam <_@yuv.al>2025-09-24 11:03:09 +0200
commit0af176b7511640cf85d3a074afc890099ef0ca04 (patch)
tree042100dd805b62cbdeb36b4ee72e7d617d80f887
parent305ca679a4454add442f9dfb745be4e2bbb5d14b (diff)
Remove old src/ files
-rw-r--r--src/Datetime.tsx28
-rw-r--r--src/Geshem.css30
-rw-r--r--src/Geshem.test.tsx9
-rw-r--r--src/Geshem.tsx80
-rw-r--r--src/Map.tsx99
-rw-r--r--src/Slider.tsx45
-rw-r--r--src/config.tsx19
-rw-r--r--src/index.css14
-rw-r--r--src/index.tsx13
-rw-r--r--src/react-app-env.d.ts1
-rw-r--r--src/setupTests.ts5
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';