bfg-common 1.0.0

package/components/common/spiceConsole/keyboard/Keyboard.vue

@@ -0,0 +1,402 @@
+<template>
+  <div id="keyboard-draggable" ref="draggable" class="draggable" :style="style">
+    <div id="keyboard" class="keyboard">
+      <div
+        v-for="(row, rowIndex) in keyboardRowsUI"
+        :key="rowIndex"
+        class="row"
+      >
+        <div
+          v-for="(keyItem, keyIndex) in row"
+          :key="keyIndex"
+          :class="[
+            'key',
+            {
+              active: keyItem.active,
+            },
+          ]"
+          :style="{ width: keyItem.width }"
+          @click="onKeyPress(keyItem)"
+        >
+          <span>
+            {{ keyItem.keyUI }}
+          </span>
+          <span class="rus-key">
+            {{ keyItem.rusKeyUI }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDraggable } from '@vueuse/core'
+import keyboardRows from '~/components/common/spiceConsole/keyboard/config/keyboardRows'
+import { I_KeyboardRowItem } from '~/components/common/spiceConsole/keyboard/models/interfaces'
+
+const draggable = ref<HTMLElement | null>(null)
+
+const { style } = useDraggable(draggable, {
+  initialValue: { x: 300, y: 370 },
+})
+
+// const emits = defineEmits<{
+//   (event: 'pressed-key', value: string): void
+// }>()
+//
+// const onValueEmit = (value: string): void => {
+//   emits('pressed-key', value)
+// }
+
+const isCapsLockOn = ref<boolean>(false)
+const isShiftPressed = ref<boolean>(false)
+const isCtrlPressed = ref<boolean>(false)
+const isWinPressed = ref<boolean>(false)
+const isAltPressed = ref<boolean>(false)
+
+const isCapsLockOnWithShift = computed<boolean>(
+  () => isCapsLockOn.value && isShiftPressed.value
+)
+
+const isCapsLockOnWithoutShift = computed<boolean>(
+  () => isCapsLockOn.value && !isShiftPressed.value
+)
+
+const isShiftPressedWithoutCapsLock = computed<boolean>(
+  () => !isCapsLockOn.value && isShiftPressed.value
+)
+
+const keyboardRowsUI = computed<I_KeyboardRowItem[][]>(() =>
+  keyboardRows.map((row: I_KeyboardRowItem[]) =>
+    row.map((keyItem: I_KeyboardRowItem) => {
+      let rusKeyUI = ''
+      let keyUI = ''
+
+      if (isCapsLockOnWithShift.value) {
+        rusKeyUI = keyItem.rusSecondaryValue || ''
+        keyUI = keyItem.secondaryValue
+      } else if (isCapsLockOnWithoutShift.value) {
+        rusKeyUI = keyItem.rusCapsLockValue || ''
+        keyUI = keyItem.capsLockValue
+      } else if (isShiftPressedWithoutCapsLock.value) {
+        rusKeyUI = keyItem.rusShiftValue || ''
+        keyUI = keyItem.shiftValue
+      } else {
+        rusKeyUI = keyItem.rusValue || ''
+        keyUI = keyItem.value
+      }
+
+      const active =
+        (isCapsLockOn.value && keyItem.key === 20) ||
+        (isShiftPressed.value && keyItem.key === 16) ||
+        (isCtrlPressed.value && keyItem.key === 17) ||
+        (isAltPressed.value && keyItem.key === 18) ||
+        (isWinPressed.value && keyItem.key === 92)
+
+      return {
+        ...keyItem,
+        keyUI,
+        rusKeyUI,
+        active,
+      }
+    })
+  )
+)
+
+const generateModifierEvent = (event: string, keyCode: number): void => {
+  window.app.clientGui.generateEvent(event, [{ type: event, keyCode }])
+}
+
+// Shift
+const takeOffShift = (): void => {
+  isShiftPressed.value = false
+  generateModifierEvent('keyup', 16)
+}
+
+const sendShiftPressed = (): void => {
+  generateModifierEvent('keydown', 16)
+}
+
+const takeOnShift = (): void => {
+  isShiftPressed.value = true
+}
+// Shift ----
+
+// Ctrl
+const takeOffCtrl = (): void => {
+  isCtrlPressed.value = false
+  window.app.clientGui.generateEvent('keyup', [
+    { type: 'keyup', keyCode: 17, generated: isCtrlPressed.value },
+  ])
+  wdi.Keymap.ctrlPressed = false
+}
+
+const sendCtrlPressed = (): void => {
+  window.app.clientGui.generateEvent('keydown', [
+    { type: 'keydown', keyCode: 17, generated: isCtrlPressed.value },
+  ])
+}
+
+const takeOnCtrl = (): void => {
+  wdi.Keymap.ctrlPressed = true
+  isCtrlPressed.value = true
+}
+// Ctrl ----
+
+// Win
+const takeOffWin = (): void => {
+  isWinPressed.value = false
+  generateModifierEvent('keyup', 92)
+}
+
+const sendWinPressed = (): void => {
+  generateModifierEvent('keydown', 92)
+}
+
+const takeOnWin = (): void => {
+  isWinPressed.value = true
+}
+// Win ----
+
+// Alt
+const takeOffAlt = (): void => {
+  isAltPressed.value = false
+  generateModifierEvent('keyup', 18)
+}
+
+const sendAltPressed = (): void => {
+  generateModifierEvent('keydown', 18)
+}
+
+const takeOnAlt = (): void => {
+  isAltPressed.value = true
+}
+// Alt ----
+
+const generateEvent = (
+  event: string,
+  key: I_KeyboardRowItem,
+  withOriginal: boolean,
+  type?: string
+): void => {
+  withOriginal
+    ? window.app.clientGui.generateEvent(event, [
+        {
+          type: type ? type : event,
+          keyCode: key.keyCode || -1,
+          generated: isCtrlPressed.value,
+          ctrlKey: isCtrlPressed.value,
+          originalEvent: { code: key.key },
+        },
+      ])
+    : window.app.clientGui.generateEvent(event, [
+        {
+          type: event,
+          keyCode: key.key,
+          generated: isCtrlPressed.value,
+          ctrlKey: isCtrlPressed.value,
+        },
+      ])
+}
+
+const keyEvent = (
+  event: string,
+  isCodeEvent: boolean,
+  key: I_KeyboardRowItem
+): void => {
+  if (isCodeEvent) {
+    if (event !== 'keyup') {
+      generateEvent(event, key, true)
+    } else if (event === 'keyup' && isCtrlPressed.value) {
+      generateEvent(event, key, true)
+      return
+    } else {
+      generateEvent(event, key, true, 'inputmanager')
+    }
+  } else {
+    generateEvent(event, key, false)
+  }
+}
+
+const checkAndSendModifiers = (): void => {
+  if (isShiftPressed.value) {
+    sendShiftPressed()
+  }
+  if (isAltPressed.value) {
+    sendAltPressed()
+  }
+  if (isCtrlPressed.value) {
+    sendCtrlPressed()
+  }
+  if (isWinPressed.value) {
+    sendWinPressed()
+  }
+}
+
+const checkAndOffModifiers = (): void => {
+  if (isWinPressed.value) {
+    takeOffWin()
+  }
+  if (isCtrlPressed.value) {
+    takeOffCtrl()
+  }
+  if (isAltPressed.value) {
+    takeOffAlt()
+  }
+  if (isShiftPressed.value) {
+    takeOffShift()
+  }
+}
+
+const onKeyPress = (key: I_KeyboardRowItem): void => {
+  window.app.inputProcess.clientGui.inputManager.input.val('')
+
+  document.getElementById('inputmanager')?.focus()
+
+  const isCodeEvent = typeof key.key === 'string'
+  if (isCodeEvent) {
+    checkAndSendModifiers()
+    keyEvent('keydown', isCodeEvent, key)
+    keyEvent('keypress', isCodeEvent, key)
+    keyEvent('keyup', isCodeEvent, key)
+
+    checkAndOffModifiers()
+    window.app.inputProcess.clientGui.inputManager.input.val('_')
+  } else {
+    if (key.key === 20) {
+      isCapsLockOn.value = !isCapsLockOn.value
+    }
+
+    if (key.key === 16 && isShiftPressed.value) {
+      takeOffShift()
+      return
+    } else if (key.key === 16 && !isShiftPressed.value) {
+      takeOnShift()
+    }
+
+    if (key.key === 18 && isAltPressed.value) {
+      takeOffAlt()
+      return
+    } else if (key.key === 18 && !isAltPressed.value) {
+      takeOnAlt()
+    }
+
+    if (key.key === 17 && isCtrlPressed.value) {
+      takeOffCtrl()
+      return
+    } else if (key.key === 17 && !isCtrlPressed.value) {
+      takeOnCtrl()
+    }
+
+    if (key.key === 92 && isWinPressed.value) {
+      takeOffWin()
+      return
+    } else if (key.key === 92 && !isWinPressed.value) {
+      takeOnWin()
+    }
+
+    keyEvent('keydown', isCodeEvent, key)
+
+    if (key.key !== 16 && key.key !== 17 && key.key !== 92 && key.key !== 18) {
+      keyEvent('keyup', isCodeEvent, key)
+
+      if (key.key !== 20) {
+        checkAndOffModifiers()
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.wdi.Keymap.isVirtualKeyboard = true
+
+  if (window?.wdi?.Keymap?.isVirtualKeyboard) {
+    window.wdi.Keymap.isVirtualCapsLockOn = isCapsLockOn.value
+  }
+})
+
+watch(isCapsLockOn, (newValue) => {
+  window.wdi.Keymap.isVirtualCapsLockOn = newValue
+})
+
+onUnmounted(() => {
+  window.wdi.Keymap.isVirtualKeyboard = true
+})
+</script>
+
+<style lang="scss" scoped>
+#keyboard-draggable {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.draggable {
+  position: fixed;
+
+  .keyboard {
+    flex-wrap: nowrap;
+    width: 900px;
+    background: #314351;
+    display: flex;
+    flex-direction: column;
+    margin: 20px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+
+    .row {
+      padding: 0 10px 3px 10px;
+      min-width: 800px;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+
+      .key {
+        position: relative;
+        color: white;
+        background: #314351;
+        min-width: 50px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid #ffffff;
+        border-radius: 10px;
+        margin: 3px;
+        cursor: pointer;
+        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+        transition: background-color 0.3s ease, transform 0.1s ease;
+
+        span:not(.rus-key) {
+          font-weight: bold !important;
+        }
+
+        .rus-key {
+          position: absolute;
+          bottom: 0;
+          opacity: 0.4;
+          left: calc(50% + 9px);
+          font-weight: normal;
+        }
+
+        &:active {
+          transform: translateY(2px);
+        }
+        &:hover {
+          background-color: #ffffff;
+          color: #314351;
+        }
+      }
+
+      .active {
+        background-color: #ffffff;
+        color: #314351;
+      }
+    }
+  }
+}
+</style>