game.vue (1764B)
1 <template> 2 <layout> 3 <div> 4 <h3>Drawn numbers</h3> 5 <div id="numberlist"> 6 <div v-for="n in game.drawn">{{ n }}</div> 7 </div> 8 </div> 9 <div> 10 <h3>Boards</h3> 11 <div id="boardlist"> 12 <div v-for="board in boards"> 13 14 </div> 15 </div> 16 </div> 17 Single game life 18 </layout> 19 </template> 20 21 <style> 22 23 #numberlist { 24 display: flex; 25 flex-wrap: wrap; 26 gap: 1rem; 27 } 28 #numberlist > * { 29 background: var(--col-primary); 30 color: #fff; 31 padding: 1rem; 32 height: 3.5rem; /* 1.5 line height + 2 edges of padding */ 33 width: 3.5rem; /* making the block square */ 34 text-align: center; 35 } 36 37 #boardlist { 38 display: flex; 39 flex-wrap: wrap; 40 gap: 1rem; 41 } 42 #boardlist > * { 43 background: var(--col-primary); 44 color: #fff; 45 padding: 1rem; 46 font-size: 1rem; 47 height: 3.5rem; 48 width: 3.5rem; 49 text-align: center; 50 } 51 52 </style> 53 54 <script lang="ts"> 55 import { ref, onMounted, getCurrentInstance } from 'vue'; 56 import Layout from '../layout/default.vue'; 57 58 export default { 59 components: {Layout}, 60 setup() { 61 const instance = getCurrentInstance(); 62 const route = instance.proxy.$root.$route; 63 const { uuid } = route.params; 64 65 console.log({uuid}); 66 67 const selected = ref([]); 68 const game = ref({}); 69 const boards = ref([]); 70 71 onMounted(async () => { 72 const gameResponse = await (await fetch(`http://api.docker/bingo/games/${uuid}` , { method: 'GET' })).json(); 73 const boardResponse = await (await fetch(`http://api.docker/bingo/games/${uuid}/boards`, { method: 'GET' })).json(); 74 if (gameResponse.ok ) game.value = gameResponse.data; 75 if (boardResponse.ok) boards.value = boardResponse.data; 76 }); 77 78 return { 79 game, 80 boards 81 }; 82 } 83 } 84 </script>