Create Vue components

availabili.tf/package.json

@@ -29,6 +29,7 @@
     "@vue/eslint-config-typescript": "^14.0.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.15.0",
     "eslint": "^9.12.0",
     "eslint-plugin-vue": "^9.29.0",
     "jsdom": "^25.0.1",

availabili.tf/src/App.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView } from "vue-router";
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
       <nav>
         <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/schedule">Schedule</RouterLink>
+        <RouterLink to="/schedule/roster">Roster Builder</RouterLink>
       </nav>
     </div>
   </header>
@@ -39,7 +35,7 @@ nav {
 }
 
 nav a.router-link-exact-active {
-  color: var(--color-text);
+  color: var(--flamingo);
 }
 
 nav a.router-link-exact-active:hover {
@@ -47,13 +43,13 @@ nav a.router-link-exact-active:hover {
 }
 
 nav a {
-  display: inline-block;
+  padding: 0.5rem 1rem;
-  padding: 0 1rem;
+  color: var(--subtext-0);
-  border-left: 1px solid var(--color-border);
 }
 
-nav a:first-of-type {
+nav a:hover {
-  border: 0;
+  color: var(--crust);
+  background-color: var(--flamingo);
 }
 
 @media (min-width: 1024px) {
@@ -71,6 +67,7 @@ nav a:first-of-type {
     display: flex;
     place-items: flex-start;
     flex-wrap: wrap;
+    width: 100%;
   }
 
   nav {

availabili.tf/src/assets/base.css

@@ -19,34 +19,28 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  --text: #c6d0f5;
+  --subtext-1: #b8c0e0;
+  --subtext-0: #a5adcb;
+  --overlay-2: #939ab7;
+  --overlay-1: #8087a2;
+  --overlay-0: #6e738d;
+
+  --surface-0: #363a4f;
+  --base: #24273a;
+  --mantle: #1e2030;
+  --crust: #181926;
+  --flamingo: #f0c6c6;
+  --flamingo-transparent: #f0c6c655;
 }
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
   }
 }
 
@@ -60,8 +54,8 @@
 
 body {
   min-height: 100vh;
-  color: var(--color-text);
+  color: var(--text);
-  background: var(--color-background);
+  background: var(--base);
   transition:
     color 0.5s,
     background-color 0.5s;

availabili.tf/src/assets/main.css

@@ -1,6 +1,7 @@
 @import './base.css';
 
 #app {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
@@ -10,14 +11,14 @@
 a,
 .green {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
+  color: var(--flamingo);
   transition: 0.4s;
   padding: 3px;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    background-color: var(--flamingo-transparent);
   }
 }
 
@@ -26,10 +27,4 @@ a,
     display: flex;
     place-items: center;
   }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }

availabili.tf/src/components/AvailabilityGrid.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="grid">
+
+  </div>
+</template>
+
+<style scoped>
+</style>

availabili.tf/src/components/PlayerCard.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { PlayerTeamRole } from "../player";
+import type { PropType } from "vue";
+import { useRosterStore } from "../stores/roster";
+
+const rosterStore = useRosterStore();
+
+const props = defineProps({
+  roleTitle: String,
+  player: Object as PropType<PlayerTeamRole>,
+  isRoster: Boolean,
+});
+
+function onClick() {
+  if (props.isRoster) {
+    rosterStore.selectedRole = props.roleTitle;
+  }
+};
+</script>
+
+<template>
+  <div :class="{
+    'player-card': true,
+    'no-player': !player,
+    'selected': rosterStore.selectedRole == roleTitle && isRoster
+  }" @click="onClick">
+    <div v-if="player">
+      <h1>{{ player.name }}</h1>
+      <span v-if="roleTitle != player.role">
+        Subbing in as
+      </span>
+      {{ player.role }}
+      <span v-if="!player.main">
+        (alternate role)
+      </span>
+    </div>
+    <div v-else>
+      {{ roleTitle }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.player-card {
+  background-color: var(--crust);
+  padding: 1em;
+  border-radius: 8px;
+  user-select: none;
+}
+
+.player-card:hover {
+  background-color: var(--overlay-0);
+  transition-duration: 200ms;
+}
+
+.player-card.no-player {
+  border: 2px solid var(--overlay-0);
+}
+
+.player-card.no-player:not(.selected) {
+  background-color: transparent;
+  color: var(--overlay-0);
+}
+
+.player-card.no-player:hover:not(.selected) {
+  background-color: var(--surface-0);
+}
+
+.player-card.selected {
+  background-color: var(--flamingo);
+  border-color: var(--flamingo);
+  color: var(--crust);
+}
+
+h1 {
+  font-size: 24px;
+}
+</style>

availabili.tf/src/components/RoleSlot.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: String,
+}>();
+</script>
+
+<template>
+  <div class="slot">
+    <h1>{{ title }}</h1>
+  </div>
+</template>
+
+<style scoped>
+.slot {
+  background-color: transparent;
+  border: 2px solid var(--overlay-0);
+  padding: 1em;
+  border-radius: 8px;
+}
+
+h1 {
+  font-size: 24px;
+  color: var(--overlay-0);
+}
+</style>

