Vue rewrite

src/views/RoomsView.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+import {onBeforeMount, reactive} from "vue";
+import StylessButton from "@/components/button/StylessButton.vue";
+import router from "@/router";
+
+const state = reactive<{
+  rooms: string[],
+}>({
+  rooms: [],
+})
+
+const onRoomClick = (room: string) => {
+  router.push({name: "room", params: {roomId: room}});
+}
+
+const onHomeClick = () => {
+  router.push({name: "home"});
+}
+
+onBeforeMount(async () => {
+  const appUrl = import.meta.env.VITE_API_ENDPOINT || "__API_ENDPOINT__";
+  fetch(appUrl + "/room")
+      .then(r => r.json())
+      .then(data => state.rooms = data);
+})
+</script>
+
+<template>
+  <div class="rooms">
+    <aside>
+      <div>
+        <h1>Mau-Mau</h1>
+        <PrimaryButton @click="onHomeClick">
+          Back to home
+        </PrimaryButton>
+      </div>
+    </aside>
+    <main>
+      <div class="header">
+        <h1>Browse rooms</h1>
+        <PrimaryButton>Or join a random one</PrimaryButton>
+      </div>
+      <ul class="rooms-list">
+        <li v-for="room in state.rooms" :key="room">
+          <StylessButton @click="onRoomClick(room)">{{ room }}</StylessButton>
+        </li>
+      </ul>
+    </main>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+@import "@/scss/layout";
+
+.rooms {
+  @extend .container-fill;
+
+  display: flex;
+  gap: 1rem;
+
+  @media screen and (max-width: $breakpoint-md) {
+    flex-direction: column;
+  }
+
+  aside {
+    display: grid;
+    min-width: 20%;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden auto;
+
+    @media screen and (min-width: $breakpoint-md) {
+      max-width: $breakpoint-xs;
+      width: 100%;
+    }
+
+    button {
+      padding: 0.5rem;
+      font-size: 1rem;
+      width: 100%;
+    }
+  }
+
+  main {
+    @extend .container-fill;
+
+    .header {
+      padding-top: 0.67em;
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      h1 {
+        margin: 0;
+      }
+    }
+  }
+}
+</style>