Restore original functionality

alexburner · Jul 25, 2020 · 5e581d3 · 5e581d3
1 parent dd3d86b
commit 5e581d3
Show file tree

Hide file tree

Showing 32 changed files with 1,539 additions and 18 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "semi": false,
+  "singleQuote": true,
   "trailingComma": "all"
-}
+}
diff --git a/docs/favicon.76ea7194.ico b/docs/favicon.76ea7194.ico
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>daylight</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Natural clock for visualizing daylight hours"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><link rel="icon" href="favicon.76ea7194.ico"><link rel="stylesheet" href="style.0be0e570.css"></head><body> <div id="root"></div> <script src="main.6b73d6db.js"></script> </body></html>
diff --git a/docs/main.6b73d6db.js b/docs/main.6b73d6db.js
diff --git a/docs/main.6b73d6db.js.map b/docs/main.6b73d6db.js.map
diff --git a/docs/style.0be0e570.css b/docs/style.0be0e570.css
diff --git a/docs/style.0be0e570.css.map b/docs/style.0be0e570.css.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "react-redux": "5.0.6",
     "redux": "3.7.2",
     "redux-loop": "4.5.4",
+    "src": "^1.1.2",
     "suncalc": "1.8.0"
   },
   "devDependencies": {
@@ -48,4 +49,4 @@
     "prettier": "2.0.5",
     "typescript": "3.9.6"
   }
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/CNAME b/src/CNAME
@@ -0,0 +1 @@
+daylight.website
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import Countdown from '~components/Countdown'
+import Disc from '~components/Disc'
+import Links from '~components/Links'
+import TimeTable from '~components/TimeTable'
+import Waiting from '~components/Waiting'
+import { WIDTH } from '~singletons/constants'
+import { Space, State } from '~singletons/interfaces'
+
+interface Props {
+  space?: Space
+}
+
+const App = ({ space }: Props): JSX.Element => {
+  if (!space) return <Waiting />
+  return (
+    <div
+      style={{
+        minWidth: `${WIDTH + 32}px`,
+        padding: '6px 16px',
+      }}
+    >
+      <Countdown />
+      <Disc />
+      <TimeTable />
+      <Links />
+    </div>
+  )
+}
+
+const mapStateToProps = ({ space }: State): Props => ({ space })
+
+export default connect(mapStateToProps)(App)
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
@@ -0,0 +1,67 @@
+import moment from 'moment'
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { MS_HOUR } from '~singletons/constants'
+import { State, Suns, Time } from '~singletons/interfaces'
+
+interface Props {
+  now?: Time
+  suns?: Suns
+}
+
+const checkSunrise = (now: Time, suns: Suns) =>
+  now.ms > suns.sunrise.ms && now.ms <= suns.sunriseEnd.ms
+
+const checkSunset = (now: Time, suns: Suns) =>
+  now.ms > suns.sunsetStart.ms && now.ms <= suns.sunset.ms
+
+const checkDay = (now: Time, suns: Suns) =>
+  now.ms > suns.sunriseEnd.ms && now.ms <= suns.sunsetStart.ms
+
+const Countdown = ({ now, suns }: Props): JSX.Element => {
+  if (!suns || !now) return <div />
+  let untilText = ''
+  const isSunrise = checkSunrise(now, suns)
+  const isSunset = checkSunset(now, suns)
+  const isDay = checkDay(now, suns)
+  if (isSunrise || isSunset) {
+    untilText += 'the sun is ' + (isSunrise ? 'rising' : 'setting')
+  } else {
+    const duration = isDay
+      ? moment.duration(suns.sunsetStart.ms - now.ms)
+      : moment.duration(suns.sunrise.ms + 24 * MS_HOUR - now.ms) // near enough
+    const hours = duration.hours()
+    const minutes = duration.minutes()
+    const seconds = hours === 0 && minutes === 0 && duration.seconds()
+    if (hours) untilText += `${hours}h `
+    if (minutes) untilText += `${minutes}m `
+    if (seconds) untilText += `${seconds}s `
+    untilText += 'until ' + (isDay ? 'sunset' : 'sunrise')
+  }
+  return (
+    <div
+      className="countdown"
+      style={{
+        color: '#555',
+        height: 'auto',
+        padding: '8px',
+        textAlign: 'center',
+      }}
+    >
+      <div
+        style={{
+          fontSize: '28px',
+          fontWeight: 'bold',
+          margin: '8px 8px -2px',
+        }}
+      >
+        {untilText}
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = ({ suns, now }: State): Props => ({ suns, now })
+
+export default connect(mapStateToProps)(Countdown)
diff --git a/src/components/Disc.tsx b/src/components/Disc.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import Colors from '~components/Disc/Colors'
+import Hours from '~components/Disc/Hours'
+import Now from '~components/Disc/Now'
+import { CX, CY, HEIGHT, WIDTH } from '~singletons/constants'
+import { State, Suns, Time } from '~singletons/interfaces'
+
+interface Props {
+  suns?: Suns
+  hours?: Time[]
+}
+
+const Disc = ({ suns, hours }: Props): JSX.Element => {
+  if (!suns || !hours) return <div />
+  const transform =
+    window.location.hash !== '#alt'
+      ? `rotate(${90 - hours[12].angle + 180} ${CX} ${CY})`
+      : ''
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={WIDTH}
+      height={HEIGHT}
+      style={{
+        display: 'block',
+        margin: 'auto',
+      }}
+    >
+      <g transform={transform}>
+        <Colors />
+        <Hours />
+        <Now />
+      </g>
+    </svg>
+  )
+}
+
+const mapStateToProps = ({ suns, hours }: State): Props => ({ suns, hours })
+
+export default connect(mapStateToProps)(Disc)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>daylight</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Natural clock for visualizing daylight hours"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><link rel="icon" href="favicon.76ea7194.ico"><link rel="stylesheet" href="style.0be0e570.css"></head><body> <div id="root"></div> <script src="main.6b73d6db.js"></script> </body></html>