randogoth/svarbox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

centered and oclor

Browse source
This commit is contained in:
randogoth 2025-10-26 17:58:16 +02:00
parent 4044d21182
commit d65b022b33
1 changed files with 79 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

88
scripts/dos-httpd
View file

@ -58,50 +58,67 @@ HTML_PAGE = """<!DOCTYPE html>
}
#workspace {
flex: 1 1 auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 32px 24px 40px;
box-sizing: border-box;
}
#terminal {
#terminal-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
}
#terminal-frame {
display: inline-flex;
background: #000;
border: 1px solid #2b2b2b;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
padding: 12px;
width: auto;
height: auto;
box-sizing: content-box;
}
#terminal {
display: inline-block;
}
#terminal .xterm {
width: auto !important;
height: auto !important;
width: 100% !important;
height: 100% !important;
}
#terminal .xterm-viewport {
background-color: #000 !important;
overflow: hidden !important;
width: auto !important;
width: 100% !important;
}
#terminal .xterm-rows,
#terminal .xterm-scroll-area {
width: auto !important;
height: auto !important;
width: 100% !important;
height: 100% !important;
}
#terminal .xterm-screen {
width: auto !important;
height: auto !important;
width: 100% !important;
height: 100% !important;
}
#terminal .xterm .xterm-helper-textarea {
width: 0 !important;
height: 0 !important;
}
#terminal .xterm .xterm-bg-0,
#terminal .xterm .xterm-bg-8 {
background-color: rgb(14 14 14) !important;
}
</style>
</head>
<body>
<header>SvarBox DOS Console</header>
<main id="workspace">
<div id="terminal-wrapper">
<div id="terminal-frame">
<div id="terminal"></div>
</div>
</div>
</main>
<script type="module">
@ -127,6 +144,45 @@ HTML_PAGE = """<!DOCTYPE html>
const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`);
const textDecoder = new TextDecoder("utf-8", { fatal: false });
const wrapper = document.getElementById("terminal-wrapper");
const frame = document.getElementById("terminal-frame");
let nativeWidth = 0;
let nativeHeight = 0;
let hasMeasurements = false;
function measureNativeSize() {
const previousTransform = wrapper.style.transform;
wrapper.style.transform = "translate(-50%, -50%) scale(1)";
const rect = frame.getBoundingClientRect();
wrapper.style.transform = previousTransform;
if (rect.width > 0 && rect.height > 0) {
nativeWidth = rect.width;
nativeHeight = rect.height;
hasMeasurements = true;
return true;
}
return false;
}
function ensureMeasurements() {
if (hasMeasurements) {
return true;
}
return measureNativeSize();
}
function applyScale() {
if (!ensureMeasurements()) {
return;
}
const maxWidth = window.innerWidth * 0.8;
const maxHeight = window.innerHeight * 0.8;
const scale = Math.min(maxWidth / nativeWidth, maxHeight / nativeHeight);
wrapper.style.transform = `translate(-50%, -50%) scale(${scale})`;
}
function decodeBase64ToString(b64) {
const binary = atob(b64);
const bytes = new Uint8Array(binary.length);
@ -139,8 +195,20 @@ HTML_PAGE = """<!DOCTYPE html>
socket.addEventListener("open", () => {
socket.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
term.focus();
applyScale();
});
term.onRender(() => {
applyScale();
});
if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === "function") {
document.fonts.ready.then(() => applyScale()).catch(() => applyScale());
} else {
window.addEventListener("load", () => applyScale(), { once: true });
}
window.addEventListener("resize", () => applyScale());
socket.addEventListener("message", (event) => {
try {
const payload = JSON.parse(event.data);