Router examples

package.json

@@ -48,6 +48,6 @@
   },
   "dependencies": {
     "@firebolt-js/sdk": "^1.4.1",
-    "@lightningjs/blits": "^1.38.2"
+    "@lightningjs/blits": "^1.39.0"
   }
 }

src/App.js

@@ -56,6 +56,8 @@ import SpecialCharacters from './pages/SpecialCharacters.js'
 import Layout from './pages/Layout.js'
 import { FireBoltRoutes } from './pages/Firebolt.js'
 import Announcer from './pages/Announcer.js'
+import { RouterExampleRoutes } from './pages/RouterExample.js'
+import { Menu } from './components/RouterExample'
 
 const queryString = new URLSearchParams(window.location.search)
 const showSource = !!queryString.get('source')
@@ -64,14 +66,18 @@ const showFPS = !!queryString.get('fps')
 export default Blits.Application({
   components: {
     SourceInfo,
+    Menu,
   },
   template: `
     <Element w="1920" h="1080" :color="$backgroundColor">
-      <RouterView w="100%" h="100%" />
+      <RouterView w="100%" h="100%" ref="routerView" />
+
+      <!-- Router Examples Menu (rendered on top) -->
+      <Menu :alpha="$$appState.showMenu" ref="routerMenu" />
       <FPScounter x="1610" :show="$showFPS" />
       <SourceInfo ref="info" :show="$showInfo" />
     </Element>
-    `,
+  `,
   state() {
     return {
       backgroundColor: '#1e293b',
@@ -81,11 +87,15 @@ export default Blits.Application({
   },
   routes: [
     // Demo routes
-    { path: '/', component: Portal, options: { keepAlive: true } },
+    { path: '/', component: Portal, options: { keepAlive: true, reuseComponent: true } },
     // Loading a route via a dynamic import
     {
       path: '/demos/loading',
       component: () => import('./pages/Loading.js'),
+      options: {
+        keepAlive: true,
+        reuseComponent: true,
+      },
     },
     // Loading a route in a Promise
     {
@@ -140,7 +150,14 @@ export default Blits.Application({
     },
     // Benchmarks and stress tests
     { path: '/benchmarks/exponential', component: Exponential },
+    ...RouterExampleRoutes,
     ...FireBoltRoutes,
+    // Global 404 route - must be last
+    {
+      path: '*',
+      component: () => import('./components/RouterExample/NotFound.js'),
+      announce: 'Page Not Found - Press Back to Return',
+    },
   ],
   hooks: {
     ready() {
@@ -192,6 +209,34 @@ export default Blits.Application({
         )
       }
     },
+    right() {
+      if (this.$appState.focusMenu === true) {
+        this.$select('routerView').$focus()
+        this.$appState.focusMenu = false
+      }
+    },
+  },
+  watch: {
+    '$appState.focusMenu'(v) {
+      if (v === true) {
+        const menu = this.$select('routerMenu')
+        menu && menu.$focus && menu.$focus()
+      }
+    },
+    '$router.state.path'(v) {
+      if (v !== undefined) {
+        const isRouterPath = v.includes('/examples/router/')
+        const isLoaderPath = v.includes('/examples/router/loader')
+
+        if (isRouterPath && !isLoaderPath) {
+          // Show menu for all router pages except loader
+          this.$appState.showMenu = true
+        } else {
+          // Hide menu for non-router pages and loader
+          this.$appState.showMenu = false
+        }
+      }
+    },
   },
 })
 

src/api/routerExampleData.js

@@ -0,0 +1,153 @@
+export const getMovies = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const movies = [
+        {
+          id: 1,
+          title: 'Blade Runner 2049',
+          director: 'Denis Villeneuve',
+          genre: 'Sci-Fi',
+          year: 2017,
+          colorPalette: ['neon blue', 'orange', 'grey'],
+          mood: 'Futuristic, melancholic',
+          imageUrl: 'https://example.com/blade-runner.jpg',
+        },
+        {
+          id: 2,
+          title: 'The Grand Budapest Hotel',
+          director: 'Wes Anderson',
+          genre: 'Comedy/Drama',
+          year: 2014,
+          colorPalette: ['pastel pink', 'lavender', 'gold'],
+          mood: 'Whimsical, nostalgic',
+          imageUrl: 'https://example.com/grand-budapest.jpg',
+        },
+        {
+          id: 3,
+          title: 'Mad Max: Fury Road',
+          director: 'George Miller',
+          genre: 'Action',
+          year: 2015,
+          colorPalette: ['desert orange', 'steel blue', 'black'],
+          mood: 'Intense, chaotic',
+          imageUrl: 'https://example.com/mad-max.jpg',
+        },
+        {
+          id: 4,
+          title: 'Moonlight',
+          director: 'Barry Jenkins',
+          genre: 'Drama',
+          year: 2016,
+          colorPalette: ['deep blue', 'purple', 'soft pink'],
+          mood: 'Emotional, intimate',
+          imageUrl: 'https://example.com/moonlight.jpg',
+        },
+        {
+          id: 5,
+          title: 'Life of Pi',
+          director: 'Ang Lee',
+          genre: 'Adventure/Drama',
+          year: 2012,
+          colorPalette: ['sunset orange', 'ocean blue', 'white'],
+          mood: 'Spiritual, surreal',
+          imageUrl: 'https://example.com/life-of-pi.jpg',
+        },
+      ]
+      resolve(movies)
+    }, 200)
+  })
+}
+
+export const getTvShows = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const tvShows = [
+        {
+          id: 1,
+          title: 'Breaking Bad',
+          creator: 'Vince Gilligan',
+          genre: 'Crime/Drama',
+          year: 2008,
+          seasons: 1,
+          episodes: 8,
+          status: 'Completed',
+          rating: '9.5/10',
+          mood: 'Intense, dark, character-driven',
+          colorPalette: ['dark green', 'yellow', 'black'],
+          imageUrl: 'https://example.com/breaking-bad.jpg',
+        },
+        {
+          id: 2,
+          title: 'The Office',
+          creator: 'Greg Daniels',
+          genre: 'Comedy',
+          year: 2005,
+          seasons: 2,
+          episodes: 8,
+          status: 'Completed',
+          rating: '8.9/10',
+          mood: 'Hilarious, heartwarming, cringe comedy',
+          colorPalette: ['office blue', 'beige', 'white'],
+          imageUrl: 'https://example.com/the-office.jpg',
+        },
+        {
+          id: 3,
+          title: 'Stranger Things',
+          creator: 'The Duffer Brothers',
+          genre: 'Sci-Fi/Horror',
+          year: 2016,
+          seasons: 3,
+          episodes: 8,
+          status: 'Ongoing',
+          rating: '8.7/10',
+          mood: 'Nostalgic, mysterious, thrilling',
+          colorPalette: ['neon pink', 'dark blue', 'purple'],
+          imageUrl: 'https://example.com/stranger-things.jpg',
+        },
+        {
+          id: 4,
+          title: 'Game of Thrones',
+          creator: 'David Benioff & D.B. Weiss',
+          genre: 'Fantasy/Drama',
+          year: 2011,
+          seasons: 4,
+          episodes: 8,
+          status: 'Completed',
+          rating: '9.3/10',
+          mood: 'Epic, political, brutal',
+          colorPalette: ['royal blue', 'gold', 'dark red'],
+          imageUrl: 'https://example.com/game-of-thrones.jpg',
+        },
+        {
+          id: 5,
+          title: 'The Mandalorian',
+          creator: 'Jon Favreau',
+          genre: 'Sci-Fi/Western',
+          year: 2019,
+          seasons: 5,
+          episodes: 8,
+          status: 'Ongoing',
+          rating: '8.7/10',
+          mood: 'Adventure, family-friendly, space western',
+          colorPalette: ['beskar silver', 'desert tan', 'space black'],
+          imageUrl: 'https://example.com/mandalorian.jpg',
+        },
+        {
+          id: 6,
+          title: 'The Crown',
+          creator: 'Peter Morgan',
+          genre: 'Historical Drama',
+          year: 2016,
+          seasons: 6,
+          episodes: 8,
+          status: 'Completed',
+          rating: '8.6/10',
+          mood: 'Regal, dramatic, historical',
+          colorPalette: ['royal purple', 'gold', 'cream'],
+          imageUrl: 'https://example.com/the-crown.jpg',
+        },
+      ]
+      resolve(tvShows)
+    }, 200)
+  })
+}

src/components/MovieCard.js

@@ -0,0 +1,48 @@
+import Blits from '@lightningjs/blits'
+
+export default Blits.Component('MovieCard', {
+  template: `
+    <Element
+      w="300"
+      h="200"
+      :color="$focused ? '#4299e1' : '#374151'"
+      :effects="[{type: 'radius', props: 8}]"
+      :scale="$focused ? 1.05 : 1.0"
+      alpha="$focused ? 1.0 : 0.8"
+    >
+      <Text :content="$title" x="20" y="20" size="20" :color="$focused ? '#fff' : '#e2e8f0'" font="raleway" />
+      <Text :content="$year" x="20" y="50" size="14" :color="$focused ? '#e2e8f0' : '#a0aec0'" />
+      <Text :content="$genre" x="20" y="75" size="14" :color="$focused ? '#e2e8f0' : '#a0aec0'" />
+      <Text :content="'Directed by ' + $director" x="20" y="100" size="12" :color="$focused ? '#cbd5e1' : '#9ca3af'" />
+      <Text :content="$mood" x="20" y="125" size="12" :color="$focused ? '#cbd5e1' : '#9ca3af'" />
+
+      <!-- Focus border indicator -->
+      <Element
+        :show="$focused"
+        x="-2"
+        y="-2"
+        w="304"
+        h="204"
+        color="transparent"
+        :effects="[
+          {type: 'radius', props: 10},
+          {type: 'border', props: {width: 3, color: '#fbbf24'}}
+        ]"
+      />
+    </Element>
+  `,
+  props: ['title', 'director', 'genre', 'year', 'mood', 'movieId'],
+  state() {
+    return {
+      focused: false,
+    }
+  },
+  hooks: {
+    focus() {
+      this.focused = true
+    },
+    unfocus() {
+      this.focused = false
+    },
+  },
+})

src/components/RouterExample/Details.js

@@ -0,0 +1,63 @@
+import Blits from '@lightningjs/blits'
+import { List } from './List'
+
+export default Blits.Component('Details', {
+  components: {
+    List,
+  },
+  template: `
+    <Element w="1920" h="1080" color="#1e293b">
+      <!-- Divider -->
+      <Element x="400" y="0" w="2" h="1080" color="#4a5568" />
+
+      <!-- Content -->
+      <Element x="402" y="0" w="1518" h="1080">
+        <Text content="Movie Details" x="40" y="40" size="42" font="raleway" color="#fff" />
+        <Text content="Press BACK to return to movies" x="40" y="100" size="20" color="#a0aec0" />
+
+        <Element x="40" y="160" w="1438" h="600" color="#374151" :effects="[{type: 'radius', props: 12}]">
+          <Element w="1438" h="5" :color="$color" />
+          <Text content="Movie Information" x="40" y="40" size="32" color="#fff" />
+          <Text :content="'Movie ID: ' + $id" x="40" y="100" size="24" color="#e2e8f0" />
+          <Text
+            :content="'Title: ' + ($selectedMovie.title || 'Movie not found')"
+            x="40"
+            y="140"
+            size="24"
+            color="#e2e8f0"
+          />
+          <Text :content="'Genre: ' + ($selectedMovie.genre || 'N/A')" x="40" y="180" size="24" color="#e2e8f0" />
+          <Text :content="'Year: ' + ($selectedMovie.year || 'N/A')" x="40" y="220" size="24" color="#e2e8f0" />
+          <Text :content="'Director: ' + ($selectedMovie.director || 'N/A')" x="40" y="260" size="24" color="#e2e8f0" />
+          <Text :content="'Mood: ' + ($selectedMovie.mood || 'N/A')" x="40" y="300" size="20" color="#a0aec0" />
+          <Text content="Focus is now on this content area - use BACK to return" x="40" y="460" size="18" color="#718096" />
+        </Element>
+
+        <List x="40" type="movies" ref="list" />
+      </Element>
+    </Element>
+  `,
+  props: ['id', 'selectedMovie'],
+  state() {
+    return {
+      color: '#374151',
+    }
+  },
+  hooks: {
+    focus() {
+      this.color = '#fbbf24'
+    },
+  },
+  input: {
+    left() {
+      if (this.$appState) {
+        this.$appState.focusMenu = true
+      }
+    },
+    down() {
+      this.color = '#374151'
+      const list = this.$select('list')
+      if (list && list.$focus) list.$focus()
+    },
+  },
+})