Feat - Update to dot blits ext

src/App.js → src/App.blits

@@ -15,48 +15,58 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+<template>
+  <Element w="1920" h="1080" :color="$backgroundColor">
+    <RouterView w="100%" h="100%" />
+    <!-- <FPScounter x="1610" :show="$showFPS" /> -->
+    <SourceInfo ref="info" :show="$showInfo" />
+  </Element>
+</template>
+
+<script>
+
 import Blits from '@lightningjs/blits'
 
 // Demo pages
-import Portal from './pages/Portal'
-import Intro from './pages/Intro'
-import Theming from './pages/Theming'
-import Tmdb from './pages/Tmdb'
-import Sprites from './pages/Sprites'
-import FocusHandling from './pages/FocusHandling'
+import Portal from './pages/Portal.blits'
+import Intro from './pages/Intro.blits'
+import Theming from './pages/Theming.blits'
+import Tmdb from './pages/Tmdb.blits'
+import Sprites from './pages/Sprites.blits'
+import FocusHandling from './pages/FocusHandling.blits'
 
 // Example & Test pages
-import Positioning from './pages/Positioning'
-import Player from './pages/Player'
-import Colors from './pages/Colors'
-import Gradients from './pages/Gradients'
-import Transitions from './pages/Transitions'
-import Alpha from './pages/Alpha'
-import Scaling from './pages/Scaling'
-import Rotation from './pages/Rotation'
-import KeyInput from './pages/KeyInput'
-import Texts from './pages/Texts'
-import Images from './pages/Images'
-import Components from './pages/Components'
-import ForLoop from './pages/ForLoop'
-import ForLoopAdvanced from './pages/ForLoopAdvanced'
-import Shaders from './pages/Shaders.js'
-import ShadersCustom from './pages/ShadersCustom.js'
-import ShowIf from './pages/ShowIf'
-import Events from './pages/Events'
-import Slots from './pages/Slots'
-import MemoryGame from './pages/MemoryGame'
-import Exponential from './pages/Exponential'
-import Viewport from './pages/Viewport'
-import { RouterHookRoutes } from './pages/RouterHooks.js'
-import Resize from './pages/Resize'
-import LanguagePlugin from './pages/LanguagePlugin.js'
-import KeyCodes from './pages/KeyCodes.js'
-import SourceInfo from './components/SourceInfo.js'
-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 Positioning from './pages/Positioning.blits'
+import Player from './pages/Player.blits'
+import Colors from './pages/Colors.blits'
+import Gradients from './pages/Gradients.blits'
+import Transitions from './pages/Transitions.blits'
+import Alpha from './pages/Alpha.blits'
+import Scaling from './pages/Scaling.blits'
+import Rotation from './pages/Rotation.blits'
+import KeyInput from './pages/KeyInput.blits'
+import Texts from './pages/Texts.blits'
+import Images from './pages/Images.blits'
+import Components from './pages/Components.blits'
+import ForLoop from './pages/ForLoop.blits'
+import ForLoopAdvanced from './pages/ForLoopAdvanced.blits'
+import Shaders from './pages/Shaders.blits'
+import ShadersCustom from './pages/ShadersCustom.blits'
+import ShowIf from './pages/ShowIf.blits'
+import Events from './pages/Events.blits'
+import Slots from './pages/Slots.blits'
+import MemoryGame from './pages/MemoryGame.blits'
+import Exponential from './pages/Exponential.blits'
+import Viewport from './pages/Viewport.blits'
+import { RouterHookRoutes } from './pages/RouterHooks/index.js'
+import Resize from './pages/Resize.blits'
+import LanguagePlugin from './pages/LanguagePlugin.blits'
+import KeyCodes from './pages/KeyCodes.blits'
+import SourceInfo from './components/SourceInfo.blits'
+import SpecialCharacters from './pages/SpecialCharacters.blits'
+import Layout from './pages/Layout.blits'
+import FireBoltRoutes from './pages/Firebolt/index.js'
+import Announcer from './pages/Announcer.blits'
 
 const queryString = new URLSearchParams(window.location.search)
 const showSource = !!queryString.get('source')
