feat: [#35] new project content

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

@@ -0,0 +1,89 @@
+import {renderer} from "./project-data-cube.ts";
+
+export type OutsideLink = [
+    name: string,
+    path: string,
+]
+
+export type LinkCollection = [
+    title: string,
+    links: OutsideLink[],
+]
+
+export type LinkButton = [
+    label: string,
+]
+
+//-----------------------------------------------------------------------
+
+export function projectInfo(collections: LinkCollection[], buttons: LinkButton[]) {
+    const container = document.createElement('div');
+    container.className = "project-info";
+    container.appendChild(dataSection());
+
+    collections.forEach(collection => {
+        const [title, links] = collection;
+        container.appendChild(linkSection(title, links));
+    })
+
+    buttons.forEach(button => {
+        const [label] = button;
+        container.appendChild(buttonSection(label));
+    })
+
+    return container;
+}
+
+//-----------------------------------------------------------------------
+
+function linkSection(title: string, links: OutsideLink[]) {
+    const section = document.createElement('section');
+    const sectionTitle = document.createElement("h4");
+    const linkList = document.createElement('ul');
+
+    sectionTitle.textContent = title;
+
+    section.appendChild(sectionTitle);
+    section.appendChild(linkList);
+
+    links.forEach(link => {
+        const [name, path] = link;
+        const linkLine = document.createElement('li');
+        const linkElement = document.createElement("a");
+
+        linkElement.href = path;
+        linkElement.target = "_blank";
+        linkElement.textContent = name;
+
+        linkList.appendChild(linkLine);
+        linkLine.appendChild(linkElement);
+    })
+
+    return section;
+}
+
+function buttonSection(label: string) {
+    const section = document.createElement('section');
+    const buttonLine = document.createElement('button');
+
+    buttonLine.type = "button";
+    buttonLine.textContent = label;
+
+    section.appendChild(buttonLine);
+
+    return section;
+}
+
+function dataSection() {
+    const detailSection = document.createElement("section");
+    const detailTitle = document.createElement("h4");
+    detailTitle.textContent = "Tech Distribution";
+
+    detailSection.appendChild(detailTitle);
+    detailSection.appendChild(renderer.domElement);
+
+    return detailSection;
+}
+
+
+

src/components/vertical-nav/styles.css

@@ -5,11 +5,57 @@
     width: 300px;
     height: 100%;
     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);
+    box-shadow: 0 0 0 16px rgba(8,8,8,0.5), 0 0 0 8px rgba(8,8,8,0.5);
 
     #nav-wrapper {
         width: 230px;
         margin: 0 auto;
+
+        section {
+            padding: 60px 0 0 0;
+
+            h4 {
+                font-family: "Cabin", sans-serif;
+                color: white;
+                text-transform: uppercase;
+                font-weight: bold;
+                font-size: 1em;
+                margin: 0 0 20px 0;
+                padding: 0;
+            }
+
+            ul {
+                list-style-type: none;
+                padding: 0;
+                margin: 0;
+            }
+
+            li {
+                display: block;
+                line-height: 180%;
+                font-family: "handjet", serif;
+                font-size: 1em;
+                color: white;
+            }
+
+            a {
+                color: #a1a1a1;
+                text-decoration-color: #3BFFC5;
+            }
+
+            button {
+                width: 100%;
+                color: white;
+                font-family: "Handjet", serif;
+                font-size: 1.5em;
+                font-weight: bold;
+                text-transform: uppercase;
+                padding: 10px 0;
+                background-color: #FF523B;
+                border-radius: 5px;
+                border: none;
+            }
+        }
     }
 
     .top-triangle {

src/content/projects/index.ts

@@ -1,19 +1,14 @@
 import {projectView} from "../../views/project-view";
-import {projectInfo} from "../../components/vertical-nav/project-nav.ts";
+import {projectInfo} from "../../components/vertical-nav/info-project.ts";
 import {renderView} from "../../views/utils";
 import {renderNavInfo} from "../../components/vertical-nav";
 import {createThumbnail} from "../../components/thumbnail";
 
-import * as nextUx from "./next-ux";
-import * as tank from "./tank";
 import * as spaceCompass from "./space-compass";
 
 
 const pageReferences: { [key: string]: any } = {
-    "next-ux": nextUx,
     "space-compass": spaceCompass,
-    "tank": tank,
-
 };
 
 //-----------------------------------------------------------------------
@@ -25,7 +20,7 @@ export function buildProjectPage(pageReference: string) {
         return;
     }
     const viewContent = projectView(page!.content);
-    const navInfo = projectInfo(page!.aboutInfo, page!.relatedLinksInfo);
+    const navInfo = projectInfo(page!.linkSections, page!.buttons);
 
     renderNavInfo(navInfo);
     renderView(viewContent);

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

@@ -1,5 +1,5 @@
 import {ProjectContent} from "../../../views/project-view";
-import {AboutProject, RelatedLinks} from "../../../components/vertical-nav/project-nav.ts";
+import {LinkButton, LinkCollection, OutsideLink} from "../../../components/vertical-nav/info-project.ts";
 import {thumbnailContent} from "../../../components/thumbnail";
 
 import WEBM_VIDEO from "./assets/spaceCompass-showcase.webm";
@@ -14,13 +14,12 @@ import THUMBNAIL from "./assets/spaceCompass-thumbnail.jpg";
 
 
 export const content: ProjectContent = {
-    name: "Space Compass",
-    tagline: "A 360 Odyssey",
-    path: "www.charlesdoucet.com/interactive/",
+    title: "Space Compass",
+    subtitle: "game prototype - winter 2020",
 
+    tagline: "Radial Navigation",
     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.",
-        "I’ve put a lot of effort in the UI elements like the main menu and the in-game interfaces. I wanted those interfaces to be dynamic and attractive while being in a minimal environment."
+        "This space-themed shooter features circular movement constraints, requiring players to evade or eliminate various asteroids and structures."
     ],
 
     heroVideo: [
@@ -36,21 +35,28 @@ export const content: ProjectContent = {
     ]
 }
 
-export const aboutInfo: AboutProject = {
-    release: "March 20, 2020",
-    platforms: "Web, Windows, Mac",
-    developer: "Charles Doucet"
-}
-
-export const relatedLinksInfo: RelatedLinks[] = [
+const relatedLinksInfo: OutsideLink[] = [
     ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"],
     ["GitHub Project", "https://github.com/charlesDouc/CART-415/wiki"]
 ]
 
+const creditLinks: OutsideLink[] = [
+    ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"],
+]
+
+export const linkSections: LinkCollection[] = [
+    ["Related Links", relatedLinksInfo],
+    ["Credits", creditLinks]
+]
+
+export const buttons: LinkButton[] = [
+    ["Try It Online"]
+]
+
 export const thumbnail: thumbnailContent = {
     thumbnail: THUMBNAIL,
-    title: content.name,
-    description: "A space shooter where the player has to dodge and destroy asteroids to get the highest score.",
+    title: content.title,
+    description: "A space shooter where players must dodge and destroy asteroids for high scores.",
     tags: ["Unity", "Game Design"],
     path: "space-compass"
 }