availabili.tf/src/player.ts

@@ -0,0 +1,11 @@
+export interface Player {
+  steamId: number;
+  name: string;
+}
+
+export interface PlayerTeamRole {
+  steamId: number;
+  name: string;
+  role: string;
+  main: boolean;
+}

availabili.tf/src/router/index.ts

@@ -1,21 +1,25 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
-import HomeView from '../views/HomeView.vue'
+import HomeView from "../views/HomeView.vue";
+import ScheduleView from "../views/ScheduleView.vue";
+import RosterBuilderView from "../views/RosterBuilderView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
+      path: "/",
-      name: 'home',
+      name: "home",
       component: HomeView
     },
     {
-      path: '/about',
+      path: "/schedule",
-      name: 'about',
+      name: "schedule",
-      // route level code-splitting
+      component: ScheduleView
-      // this generates a separate chunk (About.[hash].js) for this route
+    },
-      // which is lazy-loaded when the route is visited.
+    {
-      component: () => import('../views/AboutView.vue')
+      path: "/schedule/roster",
+      name: "roster-builder",
+      component: RosterBuilderView
     }
   ]
 })

availabili.tf/src/stores/roster.ts

@@ -0,0 +1,13 @@
+import { type Player } from "@/player";
+import { defineStore } from "pinia";
+import { reactive, ref, type Reactive, type Ref } from "vue";
+
+export const useRosterStore = defineStore("roster", () => {
+  const selectedRole: Ref<String | undefined> = ref("Pocket Scout");
+  const availablePlayers: Reactive<Array<Player>> = reactive([]);
+
+  return {
+    selectedRole,
+    availablePlayers,
+  }
+});

availabili.tf/src/views/RosterBuilderView.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import PlayerCard from "../components/PlayerCard.vue";
+import RoleSlot from "../components/RoleSlot.vue";
+import PlayerTeamRole from "../player.ts";
+import { reactive } from "vue";
+import { useRosterStore } from "../stores/roster";
+
+const rosterStore = useRosterStore();
+
+const testPlayer: PlayerTeamRole = {
+  name: "JustGetAHouse",
+  role: "Pocket Scout",
+  main: false,
+}
+
+const testPlayer2: PlayerTeamRole = {
+  name: "Wesker U",
+  role: "Pocket Scout",
+  main: true,
+}
+
+const players = [testPlayer, testPlayer2];
+
+const selectPlayers = reactive();
+</script>
+
+<template>
+  <div class="columns">
+    <div class="column">
+      {{ rosterStore.selectedRole }}
+      <PlayerCard :player="testPlayer" role-title="Pocket Scout" is-roster />
+      <PlayerCard role-title="Flank Scout" is-roster />
+      <PlayerCard role-title="Pocket Soldier" is-roster />
+      <PlayerCard role-title="Roamer" is-roster />
+      <PlayerCard role-title="Demoman" is-roster />
+      <PlayerCard role-title="Medic" is-roster />
+    </div>
+    <div class="column">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.columns {
+  display: flex;
+  flex-direction: row;
+}
+
+.column {
+  display: flex;
+  flex-grow: 1;
+  margin-left: 4em;
+  margin-right: 4em;
+  flex-direction: column;
+  row-gap: 8px;
+}
+</style>

availabili.tf/src/views/ScheduleView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <main>
+    <h1>Master Schedule</h1>
+  </main>
+</template>