Merge pull request #26 from lightning-js/feature/language-plugin

Feature/language plugin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits-example-app",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Lightning 3 Blits Example App",
   "main": "index.js",
   "type": "module",
@@ -39,6 +39,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^1.0.0"
+    "@lightningjs/blits": "^1.2.0"
   }
 }

public/assets/translations.json

@@ -0,0 +1,22 @@
+{
+    "nl-NL": {
+      "hello": "Hallo, alles goed?",
+      "bye": "Doei!",
+      "replacement": "Mijn naam is {first} {last}, ik ben {age} jaar"
+    },
+    "en-US": {
+      "hello": "Hello, how are you doing?",
+      "bye": "Goodbye!",
+      "replacement": "My name is {first} {last}, I'm {age} years old"
+    },
+    "fr-FR": {
+      "hello": "Bonjour, ça va?",
+      "bye": "Au revoir!",
+      "replacement": "Je m'appelle {first} {last}, j'ai {age} ans"
+    },
+    "de-DE": {
+      "hello": "Gutentag, wie geht's?",
+      "bye": "Tschüss!",
+      "replacement": "Mein Name ist {first} {last}, ich bin {age} Jahre alt"
+    }
+  }

src/App.js

@@ -47,6 +47,7 @@ import Slots from './pages/Slots'
 import MemoryGame from './pages/MemoryGame'
 import Exponential from './pages/Exponential'
 import Viewport from './pages/Viewport'
+import LanguagePlugin from './pages/LanguagePlugin.js'
 
 export default Blits.Application({
   template: `
@@ -108,6 +109,7 @@ export default Blits.Application({
     { path: '/examples/events', component: Events },
     { path: '/examples/slots', component: Slots },
     { path: '/examples/viewport', component: Viewport },
+    { path: '/examples/languageplugin', component: LanguagePlugin },
     // Benchmarks and stress tests
     { path: '/benchmarks/exponential', component: Exponential },
   ],

src/components/Button.js

@@ -22,7 +22,7 @@ export default Blits.Component('Button', {
     <Element
       w="300"
       h="80"
-      color="$color"
+      color="$color || 'red'"
       :effects="[$shader('radius', {radius: 20})]"
       :alpha.transition="$alpha"
       :scale.transition="$scale"

src/components/Flags.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2023 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
+ */
+
+import Blits from '@lightningjs/blits'
+
+export default Blits.Component('Flags', {
+  template: `
+    <Element>
+      <Element :for="(language, index) in $languages" x="$index * 250">
+        <Element src="$language.flag" w="150" h="150" :alpha="$index === $activeIndex ? 1 : 0.6" />
+        <Text
+          content="$language.name"
+          y="150"
+          wordwrap="150"
+          align="center"
+          :color="$index === $activeIndex ? '#fff' : '#aaa'"
+        />
+      </Element>
+    </Element>
+  `,
+  props: ['languages'],
+  state() {
+    return {
+      activeIndex: 0,
+    }
+  },
+  watch: {
+    activeIndex(v) {
+      const language = this.languages[v]
+      if (language && language.code) {
+        this.$language.set(language.code)
+      }
+    },
+  },
+  input: {
+    right() {
+      this.activeIndex = Math.min(this.activeIndex + 1, this.languages.length - 1)
+    },
+    left() {
+      this.activeIndex = Math.max(this.activeIndex - 1, 0)
+    },
+  },
+})

src/index.js

@@ -16,18 +16,22 @@
  */
 
 import Blits from '@lightningjs/blits'
+import { language } from '@lightningjs/blits/plugins'
+
 import keymapping from './keymapping.js'
 
 import App from './App.js'
 
+// Use the Blits Language plugin
+Blits.Plugin(language)
+
 Blits.Launch(App, 'app', {
   w: 1920,
   h: 1080,
   multithreaded: false,
   debugLevel: 1,
   reactivityMode: 'Proxy',
   keymap: keymapping(),
-  defaultFont: 'lato',
   fonts: [
     {
       family: 'lato',

src/pages/Components.js

@@ -18,6 +18,7 @@
 import Blits from '@lightningjs/blits'
 import Square from '../components/Square.js'
 import Card from '../components/Card.js'
+import Button from '../components/Button.js'
 
 export default Blits.Component('Components', {
   components: {
@@ -36,18 +37,18 @@ export default Blits.Component('Components', {
       <Card x="500" y="100" />
       <Card x="500" y="500" size="large" />
 
-      <Element x="1100" y="200">
+      <Element x="1000" y="100">
         <Text>Dynamic components</Text>
-        <Component is="$dynamicComponent" y="100" />
-        <Component :for="(component, index) in $dynamicComponents" is="$component" :x="250 * $index" y="300" />
+        <Component is="$dynamicComponent" y="100" color="blue" />
+        <Component :for="(bla, index) in $dynamicComponents" is="$bla" :x="205 * $index" y="300" />
       </Element>
     </Element>
   `,
   state() {
     return {
       x: 100,
-      dynamicComponent: 'Square',
-      dynamicComponents: ['Square', 'Card', 'Square'],
+      dynamicComponent: Button,
+      dynamicComponents: ['Square', 'Card', 'Square', Button],
       toggle: false,
       size: 50,
     }