-
- {{ selectedGame?.Title }}
-{{ selectedGame?.Developper }} - {{ selectedGame?.Year }}
-
-
-
+
-
-
-
-
diff --git a/frontend/src/components/OptionsModal.vue b/frontend/src/components/OptionsModal.vue
new file mode 100644
index 0000000..b1bf70d
--- /dev/null
+++ b/frontend/src/components/OptionsModal.vue
@@ -0,0 +1,42 @@
+
+ {
+ const source = localStorage.getItem('dataSource') || 'local';
+ if (source === 'local') return localGames;
+
+ // TODO games should be loaded from and started from the wails/go code
+ try {
+ const res = await fetch('https://your-api-server.com/api/games');
+ if (!res.ok) throw new Error('Failed to fetch games');
+ return await res.json();
+ } catch (e) {
+ console.error('API fetch failed, falling back to local:', e);
+ return localGames;
+ }
+}
diff --git a/frontend/src/stores/app-store.ts b/frontend/src/stores/app-store.ts
new file mode 100644
index 0000000..e0b2066
--- /dev/null
+++ b/frontend/src/stores/app-store.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import { Game } from "../models/game";
+
+export const useAppStore = defineStore('app', {
+ state: () => ({
+ tags: [] as string[],
+ games: [] as Game[],
+ selectedTag: null as string | null,
+ transitionDirection: 'down' as 'up' | 'down',
+ selectedGame: null as Game | null,
+ selectedGameIndex: 0,
+ qrLink: '' as string
+ }),
+ getters: {
+ filteredGames(state): Game[] {
+ return state.games.filter(game => game.tags.includes(state.selectedTag ?? ''));
+ }
+ },
+ actions: {
+ moveGameRight() {
+ this.selectGame(this.selectedGameIndex + 1);
+ },
+ moveGameLeft() {
+ this.selectGame(this.selectedGameIndex - 1);
+ },
+ moveTagUp() {
+ const index = this.tags.findIndex(t => t === this.selectedTag);
+ this.transitionDirection = 'down';
+ if (index > 0) this.selectTag(this.tags[index - 1]);
+ },
+ moveTagDown() {
+ const index = this.tags.findIndex(t => t === this.selectedTag);
+ this.transitionDirection = 'up';
+ if (index < this.tags.length - 1) this.selectTag(this.tags[index + 1]);
+ },
+ selectGame(index: number) {
+ const games = this.filteredGames;
+ if (index >= 0 && index < games.length) {
+ this.selectedGameIndex = index;
+ this.selectedGame = games[index];
+ }
+ },
+ selectTag(tag: string) {
+ this.selectedTag = tag;
+ this.selectedGameIndex = 0;
+ this.selectedGame = this.filteredGames[0] ?? null;
+ },
+ showQr(link: string) {
+ this.qrLink = link;
+ }
+ }
+});
\ No newline at end of file
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3940d6c..f567423 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
html {
background-color: rgba(27, 38, 54, 1);
text-align: center;
diff --git a/frontend/src/utils/key-contexts/carousel-key-context.ts b/frontend/src/utils/key-contexts/carousel-key-context.ts
new file mode 100644
index 0000000..c0300ca
--- /dev/null
+++ b/frontend/src/utils/key-contexts/carousel-key-context.ts
@@ -0,0 +1,39 @@
+import { KeyContext } from "./key-context";
+import { KeyboardManager } from "../keyboard-manager";
+
+export class CarouselKeyContext extends KeyContext {
+ readonly name: string = "CarouselContext";
+
+ protected onKeyUp() {
+ super.onKeyUp();
+ this.store.moveTagUp();
+ }
+
+ protected onKeyDown() {
+ super.onKeyDown();
+ this.store.moveTagDown();
+ }
+
+ protected onKeyRight() {
+ super.onKeyRight();
+ this.store.moveGameRight();
+ }
+
+ protected onKeyLeft() {
+ super.onKeyLeft();
+ if (this.store.selectedGameIndex === 0) {
+ KeyboardManager.switchContext("sidebar");
+ }
+ else {
+ this.store.moveGameLeft();
+ }
+ }
+
+ protected onEscape() {
+ super.onEscape();
+ }
+
+ protected onEnter() {
+ super.onEnter();
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/key-contexts/game-preview-key-context.ts b/frontend/src/utils/key-contexts/game-preview-key-context.ts
new file mode 100644
index 0000000..5e33230
--- /dev/null
+++ b/frontend/src/utils/key-contexts/game-preview-key-context.ts
@@ -0,0 +1,25 @@
+import { KeyContext } from "./key-context";
+
+export class GamePreviewKeyContext extends KeyContext {
+ readonly name: string = "GamePreviewKeyContext";
+
+ protected onKeyUp() {
+ super.onKeyUp();
+ }
+
+ protected onKeyDown() {
+ super.onKeyDown();
+ }
+
+ protected onKeyRight() {
+ super.onKeyRight();
+ }
+
+ protected onEnter() {
+ super.onEnter();
+ }
+
+ protected onEscape() {
+ super.onEscape();
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/key-contexts/key-context.ts b/frontend/src/utils/key-contexts/key-context.ts
new file mode 100644
index 0000000..7a4aa32
--- /dev/null
+++ b/frontend/src/utils/key-contexts/key-context.ts
@@ -0,0 +1,56 @@
+import { useAppStore } from "../../stores/app-store";
+
+export abstract class KeyContext {
+
+ public abstract readonly name: string;
+ protected store = useAppStore();
+
+ public handleKey(event: KeyboardEvent): void {
+ switch (event.key) {
+ case 'ArrowRight':
+ this.onKeyRight();
+ break;
+ case 'ArrowLeft':
+ this.onKeyLeft();
+ break;
+ case 'ArrowUp':
+ this.onKeyUp();
+ break;
+ case 'ArrowDown':
+ this.onKeyDown();
+ break;
+ case 'Escape':
+ this.onEscape();
+ break;
+ case 'Enter':
+ this.onEnter();
+ break;
+ default:
+ break;
+ }
+ }
+
+ protected onKeyRight(): void {
+ console.log('onKeyRight');
+ }
+
+ protected onKeyLeft(): void {
+ console.log('onKeyLeft');
+ }
+
+ protected onKeyUp(): void {
+ console.log('onKeyUp');
+ }
+
+ protected onKeyDown(): void {
+ console.log('onKeyDown');
+ }
+
+ protected onEscape(): void {
+ console.log('onEscape');
+ }
+
+ protected onEnter(): void {
+ console.log('onEnter');
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/key-contexts/modal-key-context.ts b/frontend/src/utils/key-contexts/modal-key-context.ts
new file mode 100644
index 0000000..62f4251
--- /dev/null
+++ b/frontend/src/utils/key-contexts/modal-key-context.ts
@@ -0,0 +1,8 @@
+import { KeyContext } from "./key-context";
+
+export abstract class ModalKeyContext extends KeyContext {
+
+ protected onEscape() {
+ super.onEscape();
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/key-contexts/sidebar-key-context.ts b/frontend/src/utils/key-contexts/sidebar-key-context.ts
new file mode 100644
index 0000000..2312113
--- /dev/null
+++ b/frontend/src/utils/key-contexts/sidebar-key-context.ts
@@ -0,0 +1,33 @@
+import { KeyContext } from "./key-context";
+import { KeyboardManager } from "../keyboard-manager";
+
+export class SidebarKeyContext extends KeyContext {
+ readonly name: string = "SidebarContext";
+
+ protected onKeyUp() {
+ super.onKeyUp();
+ this.store.moveTagUp();
+ }
+
+ protected onKeyDown() {
+ super.onKeyDown();
+ this.store.moveTagDown();
+ }
+
+ protected onKeyRight() {
+ super.onKeyRight();
+ this.store.moveGameRight();
+ KeyboardManager.switchContext("carousel")
+ }
+
+ protected onEnter() {
+ super.onEnter();
+ this.store.moveGameRight();
+ KeyboardManager.switchContext("carousel")
+ }
+
+ protected onEscape() {
+ super.onEscape();
+ // TODO options menu
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/keyboard-manager.ts b/frontend/src/utils/keyboard-manager.ts
new file mode 100644
index 0000000..810b137
--- /dev/null
+++ b/frontend/src/utils/keyboard-manager.ts
@@ -0,0 +1,17 @@
+import { CarouselKeyContext } from "./key-contexts/carousel-key-context";
+import { KeyContext } from "./key-contexts/key-context";
+import { SidebarKeyContext } from "./key-contexts/sidebar-key-context";
+
+export class KeyboardManager {
+ private static current?: KeyContext;
+
+ static switchContext(name: 'sidebar' | 'carousel') {
+ console.log("Switching context to " + name);
+ if (name === 'sidebar') this.current = new SidebarKeyContext();
+ else this.current = new CarouselKeyContext();
+ }
+
+ static handle(event: KeyboardEvent) {
+ this.current?.handleKey(event);
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/use-keyboard-navigation.ts b/frontend/src/utils/use-keyboard-navigation.ts
new file mode 100644
index 0000000..8de2fbf
--- /dev/null
+++ b/frontend/src/utils/use-keyboard-navigation.ts
@@ -0,0 +1,12 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+import { KeyboardManager } from "./keyboard-manager";
+
+export function useKeyboardNavigation(): void {
+ onMounted(() => {
+ window.addEventListener('keydown', KeyboardManager.handle.bind(KeyboardManager));
+ });
+
+ onBeforeUnmount(() => {
+ window.removeEventListener('keydown', KeyboardManager.handle);
+ });
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 3cc844d..dcb9d1c 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -3,8 +3,8 @@
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
- "moduleResolution": "Node",
- "strict": true,
+ "moduleResolution": "bundler",
+ "strict": false,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index b8afcc8..efe8642 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"composite": true,
"module": "ESNext",
- "moduleResolution": "Node",
+ "moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": [
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index a30c338..926189e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,7 +1,8 @@
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [vue()]
+ plugins: [vue(), tailwindcss()]
})
+
+
+
diff --git a/frontend/src/components/GameCarousel.vue b/frontend/src/components/GameCarousel.vue
new file mode 100644
index 0000000..2465388
--- /dev/null
+++ b/frontend/src/components/GameCarousel.vue
@@ -0,0 +1,84 @@
+
+
+
-
+
+
-
-
-
-
-
-
- {{ selectedGame?.Description }}
-
-
-
+
-
-
- ![cartridge]()
-
-
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/GamePreview.vue b/frontend/src/components/GamePreview.vue
new file mode 100644
index 0000000..7afb842
--- /dev/null
+++ b/frontend/src/components/GamePreview.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
deleted file mode 100644
index 3ab3df7..0000000
--- a/frontend/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
-
+
+ {{ game.title }}
+{{ game.genre }} - {{ game.players }} players
+ {{ game.description }}
+ +
+ ![]()
+
+
+
+
+ Languages: {{ game.languages.join(', ') }}
+
+
+
+ No game selected
+ {{ data.resultText }}
-
-
-
-
-
+
+
+
+
diff --git a/frontend/src/components/QrModal.vue b/frontend/src/components/QrModal.vue
new file mode 100644
index 0000000..651e20d
--- /dev/null
+++ b/frontend/src/components/QrModal.vue
@@ -0,0 +1,36 @@
+// File: src/components/QrModal.vue
+
+
+
+ Options
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
new file mode 100644
index 0000000..49a4828
--- /dev/null
+++ b/frontend/src/components/Sidebar.vue
@@ -0,0 +1,29 @@
+
+
+ ![QR Code]()
+
+ Scan with your phone
+{{ link }}
+ +
+
+
+
+
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f9754fe..515b82e 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,8 @@
import {createApp} from 'vue'
import App from './App.vue'
import './style.css';
+import { createPinia } from "pinia";
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(createPinia());
+app.mount('#app');
diff --git a/frontend/src/models/game.ts b/frontend/src/models/game.ts
new file mode 100644
index 0000000..0903f80
--- /dev/null
+++ b/frontend/src/models/game.ts
@@ -0,0 +1,22 @@
+export interface Game {
+ id: number | string;
+ title: string;
+ description?: string;
+ playerCount: "1" | "2" | "1-2";
+ teamMember?: TeamMember[];
+ languages?: string[];
+ tags?: string[];
+ media?: string[];
+ thumbnail?: string;
+ links?: object;
+ metadata?: object;
+ executablePath: string;
+}
+
+export interface TeamMember {
+ id: number | string;
+ name: string;
+ role?: string;
+ picture?: string;
+ socials?: object;
+}
\ No newline at end of file
diff --git a/frontend/src/services/game-service.ts b/frontend/src/services/game-service.ts
new file mode 100644
index 0000000..62a00aa
--- /dev/null
+++ b/frontend/src/services/game-service.ts
@@ -0,0 +1,53 @@
+import { Game } from "../models/game";
+
+const localGames: Game[] = [
+ {
+ id: 'g1',
+ title: 'Neon Rush',
+ description: 'A fast-paced 2D platformer through glowing neon levels.',
+ playerCount: '1',
+ languages: ['English', 'French'],
+ tags: ['platformer', 'neon', 'funny'],
+ media: [
+ '/assets/neon-rush-1.png',
+ '/assets/neon-rush-2.png'
+ ],
+ thumbnail: '/assets/neon-rush-thumb.png',
+ links: {
+ Website: 'https://neonrush.dev',
+ Itch: 'https://hyperbyte.itch.io/neonrush'
+ },
+ executablePath: "."
+ },
+ {
+ id: 'g2',
+ title: 'Ghost Bakery',
+ description: 'Bake spooky pastries in a haunted kitchen.',
+ playerCount: '1-2',
+ languages: ['English'],
+ tags: ['cooking', 'funny', 'co-op'],
+ media: [
+ '/assets/ghost-bakery-1.jpg'
+ ],
+ thumbnail: '/assets/ghost-bakery-thumb.jpg',
+ links: {
+ Itch: 'https://phantomforks.itch.io/ghostbakery'
+ },
+ executablePath: "."
+ }
+];
+
+export async function fetchGames(): Promise
+
+
+
+
+