advent-of-code

Entries to advent of code, multiple years
git clone git://git.finwo.net/misc/advent-of-code
Log | Files | Refs

game-list.vue (930B)

      1 <template>
      2   <layout>
      3     <div id="gamelist">
      4       <div v-for="g in games">
      5         <router-link :to="'/game/' + g.uuid">{{ g.name }}</router-link>
      6       </div>
      7     </div>
      8   </layout>
      9 </template>
     10 
     11 <style>
     12 #gamelist {
     13   display: flex;
     14   flex-wrap: wrap;
     15   /* margin: -0.5rem; */
     16   gap: 1rem;
     17 }
     18 #gamelist > * {
     19   /* flex: 1; */
     20   background: var(--col-primary);
     21   color: #fff;
     22   padding: 1rem;
     23   /* margin: 0.5rem; */
     24 }
     25 #gamelist a {
     26   background: var(--col-primary);
     27   color: #fff;
     28 }
     29 </style>
     30 
     31 <script lang="ts">
     32 import { ref, onMounted } from 'vue';
     33 import Layout from '../layout/default.vue';
     34 
     35 export default {
     36   components: {Layout},
     37   setup() {
     38     const games = ref([]);
     39 
     40     onMounted(async () => {
     41       const gameResponse = await (await fetch('http://api.docker/bingo/games', { method: 'GET' })).json();
     42       if (gameResponse.ok) games.value = gameResponse.data;
     43     });
     44 
     45     return {
     46       games,
     47     };
     48   }
     49 }
     50 </script>