Frontend prototype implementation

web/src/App.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { RouterView } from "vue-router"
+</script>
+
+<template>
+	<RouterView />
+</template>
+
+<style scoped></style>

web/src/assets/base.css

@@ -0,0 +1,3 @@
+* {
+	box-sizing: border-box;
+}

web/src/components/Empty.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style scoped></style>

web/src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from "vue"
+import { createPinia } from "pinia"
+
+import App from "./App.vue"
+import router from "./router"
+
+import "./assets/base.css"
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount("#app")

web/src/router/index.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router"
+import HomeView from "../views/HomeView.vue"
+
+const router = createRouter({
+	history: createWebHistory(import.meta.env.BASE_URL),
+	routes: [
+		{
+			path: "/",
+			name: "home",
+			component: HomeView,
+		},
+	],
+})
+
+export default router

web/src/stores/store.ts

@@ -0,0 +1,3 @@
+import { defineStore } from "pinia"
+
+export const useStore = defineStore("store", () => {})

web/src/views/HomeView.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { onMounted, Ref, ref } from "vue"
+
+interface AuthorData {
+	author: {
+		id: number
+		fullname: string
+		created_at: string
+		updated_at: string
+	}
+}
+
+interface Painting {
+	id: number
+	name: string
+	image_url: string
+	link: string
+	musuemId: number
+	PaintingAuthor: AuthorData[]
+}
+
+const paintings: Ref<Painting[]> = ref([])
+const winningPainting: Ref<Painting> = ref({} as Painting)
+const gameMessage = ref("")
+
+function fetchRandomPainting(): Promise<{ paintings: Painting[] }> {
+	return new Promise((resolve, reject) => {
+		fetch(`${__APP_ENV__.API_ADDRESS}/paintings/random/4`)
+			.then((response) => response.json())
+			.then((data) => resolve(data))
+			.catch((error) => reject(error))
+	})
+}
+
+async function initPaintings(): Promise<void> {
+	const fetchedData = await fetchRandomPainting()
+	paintings.value = fetchedData.paintings
+}
+
+function setWinningPainting(): void {
+	const randomIndex = Math.floor(Math.random() * paintings.value.length)
+	winningPainting.value = paintings.value[randomIndex]
+}
+
+function authorClickHandler(auhtorId: number): void {
+	if (auhtorId === winningPainting.value.PaintingAuthor[0].author.id) {
+		gameMessage.value = "Correct!"
+	} else {
+		gameMessage.value = "Wrong!"
+	}
+}
+
+async function initGame(): Promise<void> {
+	await initPaintings()
+	setWinningPainting()
+	gameMessage.value = "What is the author of this painting?"
+}
+
+onMounted(async () => {
+	await initGame()
+})
+</script>
+
+<template>
+	<img :src="winningPainting?.image_url" />
+	<button
+		v-for="painting of paintings"
+		@click="() => authorClickHandler(painting.PaintingAuthor[0].author.id)"
+		type="button"
+	>
+		{{ painting.PaintingAuthor[0].author.fullname }}
+	</button>
+	<p>{{ gameMessage }}</p>
+	<button type="button" @click="initGame">Next</button>
+</template>
+
+<style scoped>
+img {
+	width: 200px;
+}
+</style>