Implemented Various language accents sample

public/fonts/Lato-Black.config.json

@@ -0,0 +1,4 @@
+{
+  "charset": "!\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~’“”éèëïüáóijIJéèêëàâîïôùûçáéíóúñüÇçĞğİiÖöÜüŞş",
+  "presets": [""]
+}

src/App.js

@@ -51,6 +51,7 @@ import { RouterHookRoutes } from './pages/RouterHooks.js'
 import Resize from './pages/Resize'
 import LanguagePlugin from './pages/LanguagePlugin.js'
 import SourceInfo from './components/SourceInfo.js'
+import Characters from './pages/Characters.js'
 
 const queryString = new URLSearchParams(window.location.search)
 const showSource = !!queryString.get('source')
@@ -66,7 +67,7 @@ export default Blits.Application({
       <FPScounter x="1610" :show="$showFPS" />
       <SourceInfo ref="info" :show="$showInfo" />
     </Element>
-  `,
+    `,
   state() {
     return {
       backgroundColor: '#1e293b',
@@ -124,6 +125,7 @@ export default Blits.Application({
     ...RouterHookRoutes,
     { path: '/examples/resize', component: Resize },
     { path: '/examples/languageplugin', component: LanguagePlugin },
+    { path: '/examples/characters', component: Characters },
     // Benchmarks and stress tests
     { path: '/benchmarks/exponential', component: Exponential },
   ],
@@ -193,6 +195,7 @@ const getSourcePath = (routerPath) => {
     '/examples/viewport': 'src/pages/Viewport',
     '/examples/resize': 'src/pages/Resize',
     '/examples/languageplugin': 'src/pages/LanguagePlugin',
+    '/examples/characters': 'src/pages/Characters',
     '/benchmarks/exponential': 'src/pages/Exponential',
   }
 

src/index.js

@@ -73,6 +73,11 @@ Blits.Launch(App, 'app', {
       type: 'msdf',
       file: 'fonts/Kalam-Regular.ttf',
     },
+    {
+      family: 'lato-black',
+      type: 'msdf',
+      file: 'fonts/Lato-Black.ttf',
+    },
   ],
   canvasColor: 'transparent',
   viewportMargin: 100,

src/pages/Characters.js

@@ -0,0 +1,145 @@
+import Blits from '@lightningjs/blits'
+
+const Accent = Blits.Component('Accent', {
+  template: `
+    <Element w="300" h="250" :color="$bColor">
+      <Text x="150" y="125" mount="{x:0.5, y:0.5}" :content="$lang" color="#000000ff" font="lato-black" />
+    </Element>
+    `,
+  state() {
+    return {
+      /**
+       * background color of accent tile
+       */
+      bColor: '#0000ffff',
+    }
+  },
+  props: ['lang'],
+  hooks: {
+    focus() {
+      this.bColor = '#ffff00ff'
+    },
+    unfocus() {
+      this.bColor = '#0000ffff'
+    },
+  },
+})
+
+const Accents = Blits.Component('Accents', {
+  components: {
+    Accent,
+  },
+  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>
+    `,
+  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
+    },
+  },
+})
+export default Blits.Component('Characters', {
+  components: {
+    Accents,
+  },
+  template: `
+    <Element>
+      <Text x="960" y="50" mount="{x:0.5}" content="Alphabets" font="lato-black" size="60" />
+      <Text x="960" y="150" mount="{x:0.5}" content="$alphabets" font="lato-black" size="40" letterspacing="10" />
+      <Text x="960" y="290" mount="{x:0.5}" content="Accents" font="lato-black" size="60" />
+      <Accents data="$accents" y="400" ref="accents" />
+      <Element
+        w="950"
+        h="40"
+        color="#000000ff"
+        :effects="[$shader('radius', {radius: 10})]"
+        x="1800"
+        y="1000"
+        mount="{x:1, y:1}"
+      >
+        <Text
+          content="The character ? represents a character that is not supported by the Lato-Black font"
+          size="25"
+          x="475"
+          y="20"
+          mount="{x:0.5, y:0.5}"
+        />
+      </Element>
+    </Element>
+    `,
+  state() {
+    return {
+      alphabets: 'abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+      accents: [
+        {
+          lang: 'Dutch',
+          chars: 'éèëïüáóijIJ',
+        },
+        {
+          lang: 'French',
+          chars: 'éèêëàâîïôùûç',
+        },
+        {
+          lang: 'Spanish',
+          chars: 'áéíóúñü',
+        },
+        {
+          lang: 'Turkish',
+          chars: 'ÇçĞğİiÖöÜüŞş',
+        },
+      ],
+    }
+  },
+  hooks: {
+    focus() {
+      const comp = this.$select('accents')
+      if (comp && comp.$focus) comp.$focus()
+    },
+  },
+})

src/pages/Portal.js

@@ -57,7 +57,7 @@ export default Blits.Component('Portal', {
         </Element>
       </Element>
     </Element>
-  `,
+    `,
   state() {
     return {
       version: p.version,
@@ -214,6 +214,11 @@ export default Blits.Component('Portal', {
           id: 'examples/languageplugin',
           description: 'Language Plugin for internationalization',
         },
+        {
+          title: 'Characters',
+          id: 'examples/characters',
+          description: 'Displays alphabets and various language accents using MSDF',
+        },
       ],
       benchmark: [
         {