99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<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> |