@@ -66,13 +76,6 @@ export default Blits.Application({
   components: {
     SourceInfo,
   },
-  template: `
-    <Element w="1920" h="1080" :color="$backgroundColor">
-      <RouterView w="100%" h="100%" />
-      <!-- <FPScounter x="1610" :show="$showFPS" /> -->
-      <SourceInfo ref="info" :show="$showInfo" />
-    </Element>
-  `,
   state() {
     return {
       backgroundColor: '#1e293b',
@@ -86,7 +89,7 @@ export default Blits.Application({
     // Loading a route via a dynamic import
     {
       path: '/demos/loading',
-      component: () => import('./pages/Loading.js'),
+      component: () => import('./pages/Loading.blits'),
     },
     // Loading a route in a Promise
     {
@@ -130,7 +133,6 @@ export default Blits.Application({
     { path: '/examples/viewport', component: Viewport },
     ...RouterHookRoutes,
     { path: '/examples/resize', component: Resize },
-    { path: '/examples/languageplugin', component: LanguagePlugin },
     { path: '/examples/keycodes', component: KeyCodes },
     { path: '/examples/translations', component: LanguagePlugin },
     { path: '/examples/special-characters', component: SpecialCharacters },
@@ -185,13 +187,13 @@ export default Blits.Application({
       this.$router.to('/')
     },
     sourceCode() {
+      this.$log.info('Opening source code link')
       this.showInfo = false
+      this.$log.info(this.$router.currentRoute.path)
       const sourcePath = getSourcePath(this.$router.currentRoute.path)
+      this.$log.info('source path ', sourcePath)
       if (sourcePath) {
-        window.open(
-          `https://github.com/lightning-js/blits-example-app/tree/master/${sourcePath}`,
-          '_blank'
-        )
+        window.open(`https://github.com/lightning-js/blits-example-app/tree/feature/v2/${sourcePath}`, '_blank')
       }
     },
   },
@@ -237,5 +239,6 @@ const getSourcePath = (routerPath) => {
     '/benchmarks/exponential': 'src/pages/Exponential',
   }
 
-  return sourceMap['/' + routerPath] + '.js'
+  return sourceMap[routerPath] + '.blits'
 }
+</script>

src/components/Accent.blits

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+*/
+
+<template>
+  <Element w="300" h="250" :color="$bColor" rounded="8">
+    <Text x="150" y="125" mount="{x:0.5, y:0.5}" :content="$lang" color="#fff" font="lato-black" />
+  </Element>
+</template>
+
+<script>
+
+import Blits from '@lightningjs/blits'
+
+export default Blits.Component('Accent', {
+  state() {
+    return {
+      /**
+       * background color of accent tile
+       */
+      bColor: "{ top: '#93C5FD', bottom: '#3B82F6' }",
+    }
+  },
+  props: ['lang'],
+  hooks: {
+    focus() {
+      this.bColor = "{ top: '#6366F1', bottom: '#4F46E5' }"
+    },
+    unfocus() {
+      this.bColor = "{ top: '#93C5FD', bottom: '#3B82F6' }"
+    },
+  },
+})
+</script>

src/components/AccentList.blits

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+*/
+
+<template>
+  <Element>
+    <Element :x.transition="$x">
+      <Accent
+        :for="(item, index) in $data"
+        key="$item.lang"
+        lang="$item.lang"
+        :ref="'accent'+$index"
+        x="$index * 400"
+      />
+    </Element>
+    <Text :content="$activeAccent" font="lato-black" x="960" y="400" mount="{x:0.5}" letterspacing="10" size="40" />
+  </Element>
+</template>
+
+<script>
+
+import Blits from '@lightningjs/blits'
+import Accent from './Accent.blits'
+
+export default Blits.Component('AccentList', {
+  components: {
+    Accent,
+  },
+  props: ['data'],
+  state() {
+    return {
+      /**
+       * Position of accents list
+       */
+      x: 160,
+      /**
+       * Current active index of tile
+       */
+      activeIndex: 0,
+      /**
+       * Current active accent characters
+       */
+      activeAccent: '',
+    }
+  },
+  watch: {
+    activeIndex(v) {
+      const el = this.$select(`accent${v}`)
+      if (el && el.$focus) {
+        el.$focus()
+        this.activeAccent = this.data[v].chars
+      }
+    },
+  },
+  hooks: {
+    focus() {
+      this.$trigger('activeIndex')
+    },
+  },
+  input: {
+    right() {
+      if (this.activeIndex < this.data.length - 1) this.move(1)
+    },
+    left() {
+      if (this.activeIndex > 0) this.move(-1)
+    },
+  },
+  methods: {
+    move(dir) {
+      const next = this.activeIndex + dir
+      this.x = next > 3 ? -(next - 3) * 400 - 160 : 160
+      this.activeIndex = next
+    },
+  },
+})
+</script>

src/components/AnnouncerItem.blits

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+*/
+
+<template>
+  <Element
+    :color="$$hasFocus ? '#e0f2fe' : '#fef9c3'"
+    w="200"
+    h="200"
+    :effects="[{type: 'radius', props: {radius: 12}}]"
+  >
+    <Text
+      :content="$name"
+      :size="$$hasFocus ? 38 : 32"
+      :color="$$hasFocus ? '#1e3a8a' : '#2563eb'"
+      placement="{x: 'center', y: 'middle'}"
+    />
+  </Element>
+</template>
+
+<script>
+
+import Blits from '@lightningjs/blits'
+
+export default Blits.Component('AnnouncerItem', {
+  props: ['name'],
+  state() {
+    return {
+      message: null,
+    }
+  },
+  hooks: {
+    focus() {
+      this.message = this.$announcer.speak(this.name)
+    },
+    unfocus() {
+      if (this.message) {
+        this.message.stop()
+        this.message.cancel()
+      }
+    },
+  },
+})
+</script>