partially added badges, currently buggy

components/Badge.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="badge" :style="badges[props.id].color" v-if="badges[props.id]">
+  <!-- <div class="badge" v-if="badges[props.id]"> -->
+    <img :src=badges[props.id].icon class="icon"  />
+    <p class="text">{{ badges[props.id].name }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  
+ 
+
+  // methods:{
+  //   meow()
+  //     {
+  //       return "color : blue;" 
+  //     }
+  // }
+  
+
+
+  const props = defineProps<{
+    id: string,
+    // text: string,
+    // icon: string,
+  }>();
+
+  type IBadge = {
+   name: string;
+   icon: string;
+   color: string;
+  }
+
+  function meow() {
+    return 1;
+  }
+
+  //todo: in future make the icons local instead of links
+  const badges: { [id: string]: IBadge; } = {
+    "godot4": { name: "Godot 4", color:"background-color : white", icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/2048px-Godot_icon.svg.png"},
+    "unity": { name: "Unity", color:"background-color : white", icon: "https://static-00.iconduck.com/assets.00/unity-icon-999x1024-kgzo1ar1.png"},
+    "gamejam": { name: "Game Jam!", color:"background-color : yellow", icon: "https://static-00.iconduck.com/assets.00/timer-icon-512x512-vrl212i7.png"},
+    "vue": { name: "Vue", color:"background-color : white", icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvsXyz8eDobC4MvaRkM3zmOZ9ETdrS0ozGCQ&s"},
+    "nuxt": { name: "Nuxt", color:"background-color : white", icon: "https://nuxt.com/assets/design-kit/icon-green.svg"},
+    "my-linkedin": { name: "Tom Howarth", color:"background-color : white", icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/960px-LinkedIn_logo_initials.png"},
+    "my-email": { name: "tomhowarth23@gmail.com", color:"background-color : white", icon: "https://static-00.iconduck.com/assets.00/email-circle-fill-icon-2048x2048-pa63yusl.png"},
+    "airtable": { name: "Airtable", color:"background-color : white", icon: "https://www.svgrepo.com/show/353383/airtable.svg"},
+    "threejs": { name: "Three.js", color:"background-color : white", icon: "https://canada1.discourse-cdn.com/flex035/uploads/threejs/optimized/2X/e/e4f86d2200d2d35c30f7b1494e96b9595ebc2751_2_1016x1024.png"},
+    "steam": { name: "Steam API", color:"background-color : white", icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/2048px-Steam_icon_logo.svg.png"},
+    "prototype":{name: "Prototype", color:"background-color : CornflowerBlue", icon:"https://cdn-icons-png.flaticon.com/512/6941/6941302.png"},
+  };
+
+  // i wanna add some sort of data here, likely a dictionary, that matches a string to a Display name, Icon and Color for a badge
+  // match the given id to the dictionary, then load its values into the html
+
+</script>
+
+<style scoped>
+  .badge{
+    display: flex;
+    flex-direction: row;
+    background-color: rgb(255, 255, 255);
+    color: black;
+    border-radius: 10px;
+    align-items: center;
+    padding: 5px;
+    gap: 5px;
+    
+  }
+
+  .icon{
+    width: 20px;
+    height: 20px;
+  }
+
+  .text{
+    margin: 0;
+    font-size: 14px;
+  }
+</style>

components/ProjectCardContent.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
     <!-- <button @click="$emit('close')"> Close </button> -->
-    <img src="public\img\close.png" class="close-button" @click="$emit('close')">    
+    <img src="/public\img\close.png" class="close-button" @click="$emit('close')">    
     <h2>{{title}}</h2>
     <p>{{description}}</p>
     
     <br>
     <!-- <ClientOnly> -->
+      <div class="badges-container">
+        <Badge v-for="(data, i) of badges" :key="i" :id="data" />
+      </div>
       <div class="buttons">
           <SmallButton v-for="(data, i) of buttons" :key="i" class="button" :text="data.text"
               :href="data.link" />
@@ -20,6 +23,7 @@
 
 <script lang="ts" setup>
 import {defineProps, defineEmits} from 'vue'
+import type { BadgeData } from './ProjectCardV2.vue';
 
 export interface ButtonData {
     text: string,
@@ -31,6 +35,7 @@ const props = defineProps<{
     description: string,
     longDescription?: string,
     buttons?: Array<ButtonData>,
+    badges?: Array<string>,
 }>();
 
 defineEmits("close")
@@ -53,4 +58,12 @@ defineEmits("close")
   white-space: pre-wrap;
 }
 
+.badges-container{
+  display:  flex;
+  flex-direction: row;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
 </style>

components/ProjectCardV2.vue

@@ -8,6 +8,12 @@
       <div class="content">
           <h2>{{props.title}}</h2>
           <p>{{props.description}}</p>
+          <div class="badges-container">
+            <!-- <Badge text="Godot" icon="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/2048px-Godot_icon.svg.png" />
+            <Badge text="Badge2" icon="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/2048px-Godot_icon.svg.png" />
+            <Badge text="Badge3" icon="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/2048px-Godot_icon.svg.png" /> -->
+            <Badge v-for="(data, i) of badges" :key="i" :id="data" />
+          </div>
       </div>
     </div>
     
@@ -21,6 +27,7 @@
             :description=props.description
             :long-description=props.longDescription
             :buttons=props.buttons
+            :badges=props.badges
           />
         </div>
       </div>
@@ -39,12 +46,18 @@ export interface ButtonData {
     link: string,
 }
 
+export interface BadgeData {
+  text: string,
+  icon: string,
+}
+
 const props = defineProps<{
     title: string,
     description: string,
     longDescription?: string,
     src: string,
     buttons?: Array<ButtonData>,
+    badges?: Array<string>, //just the id's
 }>();
 
 
@@ -92,6 +105,8 @@ const props = defineProps<{
   left: 16px;
   text-align: left ;
   visibility:hidden;
+  /* font-size: 14px; */
+  margin-right: 10px;
 
   /* &:hover{
     visibility: visible;
@@ -148,4 +163,11 @@ const props = defineProps<{
   max-height: calc(100vh - 210px);
   overflow-y: auto;
 }
+
+.badges-container{
+  display:  flex;
+  flex-direction: row;
+  gap: 5px;
+  flex-wrap: wrap;
+}
 </style>

pages/index.vue

@@ -99,6 +99,7 @@ This will be my third year participating in artfight, I've already joined the cr
           :buttons='[
           
         ]'
+        :badges='["godot4","prototype"]'
       />
 
       <ProjectCardV2 
@@ -117,6 +118,7 @@ I'll also be showcasing this at the Playmakers booth at Smash anime convention 2
           { link: "https://tabby-cat-nya.itch.io/chronochamber", text: "Play on Itch.io" },
           { link: "/chrono-chamber", text: "Landing page for Smash" }
         ]'
+        :badges='["godot4","gamejam"]'
       />
       <!-- <div class="featured-text">
         <p>Pikmin Bloom is one of the funny little geospatial games that Niantic made with Nintendo</p>