From 5208b5b1cf7e215f0b2bc951ad686664382ca22f Mon Sep 17 00:00:00 2001
From: Jamie Temple <jamie-temple@live.de>
Date: Fri, 13 May 2022 00:06:32 +0200
Subject: [PATCH] enhance: clean up + doc
---
index.html | 4 +-
src/bezier/BezierDemo.ts | 4 ++
src/init.ts | 12 +++--
src/main.ts | 9 ++++
src/quaternion/QuaternionDemo.ts | 4 ++
src/style.css | 88 ++++++++++----------------------
6 files changed, 53 insertions(+), 68 deletions(-)
diff --git a/index.html b/index.html
index 530bc33..1aaf5d7 100644
--- a/index.html
+++ b/index.html
@@ -45,9 +45,7 @@
</p>
</footer>
-
-
- </nav>
+ </nav>
</div>
diff --git a/src/bezier/BezierDemo.ts b/src/bezier/BezierDemo.ts
index b2b4905..2b1b78c 100644
--- a/src/bezier/BezierDemo.ts
+++ b/src/bezier/BezierDemo.ts
@@ -3,6 +3,10 @@ import { UI } from "../uitls/UI";
import { Curve2d } from './Curve2d';
+
+/**
+ * Prepares the scene for the demo.
+ */
export function bezierDemo(render: RenderManager, ui: UI) {
const curve = new Curve2d();
curve.objects().forEach(obj => { render.add(obj); });
diff --git a/src/init.ts b/src/init.ts
index f0c79c7..547bad5 100644
--- a/src/init.ts
+++ b/src/init.ts
@@ -1,15 +1,21 @@
import * as RotCube from "./ambient/RotatingCube"
import * as Main from "./main"
-
+/**
+ * Initializes the application. Sets specifically the link actions to
+ * "load" the canvas.
+ */
function init() {
+ // elements where to modify hidden class
const sceneElement = document.querySelector(".scene") as HTMLAnchorElement;
const mainElement = document.querySelector(".main") as HTMLAnchorElement;
+ // set the link actions
const bezierLink = document.querySelector("#bezier") as HTMLAnchorElement;
const quaternionLink = document.querySelector("#quaternion") as HTMLAnchorElement;
const simulationLink = document.querySelector("#simulation") as HTMLAnchorElement;
+ // actions to be performed when the link is clicked
bezierLink.addEventListener("click", () => {
sceneElement.classList.remove("hidden");
mainElement.classList.add("hidden");
@@ -28,11 +34,9 @@ function init() {
// TODO: add simulation
});
-
+ // start animation
RotCube.init();
RotCube.render();
}
init();
-
-export { };
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 824547c..bc571aa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,11 +4,20 @@ import { UI } from "./uitls/UI";
import { bezierDemo } from "./bezier/BezierDemo";
import { quaternionDemo } from "./quaternion/QuaternionDemo";
+
+/**
+ * function to initialize the application with.
+ * It is called in demos with the appropriate parameter to start rendering.
+ */
export const examples : {[key: string]: (render: RenderManager, ui: UI) => void} = {
"bezier": bezierDemo,
"quaternion": quaternionDemo
};
+
+/**
+ * function to start scene rendering.
+ */
export function demos(d: (render: RenderManager, ui: UI) => void) {
console.log("demos");
diff --git a/src/quaternion/QuaternionDemo.ts b/src/quaternion/QuaternionDemo.ts
index d63194a..0c1eed6 100644
--- a/src/quaternion/QuaternionDemo.ts
+++ b/src/quaternion/QuaternionDemo.ts
@@ -5,6 +5,10 @@ import { AmbientLight, GridHelper, Mesh, MeshLambertMaterial, PointLight } from
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RotationObject } from "./RotationObject";
+
+/**
+ * Prepares the scene for the demo.
+ */
export function quaternionDemo(render: RenderManager, ui: UI) {
const rot = new RotationObject();
diff --git a/src/style.css b/src/style.css
index 5f489db..910f237 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,20 +5,10 @@
font-family: 'Poppins', sans-serif;
}
-.main.hidden {
- display: none;
-}
-
-.scene.hidden {
- display: none;
-}
-
-.return {
- position: absolute;
- top: 1em;
- left: 1em;
- background: #fff;
- z-index: 1;
+canvas {
+ left: 0;
+ top: 0;
+ position: fixed;
}
header {
@@ -40,6 +30,22 @@ footer {
align-items: center;
}
+.main.hidden {
+ display: none;
+}
+
+.scene.hidden {
+ display: none;
+}
+
+.return {
+ position: absolute;
+ top: 1em;
+ left: 1em;
+ background: #fff;
+ z-index: 1;
+}
+
.welcome {
position: relative;
top: 25vh;
@@ -64,13 +70,6 @@ nav {
/* z-index: 1; */
}
-.title-nav {
- position: absolute;
- color: white;
- bottom: 0;
- left: 12%;
-}
-
nav ul {
position: absolute;
left: 12%;
@@ -83,6 +82,13 @@ nav ul {
}
+.title-nav {
+ position: absolute;
+ color: white;
+ bottom: 0;
+ left: 12%;
+}
+
.nav-link {
position: relative;
color: #CBCFD3;
@@ -105,43 +111,3 @@ nav ul {
font-weight: bold;
}
-.menu-close {
- position: absolute;
- top: 45vh;
- left: 2%;
- width: 2rem;
- height: 1rem;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
-}
-
-.menu-close:hover {
- opacity: 0.6;
-}
-
-.menu-close span {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 70%;
- height: 2px;
- background-color: white;
-}
-
-.menu-close span:nth-child(1) {
- transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.menu-close span:nth-child(2) {
- transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-
-canvas {
- left: 0;
- top: 0;
- position: fixed;
-}
\ No newline at end of file
--
GitLab