tauri-app: game review, with video showcase, stats and clip export

tauri-app/src/App.vue

@@ -1,9 +1,38 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import GameHistory from "./components/GameHistory.vue";
+import GameReview from "./components/GameReview.vue";
+import type { GameHistoryItem } from "./types/timeline";
+
+// Current view state
+const currentView = ref<"history" | "review">("history");
+const selectedGame = ref<GameHistoryItem | null>(null);
+
+// Navigate to review view
+function openReview(game: GameHistoryItem) {
+  selectedGame.value = game;
+  currentView.value = "review";
+}
+
+// Navigate back to history
+function closeReview() {
+  currentView.value = "history";
+  selectedGame.value = null;
+}
 </script>
 
 <template>
-  <GameHistory />
+  <div class="app">
+    <GameHistory 
+      v-if="currentView === 'history'" 
+      @open-review="openReview"
+    />
+    <GameReview
+      v-else-if="currentView === 'review' && selectedGame"
+      :game="selectedGame"
+      @back="closeReview"
+    />
+  </div>
 </template>
 
 <style>
@@ -38,4 +67,9 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }
+
+.app {
+  min-height: 100vh;
+  background: #0a0a13;
+}
 </style>

tauri-app/src/components/GameHistory.vue

@@ -2,6 +2,11 @@
 import { ref, onMounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import type { GameHistoryItem, TimestampedEvent, ItemInfo } from "../types/timeline";
+
+// Emits
+const emit = defineEmits<{
+  (e: "open-review", game: GameHistoryItem): void;
+}>();
 import {
   getGameResult,
   formatDuration,
@@ -58,6 +63,11 @@ function closeDetail() {
   selectedGame.value = null;
 }
 
+// Open review view for a game
+function openReview(game: GameHistoryItem) {
+  emit("open-review", game);
+}
+
 // Helper to get items array for display (6 slots + trinket)
 function getItemsArray(game: GameHistoryItem): (ItemInfo | null)[] {
   return getItems(game);
@@ -137,7 +147,7 @@ onMounted(() => {
                 <img
                   v-if="getSummonerSpells(game)"
                   :src="getSummonerSpellUrl(getSummonerSpells(game)!.spell1Id)"
-                  :alt="getSummonerSpells(game)!.spell1Name || 'Spell 1'"
+                  alt="Spell 1"
                   class="spell-image"
                 />
                 <div v-else class="spell-placeholder"></div>
@@ -146,7 +156,7 @@ onMounted(() => {
                 <img
                   v-if="getSummonerSpells(game)"
                   :src="getSummonerSpellUrl(getSummonerSpells(game)!.spell2Id)"
-                  :alt="getSummonerSpells(game)!.spell2Name || 'Spell 2'"
+                  alt="Spell 2"
                   class="spell-image"
                 />
                 <div v-else class="spell-placeholder"></div>
@@ -348,8 +358,8 @@ onMounted(() => {
 
         <div class="modal-actions">
           <button class="btn-secondary" @click="closeDetail">Close</button>
-          <button class="btn-primary">
-            Open Video
+          <button class="btn-primary" @click="openReview(selectedGame)">
+            Review Game
           </button>
         </div>
       </div>