fix: clean view before rendering

Author: cd-bash

src/components/vertical-nav/index.ts

@@ -51,10 +51,8 @@ export function buildVerticalNav() {
     return navBox;
 }
 
-export function renderNavInfo(infoFn: Function) {
+export function renderNavInfo(info: HTMLElement) {
     const navWrapper = clearInfo();
-    const info = infoFn();
-
     navWrapper?.appendChild(info);
 }
 
@@ -121,11 +119,8 @@ function clearInfo() {
     const cleanInfo = document.getElementById('nav-wrapper');
     cleanInfo?.childNodes.forEach((childNode) => {
         cleanInfo.removeChild(childNode);
-        console.log("hi");
     });
 
-    console.log(cleanInfo);
-
     return cleanInfo;
 }
 

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

@@ -40,7 +40,7 @@ function sectionAboutTheGame(about: AboutProject) {
     detailSection.className = "detail-section";
     detailTitle.textContent = "About the Project"
     releaseDate.innerHTML = "<b>Release date: </b>" + about.release;
-    platformAvailable.innerHTML = "<b>Platforms: </b" + about.platforms;
+    platformAvailable.innerHTML = "<b>Platforms: </b>" + about.platforms;
     developerNames.innerHTML = "<b>Developer: </b>" + about.developer;
 
     detailSection.appendChild(detailTitle);

src/components/vertical-nav/styles.css

@@ -134,5 +134,39 @@
 
     }
 
+    .detail-section {
+        padding: 15px 0;
+    }
+
+    .detail-section h4 {
+        font-family: "Cabin", sans-serif;
+        color: white;
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 1em;
+    }
+
+    .detail-section ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .detail-section ul li {
+        font-family: "Cabin", sans-serif;
+        font-size: 0.9em;
+    }
+
+    .detail-section ul li a {
+        color: #a1a1a1;
+    }
+
+    .detail-section p  {
+        font-family: "Cabin", sans-serif;
+        color: #a1a1a1;
+        font-size: 0.9em;
+        line-height: 45%;
+    }
+
 }
 

src/consts/toBeDeleted.ts

@@ -9,6 +9,8 @@ import SCREENSHOT_1 from "./assets/spaceCompass-screenshot-1.jpg"
 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"
+import {renderNavInfo} from "../../../components/vertical-nav";
+import {renderView} from "../../../views/utils";
 
 
 const content: ProjectContent = {
@@ -48,9 +50,11 @@ const relatedLinksInfo: RelatedLinks[] = [
 //-----------------------------------------------------------------------
 
 export function SpaceCompassView() {
-    return projectView(content);
+    const viewContent = projectView(content);
+    return renderView(viewContent);
 }
 
 export function SpaceCompassInfo() {
-    return projectInfo(aboutInfo, relatedLinksInfo);
+    const navInfo = projectInfo(aboutInfo, relatedLinksInfo);
+    return renderNavInfo(navInfo);
 }

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

@@ -9,12 +9,14 @@ import SCREENSHOT_1 from "./assets/tank-screenshot-1.jpg"
 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"
+import {renderNavInfo} from "../../../components/vertical-nav";
+import {renderView} from "../../../views/utils";
 
 
 const content: ProjectContent = {
     name: "TANK",
     tagline: "A collection of three unique iterations",
-    path: "www.charlesdoucet.com/interactives/",
+    path: "www.charlesdoucet.com/interactive/",
 
     paragraphs: [
         "TANK assemble three different games, each based on the original TANKS! game made by Unity Technologies. It’s an exploration of mechanics and the discovery of new environment. The game is experimental and has the goal to dig the player’s curiosity. Prepare yourself as you step into unknown territory, revealing the ruins of a lost civilization.",
@@ -49,9 +51,12 @@ const relatedLinksInfo: RelatedLinks[] = [
 //-----------------------------------------------------------------------
 
 export function TankView() {
-    return projectView(content);
+    const viewContent = projectView(content);
+    return renderView(viewContent);
 }
 
 export function TankInfo() {
-    return projectInfo(aboutInfo, relatedLinksInfo);
+    const navInfo = projectInfo(aboutInfo, relatedLinksInfo);
+    return renderNavInfo(navInfo);
+
 }

src/content/projects/tank/index.ts

@@ -1,7 +1,7 @@
 import './views/home-view/styles.css';
 import {TankInfo, TankView} from "./content/projects/tank";
-import {buildVerticalNav, renderNavInfo} from "./components/vertical-nav";
-import {buildViewBase, renderView} from "./views/utils";
+import {buildVerticalNav} from "./components/vertical-nav";
+import {buildViewBase} from "./views/utils";
 
 
 function init() {
@@ -13,8 +13,8 @@ function init() {
     contentPage.appendChild(verticalNav);
 
 
-    renderView(TankView);
-    renderNavInfo(TankInfo);
+    TankView();
+    TankInfo();
 }
 
 init();

src/index.ts

@@ -1,6 +1,6 @@
 /*
- VIEW-UTILITIES
- Are functions used to build the skeleton of content pages.
+ VIEW-UTILITIESed to
+ Are functions usbuild the skeleton of content pages.
  They are mostly used when building templates.
  */
 
@@ -14,10 +14,8 @@ export function buildViewBase() {
     return viewBox;
 }
 
-export function renderView(viewFn: Function) {
+export function renderView(view: HTMLElement) {
     const viewWrapper = clearView();
-    const view = viewFn();
-
     viewWrapper.appendChild(view);
 }