Vue rewrite

src/views/HomeView.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import Input from "@/components/form/Input.vue";
+import {useUserName} from "@/stores/userName";
+import {useRouter} from "vue-router";
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+
+const userNameStore = useUserName();
+const router = useRouter();
+
+const onHostClick = async () => {
+  const appUrl = import.meta.env.VITE_API_ENDPOINT || "__API_ENDPOINT__";
+  fetch(appUrl + "/room", {
+    method: "POST"
+  }).then(response => response.json())
+      .then(room => router.push({name: "room", params: {roomId: room}}))
+      .catch(console.error);
+}
+
+const onBrowseClick = () => {
+  router.push({name: "rooms"});
+}
+</script>
+
+<template>
+  <div class="home">
+    <div class="hero">
+      <h1 class="hero__title">MauMau</h1>
+      <form>
+        <Input :initialValue="userNameStore.userName" placeholder="Username" @input="userNameStore.setUserName"/>
+      </form>
+    </div>
+    <div class="interactions">
+      <div class="interactions-container">
+        <h2 class="interactions-container__title">Join game</h2>
+        <form class="interactions-container__buttons">
+          <Input placeholder="Enter roomcode" autocomplete="off"/>
+          <PrimaryButton type="button" @click="onBrowseClick">Browse rooms</PrimaryButton>
+        </form>
+      </div>
+      <div class="interactions-container">
+        <h2 class="interactions-container__title">Host game</h2>
+        <div class="interactions-container__buttons">
+          <PrimaryButton @click="onHostClick">Start Hosting</PrimaryButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+@import "@/scss/layout";
+
+@font-face {
+  font-family: "Cattie";
+  src: url(@/assets/fonts/CattieRegular.ttf) format('truetype');
+}
+
+.home {
+  @extend .container-fill;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+
+  .hero {
+    @extend .container-md;
+
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    @media screen and (max-width: $breakpoint-md) {
+      height: 40%;
+    }
+
+    &__title {
+      text-align: center;
+      font-size: 6rem;
+      font-weight: lighter;
+      font-family: Cattie ,sans-serif;
+    }
+  }
+
+  .interactions {
+    @extend .container-md, .container-fill-height, .place-start;
+
+    height: 50%;
+    display: grid;
+    grid-template: 1fr / repeat(2, 1fr);
+    grid-gap: 2rem;
+
+    @media screen and (max-width: $breakpoint-md) {
+      height: 60%;
+      grid-template: repeat(2, 1fr) / 1fr;
+    }
+
+    &-container {
+      @extend .container-fill-width;
+
+      background-color: white;
+      padding: 0 1rem 1rem 1rem;
+      border: 0.5rem black;
+      border-radius: 0.5rem;
+      box-shadow: 1rem 1rem 1rem rgba(255, 255, 255, 0.25);
+      color: black;
+      min-height: 66%;
+      display: grid;
+      grid-template-rows: auto 1fr;
+
+      @media screen and (max-width: $breakpoint-md) {
+        min-height: 100%;
+      }
+
+      &__title {
+        font-size: 2rem;
+        text-align: center;
+      }
+
+      &__buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        * {
+          @extend .container-fill-width;
+        }
+      }
+    }
+  }
+
+  :deep(input) {
+    font-size: 1.5rem;
+  }
+
+  :deep(button) {
+    font-size: 1.5rem;
+  }
+}
+</style>