Merge pull request #3 from mmarquez76/master

Merge webring into gh-pages deployment
mmarquez76 · Dec 4, 2024 · c4dc1fa · c4dc1fa
2 parents 3c44cb0 + bb3eacc
commit c4dc1fa
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 90 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vite
diff --git a/clock.js b/clock.js
@@ -57,7 +57,7 @@ window.addEventListener(
       signs = ["L", "K", "J", "I", "H", "G", "F", "E", "D", "C", "B", "A"],
       radius,
       date,
-      seconds,
+      lastUpdateTime,
       illumFraction,
       offsetAscendant,
       isNight = false,
@@ -336,19 +336,19 @@ window.addEventListener(
         // Only get a new ephemeris every cooldown period to save resources
         // When a new ephemeris is fetched, redraw all resources that depend on it
         if (
-          Math.floor(seconds / EPHEMERIS_COOLDOWN) !=
+          Math.floor(lastUpdateTime / EPHEMERIS_COOLDOWN) !=
           Math.floor(date.getSeconds() / EPHEMERIS_COOLDOWN)
         ) {
           getSigns();
           clearCanvas(signCanvas);
-          seconds = date.getSeconds();
+          lastUpdateTime = date.getSeconds();
           drawInnerFace();
           drawInnerSigns();
           drawMoonPhase();
           drawSignHands();
         }
         // Only redraw innerCanvas to highlight new numbers every minute
-        if (Math.floor(seconds) % 60 == 0) {
+        if (Math.floor(date.getSeconds()) % 60 == 0) {
           clearCanvas(innerCanvas);
           drawNumerals();
         }

diff --git a/fts.css b/fts.css
@@ -0,0 +1,80 @@
+body {
+	overflow: hidden;
+}
+
+#webring {
+	position: absolute;
+	z-index: 10;
+	bottom: 0;
+	right: 0;
+	width: 100vw;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	transition: all 350ms, opacity 5s;
+}
+
+#webring > * {
+	transition: all 350ms;
+}
+
+
+#webring > button {
+	transform-origin: 50% 50%;
+	background-color: transparent;
+	border: none;
+	padding: 16px 0;
+
+}
+
+#webring > button > img {
+	filter: invert();
+	scale: 1.5;
+	rotate: 180deg;
+}
+
+#webring > iframe {
+	border: 0;
+	position: fixed;
+	transform: translateY(100%);
+}
+
+@keyframes bounce {
+	0% {transform: translateY(0%);}
+	75% {transform: translateY(10%);}
+	100% {transform: translateY(0%);}
+}
+
+
+#webring.disabled {
+	pointer-events: none;
+	opacity: 0;
+}
+
+#webring.nudge > button {
+	animation: bounce 1s ease-in-out infinite;
+}
+
+#webring.enabled {
+	bottom: 2rem;
+}
+
+#webring.enabled > button > img {
+	rotate: 0deg;
+}
+
+#webring.enabled > button {
+	transform: translateY(-125%);
+}
+
+#webring.enabled > iframe {
+	transform: translateY(0%);
+}
+
+@media (min-width: 600px) {
+	#webring {
+		width: 30%;
+	}
+}
diff --git a/fts.js b/fts.js
@@ -0,0 +1,24 @@
+// states: disabled, nudge, enabled, idle
+const webring = document.getElementById("webring");
+const button = webring.querySelector("button");
+
+setTimeout(() => {
+	webring.className = "nudge";
+}, 1000);
+
+button.addEventListener("pointerdown", () => {
+	console.log("clicked")
+	switch (webring.className) {
+		case "disabled":
+		case "nudge":
+		case "idle":
+			webring.className = "enabled";
+			break;
+		case "enabled":
+			webring.className = "idle";
+			break;
+		default:
+			break;
+	}
+});
+
diff --git a/index.html b/index.html
@@ -1,88 +1,108 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Astrology Clock</title>
-    <meta charset="utf-8" />
-    <link rel="preload" type="font/ttf" href="Astro.TTF" as="font" />
-    <link rel="stylesheet" type="text/css" href="style.css" />
-    <script data-ad-client="ca-pub-3634678835900463" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-M7LNKLRXP3"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
 
