setting up shop

dkallen78 · Dec 25, 2023 · 86e8337 · 86e8337
1 parent bc2c502
commit 86e8337
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 0 deletions.
diff --git a/seven-segment-clock/seven-segment-clock.css b/seven-segment-clock/seven-segment-clock.css
@@ -0,0 +1,4 @@
+svg {
+  width: 15svw;
+  height: 24svw;
+}
diff --git a/seven-segment-clock/seven-segment-clock.html b/seven-segment-clock/seven-segment-clock.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>
+      Seven Segment Clock
+    </title>
+    <link rel="stylesheet" href="seven-segment-clock.css">
+    <!--
+      web apps only
+      <meta name="application-name" content="Application Name">
+    -->
+    <meta name="description" content="description">
+
+    <meta property="og:title" content="Title">
+    <meta property="og:description" content="description">
+    <meta property="og:image" content="xxx.jpg">
+    <meta property="og:locale" content="en_US">
+    <!--es_MX-->
+    <meta property="og:type" content="website">
+    <!--
+      music.song/album/playlist/radio_station
+      video.movie/episode/tv_show/other
+      article
+      book
+      profile
+      website
+    -->
+    <meta property="og:url" content="https://www.site.com/page">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="">
+    <meta name="twitter:creator" content="">
+
+    <style>
+    </style>
+  </head>
+  <body>
+    <div id="clock-face">
+
+    </div>
+  </body>
+  <script src="seven-segment-clock.js">
+  </script>
+</html>
diff --git a/seven-segment-clock/seven-segment-clock.js b/seven-segment-clock/seven-segment-clock.js
@@ -0,0 +1,77 @@
+class Point {
+	//----------------------------------------------------//
+	//A data structure to make managing and representing	//
+	//	Cartesian points easier														//
+	//----------------------------------------------------//
+	//x(float): x coordinate of the point									//
+	//y(float): y coordinate of the point									//
+	//----------------------------------------------------//
+
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+	static center(p1, p2) {
+		//----------------------------------------------------//
+		//Finds the center point between p1 and p2						//
+		//----------------------------------------------------//
+		//p1, p2(Point): points to find the center of					//
+		//----------------------------------------------------//
+		//return(Point): the point at the midpoint between the//
+		//	original two points																//
+		//----------------------------------------------------//
+
+		const midX = (p1.x + p2.x) / 2;
+		const midY = (p1.y + p2.y) / 2;
+		const newCenter = new Point(midX, midY);
+		return newCenter;
+	}
+
+	static vector(p1, p2) {
+		//----------------------------------------------------//
+		//Finds the vector from p1 to p2											//
+		//----------------------------------------------------//
+		//p1, p2(Point): points on the vector to be found			//
+		//----------------------------------------------------//
+		//return(Point): the vector from p1 to p2							//
+		//----------------------------------------------------//
+
+		const vecX = (p1.x - p2.x);
+		const vecY = (p1.y - p2.y);
+		const newVector = new Point(vecX, vecY);
+		return newVector;
+	}
+}
+
+function makeSVG(type, id, ...classes) {
+  //----------------------------------------------------//
+  //Makes an SVG element of the type specified          //
+  //----------------------------------------------------//
+  //type(string): type of SVG element to create         //
+  //id(string): id of the element                       //
+  //classes(string): classes to add to the element      //
+  //----------------------------------------------------//
+  //return(element): SVG element                        //
+  //----------------------------------------------------//
+
+  let svg = document.createElementNS("http://www.w3.org/2000/svg", type);
+  if (typeof id === "string") {svg.id = id}
+  classes.forEach(x => svg.classList.add(x));
+  return svg;
+}
+
+function buildFace() {
+
+  const clockFace = document.getElementById("clock-face");
+
+  for (let i = 0; i < 6; i++) {
+    let display = makeSVG("svg", i.toString(10));
+    clockFace.appendChild(display);
+  }
+}
+
+document.body.onload = buildFace;
+
+const xBias = .02;
+const yBias = .03125;