wip: nav info content

Author: cd-bash

src/components/vertical-nav/index.ts

@@ -2,13 +2,14 @@
 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";
 
 //-----------------------------------------------------------------------
 
-export function VerticalNav() {
+export function verticalNav() {
     const navBox = document.createElement("div");
     const navWrapper = document.createElement("div");
 
@@ -19,6 +20,7 @@ export function VerticalNav() {
     navBox.appendChild(headerNav());
     navBox.appendChild(navWrapper);
     navWrapper.appendChild(trackBreadcrumbs());
+    navWrapper.appendChild(renderInfo());
     navBox.appendChild(footerNav());
 
     return navBox;

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

@@ -0,0 +1,9 @@
+
+
+export function renderInfo() {
+    const infoSection = document.createElement("div");
+
+    infoSection.id = "info-section";
+
+    return infoSection;
+}

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

@@ -0,0 +1,70 @@
+export type AboutProject = [
+    release: string,
+    platforms: string,
+    developer: string
+]
+
+export type RelatedLinks = [
+    name: string,
+    path: string,
+]
+
+export function projectInfo(about: AboutProject, links: RelatedLinks[]) {
+    const info = document.createElement("div");
+
+    if (about != null) {
+        info.appendChild(sectionAboutTheGame(about));
+    }
+
+    if (links != null) {
+        info.appendChild(sectionRelatedLinks(links));
+    }
+}
+
+
+function sectionAboutTheGame(about: AboutProject) {
+    const [release, platforms, developer] = about;
+
+    const detailSection = document.createElement('div');
+    const detailTitle = document.createElement("h4");
+    const releaseDate = document.createElement("p");
+    const platformAvailable = document.createElement("p");
+    const developerNames = document.createElement("p");
+
+    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;
+
+    detailSection.appendChild(detailTitle);
+    detailSection.appendChild(releaseDate);
+    detailSection.appendChild(platformAvailable);
+    detailSection.appendChild(developerNames);
+
+    return detailSection;
+}
+
+
+function sectionRelatedLinks(relatedLinks: RelatedLinks[]) {
+    const detailSection = document.createElement('div');
+    const linkList = document.createElement('ul');
+
+    detailSection.className = "detail-section";
+    detailSection.appendChild(linkList);
+
+    relatedLinks.forEach(relatedLink => {
+        const [name, path] = relatedLink;
+        const linkLine = document.createElement('li');
+        const link = document.createElement("a");
+
+        link.href = path;
+        link.target = "_blank";
+        link.textContent = name;
+
+        linkList.appendChild(linkLine);
+        linkLine.appendChild(link);
+    })
+
+    return detailSection;
+}

src/index.ts

@@ -1,16 +1,15 @@
 import './views/home-view/styles.css';
 import { ProjectPage } from "./content/projects/tank";
-import { VerticalNav } from "./components/vertical-nav";
+import { verticalNav } from "./components/vertical-nav";
 import {createContentBase, renderContent} from "./views/utils";
 
 
 function init() {
-    createContentBase();
+    const body = document.getElementsByTagName("body")[0];
+    const contentPage = createContentBase();
 
-    const contentPage = document.getElementById('content-page')
-    const verticalNav = VerticalNav();
-
-    contentPage?.appendChild(verticalNav);
+    body.appendChild(contentPage);
+    contentPage.appendChild(verticalNav());
 
     renderContent(ProjectPage);
 }

src/views/utils/view-utils.ts

@@ -11,6 +11,7 @@ export function createContentBase() {
     wrapper.id = 'wrapper';
 
     page.appendChild(wrapper);
+    return page;
 }
 
 export function renderContent(contentFn: Function) {