-      gtag('config', 'G-M7LNKLRXP3');
-    </script>
-  </head>
-  <style>
-    canvas {
-      position: absolute;
-    }
-    #time-layer {
-      z-index: 5;
-    }
-    #sign-layer {
-      z-index: 4;
-    }
-    #inner-face-layer {
-      z-index: 3;
-    }
-    #outer-face-layer {
-      z-index: 2;
-    }
-    #background-layer {
-      z-index: 1;
-    }
-  </style>
-  <body id="main-body">
-    <!-- initially hidden right-click menu -->
-    <div id="menu" class="menu">
-      <ul class="menu-options">
-        <li id="tick_every_second" class="menu-option">Tick Every Second</li>
-        <li id="show_moon_phases" class="menu-option">Show Moon Phases</li>
-        <li id="show_horizon" class="menu-option">Show Horizon</li>
-        <li id="auto_dark_mode" class="menu-option">Auto Dark Mode</li>
-        <li id="dark_mode" class="menu-option">Dark Mode</li>
-        <hr />
-        <li id="sun" class="menu-option">Show Sun</li>
-        <li id="moon" class="menu-option">Show Moon</li>
-        <li id="mercury" class="menu-option">Show Mercury</li>
-        <li id="venus" class="menu-option">Show Venus</li>
-        <li id="mars" class="menu-option">Show Mars</li>
-        <li id="saturn" class="menu-option">Show Saturn</li>
-        <li id="jupiter" class="menu-option">Show Jupiter</li>
-        <li id="uranus" class="menu-option">Show Uranus</li>
-        <li id="neptune" class="menu-option">Show Neptune</li>
-        <li id="pluto" class="menu-option">Show Pluto</li>
-        <hr />
-        <li id="chiron" class="menu-option">Show Chiron</li>
-        <li id="lilith" class="menu-option">Show Lilith</li>
-        <li id="asc_node" class="menu-option">Show Ascending Lunar Node</li>
-        <hr />
-        <li id="midheaven" class="menu-option">Show Midheaven</li>
-        <li id="ascendant" class="menu-option">Show Ascendant</li>
-        <hr />
-        <li id="part_fortune" class="menu-option">Show Part of Fortune</li>
-        <li id="part_spirit" class="menu-option">Show Part of Spirit</li>
-        <li id="part_eros" class="menu-option">Show Part of Eros</li>
-      </ul>
-    </div>
-    <div id="info" class="info">
-      Right-click for options
-    </div>
-    <div class="font_preload" style="opacity: 0">
-      <span style="font-family: Astro, Arial, sans-serif;"></span>
-    </div>
-    <canvas id="time-layer"></canvas>
-    <canvas id="sign-layer"></canvas>
-    <canvas id="inner-face-layer"></canvas>
-    <canvas id="outer-face-layer"></canvas>
-    <canvas id="background-layer"></canvas>
-    <script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
-    <script src='jquery.longclick-min.js' type='text/javascript'></script>
-    <script src="ephemeris-1.2.1.bundle.js" type="text/javascript"></script>
-    <script src="clock.js" type="text/javascript"></script>
-  </body>
-</html>
+<head>
+	<title>Astrology Clock</title>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="preload" type="font/ttf" href="Astro.TTF" as="font" />
+	<link rel="stylesheet" type="text/css" href="style.css" />
+	<link rel="stylesheet" type="text/css" href="fts.css" />
+
+	<script data-ad-client="ca-pub-3634678835900463" async
+		src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+	<!-- Google tag (gtag.js) -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=G-M7LNKLRXP3"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag() { dataLayer.push(arguments); }
+		gtag('js', new Date());
+
+		gtag('config', 'G-M7LNKLRXP3');
+	</script>
+</head>
+<style>
+	canvas {
+		position: absolute;
+	}
+
+	#time-layer {
+		z-index: 5;
+	}
+
+	#sign-layer {
+		z-index: 4;
+	}
+
+	#inner-face-layer {
+		z-index: 3;
+	}
+
+	#outer-face-layer {
+		z-index: 2;
+	}
+
+	#background-layer {
+		z-index: 1;
+	}
+</style>
+
+<body id="main-body">
+	<!-- initially hidden right-click menu -->
+	<div id="menu" class="menu">
+		<ul class="menu-options">
+			<li id="tick_every_second" class="menu-option">Tick Every Second</li>
+			<li id="show_moon_phases" class="menu-option">Show Moon Phases</li>
+			<li id="show_horizon" class="menu-option">Show Horizon</li>
+			<li id="auto_dark_mode" class="menu-option">Auto Dark Mode</li>
+			<li id="dark_mode" class="menu-option">Dark Mode</li>
+			<hr />
+			<li id="sun" class="menu-option">Show Sun</li>
+			<li id="moon" class="menu-option">Show Moon</li>
+			<li id="mercury" class="menu-option">Show Mercury</li>
+			<li id="venus" class="menu-option">Show Venus</li>
+			<li id="mars" class="menu-option">Show Mars</li>
+			<li id="saturn" class="menu-option">Show Saturn</li>
+			<li id="jupiter" class="menu-option">Show Jupiter</li>
+			<li id="uranus" class="menu-option">Show Uranus</li>
+			<li id="neptune" class="menu-option">Show Neptune</li>
+			<li id="pluto" class="menu-option">Show Pluto</li>
+			<hr />
+			<li id="chiron" class="menu-option">Show Chiron</li>
+			<li id="lilith" class="menu-option">Show Lilith</li>
+			<li id="asc_node" class="menu-option">Show Ascending Lunar Node</li>
+			<hr />
+			<li id="midheaven" class="menu-option">Show Midheaven</li>
+			<li id="ascendant" class="menu-option">Show Ascendant</li>
+			<hr />
+			<li id="part_fortune" class="menu-option">Show Part of Fortune</li>
+			<li id="part_spirit" class="menu-option">Show Part of Spirit</li>
+			<li id="part_eros" class="menu-option">Show Part of Eros</li>
+		</ul>
+	</div>
+	<div id="info" class="info">
+		Right-click for options
+	</div>
+	<div class="font_preload" style="opacity: 0">
+		<span style="font-family: Astro, Arial, sans-serif;"></span>
+	</div>
+	<div id="webring" class="disabled">
+		<button>
+			<img src="https://falchion-fleet-public.us-southeast-1.linodeobjects.com/misc/icons/chevrons-down.svg" alt="Two chevrons pointing down.">
+		</button>
+		<iframe src="https://fromthesuperhighway.com/webring/source" width="240" height="80"></iframe>
+	</div>
+	<canvas id="time-layer"></canvas>
+	<canvas id="sign-layer"></canvas>
+	<canvas id="inner-face-layer"></canvas>
+	<canvas id="outer-face-layer"></canvas>
+	<canvas id="background-layer"></canvas>
+	<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
+	<script src='jquery.longclick-min.js' type='text/javascript'></script>
+	<script src="ephemeris-1.2.1.bundle.js" type="text/javascript"></script>
+	<script src="fts.js" type="text/javascript"></script>
+	<script src="clock.js" type="text/javascript"></script>
+</body>
+
+</html>
diff --git a/project.json b/project.json
@@ -47,7 +47,7 @@
 				"max" : 300,
 				"min" : 1,
 				"order" : 103,
-				"text" : "Ephemeris Refresh Rate",
+				"text" : "Seconds Between Position Updates",
 				"type" : "slider",
 				"value" : 20
 			},