bug: no clean state before rendering

Author: cd-bash

src/components/vertical-nav/index.ts

@@ -1,10 +1,18 @@
 import './styles.css';
 import {trackBreadcrumbs} from "./breadcrumbs-nav.ts";
+import {EventBus} from "../../event-bus";
+import {Events} from "../../consts/events";
+import {handlers} from "../../consts/handlers";
 
 import cdIcon from "/img/common/cd_icon_green.png";
 import githubIcon from "./assets/github-icon.svg";
 import linkedIcon from "./assets/linkedin-icon.svg";
 import instagramIcon from "./assets/instagram-icon.svg";
+import {TankInfo, TankView} from "../../content/projects/tank";
+import {SpaceCompassInfo, SpaceCompassView} from "../../content/projects/space-compass";
+
+const EVENT_BUS = new EventBus<Events>();
+EVENT_BUS.subscribe('breadcrumb_button', handlers.breadcrumb_button);
 
 const navTitle = "CD-BASH";
 const githubProfile: string = "https://github.com/CD-BASH"
@@ -37,40 +45,41 @@ export function buildVerticalNav() {
     navBox.appendChild(header());
     navBox.appendChild(navWrapper);
     navWrapper.appendChild(trackBreadcrumbs());
+    navBox.appendChild(testButtons());
     navBox.appendChild(footer());
 
     return navBox;
 }
 
 export function renderNavInfo(infoFn: Function) {
-    const wrapper = clearInfo();
+    const navWrapper = clearInfo();
     const info = infoFn();
 
-    wrapper?.appendChild(info);
+    navWrapper?.appendChild(info);
 }
 
 //-----------------------------------------------------------------------
 
 function header() {
     const container = document.createElement("div");
     const topTriangle = document.createElement("div");
-    const info = document.createElement("div");
+    const logo = document.createElement("div");
     const icon = document.createElement("img");
     const title = document.createElement("h5");
 
     container.className = "header";
     topTriangle.className = "top-triangle";
 
-    info.className = "info";
+    logo.className = "info";
     icon.className = "icon";
     icon.src = cdIcon;
 
     title.textContent = navTitle;
 
     container.appendChild(topTriangle);
-    container.appendChild(info);
-    info.appendChild(icon);
-    info.appendChild(title);
+    container.appendChild(logo);
+    logo.appendChild(icon);
+    logo.appendChild(title);
 
     return container;
 }
@@ -112,7 +121,36 @@ function clearInfo() {
     const cleanInfo = document.getElementById('nav-wrapper');
     cleanInfo?.childNodes.forEach((childNode) => {
         cleanInfo.removeChild(childNode);
+        console.log("hi");
     });
 
+    console.log(cleanInfo);
+
     return cleanInfo;
+}
+
+
+
+function testButtons() {
+    const buttonContainer = document.createElement("div");
+    const buttonA  = document.createElement("button");
+    const buttonB = document.createElement("button");
+
+    buttonContainer.className = "button-container";
+
+    buttonA.id = "button-a";
+    buttonA.className = "button";
+    buttonA.textContent = "Button A";
+    buttonB.id = "button-b";
+    buttonB.className = "button";
+    buttonB.textContent = "Button B";
+
+
+    buttonA.addEventListener('click', () => EVENT_BUS.dispatch('breadcrumb_button', {path: "Button A", projectName: "TANK", projectView: TankView, projectInfo: TankInfo}));
+    buttonB.addEventListener('click', () => EVENT_BUS.dispatch('breadcrumb_button', {path: "Button B", projectName: "Space Compass", projectView: SpaceCompassView, projectInfo: SpaceCompassInfo}));
+
+    buttonContainer.appendChild(buttonA);
+    buttonContainer.appendChild(buttonB);
+
+    return buttonContainer;
 }

src/consts/events/events.ts

