@lightningjs/blits 0.6.8 → 0.6.10

package/src/components/FPScounter.js

@@ -0,0 +1,1127 @@
+/*
+ * 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 Component from '../component.js'
+import { renderer } from '../launch.js'
+import fps_sprite from '../../public/assets/fps_sprite.base64.js'
+
+console.log(fps_sprite)
+
+export default () =>
+  Component('FPScounter', {
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
+
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        parent = elms[0]
+
+        if (!elms[1]) {
+          elms[1] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig1 = {}
+
+        elementConfig1['y'] = 15
+        elementConfig1['x'] = 20
+
+        if (!elms[1].nodeId) {
+          elms[1].populate(elementConfig1)
+        }
+
+        parent = elms[1]
+
+        if (!elms[2]) {
+          elms[2] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig2 = {}
+
+        if (!elms[2].nodeId) {
+          elms[2].populate(elementConfig2)
+        }
+
+        const cmp3 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[2]
+
+        if (!elms[3]) {
+          elms[3] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig3 = {}
+
+        elementConfig3['image'] = component.image
+        elementConfig3['w'] = 43
+        elementConfig3['h'] = 25
+        elementConfig3['map'] = component.sprite
+        elementConfig3['frame'] = 'fps'
+
+        if (typeof cmp3 !== 'undefined') {
+          for (let key in cmp3.config.props) {
+            delete elementConfig3[cmp3.config.props[key]]
+          }
+        }
+
+        if (!elms[3].nodeId) {
+          elms[3].populate(elementConfig3)
+        }
+
+        parent = elms[3]
+        const props4 = {}
+        props4['image'] = component.image
+        props4['w'] = 43
+        props4['h'] = 25
+        props4['map'] = component.sprite
+        props4['frame'] = 'fps'
+
+        if (!elms[4]) {
+          elms[4] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props4 }, elms[3], component)
+          if (elms[4][Symbol.for('slots')][0]) {
+            parent = elms[4][Symbol.for('slots')][0]
+            component = elms[4]
+          } else {
+            parent = elms[4][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[2]
+
+        if (!elms[5]) {
+          elms[5] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig5 = {}
+
+        elementConfig5['x'] = 58
+        elementConfig5['y'] = 2
+
+        if (!elms[5].nodeId) {
+          elms[5].populate(elementConfig5)
+        }
+
+        const cmp6 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[5]
+
+        if (!elms[6]) {
+          elms[6] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig6 = {}
+
+        elementConfig6['image'] = component.image
+        elementConfig6['x'] = 0
+        elementConfig6['h'] = 20
+        elementConfig6['w'] = 20
+        elementConfig6['map'] = component.sprite
+
+        if (typeof cmp6 !== 'undefined') {
+          for (let key in cmp6.config.props) {
+            delete elementConfig6[cmp6.config.props[key]]
+          }
+        }
+
+        if (!elms[6].nodeId) {
+          elms[6].populate(elementConfig6)
+        }
+
+        parent = elms[6]
+        const props7 = {}
+        props7['image'] = component.image
+        props7['x'] = 0
+        props7['h'] = 20
+        props7['w'] = 20
+        props7['map'] = component.sprite
+        props7['frame'] = component.fps[0]
+
+        if (!elms[7]) {
+          elms[7] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props7 }, elms[6], component)
+          if (elms[7][Symbol.for('slots')][0]) {
+            parent = elms[7][Symbol.for('slots')][0]
+            component = elms[7]
+          } else {
+            parent = elms[7][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp8 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[5]
+
+        if (!elms[8]) {
+          elms[8] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig8 = {}
+
+        elementConfig8['image'] = component.image
+        elementConfig8['x'] = 18
+        elementConfig8['h'] = 20
+        elementConfig8['w'] = 20
+        elementConfig8['map'] = component.sprite
+
+        if (typeof cmp8 !== 'undefined') {
+          for (let key in cmp8.config.props) {
+            delete elementConfig8[cmp8.config.props[key]]
+          }
+        }
+
+        if (!elms[8].nodeId) {
+          elms[8].populate(elementConfig8)
+        }
+
+        parent = elms[8]
+        const props9 = {}
+        props9['image'] = component.image
+        props9['x'] = 18
+        props9['h'] = 20
+        props9['w'] = 20
+        props9['map'] = component.sprite
+        props9['frame'] = component.fps[1]
+
+        if (!elms[9]) {
+          elms[9] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props9 }, elms[8], component)
+          if (elms[9][Symbol.for('slots')][0]) {
+            parent = elms[9][Symbol.for('slots')][0]
+            component = elms[9]
+          } else {
+            parent = elms[9][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp10 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[5]
+
+        if (!elms[10]) {
+          elms[10] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig10 = {}
+
+        elementConfig10['image'] = component.image
+        elementConfig10['x'] = 36
+        elementConfig10['h'] = 20
+        elementConfig10['w'] = 20
+        elementConfig10['map'] = component.sprite
+
+        if (typeof cmp10 !== 'undefined') {
+          for (let key in cmp10.config.props) {
+            delete elementConfig10[cmp10.config.props[key]]
+          }
+        }
+
+        if (!elms[10].nodeId) {
+          elms[10].populate(elementConfig10)
+        }
+
+        parent = elms[10]
+        const props11 = {}
+        props11['image'] = component.image
+        props11['x'] = 36
+        props11['h'] = 20
+        props11['w'] = 20
+        props11['map'] = component.sprite
+        props11['frame'] = component.fps[2]
+
+        if (!elms[11]) {
+          elms[11] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props11 }, elms[10], component)
+          if (elms[11][Symbol.for('slots')][0]) {
+            parent = elms[11][Symbol.for('slots')][0]
+            component = elms[11]
+          } else {
+            parent = elms[11][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[1]
+
+        if (!elms[12]) {
+          elms[12] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig12 = {}
+
+        elementConfig12['x'] = 150
+
+        if (!elms[12].nodeId) {
+          elms[12].populate(elementConfig12)
+        }
+
+        const cmp13 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[12]
+
+        if (!elms[13]) {
+          elms[13] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig13 = {}
+
+        elementConfig13['image'] = component.image
+        elementConfig13['y'] = 2
+        elementConfig13['w'] = 48
+        elementConfig13['h'] = 25
+        elementConfig13['map'] = component.sprite
+        elementConfig13['frame'] = 'avg'
+
+        if (typeof cmp13 !== 'undefined') {
+          for (let key in cmp13.config.props) {
+            delete elementConfig13[cmp13.config.props[key]]
+          }
+        }
+
+        if (!elms[13].nodeId) {
+          elms[13].populate(elementConfig13)
+        }
+
+        parent = elms[13]
+        const props14 = {}
+        props14['image'] = component.image
+        props14['y'] = 2
+        props14['w'] = 48
+        props14['h'] = 25
+        props14['map'] = component.sprite
+        props14['frame'] = 'avg'
+
+        if (!elms[14]) {
+          elms[14] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props14 }, elms[13], component)
+          if (elms[14][Symbol.for('slots')][0]) {
+            parent = elms[14][Symbol.for('slots')][0]
+            component = elms[14]
+          } else {
+            parent = elms[14][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[12]
+
+        if (!elms[15]) {
+          elms[15] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig15 = {}
+
+        elementConfig15['x'] = 63
+        elementConfig15['y'] = 2
+
+        if (!elms[15].nodeId) {
+          elms[15].populate(elementConfig15)
+        }
+
+        const cmp16 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[15]
+
+        if (!elms[16]) {
+          elms[16] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig16 = {}
+
+        elementConfig16['image'] = component.image
+        elementConfig16['x'] = 0
+        elementConfig16['h'] = 20
+        elementConfig16['w'] = 20
+        elementConfig16['map'] = component.sprite
+
+        if (typeof cmp16 !== 'undefined') {
+          for (let key in cmp16.config.props) {
+            delete elementConfig16[cmp16.config.props[key]]
+          }
+        }
+
+        if (!elms[16].nodeId) {
+          elms[16].populate(elementConfig16)
+        }
+
+        parent = elms[16]
+        const props17 = {}
+        props17['image'] = component.image
+        props17['x'] = 0
+        props17['h'] = 20
+        props17['w'] = 20
+        props17['map'] = component.sprite
+        props17['frame'] = component.avgFps[0]
+
+        if (!elms[17]) {
+          elms[17] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props17 }, elms[16], component)
+          if (elms[17][Symbol.for('slots')][0]) {
+            parent = elms[17][Symbol.for('slots')][0]
+            component = elms[17]
+          } else {
+            parent = elms[17][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp18 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[15]
+
+        if (!elms[18]) {
+          elms[18] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig18 = {}
+
+        elementConfig18['image'] = component.image
+        elementConfig18['x'] = 18
+        elementConfig18['h'] = 20
+        elementConfig18['w'] = 20
+        elementConfig18['map'] = component.sprite
+
+        if (typeof cmp18 !== 'undefined') {
+          for (let key in cmp18.config.props) {
+            delete elementConfig18[cmp18.config.props[key]]
+          }
+        }
+
+        if (!elms[18].nodeId) {
+          elms[18].populate(elementConfig18)
+        }
+
+        parent = elms[18]
+        const props19 = {}
+        props19['image'] = component.image
+        props19['x'] = 18
+        props19['h'] = 20
+        props19['w'] = 20
+        props19['map'] = component.sprite
+        props19['frame'] = component.avgFps[1]
+
+        if (!elms[19]) {
+          elms[19] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props19 }, elms[18], component)
+          if (elms[19][Symbol.for('slots')][0]) {
+            parent = elms[19][Symbol.for('slots')][0]
+            component = elms[19]
+          } else {
+            parent = elms[19][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp20 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[15]
+
+        if (!elms[20]) {
+          elms[20] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig20 = {}
+
+        elementConfig20['image'] = component.image
+        elementConfig20['x'] = 36
+        elementConfig20['h'] = 20
+        elementConfig20['w'] = 20
+        elementConfig20['map'] = component.sprite
+
+        if (typeof cmp20 !== 'undefined') {
+          for (let key in cmp20.config.props) {
+            delete elementConfig20[cmp20.config.props[key]]
+          }
+        }
+
+        if (!elms[20].nodeId) {
+          elms[20].populate(elementConfig20)
+        }
+
+        parent = elms[20]
+        const props21 = {}
+        props21['image'] = component.image
+        props21['x'] = 36
+        props21['h'] = 20
+        props21['w'] = 20
+        props21['map'] = component.sprite
+        props21['frame'] = component.avgFps[2]
+
+        if (!elms[21]) {
+          elms[21] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props21 }, elms[20], component)
+          if (elms[21][Symbol.for('slots')][0]) {
+            parent = elms[21][Symbol.for('slots')][0]
+            component = elms[21]
+          } else {
+            parent = elms[21][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[1]
+
+        if (!elms[22]) {
+          elms[22] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig22 = {}
+
+        elementConfig22['x'] = 0
+        elementConfig22['y'] = 40
+
+        if (!elms[22].nodeId) {
+          elms[22].populate(elementConfig22)
+        }
+
+        const cmp23 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[22]
+
+        if (!elms[23]) {
+          elms[23] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig23 = {}
+
+        elementConfig23['image'] = component.image
+        elementConfig23['x'] = -2
+        elementConfig23['w'] = 47
+        elementConfig23['h'] = 25
+        elementConfig23['map'] = component.sprite
+        elementConfig23['frame'] = 'min'
+
+        if (typeof cmp23 !== 'undefined') {
+          for (let key in cmp23.config.props) {
+            delete elementConfig23[cmp23.config.props[key]]
+          }
+        }
+
+        if (!elms[23].nodeId) {
+          elms[23].populate(elementConfig23)
+        }
+
+        parent = elms[23]
+        const props24 = {}
+        props24['image'] = component.image
+        props24['x'] = -2
+        props24['w'] = 47
+        props24['h'] = 25
+        props24['map'] = component.sprite
+        props24['frame'] = 'min'
+
+        if (!elms[24]) {
+          elms[24] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props24 }, elms[23], component)
+          if (elms[24][Symbol.for('slots')][0]) {
+            parent = elms[24][Symbol.for('slots')][0]
+            component = elms[24]
+          } else {
+            parent = elms[24][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[22]
+
+        if (!elms[25]) {
+          elms[25] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig25 = {}
+
+        elementConfig25['x'] = 58
+        elementConfig25['y'] = 2
+
+        if (!elms[25].nodeId) {
+          elms[25].populate(elementConfig25)
+        }
+
+        const cmp26 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[25]
+
+        if (!elms[26]) {
+          elms[26] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig26 = {}
+
+        elementConfig26['image'] = component.image
+        elementConfig26['x'] = 0
+        elementConfig26['h'] = 20
+        elementConfig26['w'] = 20
+        elementConfig26['map'] = component.sprite
+
+        if (typeof cmp26 !== 'undefined') {
+          for (let key in cmp26.config.props) {
+            delete elementConfig26[cmp26.config.props[key]]
+          }
+        }
+
+        if (!elms[26].nodeId) {
+          elms[26].populate(elementConfig26)
+        }
+
+        parent = elms[26]
+        const props27 = {}
+        props27['image'] = component.image
+        props27['x'] = 0
+        props27['h'] = 20
+        props27['w'] = 20
+        props27['map'] = component.sprite
+        props27['frame'] = component.minFps[0]
+
+        if (!elms[27]) {
+          elms[27] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props27 }, elms[26], component)
+          if (elms[27][Symbol.for('slots')][0]) {
+            parent = elms[27][Symbol.for('slots')][0]
+            component = elms[27]
+          } else {
+            parent = elms[27][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp28 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[25]
+
+        if (!elms[28]) {
+          elms[28] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig28 = {}
+
+        elementConfig28['image'] = component.image
+        elementConfig28['x'] = 18
+        elementConfig28['h'] = 20
+        elementConfig28['w'] = 20
+        elementConfig28['map'] = component.sprite
+
+        if (typeof cmp28 !== 'undefined') {
+          for (let key in cmp28.config.props) {
+            delete elementConfig28[cmp28.config.props[key]]
+          }
+        }
+
+        if (!elms[28].nodeId) {
+          elms[28].populate(elementConfig28)
+        }
+
+        parent = elms[28]
+        const props29 = {}
+        props29['image'] = component.image
+        props29['x'] = 18
+        props29['h'] = 20
+        props29['w'] = 20
+        props29['map'] = component.sprite
+        props29['frame'] = component.minFps[1]
+
+        if (!elms[29]) {
+          elms[29] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props29 }, elms[28], component)
+          if (elms[29][Symbol.for('slots')][0]) {
+            parent = elms[29][Symbol.for('slots')][0]
+            component = elms[29]
+          } else {
+            parent = elms[29][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp30 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[25]
+
+        if (!elms[30]) {
+          elms[30] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig30 = {}
+
+        elementConfig30['image'] = component.image
+        elementConfig30['x'] = 36
+        elementConfig30['h'] = 20
+        elementConfig30['w'] = 20
+        elementConfig30['map'] = component.sprite
+
+        if (typeof cmp30 !== 'undefined') {
+          for (let key in cmp30.config.props) {
+            delete elementConfig30[cmp30.config.props[key]]
+          }
+        }
+
+        if (!elms[30].nodeId) {
+          elms[30].populate(elementConfig30)
+        }
+
+        parent = elms[30]
+        const props31 = {}
+        props31['image'] = component.image
+        props31['x'] = 36
+        props31['h'] = 20
+        props31['w'] = 20
+        props31['map'] = component.sprite
+        props31['frame'] = component.minFps[2]
+
+        if (!elms[31]) {
+          elms[31] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props31 }, elms[30], component)
+          if (elms[31][Symbol.for('slots')][0]) {
+            parent = elms[31][Symbol.for('slots')][0]
+            component = elms[31]
+          } else {
+            parent = elms[31][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[1]
+
+        if (!elms[32]) {
+          elms[32] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig32 = {}
+
+        elementConfig32['x'] = 150
+        elementConfig32['y'] = 40
+
+        if (!elms[32].nodeId) {
+          elms[32].populate(elementConfig32)
+        }
+
+        const cmp33 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[32]
+
+        if (!elms[33]) {
+          elms[33] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig33 = {}
+
+        elementConfig33['image'] = component.image
+        elementConfig33['w'] = 53
+        elementConfig33['h'] = 25
+        elementConfig33['map'] = component.sprite
+        elementConfig33['frame'] = 'max'
+
+        if (typeof cmp33 !== 'undefined') {
+          for (let key in cmp33.config.props) {
+            delete elementConfig33[cmp33.config.props[key]]
+          }
+        }
+
+        if (!elms[33].nodeId) {
+          elms[33].populate(elementConfig33)
+        }
+
+        parent = elms[33]
+        const props34 = {}
+        props34['image'] = component.image
+        props34['w'] = 53
+        props34['h'] = 25
+        props34['map'] = component.sprite
+        props34['frame'] = 'max'
+
+        if (!elms[34]) {
+          elms[34] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props34 }, elms[33], component)
+          if (elms[34][Symbol.for('slots')][0]) {
+            parent = elms[34][Symbol.for('slots')][0]
+            component = elms[34]
+          } else {
+            parent = elms[34][Symbol.for('children')][0]
+          }
+        }
+
+        parent = elms[32]
+
+        if (!elms[35]) {
+          elms[35] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig35 = {}
+
+        elementConfig35['x'] = 63
+        elementConfig35['y'] = 2
+
+        if (!elms[35].nodeId) {
+          elms[35].populate(elementConfig35)
+        }
+
+        const cmp36 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[35]
+
+        if (!elms[36]) {
+          elms[36] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig36 = {}
+
+        elementConfig36['image'] = component.image
+        elementConfig36['x'] = 0
+        elementConfig36['h'] = 20
+        elementConfig36['w'] = 20
+        elementConfig36['map'] = component.sprite
+
+        if (typeof cmp36 !== 'undefined') {
+          for (let key in cmp36.config.props) {
+            delete elementConfig36[cmp36.config.props[key]]
+          }
+        }
+
+        if (!elms[36].nodeId) {
+          elms[36].populate(elementConfig36)
+        }
+
+        parent = elms[36]
+        const props37 = {}
+        props37['image'] = component.image
+        props37['x'] = 0
+        props37['h'] = 20
+        props37['w'] = 20
+        props37['map'] = component.sprite
+        props37['frame'] = component.maxFps[0]
+
+        if (!elms[37]) {
+          elms[37] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props37 }, elms[36], component)
+          if (elms[37][Symbol.for('slots')][0]) {
+            parent = elms[37][Symbol.for('slots')][0]
+            component = elms[37]
+          } else {
+            parent = elms[37][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp38 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[35]
+
+        if (!elms[38]) {
+          elms[38] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig38 = {}
+
+        elementConfig38['image'] = component.image
+        elementConfig38['x'] = 18
+        elementConfig38['h'] = 20
+        elementConfig38['w'] = 20
+        elementConfig38['map'] = component.sprite
+
+        if (typeof cmp38 !== 'undefined') {
+          for (let key in cmp38.config.props) {
+            delete elementConfig38[cmp38.config.props[key]]
+          }
+        }
+
+        if (!elms[38].nodeId) {
+          elms[38].populate(elementConfig38)
+        }
+
+        parent = elms[38]
+        const props39 = {}
+        props39['image'] = component.image
+        props39['x'] = 18
+        props39['h'] = 20
+        props39['w'] = 20
+        props39['map'] = component.sprite
+        props39['frame'] = component.maxFps[1]
+
+        if (!elms[39]) {
+          elms[39] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props39 }, elms[38], component)
+          if (elms[39][Symbol.for('slots')][0]) {
+            parent = elms[39][Symbol.for('slots')][0]
+            component = elms[39]
+          } else {
+            parent = elms[39][Symbol.for('children')][0]
+          }
+        }
+
+        const cmp40 =
+          (context.components && context.components['Sprite']) ||
+          component[Symbol.for('components')]['Sprite']
+
+        parent = elms[35]
+
+        if (!elms[40]) {
+          elms[40] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig40 = {}
+
+        elementConfig40['image'] = component.image
+        elementConfig40['x'] = 36
+        elementConfig40['h'] = 20
+        elementConfig40['w'] = 20
+        elementConfig40['map'] = component.sprite
+
+        if (typeof cmp40 !== 'undefined') {
+          for (let key in cmp40.config.props) {
+            delete elementConfig40[cmp40.config.props[key]]
+          }
+        }
+
+        if (!elms[40].nodeId) {
+          elms[40].populate(elementConfig40)
+        }
+
+        parent = elms[40]
+        const props41 = {}
+        props41['image'] = component.image
+        props41['x'] = 36
+        props41['h'] = 20
+        props41['w'] = 20
+        props41['map'] = component.sprite
+        props41['frame'] = component.maxFps[2]
+
+        if (!elms[41]) {
+          elms[41] = (
+            (context.components && context.components['Sprite']) ||
+            component[Symbol.for('components')]['Sprite'] ||
+            (() => {
+              console.error('component Sprite not found')
+            })
+          ).call(null, { props: props41 }, elms[40], component)
+          if (elms[41][Symbol.for('slots')][0]) {
+            parent = elms[41][Symbol.for('slots')][0]
+            component = elms[41]
+          } else {
+            parent = elms[41][Symbol.for('children')][0]
+          }
+        }
+
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[6].set('frame', component.fps[0])
+        },
+        function anonymous(component, elms, context) {
+          elms[7][Symbol.for('props')]['frame'] = component.fps[0]
+        },
+        function anonymous(component, elms, context) {
+          elms[8].set('frame', component.fps[1])
+        },
+        function anonymous(component, elms, context) {
+          elms[9][Symbol.for('props')]['frame'] = component.fps[1]
+        },
+        function anonymous(component, elms, context) {
+          elms[10].set('frame', component.fps[2])
+        },
+        function anonymous(component, elms, context) {
+          elms[11][Symbol.for('props')]['frame'] = component.fps[2]
+        },
+        function anonymous(component, elms, context) {
+          elms[16].set('frame', component.avgFps[0])
+        },
+        function anonymous(component, elms, context) {
+          elms[17][Symbol.for('props')]['frame'] = component.avgFps[0]
+        },
+        function anonymous(component, elms, context) {
+          elms[18].set('frame', component.avgFps[1])
+        },
+        function anonymous(component, elms, context) {
+          elms[19][Symbol.for('props')]['frame'] = component.avgFps[1]
+        },
+        function anonymous(component, elms, context) {
+          elms[20].set('frame', component.avgFps[2])
+        },
+        function anonymous(component, elms, context) {
+          elms[21][Symbol.for('props')]['frame'] = component.avgFps[2]
+        },
+        function anonymous(component, elms, context) {
+          elms[26].set('frame', component.minFps[0])
+        },
+        function anonymous(component, elms, context) {
+          elms[27][Symbol.for('props')]['frame'] = component.minFps[0]
+        },
+        function anonymous(component, elms, context) {
+          elms[28].set('frame', component.minFps[1])
+        },
+        function anonymous(component, elms, context) {
+          elms[29][Symbol.for('props')]['frame'] = component.minFps[1]
+        },
+        function anonymous(component, elms, context) {
+          elms[30].set('frame', component.minFps[2])
+        },
+        function anonymous(component, elms, context) {
+          elms[31][Symbol.for('props')]['frame'] = component.minFps[2]
+        },
+        function anonymous(component, elms, context) {
+          elms[36].set('frame', component.maxFps[0])
+        },
+        function anonymous(component, elms, context) {
+          elms[37][Symbol.for('props')]['frame'] = component.maxFps[0]
+        },
+        function anonymous(component, elms, context) {
+          elms[38].set('frame', component.maxFps[1])
+        },
+        function anonymous(component, elms, context) {
+          elms[39][Symbol.for('props')]['frame'] = component.maxFps[1]
+        },
+        function anonymous(component, elms, context) {
+          elms[40].set('frame', component.maxFps[2])
+        },
+        function anonymous(component, elms, context) {
+          elms[41][Symbol.for('props')]['frame'] = component.maxFps[2]
+        },
+      ],
+      context: {},
+    },
+    state() {
+      return {
+        image: fps_sprite,
+        sprite: {
+          defaults: {
+            y: 1,
+            w: 20,
+            h: 20,
+          },
+          frames: {
+            '-': { x: -1000 },
+            0: { x: 1 },
+            1: { x: 23 },
+            2: { x: 45 },
+            3: { x: 67 },
+            4: { x: 89 },
+            5: { x: 111 },
+            6: { x: 133 },
+            7: { x: 155 },
+            8: { x: 177 },
+            9: { x: 199 },
+            avg: { x: 221, w: 48, h: 25 },
+            fps: { x: 271, w: 43, h: 25 },
+            max: { x: 316, w: 53, h: 25 },
+            min: { x: 371, w: 47, h: 25 },
+          },
+        },
+        fps: '---',
+        avgFps: '---',
+        minFps: '---',
+        maxFps: '---',
+      }
+    },
+    hooks: {
+      ready() {
+        let minFps = 10000
+        let maxFps = 0
+        let avgFps = 0
+        let totalFps = 0
+        let fpsUpdateCounter = 0
+
+        renderer.on('fpsUpdate', (rM, { fps }) => {
+          minFps = Math.min(fps, minFps)
+          maxFps = Math.max(fps, maxFps)
+          totalFps += fps
+          fpsUpdateCounter++
+          avgFps = Math.round(totalFps / fpsUpdateCounter)
+
+          this.fps = fps.toString().padStart(3, '0')
+          this.avgFps = avgFps.toString().padStart(3, '0')
+          this.minFps = minFps.toString().padStart(3, '0')
+          this.maxFps = maxFps.toString().padStart(3, '0')
+        })
+      },
+    },
+  })