Init

2026-05-14 01:31:55 +00:00 · 2023-06-20 21:44:53 +02:00
parent a420d5523b
commit 9ad92d140a
19 changed files with 6132 additions and 4 deletions
@@ -0,0 +1,13 @@
+---
+import CircleState from '../models/CircleState';
+export interface Props {
+  id?: string
+  circle: CircleState,
+}
+
+const {id, circle} = Astro.props
+---
+
+<circle id={id ?? ""} cx={circle.point.x} cy={circle.point.y} r={circle.radius ?? 2} fill={circle.fill ?? "none"} stroke={circle.stroke ?? "black"}>
+    <slot/>
+</circle>
@@ -0,0 +1,14 @@
+---
+import LineState from '../models/LineState';
+export interface Props {
+  line: LineState;
+  stroke?: number;
+}
+
+const {line, stroke} = Astro.props;
+---
+
+<line x1={line.a.x} y1={line.a.y}
+      x2={line.b.x} y2={line.b.y}
+      stroke={stroke ?? 'black'}
+/>
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
@@ -0,0 +1,22 @@
+---
+export interface Props {
+  title: string;
+}
+
+const {title} = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="description" content="Astro description">
+    <meta name="viewport" content="width=device-width"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+    <meta name="generator" content={Astro.generator}/>
+    <title>{title}</title>
+</head>
+<body>
+<slot/>
+</body>
+</html>
@@ -0,0 +1,10 @@
+import type PointState from './PointState';
+
+type CircleState = {
+  point: PointState
+  radius?: number
+  fill?: string
+  stroke?: string
+}
+
+export default CircleState;
@@ -0,0 +1,8 @@
+import type PointState from './PointState';
+
+type LineState = {
+  a: PointState
+  b: PointState
+}
+
+export default LineState;
@@ -0,0 +1,6 @@
+type PointState = {
+  x: number
+  y: number
+}
+
+export default PointState;
@@ -0,0 +1,10 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Welcome to Astro.">
+    <main class="container mx-auto">
+        <h1 class="text-5xl font-bold py-5">Notion Widgets</h1>
+
+    </main>
+</Layout>
@@ -0,0 +1,108 @@
+---
+import Layout from '../../../layouts/Layout.astro';
+import Line from '../../../components/Line.astro';
+import Circle from '../../../components/Circle.astro';
+
+import type PointState from '../../../models/PointState';
+import type LineState from '../../../models/LineState';
+import type CircleState from '../../../models/CircleState';
+import {buildDials, buildTimeIndicators} from './utils';
+
+const canvas = {size: 500};
+
+const centerPoint: PointState = {
+  x: canvas.size / 2,
+  y: canvas.size / 2,
+};
+
+const dials: CircleState[] = buildDials(centerPoint, canvas.size / 10,
+    canvas.size / 2.5, 3);
+const timeIndicators: LineState[] =
+    buildTimeIndicators(centerPoint, canvas, 12, 10)
+        .concat(buildTimeIndicators(centerPoint, canvas, 4, 20))
+;
+
+const day = [
+    "Dimanche",
+    "Lundi",
+    'Mardi',
+    "Mercredi",
+    "Jeudi",
+    "Vendredi",
+    "Samedi"
+];
+
+
+
+const serverTime = new Date();
+
+const calculatePosition = (offset: number, angle: number) => {
+    return {
+        x: centerPoint.x + offset * Math.cos(angle),
+        y: centerPoint.y + offset * Math.sin(angle),
+    };
+}
+const secondsPosition = calculatePosition(100, (serverTime.getSeconds() + 45) * ((Math.PI * 2) / 60))
+const minutesPosition = calculatePosition(150, (serverTime.getMinutes() + 45) * ((Math.PI * 2) / 60))
+const hoursPosition = calculatePosition(200, (serverTime.getHours() + 18) * ((Math.PI * 2) / 24))
+---
+
+<Layout>
+    <main class="min-h-screen w-scren">
+        <svg width={canvas.size} height={canvas.size} class="border-2">
+          {dials.map((circle) => <Circle circle={circle}/>)}
+          {timeIndicators.map((line) => <Line line={line}/>)}
+          <Circle circle={{point: centerPoint, radius: 20, fill: "gray", stroke: 0}} />
+
+        <text id="display" x={centerPoint.x} y={centerPoint.y - 30}
+              text-anchor="middle"
+              font-size={canvas.size / 23}>HH:MM:SS
+        </text>
+
+            <text x={centerPoint.x} y={centerPoint.y + 50}
+                  text-anchor="middle"
+                  font-size={canvas.size / 25}>{day[(new Date()).getDay()]}
+            </text>
+
+            <Circle id="hoursCircle" circle={{point: hoursPosition, radius: 25, fill: 'gray', stroke: 0}}>
+                <animateTransform attributeName="transform"
+                                  attributeType="XML"
+                                  type="rotate"
+                                  from="0 250 250"
+                                  to="360 250 250"
+                                  dur="86400s"
+                                  repeatCount="indefinite"/>
+            </Circle>
+            <Circle id="minutesCircle" circle={{point: minutesPosition, radius: 20, fill: 'gray', stroke: 0}}>
+                <animateTransform attributeName="transform"
+                                  attributeType="XML"
+                                  type="rotate"
+                                  from="0 250 250"
+                                  to="360 250 250"
+                                  dur="3600s"
+                                  repeatCount="indefinite"/>
+            </Circle>
+            <Circle id="secondsCircle" circle={{point: secondsPosition, radius: 10, fill: 'gray', stroke: 0}}>
+                <animateTransform attributeName="transform"
+                                  attributeType="XML"
+                                  type="rotate"
+                                  from="0 250 250"
+                                  to="360 250 250"
+                                  dur="60s"
+                                  repeatCount="indefinite"/>
+            </Circle>
+
+        </svg>
+    </main>
+</Layout>
+
+<script>
+  const displayElement = document.getElementById('display');
+
+  const zeroPad = (num, places) => String(num).padStart(places, '0');
+  setInterval(() => {
+    const time = new Date();
+    displayElement.innerHTML = `${zeroPad(time.getHours(), 2)}:${zeroPad(
+        time.getMinutes(), 2)}:${zeroPad(time.getSeconds(), 2)}`;
+  }, 1000);
+</script>
@@ -0,0 +1,56 @@
+import type LineState from '../../../models/LineState';
+import type PointState from '../../../models/PointState';
+import type CircleState from '../../../models/CircleState';
+
+export const buildTimeIndicators = (
+    centerPoint: PointState,
+    canvas: {size: number},
+    count: number,
+    size: number,
+) => {
+  const pi2 = Math.PI * 2;
+
+  let l: LineState[] = [];
+  const offset = canvas.size / (3 + 1/3)
+  const angle = pi2 / count;
+
+  for (let i = 0; i < count; i++) {
+    const t = i * angle;
+    const cosValue = Math.cos(t);
+    const sinValue = Math.sin(t);
+
+    const newPointA: PointState = {
+      x: centerPoint.x + offset * cosValue,
+      y: centerPoint.y + offset * sinValue,
+    };
+
+    const newPointB: PointState = {
+      x: centerPoint.x + (offset + size) * cosValue,
+      y: centerPoint.y + (offset + size) * sinValue,
+    };
+
+    l.push({a: newPointA, b: newPointB});
+  }
+  return l;
+};
+
+export const buildDials = (
+    centerPoint: PointState,
+    min: number,
+    max: number,
+    count: number
+) => {
+  const result: CircleState[] = [];
+  const step = (max - min) / count;
+
+  for (let i = 1; i <= count; i++) {
+    const newCircle = {
+      radius: min + (step * i),
+      point: centerPoint
+    };
+
+    result.push(newCircle)
+  }
+
+  return result;
+};