63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<n-grid x-gap="0" :cols="COLS">
|
||
|
|
<n-gi v-for="n in COLS * ROWS" :key="n">
|
||
|
|
<LED ref="ledRefs" />
|
||
|
|
</n-gi>
|
||
|
|
</n-grid>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { NGrid, NGi } from 'naive-ui'
|
||
|
|
import LED from './components/LED.vue'
|
||
|
|
import { ROWS, COLS } from './data'
|
||
|
|
|
||
|
|
const ledRefs = ref()
|
||
|
|
|
||
|
|
const showChar = (index, data, color) => {
|
||
|
|
if (!data) return
|
||
|
|
|
||
|
|
clearArea(index)
|
||
|
|
|
||
|
|
if (data.length === 15) {
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
if (data[i]) {
|
||
|
|
const x = Math.floor(i / 3)
|
||
|
|
const y = i % 3 + index * 4
|
||
|
|
|
||
|
|
ledRefs.value[x * COLS + y].$el.children[0].style.backgroundColor = color
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (data.length === 28) {
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
if (data[i]) {
|
||
|
|
const x = Math.floor(i / 4)
|
||
|
|
const y = i % 4 + index * 4
|
||
|
|
|
||
|
|
ledRefs.value[x * COLS + y].$el.children[0].style.backgroundColor = color
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearArea = (areaIndex) => {
|
||
|
|
for (let i = 0; i < 7; i++) {
|
||
|
|
for (let j = 0; j < 4; j++) {
|
||
|
|
const ledIndex = i * COLS + areaIndex * 4 + j
|
||
|
|
ledRefs.value[ledIndex].$el.children[0].style.backgroundColor = 'black'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearAll = () => {
|
||
|
|
ledRefs.value.forEach(ledRef => {
|
||
|
|
ledRef.$el.children[0].style.backgroundColor = 'black'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose( { showChar, clearArea, clearAll })
|
||
|
|
</script>
|