Bring keyboard support to ASA CX-3 Simulator
itsze.ro
1const keyMap = {
2 '0': 'btn-0',
3 '1': 'btn-1',
4 '2': 'btn-2',
5 '3': 'btn-3',
6 '4': 'btn-4',
7 '5': 'btn-5',
8 '6': 'btn-6',
9 '7': 'btn-7',
10 '8': 'btn-8',
11 '9': 'btn-9',
12 '+': 'btn-plus',
13 '-': 'btn-minus',
14 '*': 'btn-x',
15 '/': 'btn-divide',
16 '.': 'btn-decimal',
17 ',': 'btn-plusminus',
18 'Enter': 'btn-square',
19 'Escape': 'btn-back',
20 'Backspace': 'btn-bksp',
21 'ArrowUp': 'btn-up',
22 'ArrowDown': 'btn-down'
23}
24
25const MODES = ['flt', 'plan', 'timer', 'calc', 'star', 'wb', 'set', 'm']
26let currentMode = MODES[0]
27
28MODES.forEach(mode => {
29 const button = document.getElementById(`btn-${mode}`)
30 if (button) {
31 button.addEventListener('click', () => {
32 currentMode = mode
33 })
34 }
35})
36
37document.addEventListener('keydown', (e) => {
38 if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
39 e.preventDefault()
40
41 const currentIndex = MODES.indexOf(currentMode)
42 let newIndex
43
44 if (e.key === 'ArrowLeft') {
45 newIndex = (currentIndex - 1 + MODES.length) % MODES.length
46 } else {
47 newIndex = (currentIndex + 1) % MODES.length
48 }
49
50 const newMode = MODES[newIndex]
51 const button = document.getElementById(`btn-${newMode}`)
52
53 if (button) {
54 button.click()
55 currentMode = newMode
56 }
57
58 return
59 }
60
61 const buttonId = keyMap[e.key]
62
63 if (buttonId) {
64 e.preventDefault()
65 const button = document.getElementById(buttonId)
66
67 if (button) {
68 button.click()
69 }
70 }
71})
72
73document.getElementById('status-bar-battery').innerText = 'BATT / KB'
74document.body.style.backgroundColor = '#000';
75
76async function wrapAndClipBackground() {
77 const res = await fetch("https://online.prepware.com/cx3e/img/calculator-background.png")
78 const blob = await res.blob()
79 const reader = new FileReader()
80 reader.onloadend = () => {
81 const svgSrc = `
82<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 700" width="350" height="700">
83 <defs>
84 <clipPath id="roundClip" clipPathUnits="userSpaceOnUse">
85 <rect x="10" y="10" width="330" height="680" rx="40" ry="40"/>
86 </clipPath>
87 </defs>
88
89 <image href="${reader.result}" x="0" y="0" width="350" height="700" clip-path="url(#roundClip)"/>
90</svg>
91 `
92 const dataUrl = `data:image/svg+xml;base64,${window.btoa(svgSrc)}`
93 document.getElementById('content').style.backgroundImage = `url('${dataUrl}')`
94 }
95 reader.onerror = (e) => console.log(e)
96 reader.readAsDataURL(blob)
97}
98wrapAndClipBackground()