Some refactoring, almost done.

conorpo · Dec 24, 2023 · a51a4de · a51a4de
1 parent 9bcea30
commit a51a4de
Show file tree

Hide file tree

Showing 61 changed files with 199 additions and 178 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 out
-./assets
+.assets/
+docs/
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -2,12 +2,18 @@
     // See https://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
     "version": "2.0.0",
+    "problemMatcher": [],
     "tasks": [
+        {
+            "label": "Compress Images",
+            "type": "shell",
+            "command": ".assets/compress_images.sh",
+
+        },
         {
             "label": "JSDOC",
             "type": "shell",
-            "command": "jsdoc ./js/*",
-            "problemMatcher": []
+            "command": "jsdoc ./js/* -d ./docs",
         }
     ]
 }
diff --git a/README.md b/README.md
@@ -1,2 +1,16 @@
 # conorpo.github.io
-Conor's collection of games and various other things.
+Conor's collection of games and various other things.
+
+Site: https://conorpo.github.io/
+
+Docs: https://conorpo.github.io/docs/
+
+```
+TODO
+
+Make Card Hand System More Dynamic (swap around cards, place cards in spots that make sense)
+
+If mouse movement isnt fixed in Firefox, switch to manual smoothing.
+
+Edit about page after contact card is taken
+```
diff --git a/assets/background.webp b/assets/background.webp
diff --git a/assets/card_backing_temp.jpg b/assets/card_backing_temp.jpg
diff --git a/assets/card_slot.png b/assets/card_slot.png
diff --git a/assets/cards/about.jpg b/assets/cards/about.jpg
diff --git a/assets/cards/about.png b/assets/cards/about.png
diff --git a/assets/cards/about.webp b/assets/cards/about.webp
diff --git a/assets/cards/card_backing.jpg b/assets/cards/card_backing.jpg
diff --git a/assets/cards/card_backing.png b/assets/cards/card_backing.png
diff --git a/assets/cards/card_backing.webp b/assets/cards/card_backing.webp
diff --git a/assets/cards/climbing.jpg b/assets/cards/climbing.jpg
diff --git a/assets/cards/climbing.png b/assets/cards/climbing.png
diff --git a/assets/cards/climbing.webp b/assets/cards/climbing.webp
diff --git a/assets/cards/contact.jpg b/assets/cards/contact.jpg
diff --git a/assets/cards/contact.png b/assets/cards/contact.png
diff --git a/assets/cards/contact.webp b/assets/cards/contact.webp
diff --git a/assets/cards/mandelbulb.jpg b/assets/cards/mandelbulb.jpg
diff --git a/assets/cards/mandelbulb.png b/assets/cards/mandelbulb.png
diff --git a/assets/cards/mandelbulb.webp b/assets/cards/mandelbulb.webp
diff --git a/assets/cards/projects.jpg b/assets/cards/projects.jpg
diff --git a/assets/cards/projects.png b/assets/cards/projects.png
diff --git a/assets/cards/projects.webp b/assets/cards/projects.webp
diff --git a/assets/cards/resume.jpg b/assets/cards/resume.jpg
diff --git a/assets/cards/resume.png b/assets/cards/resume.png
diff --git a/assets/cards/resume.webp b/assets/cards/resume.webp
diff --git a/assets/cards/thisSite.jpg b/assets/cards/thisSite.jpg
diff --git a/assets/cards/thisSite.png b/assets/cards/thisSite.png
diff --git a/assets/cards/thisSite.webp b/assets/cards/thisSite.webp
diff --git a/assets/combinepdf.pdf b/assets/combinepdf.pdf
diff --git a/assets/desktop.ini b/assets/desktop.ini
diff --git a/assets/paper_texture.jpg b/assets/paper_texture.jpg
diff --git a/assets/pictures/about_me_1.jpg b/assets/pictures/about_me_1.jpg
diff --git a/assets/pictures/about_me_1.png b/assets/pictures/about_me_1.png
diff --git a/assets/pictures/about_me_1.webp b/assets/pictures/about_me_1.webp
diff --git a/assets/pictures/about_me_2.jpg b/assets/pictures/about_me_2.jpg
diff --git a/assets/pictures/about_me_2.png b/assets/pictures/about_me_2.png
diff --git a/assets/pictures/about_me_2.webp b/assets/pictures/about_me_2.webp
diff --git a/assets/pictures/about_me_3.PNG b/assets/pictures/about_me_3.PNG
diff --git a/assets/pictures/instructions.png b/assets/pictures/instructions.png
diff --git a/assets/proposal.pdf b/assets/proposal.pdf
diff --git a/assets/title.png b/assets/title.png
diff --git a/assets/ui/card_slot.webp b/assets/ui/card_slot.webp
diff --git a/assets/corner.svg → assets/ui/corner.svg b/assets/corner.svg → assets/ui/corner.svg
diff --git a/assets/corner2.svg → assets/ui/corner2.svg b/assets/corner2.svg → assets/ui/corner2.svg
diff --git a/assets/line.svg → assets/ui/line.svg b/assets/line.svg → assets/ui/line.svg
diff --git a/assets/ui/title.webp b/assets/ui/title.webp
diff --git a/assets/wood-background.jpg b/assets/wood-background.jpg
diff --git a/index.html b/index.html
@@ -18,22 +18,22 @@
 <body>
   <div class="global-container start" id="globalContainer">
 
