danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/fusion-2025.
1.6 kB
84 lines
1<template>
2 <main class="container">
3 <nav>
4 <ul>
5 <li><nuxt-link to="/">Home</nuxt-link></li>
6 </ul>
7 </nav>
8 Hi Fusion 2025!
9 <form @submit.prevent="handleSubmission">
10 <input v-model="prompt" type="text" placeholder="How do you want things to change?" />
11 <button :aria-busy="loading">Submit request</button>
12 </form>
13 <MalleableComponent />
14 </main>
15</template>
16
17<script setup lang="ts">
18import '@picocss/pico'
19
20const prompt = ref('')
21
22const malleables = reactive({
23 query: `query List {
24 cards {
25 name
26 abilities {
27 effect
28 name
29 type
30 }
31 evolveFrom
32 category
33 rarity
34 energyType
35 attacks {
36 cost
37 damage
38 effect
39 }
40 description
41 }
42}`,
43template: `<ul>
44 <li v-for="card in data?.data.cards || []">
45 {{ card.name }}
46 </li>
47</ul>`
48})
49
50const loading = ref(false)
51async function handleSubmission() {
52 loading.value = true
53 try {
54 const res = await $fetch('/api/completion', {
55 method: 'POST',
56 body: {
57 malleables,
58 prompt: prompt.value
59 }
60 })
61 console.log(res)
62 Object.assign(malleables, res)
63 } catch (e) {
64 console.error(e)
65 }
66 loading.value = false
67}
68
69const MalleableComponent = defineComponent({
70 async setup () {
71 const { data } = await useFetch('https://api.tcgdex.net/v2/graphql', {
72 method: 'POST',
73 body: {
74 query: malleables.query
75 }
76 })
77
78 return () => h({
79 data: () => ({ data }),
80 template: malleables.template
81 })
82 }
83})
84</script>