Issue 54 create component for bingo tile

client/src/components/BingoTile.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  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'
+  }
+})
+
+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 '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="[backgroundColour, textColour, selected ? 'border-selected' : 'border-subtle']"
+    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">
+      {{ text }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.outer-tile {
+  padding-bottom: 0.2rem;
+  aspect-ratio: 1 / 1;
+  padding: 0.5rem;
+}
+
+.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;
+}
+
+.icon {
+  width: 40%;
+  height: 70%;
+}
+
+.icon.light {
+  filter: invert();
+}
+
+.icon.dark {
+  filter: contrast(100%) brightness(0%);
+}
+</style>

client/src/router/index.ts

@@ -6,6 +6,7 @@ import PlaceholderView from '../views/PlaceHolderview.vue'
 import LandingView from '@/views/LandingView.vue'
 import LeaderboardView from '@/views/LeaderboardView.vue'
 import FriendView from '@/views/FriendView.vue'
+import BlingoView from '@/views/BlingoView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -35,7 +36,16 @@ const router = createRouter({
     {
       path: '/blingo',
       name: 'blingo',
-      component: PlaceholderView,
+      component: BlingoView,
+    },
+    {
+      path: '/404',
+      name: '404',
+      component: () => import('@/views/404Error.vue'),
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/404',
     },
     {
       path: '/404',

client/src/views/BlingoView.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import BlingoTile from '@/components/BingoTile.vue'
+</script>
+
+<template>
+  <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
+        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 w-100">
+      <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 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
+        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 w-100">
+      <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>