color fix

This commit is contained in:
randogoth 2025-10-26 21:03:48 +02:00
parent 507becd490
commit dee3737858

View file

@ -66,12 +66,12 @@ HTML_PAGE = """<!DOCTYPE html>
} }
#terminal { #terminal {
display: inline-flex; display: inline-flex;
background: #000; background: rgb(12 12 12);
border: 1px solid #2b2b2b; border: 1px solid #2b2b2b;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
padding: 12px; padding: 12px;
transform-origin: top center; transform-origin: center center;
transform: scaleY(1.2); position: relative;
box-sizing: content-box; box-sizing: content-box;
} }
#terminal .xterm { #terminal .xterm {
@ -90,6 +90,9 @@ HTML_PAGE = """<!DOCTYPE html>
height: 400px !important; height: 400px !important;
padding: 0 !important; padding: 0 !important;
} }
.xterm-dom-renderer-owner-1 .xterm-bg-0 {
background-color: rgb(14 14 14) !important;
}
</style> </style>
</head> </head>
<body> <body>
@ -107,6 +110,7 @@ HTML_PAGE = """<!DOCTYPE html>
const CHAR_HEIGHT = 16; const CHAR_HEIGHT = 16;
const VIEWPORT_WIDTH = 640; const VIEWPORT_WIDTH = 640;
const VIEWPORT_HEIGHT = 400; const VIEWPORT_HEIGHT = 400;
const BASE_VERTICAL_STRETCH = 1.2;
const TARGET_ROW_HEIGHT = VIEWPORT_HEIGHT / ROWS; const TARGET_ROW_HEIGHT = VIEWPORT_HEIGHT / ROWS;
const terminalHost = document.getElementById("terminal"); const terminalHost = document.getElementById("terminal");
@ -162,6 +166,22 @@ HTML_PAGE = """<!DOCTYPE html>
} }
} }
function updateScale() {
const maxWidth = window.innerWidth * 0.85;
const maxHeight = window.innerHeight * 0.85;
// reset transform to measure base stretched size
terminalHost.style.transform = `scaleY(${BASE_VERTICAL_STRETCH})`;
terminalHost.style.transformOrigin = "center center";
const rect = terminalHost.getBoundingClientRect();
const scaleForWidth = maxWidth / rect.width;
const scaleForHeight = maxHeight / rect.height;
const uniformScale = Math.min(scaleForWidth, scaleForHeight);
terminalHost.style.transform = `scale(${uniformScale}) scaleY(${BASE_VERTICAL_STRETCH})`;
}
await waitForDosvgaFont(); await waitForDosvgaFont();
const term = new Terminal({ const term = new Terminal({
@ -181,6 +201,7 @@ HTML_PAGE = """<!DOCTYPE html>
term.open(terminalHost); term.open(terminalHost);
term.resize(COLS, ROWS); term.resize(COLS, ROWS);
applyViewportClamp(); applyViewportClamp();
updateScale();
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws"; const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`); const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`);
@ -199,6 +220,7 @@ HTML_PAGE = """<!DOCTYPE html>
socket.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows })); socket.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
term.focus(); term.focus();
applyViewportClamp(); applyViewportClamp();
updateScale();
}); });
socket.addEventListener("message", (event) => { socket.addEventListener("message", (event) => {
@ -230,13 +252,18 @@ HTML_PAGE = """<!DOCTYPE html>
term.onResize(({ cols, rows }) => { term.onResize(({ cols, rows }) => {
socket.send(JSON.stringify({ type: "resize", cols, rows })); socket.send(JSON.stringify({ type: "resize", cols, rows }));
applyViewportClamp(); applyViewportClamp();
updateScale();
}); });
term.onRender(() => { term.onRender(() => {
applyViewportClamp(); applyViewportClamp();
updateScale();
}); });
window.addEventListener("resize", () => applyViewportClamp(), { passive: true }); window.addEventListener("resize", () => {
applyViewportClamp();
updateScale();
}, { passive: true });
})(); })();
</script> </script>
</body> </body>