Rebased mini-projects website onto vue-component work from Spring 25

Author: biancajayy

components.d.ts

@@ -24,14 +24,13 @@ declare module 'vue' {
     Menubar: typeof import('primevue/menubar')['default']
     Mux: typeof import('./src/components/flow/shapes/Mux.vue')['default']
     MuxNode: typeof import('./src/components/flow/MuxNode.vue')['default']
-    Pseudocode: typeof import('./src/components/Pseudocode.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SiGithub: typeof import('~icons/simple-icons/github')['default']
     SiteNav: typeof import('./src/components/SiteNav.vue')['default']
     Slider: typeof import('primevue/slider')['default']
-    SpecialEdge: typeof import('./src/components/SpecialEdge.vue')['default']
-    SpecialNode: typeof import('./src/components/SpecialNode.vue')['default']
+    TriState: typeof import('./src/components/flow/shapes/TriState.vue')['default']
+    TriStateNode: typeof import('./src/components/flow/TriStateNode.vue')['default']
   }
   export interface ComponentCustomProperties {
     Tooltip: typeof import('primevue/tooltip')['default']

package-lock.json

@@ -30,6 +30,7 @@
     "primevue": "^4.3.4",
     "tailwindcss": "^4.1.5",
     "tailwindcss-primeui": "^0.6.1",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
   }
 }

package.json

@@ -2,15 +2,13 @@
     import { ref, useTemplateRef } from 'vue';
     import { VueFlow } from '@vue-flow/core';
     import { Background } from '@vue-flow/background';
-<<<<<<< HEAD
-    import SpecialNode from './SpecialNode.vue';
-    import SpecialEdge from './SpecialEdge.vue';
-=======
-    import type { LC3Node } from './flow/types';
->>>>>>> 9596c6f (add components to LC3, add types)
+    import type { LC3Node } from './flow/types.d';
+    import ALUNode from './flow/ALUNode.vue';
+    import MuxNode from './flow/MuxNode.vue';
+    import LogicNode from './flow/LogicNode.vue';
+    import TriStateNode from './flow/TriStateNode.vue';
 
     const top = useTemplateRef<HTMLDivElement>("top");
-    const svgEl = useTemplateRef<SVGSVGElement>('lc3Svg');
     defineExpose({
         /**
          * Activates the wire with the given ID, causing it to light up.
@@ -60,15 +58,6 @@
         }
     })
 
-<<<<<<< HEAD
-    const nodes = ref([
-        // an input node, specified by using `type: 'input'`
-        { 
-            id: '1',
-            type: 'input', 
-            position: { x: 250, y: 5 },
-            data: { label: 'Node 1' },
-=======
     const nodes = ref<LC3Node[]>([
         {
             id: "marMux",
@@ -87,7 +76,6 @@
             type: "tristate",
             position: { x: 200, y: -100 },
             data: { label: "GatePC" }
->>>>>>> 9596c6f (add components to LC3, add types)
         },
         { 
             id: "pc",
@@ -258,7 +246,7 @@
 </script>
 
 <style scoped>
-    @reference "@/style.css";
+    @import "@/style.css";
 
     .wire.active {
         fill: var(--p-surface-500, #888888);
@@ -295,11 +283,16 @@
         */
     .lc3-container { padding:0; line-height:0; display:flex; align-items:stretch; justify-content:stretch; }
     .lc3-svg { display:block; width:100%; height:auto; }
+    
+    .vue-flow-container {
+        height: 100%;
+        width: 100%;
+    }
 </style>
 
 <template>
-    <div class="h-full w-full bg-surface-800 rounded">
-        <VueFlow :nodes="nodes" :edges="edges">
+    <div ref="top" class="h-full w-full bg-surface-800 rounded">
+        <VueFlow :nodes="nodes" :edges="edges" class="vue-flow-container">
           <Background pattern-color="var(--color-surface-500)" :gap="16" />
 
           <template #node-alu="props">

src/components/LC3.vue

@@ -4,6 +4,8 @@ import App from './App.vue';
 import PrimeVue from 'primevue/config';
 import Aura from '@primevue/themes/aura';
 import './style.css';
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
 import { definePreset } from '@primevue/themes';
 import type { PrimeVueConfiguration } from 'primevue';
 

src/main.ts

@@ -220,6 +220,7 @@ h1 { margin:0; line-height:1.1; }
 .diagram-col { overflow:auto; }
 .lc3-resized { 
   width:60%;
+  height:600px;
   max-width:1150px;
   display:block;
   /* align diagram flush to pseudocode column by pushing it to the right edge */