bug: got a appendchild error that stops compiler

Author: cd-bash

src/components/vertical-nav/breadcrumbs-nav.ts

@@ -1,6 +1,6 @@
 enum LinkCategory {
     HOME = "#3BFFC5",
-    INTERACTIVES = "#3B62FF",
+    INTERACTIVE = "#3B62FF",
     PROJECT = "#1E1E1E",
 }
 
@@ -12,7 +12,7 @@ type BreadcrumbLink = [
 
 const CURRENT_TRACK: BreadcrumbLink[] = [
     ["home", "/", LinkCategory.HOME],
-    ["interactives", "/interactives", LinkCategory.INTERACTIVES],
+    ["interactive", "/interactive", LinkCategory.INTERACTIVE],
     ["space compass", "/space-compass", LinkCategory.PROJECT],
 ]
 

src/components/vertical-nav/footer-nav.ts

@@ -1,27 +1,118 @@
 import './styles.css';
-import {headerNav} from "./header-nav.ts";
-import {footerNav} from "./footer-nav.ts";
 import {trackBreadcrumbs} from "./breadcrumbs-nav.ts";
-import {renderInfo} from "./info-nav.ts";
-export * from "./header-nav.ts";
-export * from "./breadcrumbs-nav.ts";
-export * from "./footer-nav.ts";
+
+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";
+
+const navTitle = "CD-BASH";
+const githubProfile: string = "https://github.com/CD-BASH"
+const linkedinProfile: string = "https://www.linkedin.com/in/charlesdouc/"
+const instagramProfile: string = "https://www.instagram.com/charlesdouc/"
+const footerCopyrights: string = "© 2025 Charles Doucet - All Rights Reserved";
+
+
+type SocialLink = [
+    path: string,
+    image: string,
+]
+
+const FOO_SOCIALS: SocialLink[] = [
+    [githubProfile, githubIcon],
+    [linkedinProfile, linkedIcon],
+    [instagramProfile, instagramIcon]
+]
+
 
 //-----------------------------------------------------------------------
 
-export function verticalNav() {
+export function buildVerticalNav() {
     const navBox = document.createElement("div");
     const navWrapper = document.createElement("div");
 
     navBox.id = "vertical-nav";
-    navWrapper.className = "nav-wrapper";
-
+    navWrapper.id = "nav-wrapper";
 
-    navBox.appendChild(headerNav());
+    navBox.appendChild(header());
     navBox.appendChild(navWrapper);
     navWrapper.appendChild(trackBreadcrumbs());
-    navWrapper.appendChild(renderInfo());
-    navBox.appendChild(footerNav());
+    navBox.appendChild(footer());
 
     return navBox;
+}
+
+export function renderNavInfo(infoFn: Function) {
+    const wrapper = clearInfo();
+    const info = infoFn();
+
+    wrapper?.appendChild(info);
+}
+
+//-----------------------------------------------------------------------
+
+function header() {
+    const container = document.createElement("div");
+    const topTriangle = document.createElement("div");
+    const info = document.createElement("div");
+    const icon = document.createElement("img");
+    const title = document.createElement("h5");
+
+    container.className = "header";
+    topTriangle.className = "top-triangle";
+
+    info.className = "info";
+    icon.className = "icon";
+    icon.src = cdIcon;
+
+    title.textContent = navTitle;
+
+    container.appendChild(topTriangle);
+    container.appendChild(info);
+    info.appendChild(icon);
+    info.appendChild(title);
+
+    return container;
+}
+
+
+function footer() {
+    const container = document.createElement("div");
+    const socials = document.createElement("ul");
+    const copyrights = document.createElement("p");
+
+    container.className = "nav-footer";
+    socials.className = "socials";
+    copyrights.className = "copyrights";
+    copyrights.textContent = footerCopyrights;
+
+    container.appendChild(socials);
+    container.appendChild(copyrights);
+
+    FOO_SOCIALS.forEach(social => {
+        const [path, image] = social;
+        const socialLink = document.createElement("li");
+        const link = document.createElement("a");
+        const icon = document.createElement("img");
+
+        link.href = path;
+        link.target = "_blank";
+        icon.src = image;
+
+        socials.appendChild(socialLink);
+        socialLink.appendChild(link);
+        link.appendChild(icon);
+    })
+
+    return container;
+}
+
+
+function clearInfo() {
+    const cleanInfo = document.getElementById('nav-wrapper');
+    cleanInfo?.childNodes.forEach((childNode) => {
+        cleanInfo.removeChild(childNode);
+    });
+
+    return cleanInfo;
 }

src/components/vertical-nav/header-nav.ts

@@ -1,30 +1,34 @@
-export type AboutProject = [
-    release: string,
-    platforms: string,
-    developer: string
-]
+export type AboutProject = {
+    readonly release: string;
+    readonly platforms: string;
+    readonly developer: string;
+}
 
 export type RelatedLinks = [
     name: string,
     path: string,
 ]
 
+//-----------------------------------------------------------------------
+
 export function projectInfo(about: AboutProject, links: RelatedLinks[]) {
-    const info = document.createElement("div");
+    const navWrapper = document.getElementById('nav-wrapper');
+
+    if (about != null && navWrapper != null) {
+        navWrapper?.appendChild(sectionAboutTheGame(about));
 
-    if (about != null) {
-        info.appendChild(sectionAboutTheGame(about));
     }
 
     if (links != null) {
-        info.appendChild(sectionRelatedLinks(links));
+        navWrapper?.appendChild(sectionRelatedLinks(links));
     }
+
+    return navWrapper;
 }
 
+//-----------------------------------------------------------------------
 
 function sectionAboutTheGame(about: AboutProject) {
-    const [release, platforms, developer] = about;
-
     const detailSection = document.createElement('div');
     const detailTitle = document.createElement("h4");
     const releaseDate = document.createElement("p");
@@ -33,9 +37,9 @@ function sectionAboutTheGame(about: AboutProject) {
 
     detailSection.className = "detail-section";
     detailTitle.textContent = "About the Project"
-    releaseDate.textContent = "<b>Release date: </b>" + release;
-    platformAvailable.textContent = "<b>Platforms: </b" + platforms;
-    developerNames.textContent = "<b>Developer: </b>" + developer;
+    releaseDate.textContent = "<b>Release date: </b>" + about.release;
+    platformAvailable.textContent = "<b>Platforms: </b" + about.platforms;
+    developerNames.textContent = "<b>Developer: </b>" + about.developer;
 
     detailSection.appendChild(detailTitle);
     detailSection.appendChild(releaseDate);

src/components/vertical-nav/index.ts

@@ -7,7 +7,7 @@
     background-color: #080808;
     box-shadow: 0px 0px 0px 16px rgba(8,8,8,0.5), 0px 0px 0px 8px rgba(8,8,8,0.5);
 
-    .nav-wrapper {
+    #nav-wrapper {
         width: 230px;
         margin: 0 auto;
     }

src/components/vertical-nav/info-nav.ts

@@ -1,8 +1,8 @@
-import './styles.css'
+import '../components/vertical-nav/styles.css'
 
-import {EventBus} from "../../event-bus";
-import {Events} from "../../consts/events";
-import {handlers} from "../../consts/handlers";
+import {EventBus} from "../event-bus";
+import {Events} from "./events";
+import {handlers} from "./handlers";
 
 const EVENT_BUS = new EventBus<Events>();
 EVENT_BUS.subscribe('button_test', handlers.button_test);

src/components/vertical-nav/project-nav.ts

@@ -1,4 +1,4 @@
-import {renderProjectPage} from "../../../views/project-view";
+import {projectView} from "../../../views/project-view";
 import {ProjectContent} from "../../../views/project-view";
 
 import WEBM_VIDEO from "./assets/spaceCompass-showcase.webm";
@@ -33,5 +33,5 @@ const content: ProjectContent = {
 }
 
 export function ProjectPage() {
-    return renderProjectPage(content);
+    return projectView(content);
 }

src/components/vertical-nav/styles.css

@@ -1,5 +1,6 @@
-import {renderProjectPage} from "../../../views/project-view";
-import {ProjectContent} from "../../../views/project-view/project-view";
+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/tank-showcase.webm";
 import MP4_VIDEO from "./assets/tank-showcase.mp4";
@@ -9,6 +10,7 @@ import SCREENSHOT_2 from "./assets/tank-screenshot-2.jpg"
 import SCREENSHOT_3 from "./assets/tank-screenshot-3.jpg"
 import SCREENSHOT_4 from "./assets/tank-screenshot-4.jpg"
 
+
 const content: ProjectContent = {
     name: "TANK",
     tagline: "A collection of three unique iterations",
@@ -32,6 +34,24 @@ const content: ProjectContent = {
     ]
 }
 
-export function ProjectPage() {
-    return renderProjectPage(content);
+const aboutInfo: AboutProject = {
+    release: "April 29, 2018",
+    platforms: "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"],
+    ["TANKS!", "https://github.com/charlesDouc/CART-415/wiki"]
+]
+
+//-----------------------------------------------------------------------
+
+export function TankView() {
+    return projectView(content);
+}
+
+export function TankInfo() {
+    return projectInfo(aboutInfo, relatedLinksInfo);
 }