partially added badges, currently buggy
This commit is contained in:
Tabby
parent
2119279787
commit
a9db28d1a8
4 changed files with 118 additions and 1 deletions
80
components/Badge.vue
Normal file
80
components/Badge.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue