From 1470369d49ff196fec3c768ad42681de6c8d0c76 Mon Sep 17 00:00:00 2001
From: Lauren <lhpudney@gmail.com>
Date: Sat, 4 Jan 2025 13:51:56 +0800
Subject: [PATCH 01/12] add basic bingo component to home view

---
 client/src/components/BingoTile.vue | 12 ++++++++++++
 client/src/views/HomeView.vue       |  2 ++
 2 files changed, 14 insertions(+)
 create mode 100644 client/src/components/BingoTile.vue

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
new file mode 100644
index 0000000..0805b59
--- /dev/null
+++ b/client/src/components/BingoTile.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  type: string
+  text: string
+  status: string
+  selected: boolean
+}>()
+</script>
+
+<template>
+    <div class="bg-creamWhite">BINGO COMPONENT</div>
+</template>
\ No newline at end of file
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index a86fed1..26ab17c 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useModalStore } from '@/stores/modal'
 import server from '@/utils/server'
 import RegisterModal from '@/components/RegisterModal.vue'
+import BingoTile from '@/components/BingoTile.vue'
 
 const modalStore = useModalStore()
 
@@ -38,6 +39,7 @@ const handlePing = async () => {
   </v-btn>
 
   <RegisterModal v-if="modalStore.currentModal === 'register'" @close="modalStore.closeModal" />
+  <BingoTile type="" text="" status="" selected=false />
 
   <div id="healthcheck">
     <h1>Healthcheck <v-icon icon="mdi-heart-pulse" /></h1>

From cb3a578d0a0a688380535f69b5ac034b8755b6d5 Mon Sep 17 00:00:00 2001
From: melbauerr <1999mbauer@gmail.com>
Date: Sat, 4 Jan 2025 07:08:52 +0000
Subject: [PATCH 02/12] svg and styling

---
 client/public/man.svg               |  3 +++
 client/src/components/BingoTile.vue | 21 +++++++++++++++++++--
 client/src/views/HomeView.vue       |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 client/public/man.svg

diff --git a/client/public/man.svg b/client/public/man.svg
new file mode 100644
index 0000000..00905d3
--- /dev/null
+++ b/client/public/man.svg
@@ -0,0 +1,3 @@
+<svg width="38" height="62" viewBox="0 0 38 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.7955 61.9773L11.75 21.9205L6.63641 23.9091V33.5682H0.95459V20.2159L15.3012 14.108C15.9641 13.8239 16.6624 13.6581 17.3964 13.6108C18.1303 13.5634 18.8286 13.6581 19.4915 13.8949C20.1544 14.1316 20.7818 14.4631 21.3736 14.8892C21.9655 15.3153 22.4508 15.8598 22.8296 16.5227L25.6705 21.0682C26.9016 23.0568 28.5706 24.6903 30.6776 25.9687C32.7846 27.2472 35.1875 27.8864 37.8864 27.8864V33.5682C34.572 33.5682 31.6127 32.8816 29.0086 31.5085C26.4044 30.1354 24.179 28.3835 22.3324 26.2528L20.5569 34.9886L26.5228 40.6705V61.9773H20.841V43.5114L14.875 38.9659L9.76141 61.9773H3.7955ZM22.2614 12.2614C20.6989 12.2614 19.3613 11.705 18.2486 10.5923C17.1359 9.47964 16.5796 8.14205 16.5796 6.57955C16.5796 5.01705 17.1359 3.67945 18.2486 2.56676C19.3613 1.45407 20.6989 0.897728 22.2614 0.897728C23.8239 0.897728 25.1615 1.45407 26.2742 2.56676C27.3869 3.67945 27.9432 5.01705 27.9432 6.57955C27.9432 8.14205 27.3869 9.47964 26.2742 10.5923C25.1615 11.705 23.8239 12.2614 22.2614 12.2614Z" fill="#1D1B20"/>
+</svg>
diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 0805b59..26dd7f3 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -8,5 +8,22 @@ defineProps<{
 </script>
 
 <template>
-    <div class="bg-creamWhite">BINGO COMPONENT</div>
-</template>
\ No newline at end of file
+    <div class="bg-creamWhite bingo rounded-lg">
+        <div>
+            <v-img src="man.svg">
+            </v-img>
+            <p class="text-center">
+                {{ text }} 
+            </p>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.bingo {
+    height: 100px;
+    width: 100px;
+    border: black 1px solid;
+}
+</style>
+
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index 26ab17c..c89c34e 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -39,7 +39,7 @@ const handlePing = async () => {
   </v-btn>
 
   <RegisterModal v-if="modalStore.currentModal === 'register'" @close="modalStore.closeModal" />
-  <BingoTile type="" text="" status="" selected=false />
+  <BingoTile type="" text="Sustainable Seafood" status="" selected=false />
 
   <div id="healthcheck">
     <h1>Healthcheck <v-icon icon="mdi-heart-pulse" /></h1>

From 290a81bab241c04d13e4c0820a6e2fe85e1958a4 Mon Sep 17 00:00:00 2001
From: laurenpudz <lhpudney@gmail.com>
Date: Fri, 10 Jan 2025 22:25:18 +0800
Subject: [PATCH 03/12] svg switching and stying fixes for sat

---
 client/src/components/BingoTile.vue | 55 ++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 26dd7f3..c104aac 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -1,29 +1,50 @@
 <script setup lang="ts">
+
 defineProps<{
-  type: string
-  text: string
-  status: string
-  selected: boolean
+    type: string
+    text: string
+    status: string
+    selected: boolean
 }>()
+
+// need to download svgs and change out srcs and names
+function getIconSrc(type: string): string {
+    switch (type) {
+        case "thing1":
+            return "man.svg"
+        case "thing2":
+            return "thing2.svg"
+        default:
+            return "man.svg"
+    }
+}
+
+
 </script>
 
+<!-- Added flex and text styling, call function for name of icon src, add image width -->
 <template>
-    <div class="bg-creamWhite bingo rounded-lg">
-        <div>
-            <v-img src="man.svg">
-            </v-img>
-            <p class="text-center">
-                {{ text }} 
-            </p>
-        </div>
+    <div class="bg-creamWhite outer-tile rounded-lg d-flex flex-column align-center ">
+
+        <v-img :src="getIconSrc(type)" :style="{ width: '30%' }" />
+    <p class=" tile-text text-center font-weight-bold text-primaryGrey">
+            {{ text }}
+        </p>
+
     </div>
 </template>
 
+<!-- changed sizes to rem to be proportional and added padding, improved naming??, random finicky fixes -->
 <style scoped>
-.bingo {
-    height: 100px;
-    width: 100px;
-    border: black 1px solid;
+.outer-tile {
+    height: 5rem;
+    width: 5rem;
+    border: #4F4F4F 0.1rem solid;
+    padding: 0.5rem;
 }
-</style>
 
+.tile-text {
+    font-size: 0.6rem;
+    line-height: 1.2
+}
+</style>

From 5c922e6fec0a1a85f49cd978eafb0a41ea9fc172 Mon Sep 17 00:00:00 2001
From: laurenpudz <lhpudney@gmail.com>
Date: Sat, 11 Jan 2025 13:25:42 +0800
Subject: [PATCH 04/12] add blingo view

---
 client/src/router/index.ts      |  3 ++-
 client/src/views/BlingoView.vue | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 client/src/views/BlingoView.vue

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 8fd1432..dd8e6e3 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -5,6 +5,7 @@ import { useModalStore } from '@/stores/modal'
 import PlaceholderView from '../views/PlaceHolderview.vue'
 import LandingView from '@/views/LandingView.vue'
 import LeaderboardView from '@/views/LeaderboardView.vue'
+import BlingoView from '@/views/BlingoView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -34,7 +35,7 @@ const router = createRouter({
     {
       path: '/blingo',
       name: 'blingo',
-      component: PlaceholderView,
+      component: BlingoView,
     },
   ],
 })
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
new file mode 100644
index 0000000..ef5584f
--- /dev/null
+++ b/client/src/views/BlingoView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import BlingoTile from '@/components/BingoTile.vue'
+</script>
+
+<template>
+    <div>
+        <BlingoTile type="" text="placeholder text" status="" selected="true" />
+    </div>
+</template>
+
+<style scoped></style>

From 76ac99af24eea30b3722abb89e70cd805f46a719 Mon Sep 17 00:00:00 2001
From: laurenpudz <lhpudney@gmail.com>
Date: Sat, 11 Jan 2025 13:41:35 +0800
Subject: [PATCH 05/12] add grid

---
 client/src/components/BingoTile.vue |  5 ++---
 client/src/views/BlingoView.vue     | 13 +++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index c104aac..84a3db9 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
 defineProps<{
-    type: string
+    type: "connect" |"understand" | "act"
     text: string
-    status: string
+    status: "not started" | "started" | "completed"
     selected: boolean
 }>()
 
@@ -22,7 +22,6 @@ function getIconSrc(type: string): string {
 
 </script>
 
-<!-- Added flex and text styling, call function for name of icon src, add image width -->
 <template>
     <div class="bg-creamWhite outer-tile rounded-lg d-flex flex-column align-center ">
 
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index ef5584f..6e0462d 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -3,8 +3,17 @@ import BlingoTile from '@/components/BingoTile.vue'
 </script>
 
 <template>
-    <div>
-        <BlingoTile type="" text="placeholder text" status="" selected="true" />
+    <div class="d-flex ga-1">
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+    </div>
+    <div class="d-flex ga-1 mt-1">
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
     </div>
 </template>
 

From 963a304cbeb47f8e0f287a1b4c948bc3d2e62081 Mon Sep 17 00:00:00 2001
From: melbauerr <1999mbauer@gmail.com>
Date: Sat, 11 Jan 2025 06:10:55 +0000
Subject: [PATCH 06/12] svg switches

---
 client/public/brain.svg             | 10 ++++++++++
 client/public/link.svg              |  3 +++
 client/public/one-man.svg           | 20 ++++++++++++++++++++
 client/public/walking.svg           |  7 +++++++
 client/src/components/BingoTile.vue | 12 ++++++------
 client/src/views/BlingoView.vue     | 10 +++++-----
 6 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 client/public/brain.svg
 create mode 100644 client/public/link.svg
 create mode 100644 client/public/one-man.svg
 create mode 100644 client/public/walking.svg

diff --git a/client/public/brain.svg b/client/public/brain.svg
new file mode 100644
index 0000000..35939b0
--- /dev/null
+++ b/client/public/brain.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1663_892)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5816 0.0077863C28.3892 -0.0665377 32.1479 0.87522 35.4706 2.73611C38.7934 4.597 41.5602 7.30978 43.4863 10.5952C45.412 13.8806 46.4277 17.62 46.4284 21.4283V35.7143C46.4284 37.135 45.8641 38.4979 44.8595 39.5025C43.8549 40.5071 42.492 41.0714 41.0713 41.0714H35.7141V48.2143C35.7141 49.2007 34.9146 50 33.9284 50H16.0713C15.0851 50 14.2856 49.2007 14.2856 48.2143V39.99C11.3174 38.2764 8.79846 35.8725 6.94632 32.9758C4.89478 29.7673 3.73536 26.07 3.58746 22.2645C3.43954 18.4591 4.30846 14.683 6.10478 11.3249C7.90111 7.96678 10.5599 5.14811 13.8075 3.15897C17.055 1.16983 20.774 0.0821102 24.5816 0.0077863ZM12.7125 25.749C10.5687 19.7479 12.9465 12.8876 18.6617 9.58789C24.3042 6.33025 31.3257 7.62496 35.4733 12.3325C36.5238 13.525 36.2795 15.3052 35.1003 16.3704C30.6489 20.3912 23.3218 25.5482 16.1254 27.4546C14.7031 27.8314 13.2075 27.1346 12.7125 25.749Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1663_892">
+<rect width="50" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/client/public/link.svg b/client/public/link.svg
new file mode 100644
index 0000000..3cad5ed
--- /dev/null
+++ b/client/public/link.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8333 27.0833C21.728 28.2794 22.8694 29.2691 24.1802 29.9853C25.4911 30.7015 26.9406 31.1273 28.4305 31.234C29.9203 31.3407 31.4157 31.1258 32.8152 30.6037C34.2147 30.0817 35.4856 29.2647 36.5416 28.2083L42.7916 21.9583C44.6891 19.9937 45.739 17.3625 45.7153 14.6312C45.6916 11.9 44.596 9.28739 42.6647 7.35606C40.7334 5.42472 38.1207 4.32921 35.3895 4.30548C32.6583 4.28174 30.027 5.33169 28.0624 7.22917L24.4791 10.7917M29.1666 22.9167C28.2719 21.7206 27.1304 20.7309 25.8196 20.0147C24.5088 19.2985 23.0593 18.8727 21.5694 18.766C20.0795 18.6593 18.5841 18.8742 17.1846 19.3963C15.7851 19.9183 14.5143 20.7353 13.4583 21.7917L7.20826 28.0417C5.31078 30.0063 4.26084 32.6375 4.28457 35.3688C4.30831 38.1 5.40382 40.7126 7.33515 42.6439C9.26649 44.5753 11.8791 45.6708 14.6103 45.6945C17.3415 45.7183 19.9728 44.6683 21.9374 42.7708L25.4999 39.2083" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/client/public/one-man.svg b/client/public/one-man.svg
new file mode 100644
index 0000000..39d2ca7
--- /dev/null
+++ b/client/public/one-man.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 94.684 94.684" xml:space="preserve">
+<g>
+	<path d="M70.62,48.185l-11.01-7.007c-0.707-0.45-1.539-1.601-1.745-2.414l-3.049-12.058c-0.002-0.007-0.005-0.014-0.007-0.021
+		c-0.251-1.402-1.473-2.471-2.947-2.471h-14.83c-0.678,0-1.297,0.234-1.799,0.615c-0.104,0.058-0.211,0.114-0.305,0.18
+		l-10.552,7.518c-1.205,0.858-1.935,2.67-1.663,4.125l3.268,17.458c0.28,1.499,1.7,2.673,3.233,2.673l1.678-0.09
+		c0.808-0.046,1.55-0.422,2.038-1.034c0.487-0.611,0.69-1.419,0.555-2.216l-2.28-13.465c-0.12-0.707,0.306-1.726,0.892-2.138
+		l1.936-1.362v19.745c-0.024,0.067-0.059,0.128-0.081,0.196l-9.783,30.638c-0.407,1.276-0.283,2.619,0.35,3.781
+		s1.694,1.994,2.987,2.343l0.654,0.177c0.428,0.116,0.872,0.175,1.318,0.175c2.251,0,4.296-1.481,4.974-3.603l9.288-29.087h0.771
+		l1.694,8.421c0.269,1.334,0.521,3.612,0.552,4.973l0.382,17.203c0.041,1.85,1.452,3.245,3.282,3.245
+		c0.16,0,0.323-0.011,0.488-0.034l3.223-0.447c1.921-0.267,3.402-2.06,3.301-3.997L56.53,72.935
+		c-0.075-1.452-0.299-3.81-0.498-5.257l-1.258-9.147c0.053-0.222,0.087-0.451,0.087-0.689v-9.963L66.7,54.695
+		c0.456,0.262,0.976,0.401,1.505,0.401c1.068,0,2.07-0.563,2.615-1.469l0.778-1.295C72.442,50.925,72.003,49.065,70.62,48.185z"/>
+	<path d="M43.448,21.672c5.975,0,10.836-4.861,10.836-10.836S49.423,0,43.448,0c-5.975,0-10.835,4.861-10.835,10.836
+		S37.473,21.672,43.448,21.672z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/client/public/walking.svg b/client/public/walking.svg
new file mode 100644
index 0000000..4df7cf2
--- /dev/null
+++ b/client/public/walking.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="220px" width="220px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51.76 51.76" xml:space="preserve" fill="#000000" transform="matrix(-1, 0, 0, 1, 0, 0)rotate(0)">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <circle style="fill:#010002;" cx="15.39" cy="4.82" r="4.82"/> <path style="fill:#010002;" d="M45.689,46.201c-5.744-8.573-12.312-19.74-13.416-21.625c-0.1-0.342-0.232-0.689-0.414-1.038 c-1.312-2.557-2.684-5.085-4.084-7.596c1.484,0.116,2.972,0.231,4.455,0.346c1.02,2.01,2.035,4.021,3.053,6.03 c1.639,3.237,6.49,0.389,4.855-2.839c-1.312-2.593-2.867-8.425-6.254-8.688c-3.604-0.28-7.207-0.56-10.81-0.839 c-0.088-0.007-0.163,0.005-0.247,0.005c-2.724-0.729-5.917,1.193-6.495,3.97c-1.842,3.989-4.487,7.104-8.925,8.404 c-3.474,1.016-1.994,6.443,1.495,5.423c4.387-1.284,7.538-3.798,9.927-7.107c1.447,2.58,2.86,5.176,4.214,7.808 c-2.977,2.053-5.578,4.536-7.857,7.401c-0.636,0.799-0.745,1.621-0.531,2.344c-0.008,0.27,0.009,0.55,0.086,0.854 c0.877,3.472,1.753,6.938,2.631,10.406c0.931,3.696,6.782,2.646,5.843-1.074c-0.835-3.305-1.671-6.61-2.506-9.917 c2.094-2.469,4.563-4.617,7.384-6.221c0.664-0.378,1.082-0.899,1.314-1.473c3.859,5.914,7.719,14.096,11.576,19.055 C43.337,52.856,48.046,49.233,45.689,46.201z"/> </g> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 84a3db9..8a66f38 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -10,12 +10,12 @@ defineProps<{
 // need to download svgs and change out srcs and names
 function getIconSrc(type: string): string {
     switch (type) {
-        case "thing1":
-            return "man.svg"
-        case "thing2":
-            return "thing2.svg"
+        case "act":
+            return "walking.svg"
+        case "understand":
+            return "brain.svg"
         default:
-            return "man.svg"
+            return "link.svg"
     }
 }
 
@@ -25,7 +25,7 @@ function getIconSrc(type: string): string {
 <template>
     <div class="bg-creamWhite outer-tile rounded-lg d-flex flex-column align-center ">
 
-        <v-img :src="getIconSrc(type)" :style="{ width: '30%' }" />
+        <v-img :src="getIconSrc(type)" :style="{ width: '40%', height:'70%' }" />
     <p class=" tile-text text-center font-weight-bold text-primaryGrey">
             {{ text }}
         </p>
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index 6e0462d..adcd1a8 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -5,14 +5,14 @@ import BlingoTile from '@/components/BingoTile.vue'
 <template>
     <div class="d-flex ga-1">
         <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
         <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
     </div>
     <div class="d-flex ga-1 mt-1">
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
         <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
     </div>
 </template>

From acdd84a0a711b0021de433d76c1c87a18502e479 Mon Sep 17 00:00:00 2001
From: laurenpudz <lhpudney@gmail.com>
Date: Sat, 11 Jan 2025 16:01:54 +0800
Subject: [PATCH 07/12] colour background, text and icons based on status

---
 client/src/components/BingoTile.vue | 64 ++++++++++++++++++++++++-----
 client/src/views/BlingoView.vue     |  6 +--
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 8a66f38..034fbf3 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 
-defineProps<{
-    type: "connect" |"understand" | "act"
+const props = defineProps<{
+    type: "connect" | "understand" | "act"
     text: string
     status: "not started" | "started" | "completed"
     selected: boolean
 }>()
 
-// need to download svgs and change out srcs and names
-function getIconSrc(type: string): string {
-    switch (type) {
+
+const icon = computed(() => {
+    switch (props.type) {
         case "act":
             return "walking.svg"
         case "understand":
@@ -17,23 +18,51 @@ function getIconSrc(type: string): string {
         default:
             return "link.svg"
     }
-}
+})
+
+
+const backgroundColour = computed(() => {
+    switch (props.status) {
+        case "started":
+            return "bg-primaryPink"
+        case "completed":
+            return "bg-lightBlue"
+        default:
+            return "bg-creamWhite"
+    }
+})
+
+const textColour = computed(() => {
+    switch (props.status) {
+        case "started":
+        case "completed":
+            return "text-primaryWhite"
+        default:
+            return "text-primaryBlack"
+    }
+})
 
+const iconBackground = computed(() => {
+    switch (backgroundColour.value) {
+        case "bg-creamWhite":
+            return "dark"
+        default:
+            return "light"
+    }
+})
 
 </script>
 
 <template>
-    <div class="bg-creamWhite outer-tile rounded-lg d-flex flex-column align-center ">
-
-        <v-img :src="getIconSrc(type)" :style="{ width: '40%', height:'70%' }" />
-    <p class=" tile-text text-center font-weight-bold text-primaryGrey">
+    <div :class="[backgroundColour, textColour]" class="outer-tile rounded-lg d-flex flex-column align-center ">
+        <v-img class="icon" :class="iconBackground" :src="icon" />
+        <p class="tile-text text-center font-weight-bold">
             {{ text }}
         </p>
 
     </div>
 </template>
 
-<!-- changed sizes to rem to be proportional and added padding, improved naming??, random finicky fixes -->
 <style scoped>
 .outer-tile {
     height: 5rem;
@@ -46,4 +75,17 @@ function getIconSrc(type: string): string {
     font-size: 0.6rem;
     line-height: 1.2
 }
+
+.icon {
+    width: 40%;
+    height: 70%;
+}
+
+.icon.light {
+    filter: invert();
+}
+
+.icon.dark {
+    filter: contrast(100%) brightness(0%);
+}
 </style>
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index adcd1a8..d8469b6 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -4,10 +4,10 @@ import BlingoTile from '@/components/BingoTile.vue'
 
 <template>
     <div class="d-flex ga-1">
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="started" selected=True />
+        <BlingoTile type="act" text="placeholder text" status="not started" selected="false" />
         <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+        <BlingoTile type="connect" text="placeholder text" status="completed" selected="true" />
     </div>
     <div class="d-flex ga-1 mt-1">
         <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />

From 8a9145cb61828ba5bf5d2e2f7250296bf2eff0a8 Mon Sep 17 00:00:00 2001
From: laurenpudz <lhpudney@gmail.com>
Date: Sun, 12 Jan 2025 21:22:44 +0800
Subject: [PATCH 08/12] fix formatting and add border for selected tile

---
 client/src/components/BingoTile.vue | 112 +++++++++++++++-------------
 client/src/views/BlingoView.vue     |  55 ++++++++++++--
 2 files changed, 106 insertions(+), 61 deletions(-)

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 034fbf3..e22653d 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -2,90 +2,96 @@
 import { computed } from 'vue'
 
 const props = defineProps<{
-    type: "connect" | "understand" | "act"
-    text: string
-    status: "not started" | "started" | "completed"
-    selected: boolean
+  type: 'connect' | 'understand' | 'act'
+  text: string
+  status: 'not started' | 'started' | 'completed'
+  selected: boolean
 }>()
 
-
 const icon = computed(() => {
-    switch (props.type) {
-        case "act":
-            return "walking.svg"
-        case "understand":
-            return "brain.svg"
-        default:
-            return "link.svg"
-    }
+  switch (props.type) {
+    case 'act':
+      return 'walking.svg'
+    case 'understand':
+      return 'brain.svg'
+    default:
+      return 'link.svg'
+  }
 })
 
-
 const backgroundColour = computed(() => {
-    switch (props.status) {
-        case "started":
-            return "bg-primaryPink"
-        case "completed":
-            return "bg-lightBlue"
-        default:
-            return "bg-creamWhite"
-    }
+  switch (props.status) {
+    case 'started':
+      return 'bg-primaryPink'
+    case 'completed':
+      return 'bg-lightBlue'
+    default:
+      return 'bg-creamWhite'
+  }
 })
 
 const textColour = computed(() => {
-    switch (props.status) {
-        case "started":
-        case "completed":
-            return "text-primaryWhite"
-        default:
-            return "text-primaryBlack"
-    }
+  switch (props.status) {
+    case 'completed':
+      return 'text-primaryWhite'
+    default:
+      return 'text-primaryBlack'
+  }
 })
 
 const iconBackground = computed(() => {
-    switch (backgroundColour.value) {
-        case "bg-creamWhite":
-            return "dark"
-        default:
-            return "light"
-    }
+  switch (backgroundColour.value) {
+    case 'bg-creamWhite':
+      return 'dark'
+    default:
+      return 'light'
+  }
 })
-
 </script>
 
 <template>
-    <div :class="[backgroundColour, textColour]" class="outer-tile rounded-lg d-flex flex-column align-center ">
-        <v-img class="icon" :class="iconBackground" :src="icon" />
-        <p class="tile-text text-center font-weight-bold">
-            {{ text }}
-        </p>
-
-    </div>
+  <div
+    :class="[backgroundColour, textColour, selected ? 'border-selected' : 'border-subtle']"
+    class="outer-tile rounded-lg d-flex flex-column align-center"
+  >
+    <v-img class="icon" :class="iconBackground" :src="icon" />
+    <p class="w-100 tile-text text-center font-weight-bold overflow-x-hidden overflow-hidden">
+      {{ text }}
+    </p>
+  </div>
 </template>
 
 <style scoped>
 .outer-tile {
-    height: 5rem;
-    width: 5rem;
-    border: #4F4F4F 0.1rem solid;
-    padding: 0.5rem;
+  height: 5rem;
+  width: 5rem;
+  padding-bottom: 0.2rem;
+}
+
+.border-subtle {
+  border: #4f4f4f 0.05rem solid;
+}
+
+.border-selected {
+  border: #4f4f4f 0.15rem solid;
+  box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem #4f4f4f;
 }
 
 .tile-text {
-    font-size: 0.6rem;
-    line-height: 1.2
+  font-size: 0.6rem;
+  line-height: 1.2;
 }
 
 .icon {
-    width: 40%;
-    height: 70%;
+  width: 40%;
+  height: 70%;
 }
 
 .icon.light {
-    filter: invert();
+  filter: invert();
 }
 
 .icon.dark {
-    filter: contrast(100%) brightness(0%);
+  filter: contrast(100%) brightness(0%);
 }
 </style>
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index d8469b6..2be78d0 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -3,18 +3,57 @@ import BlingoTile from '@/components/BingoTile.vue'
 </script>
 
 <template>
+  <div class="d-flex flex-column align-center mt-5">
     <div class="d-flex ga-1">
-        <BlingoTile type="connect" text="placeholder text" status="started" selected=True />
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="false" />
-        <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="completed" selected="true" />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile type="act" text="placeholder text" status="started" :selected="false" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="connect" text="placeholder text" status="completed" :selected="false" />
     </div>
     <div class="d-flex ga-1 mt-1">
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="understand" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="act" text="placeholder text" status="not started" selected="true" />
-        <BlingoTile type="connect" text="placeholder text" status="not started" selected="true" />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="act" text="placeholder text" status="completed" :selected="false" />
+      <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
     </div>
+    <div class="d-flex ga-1 mt-1">
+      <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="true" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+    </div>
+    <div class="d-flex ga-1 mt-1">
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+      <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
+      <BlingoTile
+        type="understand"
+        text="placeholder text"
+        status="not started"
+        :selected="false"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

From f8221506eb940f08d638d56eeb5e436aeb15b670 Mon Sep 17 00:00:00 2001
From: melbauerr <1999mbauer@gmail.com>
Date: Fri, 17 Jan 2025 01:29:38 +0000
Subject: [PATCH 09/12] deleted unused svgs

---
 client/public/man.svg     |  3 ---
 client/public/one-man.svg | 20 --------------------
 2 files changed, 23 deletions(-)
 delete mode 100644 client/public/man.svg
 delete mode 100644 client/public/one-man.svg

diff --git a/client/public/man.svg b/client/public/man.svg
deleted file mode 100644
index 00905d3..0000000
--- a/client/public/man.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="38" height="62" viewBox="0 0 38 62" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.7955 61.9773L11.75 21.9205L6.63641 23.9091V33.5682H0.95459V20.2159L15.3012 14.108C15.9641 13.8239 16.6624 13.6581 17.3964 13.6108C18.1303 13.5634 18.8286 13.6581 19.4915 13.8949C20.1544 14.1316 20.7818 14.4631 21.3736 14.8892C21.9655 15.3153 22.4508 15.8598 22.8296 16.5227L25.6705 21.0682C26.9016 23.0568 28.5706 24.6903 30.6776 25.9687C32.7846 27.2472 35.1875 27.8864 37.8864 27.8864V33.5682C34.572 33.5682 31.6127 32.8816 29.0086 31.5085C26.4044 30.1354 24.179 28.3835 22.3324 26.2528L20.5569 34.9886L26.5228 40.6705V61.9773H20.841V43.5114L14.875 38.9659L9.76141 61.9773H3.7955ZM22.2614 12.2614C20.6989 12.2614 19.3613 11.705 18.2486 10.5923C17.1359 9.47964 16.5796 8.14205 16.5796 6.57955C16.5796 5.01705 17.1359 3.67945 18.2486 2.56676C19.3613 1.45407 20.6989 0.897728 22.2614 0.897728C23.8239 0.897728 25.1615 1.45407 26.2742 2.56676C27.3869 3.67945 27.9432 5.01705 27.9432 6.57955C27.9432 8.14205 27.3869 9.47964 26.2742 10.5923C25.1615 11.705 23.8239 12.2614 22.2614 12.2614Z" fill="#1D1B20"/>
-</svg>
diff --git a/client/public/one-man.svg b/client/public/one-man.svg
deleted file mode 100644
index 39d2ca7..0000000
--- a/client/public/one-man.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 94.684 94.684" xml:space="preserve">
-<g>
-	<path d="M70.62,48.185l-11.01-7.007c-0.707-0.45-1.539-1.601-1.745-2.414l-3.049-12.058c-0.002-0.007-0.005-0.014-0.007-0.021
-		c-0.251-1.402-1.473-2.471-2.947-2.471h-14.83c-0.678,0-1.297,0.234-1.799,0.615c-0.104,0.058-0.211,0.114-0.305,0.18
-		l-10.552,7.518c-1.205,0.858-1.935,2.67-1.663,4.125l3.268,17.458c0.28,1.499,1.7,2.673,3.233,2.673l1.678-0.09
-		c0.808-0.046,1.55-0.422,2.038-1.034c0.487-0.611,0.69-1.419,0.555-2.216l-2.28-13.465c-0.12-0.707,0.306-1.726,0.892-2.138
-		l1.936-1.362v19.745c-0.024,0.067-0.059,0.128-0.081,0.196l-9.783,30.638c-0.407,1.276-0.283,2.619,0.35,3.781
-		s1.694,1.994,2.987,2.343l0.654,0.177c0.428,0.116,0.872,0.175,1.318,0.175c2.251,0,4.296-1.481,4.974-3.603l9.288-29.087h0.771
-		l1.694,8.421c0.269,1.334,0.521,3.612,0.552,4.973l0.382,17.203c0.041,1.85,1.452,3.245,3.282,3.245
-		c0.16,0,0.323-0.011,0.488-0.034l3.223-0.447c1.921-0.267,3.402-2.06,3.301-3.997L56.53,72.935
-		c-0.075-1.452-0.299-3.81-0.498-5.257l-1.258-9.147c0.053-0.222,0.087-0.451,0.087-0.689v-9.963L66.7,54.695
-		c0.456,0.262,0.976,0.401,1.505,0.401c1.068,0,2.07-0.563,2.615-1.469l0.778-1.295C72.442,50.925,72.003,49.065,70.62,48.185z"/>
-	<path d="M43.448,21.672c5.975,0,10.836-4.861,10.836-10.836S49.423,0,43.448,0c-5.975,0-10.835,4.861-10.835,10.836
-		S37.473,21.672,43.448,21.672z"/>
-</g>
-</svg>
\ No newline at end of file

From bb17f05b4d980ad284771b764e35a0e3d1b2aa3c Mon Sep 17 00:00:00 2001
From: melbauerr <1999mbauer@gmail.com>
Date: Sat, 18 Jan 2025 04:07:18 +0000
Subject: [PATCH 10/12] added cursor-pointer

---
 client/src/components/BingoTile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index e22653d..3d96da2 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -52,7 +52,7 @@ const iconBackground = computed(() => {
 <template>
   <div
     :class="[backgroundColour, textColour, selected ? 'border-selected' : 'border-subtle']"
-    class="outer-tile rounded-lg d-flex flex-column align-center"
+    class="outer-tile rounded-lg d-flex flex-column align-center cursor-pointer"
   >
     <v-img class="icon" :class="iconBackground" :src="icon" />
     <p class="w-100 tile-text text-center font-weight-bold overflow-x-hidden overflow-hidden">

From 48716ff1718dc6fdfb2493508dfbf1901185cf89 Mon Sep 17 00:00:00 2001
From: laurenpudz <lhpudney@gmail.com>
Date: Sat, 18 Jan 2025 14:39:04 +0800
Subject: [PATCH 11/12] make tile responsive to different screen sizes

---
 client/src/components/BingoTile.vue |  6 +++---
 client/src/views/BlingoView.vue     | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/BingoTile.vue b/client/src/components/BingoTile.vue
index 3d96da2..48e02c9 100644
--- a/client/src/components/BingoTile.vue
+++ b/client/src/components/BingoTile.vue
@@ -52,7 +52,7 @@ const iconBackground = computed(() => {
 <template>
   <div
     :class="[backgroundColour, textColour, selected ? 'border-selected' : 'border-subtle']"
-    class="outer-tile rounded-lg d-flex flex-column align-center cursor-pointer"
+    class="outer-tile rounded-lg d-flex flex-column align-center cursor-pointer w-100"
   >
     <v-img class="icon" :class="iconBackground" :src="icon" />
     <p class="w-100 tile-text text-center font-weight-bold overflow-x-hidden overflow-hidden">
@@ -63,9 +63,9 @@ const iconBackground = computed(() => {
 
 <style scoped>
 .outer-tile {
-  height: 5rem;
-  width: 5rem;
   padding-bottom: 0.2rem;
+  aspect-ratio: 1 / 1;
+  padding: 0.5rem;
 }
 
 .border-subtle {
diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index 2be78d0..a963149 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -3,8 +3,8 @@ import BlingoTile from '@/components/BingoTile.vue'
 </script>
 
 <template>
-  <div class="d-flex flex-column align-center mt-5">
-    <div class="d-flex ga-1">
+  <div class="d-flex flex-column align-center mt-5 mx-5 ">
+    <div class="d-flex ga-1 w-100">
       <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
       <BlingoTile type="act" text="placeholder text" status="started" :selected="false" />
       <BlingoTile
@@ -15,7 +15,7 @@ import BlingoTile from '@/components/BingoTile.vue'
       />
       <BlingoTile type="connect" text="placeholder text" status="completed" :selected="false" />
     </div>
-    <div class="d-flex ga-1 mt-1">
+    <div class="d-flex ga-1 mt-1 w-100">
       <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
       <BlingoTile
         type="understand"
@@ -26,7 +26,7 @@ import BlingoTile from '@/components/BingoTile.vue'
       <BlingoTile type="act" text="placeholder text" status="completed" :selected="false" />
       <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
     </div>
-    <div class="d-flex ga-1 mt-1">
+    <div class="d-flex ga-1 mt-1 w-100">
       <BlingoTile type="act" text="placeholder text" status="not started" :selected="false" />
       <BlingoTile type="connect" text="placeholder text" status="not started" :selected="true" />
       <BlingoTile
@@ -37,7 +37,7 @@ import BlingoTile from '@/components/BingoTile.vue'
       />
       <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
     </div>
-    <div class="d-flex ga-1 mt-1">
+    <div class="d-flex ga-1 mt-1 w-100">
       <BlingoTile
         type="understand"
         text="placeholder text"

From b0df050902db5de7b2996f5072f81f587cdd910a Mon Sep 17 00:00:00 2001
From: melbauerr <1999mbauer@gmail.com>
Date: Sat, 18 Jan 2025 06:54:33 +0000
Subject: [PATCH 12/12] formatting fix

---
 client/src/views/BlingoView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/views/BlingoView.vue b/client/src/views/BlingoView.vue
index a963149..96dd25e 100644
--- a/client/src/views/BlingoView.vue
+++ b/client/src/views/BlingoView.vue
@@ -3,7 +3,7 @@ import BlingoTile from '@/components/BingoTile.vue'
 </script>
 
 <template>
-  <div class="d-flex flex-column align-center mt-5 mx-5 ">
+  <div class="d-flex flex-column align-center mt-5 mx-5">
     <div class="d-flex ga-1 w-100">
       <BlingoTile type="connect" text="placeholder text" status="not started" :selected="false" />
       <BlingoTile type="act" text="placeholder text" status="started" :selected="false" />