-    <img src="./assets/title.png" class="title" alt="conorpo.github.io">
+    <img src="./assets/ui/title.webp" class="title" alt="conorpo.github.io">
     <div class="title title-text"><span>conorpo</span>.<span>github</span>.<span>io</span></div>
 
-    <img src="./assets/corner.svg" class="corner bottom-right" alt="">
-    <img src="./assets/corner.svg" class="corner bottom-left"alt="">
-    <img src="./assets/corner2.svg" class="corner top-left"alt="">
-    <img src="./assets/corner.svg" class="corner top-right"alt="">
+    <img src="./assets/ui/corner.svg" class="corner bottom-right" alt="">
+    <img src="./assets/ui/corner.svg" class="corner bottom-left"alt="">
+    <img src="./assets/ui/corner2.svg" class="corner top-left"alt="">
+    <img src="./assets/ui/corner.svg" class="corner top-right"alt="">
     <span class="footer">Made from scratch in HTML / CSS / Javascript</span>
     <div class="playing-area" id="playingArea">
-      <img src="./assets/card_slot.png" class="card-slot" id="cardSlot" alt="">
+      <img src="./assets/ui/card_slot.webp" class="card-slot" id="cardSlot" alt="">
     </div>
-    <img src="./assets/line.svg" alt="" class="divider">
+    <img src="./assets/ui/line.svg" alt="" class="divider">
     <div class="info-area" id="infoArea">
       <div id="aboutInfo" class="info about hidden" data-cardsheld="contact climbing">
-        <img src="./assets/pictures/about_me_1.png" alt="" class="aboutImage1">
-        <img src="./assets/pictures/about_me_2.png" alt="" class="aboutImage2">
+        <img src="./assets/pictures/about_me_1.webp" alt="" class="aboutImage1">
+        <img src="./assets/pictures/about_me_2.webp" alt="" class="aboutImage2">
         <div class="aboutText">
           <h1>About Me</h1>
           <div>  
@@ -75,16 +75,6 @@ <h1 class="personal">Personal</h1>
         <iframe id="marchingcubes-iframe"></iframe>
       </div>
     </div>
-
-    <div id="marchingcubesCard" data-cardname="marchingcubes" data-cardindex=9 class="card-container down hidden" style="transform: translate(50vw,40vh) rotate(10deg);"></div>
-    <div id="knightHacksCard" data-cardname="knightHacks" data-cardindex=8 class="card-container down hidden" style="transform: translate(50vw,40vh) rotate(10deg);"></div>
-    <div id="contactCard" data-cardname="contact" data-cardindex=7  class="card-container down hidden" style="transform: translate(77.3vw,58vh) rotate(90deg);"></div>
-    <div id="climbingCard" data-cardname="climbing" data-cardindex=6  class="card-container down hidden" style="transform: translate(38vw,44vh) rotate(-10deg);"></div>
-    <div id="thisSiteCard" data-cardname="thisSite" data-cardindex=5  class="card-container down hidden" style="transform: translate(40vw,30vh) rotate(-10deg);"></div>
-    <div id="mandelbulbCard" data-cardname="mandelbulb" data-cardindex=4  class="card-container down hidden" style="transform: translate(42vw,40vh) rotate(30deg);"></div>
-    <div id="resumeCard" data-cardname="resume" data-cardindex=3  class="card-container down" style="transform: translate(52vw,46vh) rotate(-20deg);"></div>
-    <div id="projectsCard" data-cardname="projects" data-cardindex=2  class="card-container down" style="transform: translate(40vw,41vh) rotate(30deg);"></div>
-    <div id="aboutCard" data-cardname="about" data-cardindex=1 class="card-container down" style="transform: translate(47vw,35vh) rotate(-5deg);"></div>
   </div>
   <div id="soundContainer"></div>
   </body>

diff --git a/js/Card.js b/js/Card.js
@@ -10,28 +10,42 @@ import {elements} from './elements.js';
  * */
 
 
