Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@cinnamon-bun
cinnamon-bun committed Jan 16, 2021
1 parent 430ea64 commit d128538
Show file tree
Hide file tree
Showing 12 changed files with 569 additions and 0 deletions.
20 changes: 20 additions & 0 deletions .codesandbox/workspace.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}
29 changes: 29 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "24-hour-clock",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.tsx",
"dependencies": {
"react": "17.0.0",
"react-dom": "17.0.0",
"react-scripts": "3.3.0"
},
"devDependencies": {
"@types/react": "16.9.19",
"@types/react-dom": "16.9.5",
"typescript": "3.7.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
49 changes: 49 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style>
body {
background-color: black;
color: white;
}
</style>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>

</html>
121 changes: 121 additions & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import * as React from "react";
import "./styles.css";

import {
config,
range,
} from './util';
import {
Rec, Rotate,
} from './svg-utils';
import { Dial } from './dial';
import {
cInk,
cInkFaint,
sFillDebug,
sFillSeasonLookup,
sLineDebug,
sLineInk,
sNone,
} from './styles';
import {
hourTable
} from './seasonal-hours';

//================================================================================
// MAIN

let hourToString = (n: number): string => {
if (config.useAmPm) {
let isAm = (n <= 11);
let ampm = isAm ? 'a' : 'p';
let n2 = n % 12;
if (n2 === 0) { n2 = 12; }
return `${n2}${ampm}`;
} else {
return (''+n).padStart(2, '0');
}
}

export default function App() {

// redraw every so often
let [, setTick] = React.useState(0);
React.useEffect(() => {
console.log('setting up interval');
let interval = setInterval(() => {
console.log('interval');
setTick(t => t + 1);
}, config.redrawEveryNSeconds * 1000);
return () => { clearInterval(interval); };
}, []);

let res = config.res;
let cx = res/2;
let cy = res/2;
let radMax = res/2 * 0.98;
let now = new Date();
let hoursOffset = now.getTimezoneOffset() / 60;
// range: 0-1 (midnight to midnight)
let nowDayPct = now.getHours() / 24 + now.getMinutes() / 24 / 60;
return <div className="App">
<svg
width={config.res}
height={config.res}
style={sFillDebug}
>
<Rec cx={cx} cy={cy} rx={res/2 - 1} style={sLineDebug} />
<circle cx={cx} cy={cy} r={5} style={sLineDebug} />
<circle cx={cx} cy={cy} r={res/2} style={sLineDebug} />
<Rotate cx={cx} cy={cy}
angle={(12 - hoursOffset) * 360/24}
>
{/* season hours */}
<Dial
cx={cx} cy={cy}
radMax={radMax * 0.9} radMin={radMax * 0.8}
textAlign='center-range'
textScale={0.39}
ticks={range(24).map(n => {
let hourOf = hourTable[n];
return {
angle: 360 * n / 24,
text: hourOf.shortName,
bgStyle: sFillSeasonLookup[hourOf.season],
cText: cInk,
};
})}
/>
{/* inner ring: utc */}
<Dial
cx={cx} cy={cy}
radMax={radMax * 0.8} radMin={radMax * 0.727}
textAlign='center-line'
ticks={range(24).map(n => ({
angle: 360 * n / 24,
text: 'U ' + (''+n).padStart(2, '0'),
bgStyle: sNone,
cText: cInkFaint,
}))}
/>
</Rotate>
{/* outer ring: local time */}
<Dial
cx={cx} cy={cy}
radMax={radMax * 1.01} radMin={radMax * 0.9}
textAlign='center-line'
textScale={0.62}
ticks={range(24).map(n => ({
angle: 360 * n / 24,
text: hourToString((n + 12) % 24),
bgStyle: sNone,
cText: cInk,
}))}
/>
{/* hour hand */}
<Rotate cx={cx} cy={cy} angle={nowDayPct * 360}>
<line x1={cx} y1={cy + radMax*0.5} x2={cx} y2={cy + radMax*0.82} style={sLineInk} />
</Rotate>
</svg>
</div>
}
65 changes: 65 additions & 0 deletions src/dial.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import * as React from "react";

import {
Rotate,
Pie,
} from './svg-utils';
import { cInk } from "./styles";

//================================================================================
// MAIN

export interface Tick {
angle: number,
text?: string,
bgStyle?: React.CSSProperties,
cText?: string,
}
interface DialProps {
cx: number,
cy: number,
radMin: number,
radMax: number,
ticks: Tick[],
textScale?: number, // default 0.6
textAlign: 'left' | 'center-line' | 'center-range',
}
export let Dial = (props: DialProps) => {
let { cx, cy, radMin, radMax, ticks, textScale, textAlign } = props;
if (textScale === undefined) { textScale = 0.6; }

let tickAngleWidth = 360 / ticks.length;
let textRotExtra =
textAlign === 'left' ? 1.5 :
textAlign === 'center-line' ? 0 :
textAlign === 'center-range' ? (tickAngleWidth/2) : 0;
return <>
{/* clock face */}
{/*<circle cx={cx} cy={cy} r={radMax} />*/}

{ticks.map(tick =>
<React.Fragment key={'dial|'+radMin+'|'+tick.angle}>
<Pie cx={cx} cy={cy}
angle1={tick.angle}
angle2={tick.angle + tickAngleWidth}
rMin={radMin} rMax={radMax}
style={tick.bgStyle}
/>
<Rotate cx={cx} cy={cy} angle={tick.angle + textRotExtra}>
<text x={cx} y={cy - (radMin + radMax)/2}
textAnchor={textAlign === 'left' ? 'left' : 'middle'}
dominantBaseline="mathematical"
fontSize={(radMax - radMin) * (textScale as number)}
style={{
stroke: 'none',
fill: tick.cText || cInk,
//fontWeight: 'bold',
}}
>
{tick.text}
</text>
</Rotate>
</React.Fragment>
)}
</>;
}
7 changes: 7 additions & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from "react";
import { render } from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
render(<App />, rootElement);
61 changes: 61 additions & 0 deletions src/seasonal-hours.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@

export type Season = 'winter' | 'spring' | 'summer' | 'autumn';

export interface HourOf {
shortName: string, // "ice"
longName: string, // "hour of ice"
season: Season,
}

/*
Pretend that each 24 hour period is actually an entire year with seasons.
UTC hour 0 is Jan 1, winter.
UTC hour 6 is the first day of spring, etc.
Give each of these hours a pretty name related to the season it's in.
These "seasonal hours" will be synchronized for everyone around the world
because they use UTC time.
Hour names were brainstormed in this spreadsheet
and are not final yet.
https://docs.google.com/spreadsheets/d/1uEnIJp2FFQYr2VexcZvJhKOMe898lOUDCrXZX2VlzDQ/edit?usp=sharing
*/
export let hourTable: Record<number, HourOf> = {
0: {season: 'winter', shortName: 'candle', longName: 'candle hour', },
1: {season: 'winter', shortName: 'ice', longName: 'hour of ice', },
2: {season: 'winter', shortName: 'comet', longName: 'hour of the comet', },
3: {season: 'winter', shortName: 'thimble', longName: 'hour of the thimble', },
4: {season: 'winter', shortName: 'root', longName: 'hour of roots', },
5: {season: 'winter', shortName: 'mist', longName: 'hour of mist', },
6: {season: 'spring', shortName: 'sprout', longName: 'sprout hour', },
7: {season: 'spring', shortName: 'rainbow', longName: 'rainbow hour', },
8: {season: 'spring', shortName: 'worm', longName: 'worm hour', },
9: {season: 'spring', shortName: 'bud', longName: 'bud hour', },
10: {season: 'spring', shortName: 'blossom', longName: 'blossom hour', },
11: {season: 'spring', shortName: 'ladybug', longName: 'ladybug hour', },
12: {season: 'summer', shortName: 'geese', longName: 'hour of geese', },
13: {season: 'summer', shortName: 'dust', longName: 'hour of dust', },
14: {season: 'summer', shortName: 'peach', longName: 'hour of peach', },
15: {season: 'summer', shortName: 'fog', longName: 'hour of fog', },
16: {season: 'summer', shortName: 'acorn', longName: 'hour of acorn', },
17: {season: 'summer', shortName: 'gourd', longName: 'hour of gourd', },
18: {season: 'autumn', shortName: 'soup', longName: 'soup hour', },
19: {season: 'autumn', shortName: 'crow', longName: 'crow hour', },
20: {season: 'autumn', shortName: 'mushroom', longName: 'mushroom hour', },
21: {season: 'autumn', shortName: 'thunder', longName: 'thunder hour', },
22: {season: 'autumn', shortName: 'frost', longName: 'frost hour', },
23: {season: 'autumn', shortName: 'lantern', longName: 'lantern hour', },
};

export let getUtcHour = () : number => {
// Return the current hour of the day in UTC time,
// including fractional hours.
// Example: 03:20 --> 3.33333
// Range: 0 to 23.99999
let now = new Date();
return now.getUTCHours() + now.getUTCMinutes() / 60 + now.getUTCSeconds() / 60 / 60;
}

export let getHourOf = () : HourOf => {
let intHour = Math.floor(getUtcHour());
return hourTable[intHour];
}
5 changes: 5 additions & 0 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

.App {
font-family: sans-serif;
text-align: center;
}
Loading

0 comments on commit d128538

Please sign in to comment.