blits-components/src/components/Keyboard.js at main · lightning-js/blits-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import Blits from '@lightningjs/blits'

const Key = Blits.Component('Key', {
  template: `
    <Element w="50" h="50">
      <Text :content="$inputValue" size="32" align="center" w="50" />
    </Element>
  `,
  props: ['value', 'layout'],
  computed: {
    inputValue() {
      return this.layout === 'upper' ? this.value.toUpperCase() : this.value
    },
  },
})

export default Blits.Component('Keyboard', {
  components: {
    Key,
  },
  template: `
    <Element>
      <Element w="60" h="60" mount="{x:0.5, y:0.5}" :x.transition="$focusX" :y.transition="$focusY" color="0xffffff33" />
      <Key :for="(item, index) in $keys" :x="$keyX" ref="key" key="$item" value="$item" :y="$keyY" :layout="$layout" />
    </Element>
  `,
  props: ['margin', 'perRow'],
  computed: {
    focusX() {
      return (this.focusIndex % this.perRow) * this.margin + 8
    },
    focusY() {
      return ~~(this.focusIndex / this.perRow) * this.margin + 70
    },
    keyX() {
      return (this.index % this.perRow) * this.margin
    },
    keyY() {
      return Math.floor(this.index / this.perRow) * this.margin + 50
    },
  },
  state() {
    return {
      focusIndex: 0,
      layout: 'lower',
      keys: [
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z',
        '-',
        '_',
      ],
    }
  },
  input: {
    left() {
      if (this.focusIndex % this.perRow === 0) {
        this.focusIndex = Math.min(this.focusIndex + this.perRow - 1, this.keys.length - 1)
      } else {
        this.focusIndex = Math.max(this.focusIndex - 1, 0)
      }
    },
    right() {
      if (this.focusIndex % this.perRow === this.perRow - 1) {
        this.focusIndex -= this.perRow - 1
      } else {
        this.focusIndex = Math.min(this.focusIndex + 1, this.keys.length - 1)
      }
    },
    up() {
      this.focusIndex = Math.max(this.focusIndex - this.perRow, 0)
    },
    down() {
      this.focusIndex = Math.min(this.focusIndex + this.perRow, this.keys.length - 1)
    },
    enter(e) {
      const key = this.keys[this.focusIndex]
      this.$emit('onKeyboardInput', {
        key: this.layout === 'upper' ? key.toUpperCase() : key,
      })
    },
    any(e) {
      if (e.key === 'Shift') {
        this.layout = this.layout === 'lower' ? 'upper' : 'lower'
      }
    },
    back(e) {
      this.parent.$focus(e)
    },
  },
})