-/** @typedef {Object} Card
- * @property {number} index The index of the card in the hand
+/** 
+ * @typedef {Object} Card
  * @property {string} name The name of the card
  * @property {number} status The status of the card (0 is in hand, 1 is dragging, 2 is in active slot)
+ * 
  * @property {HTMLElement} element The actual HTML element of the card
  * @property {HTMLElement} infoElement The corresponding html info element that is revealed when card is active
- * @property {boolean} hasIframe Whether the info element has an iframe
+ * @property {HTMLIFrameElement} iframeElement The iframe element
  * @property {number} iframeTimeout The timeout for the iframe
  * @property {function} iframeSrcFunc The function to get the iframe src
+ * 
  * @property {function} activate Activates the card
- * @property {function} setStatus Sets the status of the card
+ * 
  * @property {function} pickUp Picks up the card
  * @property {function} backToHand Returns the card to the hand
+ * 
  * @property {function} showInfo Shows the info element
  * @property {function} hideInfo Hides the info element
- * @property {function} sameAs Checks if the card is the same as another card
- * The card object
+ * 
+ * @property {function} updateTransform Updates the transform of the card
+ * @description The card object
  * */
 
 
 /** @type {Card} */
 const card_proto = {
+    // Assigned in create_card
+    name: null, 
+    status: null,
+
+    element: null,
+    infoElement: null,
+    iframeElement: null,
+    iframeTimeout: null,
+    iframeSrcFunc: null,
+
     activate() {
         this.status = 2;
 
@@ -45,13 +59,6 @@ const card_proto = {
 
         window.location.hash = `#${this.name}`;
     },
-    /**
-     * Status setter so that optional chaning can be used
-     * @param {number} code The code to set, (0 is in hand, 1 is dragging, 2 is in active slot) 
-     */
-    setStatus(code){ 
-        this.status = code;
-    },
     pickUp(){
         sounds.get("pickup").play();
 
@@ -71,85 +78,119 @@ const card_proto = {
     },
     backToHand(){
         this.status = 0;
-        state.mouse_over_card = null;
         this.element.classList.remove("active");
         this.element.classList.remove("drag");
     },
     showInfo(){
-        if(this.hasIframe){
-            clearTimeout(this.iframeTimeout);
-            this.infoElement.lastElementChild.src = this.iframeSrcFunc();
+        this.infoElement.classList.remove("hidden");
+
+        if(this.iframeElement){
+            if(this.iframeTimeout) clearTimeout(this.iframeTimeout);
+            this.iframeElement.src = this.iframeSrcFunc();
         }
 
-        this.infoElement.classList.remove("hidden");
-        this.infoElement.getAttribute("data-cardsheld")?.split(" ").forEach(str => {
-            console.log(str);
-            document.getElementById(str+"Card")?.classList.remove("hidden");
+        info_card_map.get(this)?.forEach(card => {
+            card.element.classList.remove("hidden");
         });
     },
     hideInfo(){
-        if(this.hasIframe){
+        this.infoElement.classList.add("hidden");
+
+        if(this.iframeElement){
             this.iframeTimeout = setTimeout(() => {
-                this.infoElement.lastElementChild.src = "";
+                this.iframeElement.src = "";
             }, 500);
         }
 
-        this.infoElement.classList.add("hidden");
-        this.infoElement.getAttribute("data-cardsheld")?.split(" ").forEach(str => {
-            document.getElementById(str+"Card")?.classList.add("hidden");
+        info_card_map.get(this)?.forEach(card => {
+            card.element.classList.add("hidden");
         });
     },
-    sameAs(other){
-        if(other == null || other == undefined) return false;
-        return this.index == other.getAttribute("data-cardindex");
+    updateTransform(string){
+        this.element.style.transform = string;
     }
 }
 
+
+// <div id="marchingcubesCard" data-cardname="marchingcubes" data-cardindex=9 class="card-container down hidden" style="transform: translate(50vw,40vh) rotate(10deg);"></div>
+// <div id="knightHacksCard" data-cardname="knightHacks" data-cardindex=8 class="card-container down hidden" style="transform: translate(50vw,40vh) rotate(10deg);"></div>
+// <div id="contactCard" data-cardname="contact" data-cardindex=7  class="card-container down hidden" style="transform: translate(77.3vw,58vh) rotate(90deg);"></div>
+// <div id="climbingCard" data-cardname="climbing" data-cardindex=6  class="card-container down hidden" style="transform: translate(38vw,44vh) rotate(-10deg);"></div>
+// <div id="thisSiteCard" data-cardname="thisSite" data-cardindex=5  class="card-container down hidden" style="transform: translate(40vw,30vh) rotate(-10deg);"></div>
+// <div id="mandelbulbCard" data-cardname="mandelbulb" data-cardindex=4  class="card-container down hidden" style="transform: translate(42vw,40vh) rotate(30deg);"></div>
+// <div id="resumeCard" data-cardname="resume" data-cardindex=3  class="card-container down" style="transform: translate(52vw,46vh) rotate(-20deg);"></div>
+// <div id="projectsCard" data-cardname="projects" data-cardindex=2  class="card-container down" style="transform: translate(40vw,41vh) rotate(30deg);"></div>
+// <div id="aboutCard" data-cardname="about" data-cardindex=1 class="card-container down" style="transform: translate(47vw,35vh) rotate(-5deg);"></div>
+
+/**
+ * @type {Object<string, Card>}
+ * @description A map of the card names to the card objects
+ */
+export const cards = {};
+
+/**
+ * @type {Map<HTMLElement, Card>}
+ * @description A map of the card elements to the card objects
+*/
+export const element_card_map = new Map();
+
+/**
+ * @type {Map<Card, Array<Card>>}
+ * @description A map of the info elements to the card objects that they contain
+*/
+const info_card_map = new Map();
+
+/**
+ * All cards on the site are defined here (order is defined here too)
+*/
 export function create_cards(){
-    const cards = [];
-    cards.push()
-    return cards;
-}
+    cards.about = create_card("about")
+    cards.projects = create_card("projects")
+    cards.resume = create_card("resume", () => "./assets/resume.pdf")
+    cards.mandelbulb = create_card("mandelbulb", () => "https://conorpo.github.io/webgl_mandelbulb/")
+    cards.thisSite = create_card("thisSite", () => `index.html?${!location.search ? 1 : Number(location.search.split("?").pop()) + 1}`)
+    cards.climbing = create_card("climbing")
+    cards.contact = create_card("contact")
+    cards.knightHacks = create_card("knightHacks")
+    cards.marchingcubes = create_card("marchingcubes", () => "https://conorpo.github.io/marching-cubes-webgpu")
+
+    info_card_map.set(cards.about, [cards.contact, cards.climbing, cards.resume]);
+    info_card_map.set(cards.projects, [cards.mandelbulb, cards.thisSite, cards.knightHacks, cards.marchingcubes]);
+};
 
 /**
  * Creates a card object
  * @param {string} name The name of the card
- * @param {number} index The index of the card in the hand
- * @param {function} iframeSrcFunc The function to get the iframe src
+ * @param {function} [iframeSrcFunc] The function to get the iframe src (if this is not included, it is assumed that the card does not have an iframe)
  * @returns {Card} The card object
  */
-
-export function create_card(name, index, iframeSrcFunc) {
+function create_card(name, iframeSrcFunc) {
     /** @type {Card} */
     const card = Object.create(card_proto);
-    card.index = index;
+
     card.name = name;
     card.iframeSrcFunc = iframeSrcFunc;
+    card.status = 0; //0 is not found, 2 is in hand, 3 is dragging, 4 is in active slot
 
-    card.setStatus(0);
-
     /** The actual HTML element of the card */
     card.element = document.createElement("DIV");
-    card.element.hidden = true;
-
-    card.element.classList.add("card-container");
-    card.element.style.setProperty('--image-url', `center/100% url(assets/cards/${card.name}.jpg)`);
-    card.element.classList.add("hand");
-    card.element.classList.remove("down");
+    // card.element.hidden = true;
+    card.element.classList.add("down");
+    card.element.style.setProperty('--image-url', `center/100% url(assets/cards/${card.name}.webp)`);
     card.element.addEventListener("mousedown", () => {card.pickUp()});
     card.element.addEventListener("mouseup", () => {if(card.status == 2) {elements.get("playingArea").dispatchEvent(new Event('mouseup'))}});
-    
+
     /** The corresponding html info element that is revealed when card is active */
-    card.infoElement = document.getElementById(card.name+"Info");
-    card.hasIframe = card.infoElement?.lastElementChild?.tagName?.toLowerCase() == "iframe";
-    card.iframeTimeout = null;
-
-    /** Remove the Card from any assocaited info elements */
-    if(state.activeCard){
-        let cardsHeldString = state.activeCard?.infoElement.getAttribute("data-cardsheld");
-        cardsHeldString = cardsHeldString.replace(card.name,"").replace("  "," ").trim();
-        state.activeCard?.infoElement.setAttribute("data-cardsheld", cardsHeldString);
-    }
+    card.infoElement = document.getElementById(`${card.name}Info}`);
+    if(!(card.infoElement instanceof HTMLElement)) throw new ReferenceError(`Info element for card ${card.name} not found`);
+    const _iframeElement = document.getElementById(`${card.name}Iframe`);
+    card.iframeElement = (iframeSrcFunc && _iframeElement instanceof HTMLIFrameElement) ? _iframeElement : null;
+    if(!iframeSrcFunc != !card.iframeElement) throw new Error(`Either iframeSrcFunc or iframeElement is not defined for card ${card.name}`);
+
+    /** Add it to the dom and cards object*/
+    elements.get("globalContainer").appendChild(card.element);
+    cards[card.name] = card;
+    element_card_map.set(card.element, card);
 
     return card;
 }
diff --git a/js/config.js b/js/config.js
@@ -35,16 +35,13 @@ export const config = {
   wobbleSpeed: 3,
 
   activeScale: 1.20,
-
-  thisSite: () => `index.html?${!location.search ? 1 : Number(location.search.split("?").pop()) + 1}`,
-  mandelbulb: () => `https://conorpo.github.io/webgl_mandelbulb/`,
-  projects: () => `https://github.com/conorpo`,
-  resume: () => `./assets/resume.pdf`,
-
   /** Updates */
   updateCSS() {
-    document.documentElement.style.setProperty('--cardWidth', this.cardWidth + "px");
-    document.documentElement.style.setProperty('--cardHeight', this.cardHeight + "px");
-    document.documentElement.style.setProperty('--activeScale', this.activeScale);
+    document.documentElement.style.setProperty('--cardWidth', `${this.cardWidth}px`);
+    document.documentElement.style.setProperty('--cardHeight', `${this.cardHeight}px`);
+    document.documentElement.style.setProperty('--activeScale', `${this.activeScale}`);
   }
-};
+};
+
+// @ts-ignore
+window.config = config;
diff --git a/js/elements.js b/js/elements.js
@@ -2,7 +2,7 @@
 /**
  * @module elements
  * @description Gets elements from the DOM
- */
+*/
 
 /** @type {Map<String,HTMLElement>} */
 export const elements = new Map();