Set output rows based on window size
This commit is contained in:
33
emu.js
33
emu.js
@@ -13,7 +13,6 @@ const PERIPHS_SIZE = 69; // Nice
|
|||||||
const POLL_INTERVAL_MS = 20;
|
const POLL_INTERVAL_MS = 20;
|
||||||
|
|
||||||
const COLS = 80;
|
const COLS = 80;
|
||||||
const ROWS = 36;
|
|
||||||
const TAB_WIDTH = 8;
|
const TAB_WIDTH = 8;
|
||||||
|
|
||||||
const CURSOR_IDLE_TIME_MS = 1000;
|
const CURSOR_IDLE_TIME_MS = 1000;
|
||||||
@@ -36,8 +35,9 @@ class Emulator {
|
|||||||
this.rx_queue = [];
|
this.rx_queue = [];
|
||||||
this.timer = setInterval(() => this.poll(), POLL_INTERVAL_MS);
|
this.timer = setInterval(() => this.poll(), POLL_INTERVAL_MS);
|
||||||
|
|
||||||
|
this.rows = this.max_rows();
|
||||||
this.grid = Array.from(
|
this.grid = Array.from(
|
||||||
{ length: ROWS },
|
{ length: this.rows },
|
||||||
() => new Array(COLS).fill(' '));
|
() => new Array(COLS).fill(' '));
|
||||||
this.cursor = { x: 0, y: 0 };
|
this.cursor = { x: 0, y: 0 };
|
||||||
this.range = {
|
this.range = {
|
||||||
@@ -47,6 +47,7 @@ class Emulator {
|
|||||||
this.idle_timer = null;
|
this.idle_timer = null;
|
||||||
this.input_enable = false;
|
this.input_enable = false;
|
||||||
document.addEventListener('keydown', (e) => this.handle_keydown(e));
|
document.addEventListener('keydown', (e) => this.handle_keydown(e));
|
||||||
|
window.addEventListener('resize', () => this.handle_resize());
|
||||||
|
|
||||||
this.worker = new Worker('boot.js');
|
this.worker = new Worker('boot.js');
|
||||||
this.worker.postMessage(this.mem);
|
this.worker.postMessage(this.mem);
|
||||||
@@ -142,7 +143,7 @@ class Emulator {
|
|||||||
this.cursor_move(1, 0);
|
this.cursor_move(1, 0);
|
||||||
} else if (e.key == 'Enter') {
|
} else if (e.key == 'Enter') {
|
||||||
this.cursor.y = this.range.end.y + 1;
|
this.cursor.y = this.range.end.y + 1;
|
||||||
if (this.cursor.y >= ROWS)
|
while (this.cursor.y >= this.rows)
|
||||||
this.scroll();
|
this.scroll();
|
||||||
this.cursor.x = 0;
|
this.cursor.x = 0;
|
||||||
this.submit_line();
|
this.submit_line();
|
||||||
@@ -228,7 +229,7 @@ class Emulator {
|
|||||||
next_cell(cell) {
|
next_cell(cell) {
|
||||||
if (cell.x < COLS - 1)
|
if (cell.x < COLS - 1)
|
||||||
return { x: cell.x + 1, y: cell.y };
|
return { x: cell.x + 1, y: cell.y };
|
||||||
else if (cell.y < ROWS - 1)
|
else if (cell.y < this.rows - 1)
|
||||||
return { x: 0, y: cell.y + 1 };
|
return { x: 0, y: cell.y + 1 };
|
||||||
else
|
else
|
||||||
return null;
|
return null;
|
||||||
@@ -295,6 +296,30 @@ class Emulator {
|
|||||||
this.range.start.y -= 1;
|
this.range.start.y -= 1;
|
||||||
this.range.end.y -= 1;
|
this.range.end.y -= 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
max_rows() {
|
||||||
|
const style = getComputedStyle(this.output);
|
||||||
|
const line_height = parseFloat(style.lineHeight);
|
||||||
|
const margin_top = parseFloat(style.marginTop);
|
||||||
|
const margin_bottom = parseFloat(style.marginBottom);
|
||||||
|
|
||||||
|
const viewport_height = window.innerHeight;
|
||||||
|
const output_height = viewport_height - margin_top - margin_bottom;
|
||||||
|
return Math.floor(output_height / line_height) - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
handle_resize() {
|
||||||
|
this.rows = this.max_rows();
|
||||||
|
while (this.grid.length < this.rows)
|
||||||
|
this.grid.push(new Array(COLS).fill(' '));
|
||||||
|
while (this.grid.length > this.rows) {
|
||||||
|
this.grid.shift()
|
||||||
|
this.cursor.y -= 1;
|
||||||
|
this.range.start.y -= 1;
|
||||||
|
this.range.end.y -= 1;
|
||||||
|
}
|
||||||
|
this.flush_output();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user