@@ -4,6 +4,9 @@
     };
 
     readonly breadcrumb_button: {
-
+        readonly path: string;
+        readonly projectName: string;
+        readonly projectView: Function;
+        readonly projectInfo: Function;
     }
 };

src/consts/handlers/handlers.ts

@@ -4,4 +4,19 @@ export const handlers = {
     button_test: (value: Events['button_test']): void => {
         console.log(value);
     },
+
+    breadcrumb_button: (value: Events['breadcrumb_button']): void => {
+        console.log(value.projectName);
+
+        if (value.projectName == "TANK") {
+            console.log("indeed this is tank");
+        }
+
+        value.projectView();
+        value.projectInfo();
+
+        if (value.projectName == "Space Compass") {
+            console.log("this one is space compass");
+        }
+    }
 };

src/content/projects/space-compass/index.ts

@@ -1,5 +1,6 @@
 import {projectView} from "../../../views/project-view";
 import {ProjectContent} from "../../../views/project-view";
+import {AboutProject, projectInfo, RelatedLinks} from "../../../components/vertical-nav/project-nav.ts";
 
 import WEBM_VIDEO from "./assets/spaceCompass-showcase.webm";
 import MP4_VIDEO from "./assets/spaceCompass-showcase.mp4";
@@ -9,10 +10,11 @@ import SCREENSHOT_2 from "./assets/spaceCompass-screenshot-2.jpg"
 import SCREENSHOT_3 from "./assets/spaceCompass-screenshot-3.jpg"
 import SCREENSHOT_4 from "./assets/spaceCompass-screenshot-4.jpg"
 
+
 const content: ProjectContent = {
     name: "Space Compass",
     tagline: "A 360 Odyssey",
-    path: "www.charlesdouce.com/interactives/",
+    path: "www.charlesdoucet.com/interactive/",
 
     paragraphs: [
         "The core goal in the making of Space Compass was to end up with a playable game in short delays. A bit like a personal game jam! The game is a space shooter, where players’ movement is limited around a circle’s circumference. Player needs to dodge or destroy several asteroids, as well as some structures in the way.",
@@ -32,6 +34,23 @@ const content: ProjectContent = {
     ]
 }
 
-export function ProjectPage() {
+const aboutInfo: AboutProject = {
+    release: "March 20, 2020",
+    platforms: "Web, Windows, Mac",
+    developer: "Charles Doucet"
+}
+
+const relatedLinksInfo: RelatedLinks[] = [
+    ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"],
+    ["GitHub Project", "https://github.com/charlesDouc/CART-415/wiki"]
+]
+
+//-----------------------------------------------------------------------
+
+export function SpaceCompassView() {
     return projectView(content);
 }
+
+export function SpaceCompassInfo() {
+    return projectInfo(aboutInfo, relatedLinksInfo);
+}

src/event-bus/event-bus.ts

@@ -1 +1,34 @@
-export * from "./event-bus";
+type EventMap = Record<string, unknown>;
+type EventKey<T extends EventMap> = keyof T;
+type EventHandler<T> = (value: T) => void;
+
+export class EventBus<T extends EventMap> {
+    private subscribers: Partial<Record<keyof T, EventHandler<any>[]>> = {};
+
+    subscribe<E extends EventKey<T>>(event: E, handler: EventHandler<T[E]>): void {
+        if (!this.subscribers[event]) {
+            this.subscribers[event] = [];
+        }
+
+        this.subscribers[event].push(handler);
+    }
+
+    unsubscribe<E extends EventKey<T>>(event: E, handler: EventHandler<T[E]>): void {
+        if (!this.subscribers[event]) {
+            return;
+        }
+
+        this.subscribers[event] = this.subscribers[event]!.filter(
+            (listener) => listener !== handler
+        );
+    }
+
+    dispatch<E extends EventKey<T>>(event: E, value: T[E]): void {
+        if (!this.subscribers[event]) {
+            return;
+        }
+        this.subscribers[event]!.forEach((listener) => {
+            listener(value);
+        });
+    }
+}