43 lines
965 B
Vue
43 lines
965 B
Vue
<script setup lang="ts">
|
|
import { useTemplateRef, ref, onMounted, onUnmounted } from 'vue';
|
|
|
|
const display = useTemplateRef('display')
|
|
const displayText = ref("");
|
|
|
|
const charHeight: number = 14;
|
|
const charWidth: number = charHeight * 0.6;
|
|
let n: number;
|
|
let m: number;
|
|
|
|
function setup() {
|
|
display.value.style.fontSize = `${charHeight}px`;
|
|
display.value.style.lineHeight = `${charHeight}px`;
|
|
fillDisplay()
|
|
}
|
|
|
|
function fillDisplay() {
|
|
// M rows N columns
|
|
m = Math.floor(display.value.offsetHeight / charHeight);
|
|
n = Math.floor(display.value.offsetWidth / charWidth);
|
|
const row = ' '.repeat(n);
|
|
displayText.value = (row + '\n').repeat(m - 1) + row
|
|
}
|
|
|
|
function close() {
|
|
displayText.value = ""
|
|
}
|
|
|
|
onMounted(() => {
|
|
setup()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
close()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<pre class="overflow-scroll w-full h-full bg-black text-white m-0 p-0" id="container" ref="display">{{ displayText
|
|
}}</pre>
|
|
</template>
|