Videomode refactor 2 (#80)
Remove globals from video implementations to allow further refactoring. Experiment with testing video modes.
This commit is contained in:
Will Scullin
GitHub
parent
47fe12539f
commit
af57378852
|
|
@ -2,6 +2,8 @@
|
||||||
.checked-*.js
|
.checked-*.js
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.vscode
|
.vscode
|
||||||
|
/coverage
|
||||||
/dist
|
/dist
|
||||||
/node_modules
|
/node_modules
|
||||||
/tmp
|
/tmp
|
||||||
|
__diff_output__
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
'moduleNameMapper': {
|
'moduleNameMapper': {
|
||||||
'^js/(.*)': '<rootDir>/js/$1',
|
'^js/(.*)': '<rootDir>/js/$1',
|
||||||
|
'^test/(.*)': '<rootDir>/test/$1',
|
||||||
},
|
},
|
||||||
'roots': [
|
'roots': [
|
||||||
'js/',
|
'js/',
|
||||||
|
|
@ -9,8 +10,17 @@ module.exports = {
|
||||||
'testMatch': [
|
'testMatch': [
|
||||||
'**/?(*.)+(spec|test).+(ts|js)'
|
'**/?(*.)+(spec|test).+(ts|js)'
|
||||||
],
|
],
|
||||||
|
|
||||||
'transform': {
|
'transform': {
|
||||||
'^.+\\.js$': 'babel-jest',
|
'^.+\\.js$': 'babel-jest',
|
||||||
'^.+\\.ts$': 'ts-jest'
|
'^.+\\.ts$': 'ts-jest'
|
||||||
},
|
},
|
||||||
|
'setupFilesAfterEnv': [
|
||||||
|
'<rootDir>/test/jest-setup.js'
|
||||||
|
],
|
||||||
|
'coveragePathIgnorePatterns': [
|
||||||
|
'/node_modules/',
|
||||||
|
'/js/roms/',
|
||||||
|
'/test/',
|
||||||
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
10
js/apple2.ts
10
js/apple2.ts
|
|
@ -82,11 +82,11 @@ export class Apple2 implements Restorable<State>, DebuggerContainer {
|
||||||
const VideoModes = options.gl ? VideoModesGL : VideoModes2D;
|
const VideoModes = options.gl ? VideoModesGL : VideoModes2D;
|
||||||
|
|
||||||
this.cpu = new CPU6502({ '65C02': options.enhanced });
|
this.cpu = new CPU6502({ '65C02': options.enhanced });
|
||||||
this.gr = new LoresPage(1, options.characterRom, options.e);
|
this.vm = new VideoModes(options.canvas, options.e);
|
||||||
this.gr2 = new LoresPage(2, options.characterRom, options.e);
|
this.gr = new LoresPage(this.vm, 1, options.characterRom, options.e);
|
||||||
this.hgr = new HiresPage(1);
|
this.gr2 = new LoresPage(this.vm, 2, options.characterRom, options.e);
|
||||||
this.hgr2 = new HiresPage(2);
|
this.hgr = new HiresPage(this.vm, 1);
|
||||||
this.vm = new VideoModes(this.gr, this.hgr, this.gr2, this.hgr2, options.canvas, options.e);
|
this.hgr2 = new HiresPage(this.vm, 2);
|
||||||
this.io = new Apple2IO(this.cpu, this.vm);
|
this.io = new Apple2IO(this.cpu, this.vm);
|
||||||
this.tick = options.tick;
|
this.tick = options.tick;
|
||||||
|
|
||||||
|
|
|
||||||
383
js/canvas.ts
383
js/canvas.ts
|
|
@ -22,46 +22,6 @@ import {
|
||||||
pageNo
|
pageNo
|
||||||
} from './videomodes';
|
} from './videomodes';
|
||||||
|
|
||||||
let textMode = true;
|
|
||||||
let mixedMode = false;
|
|
||||||
let hiresMode = false;
|
|
||||||
let pageMode: pageNo = 1;
|
|
||||||
let _80colMode = false;
|
|
||||||
let altCharMode = false;
|
|
||||||
let an3 = false;
|
|
||||||
let doubleHiresMode = false;
|
|
||||||
let monoDHRMode = false;
|
|
||||||
const colorDHRMode = false;
|
|
||||||
let mixedDHRMode = false;
|
|
||||||
let highColorHGRMode = false;
|
|
||||||
let highColorTextMode = false;
|
|
||||||
let oneSixtyMode = false;
|
|
||||||
|
|
||||||
const tmpCanvas = document.createElement('canvas');
|
|
||||||
const tmpContext = tmpCanvas.getContext('2d');
|
|
||||||
|
|
||||||
const buildScreen = (mainData: ImageData, mixData?: ImageData | null) => {
|
|
||||||
if (!tmpContext) {
|
|
||||||
throw new Error('No 2d context');
|
|
||||||
}
|
|
||||||
|
|
||||||
const { width, height } = { width: 560, height: 192 };
|
|
||||||
const { x, y } = _80colMode ? { x: 0, y: 0 } : { x: 0, y: 0 };
|
|
||||||
|
|
||||||
tmpCanvas.width = width;
|
|
||||||
tmpCanvas.height = height;
|
|
||||||
tmpContext.fillStyle = 'rgba(0,0,0,1)';
|
|
||||||
tmpContext.fillRect(0, 0, width, height);
|
|
||||||
|
|
||||||
if (mixData) {
|
|
||||||
tmpContext.putImageData(mainData, x, y, 0, 0, 560, 160);
|
|
||||||
tmpContext.putImageData(mixData, x, y, 0, 160, 560, 32);
|
|
||||||
} else {
|
|
||||||
tmpContext.putImageData(mainData, x, y);
|
|
||||||
}
|
|
||||||
return tmpCanvas;
|
|
||||||
};
|
|
||||||
|
|
||||||
const dim = (c: Color): Color => {
|
const dim = (c: Color): Color => {
|
||||||
return [
|
return [
|
||||||
c[0] * 0.75 & 0xff,
|
c[0] * 0.75 & 0xff,
|
||||||
|
|
@ -119,7 +79,7 @@ const r4 = [
|
||||||
11, // Light Blue
|
11, // Light Blue
|
||||||
13, // Yellow
|
13, // Yellow
|
||||||
15 // White
|
15 // White
|
||||||
];
|
] as const;
|
||||||
|
|
||||||
const dcolors: Color[] = [
|
const dcolors: Color[] = [
|
||||||
[0, 0, 0], // 0x0 black
|
[0, 0, 0], // 0x0 black
|
||||||
|
|
@ -145,7 +105,7 @@ const notDirty: Region = {
|
||||||
bottom: -1,
|
bottom: -1,
|
||||||
left: 561,
|
left: 561,
|
||||||
right: -1
|
right: -1
|
||||||
};
|
} as const;
|
||||||
|
|
||||||
/****************************************************************************
|
/****************************************************************************
|
||||||
*
|
*
|
||||||
|
|
@ -160,21 +120,25 @@ export class LoresPage2D implements LoresPage {
|
||||||
|
|
||||||
private _buffer: memory[] = [];
|
private _buffer: memory[] = [];
|
||||||
private _refreshing = false;
|
private _refreshing = false;
|
||||||
private _monoMode = false;
|
|
||||||
private _blink = false;
|
private _blink = false;
|
||||||
|
|
||||||
|
private highColorTextMode = false
|
||||||
|
|
||||||
dirty: Region = {...notDirty}
|
dirty: Region = {...notDirty}
|
||||||
imageData: ImageData;
|
imageData: ImageData;
|
||||||
|
|
||||||
constructor(private page: number,
|
constructor(
|
||||||
|
private vm: VideoModes,
|
||||||
|
private page: pageNo,
|
||||||
private readonly charset: rom,
|
private readonly charset: rom,
|
||||||
private readonly e: boolean) {
|
private readonly e: boolean
|
||||||
this.imageData = new ImageData(560, 192);
|
) {
|
||||||
for (let idx = 0; idx < 560 * 192 * 4; idx++) {
|
this.imageData = this.vm.context.createImageData(560, 192);
|
||||||
this.imageData.data[idx] = 0xff;
|
this.imageData.data.fill(0xff);
|
||||||
}
|
|
||||||
this._buffer[0] = allocMemPages(0x4);
|
this._buffer[0] = allocMemPages(0x4);
|
||||||
this._buffer[1] = allocMemPages(0x4);
|
this._buffer[1] = allocMemPages(0x4);
|
||||||
|
|
||||||
|
this.vm.setLoresPage(page, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
||||||
|
|
@ -194,7 +158,7 @@ export class LoresPage2D implements LoresPage {
|
||||||
private _checkInverse(val: byte) {
|
private _checkInverse(val: byte) {
|
||||||
let inverse = false;
|
let inverse = false;
|
||||||
if (this.e) {
|
if (this.e) {
|
||||||
if (!_80colMode && !altCharMode) {
|
if (!this.vm._80colMode && !this.vm.altCharMode) {
|
||||||
inverse = ((val & 0xc0) == 0x40) && this._blink;
|
inverse = ((val & 0xc0) == 0x40) && this._blink;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -264,14 +228,14 @@ export class LoresPage2D implements LoresPage {
|
||||||
x += 14;
|
x += 14;
|
||||||
if (x > this.dirty.right) { this.dirty.right = x; }
|
if (x > this.dirty.right) { this.dirty.right = x; }
|
||||||
|
|
||||||
if (textMode || hiresMode || (mixedMode && row > 19)) {
|
if (this.vm.textMode || this.vm.hiresMode || (this.vm.mixedMode && row > 19)) {
|
||||||
if (_80colMode) {
|
if (this.vm._80colMode) {
|
||||||
const inverse = this._checkInverse(val);
|
const inverse = this._checkInverse(val);
|
||||||
|
|
||||||
fore = inverse ? blackCol : whiteCol;
|
fore = inverse ? blackCol : whiteCol;
|
||||||
back = inverse ? whiteCol : blackCol;
|
back = inverse ? whiteCol : blackCol;
|
||||||
|
|
||||||
if (!altCharMode) {
|
if (!this.vm.altCharMode) {
|
||||||
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -295,13 +259,13 @@ export class LoresPage2D implements LoresPage {
|
||||||
fore = inverse ? blackCol : whiteCol;
|
fore = inverse ? blackCol : whiteCol;
|
||||||
back = inverse ? whiteCol : blackCol;
|
back = inverse ? whiteCol : blackCol;
|
||||||
|
|
||||||
if (!altCharMode) {
|
if (!this.vm.altCharMode) {
|
||||||
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
||||||
}
|
}
|
||||||
|
|
||||||
let offset = (col * 14 + row * 560 * 8) * 4;
|
let offset = (col * 14 + row * 560 * 8) * 4;
|
||||||
|
|
||||||
if (highColorTextMode) {
|
if (this.highColorTextMode) {
|
||||||
fore = _colors[this._buffer[1][base] >> 4];
|
fore = _colors[this._buffer[1][base] >> 4];
|
||||||
back = _colors[this._buffer[1][base] & 0x0f];
|
back = _colors[this._buffer[1][base] & 0x0f];
|
||||||
}
|
}
|
||||||
|
|
@ -318,7 +282,7 @@ export class LoresPage2D implements LoresPage {
|
||||||
offset += 546 * 4;
|
offset += 546 * 4;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const colorMode = mixedMode && !textMode && !this._monoMode;
|
const colorMode = this.vm.mixedMode && !this.vm.textMode && !this.vm.monoMode;
|
||||||
// var val0 = col > 0 ? _buffer[0][base - 1] : 0;
|
// var val0 = col > 0 ? _buffer[0][base - 1] : 0;
|
||||||
// var val2 = col < 39 ? _buffer[0][base + 1] : 0;
|
// var val2 = col < 39 ? _buffer[0][base + 1] : 0;
|
||||||
|
|
||||||
|
|
@ -356,24 +320,20 @@ export class LoresPage2D implements LoresPage {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (!_80colMode && bank == 1) {
|
if (this.vm._80colMode && !this.vm.an3State) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (_80colMode && !an3) {
|
|
||||||
let offset = (col * 14 + (bank ? 0 : 1) * 7 + row * 560 * 8) * 4;
|
let offset = (col * 14 + (bank ? 0 : 1) * 7 + row * 560 * 8) * 4;
|
||||||
if (this._monoMode) {
|
if (this.vm.monoMode) {
|
||||||
fore = whiteCol;
|
|
||||||
back = blackCol;
|
|
||||||
for (let jdx = 0; jdx < 8; jdx++) {
|
for (let jdx = 0; jdx < 8; jdx++) {
|
||||||
let b = (jdx < 8) ? (val & 0x0f) : (val >> 4);
|
let b = (jdx < 4) ? (val & 0x0f) : (val >> 4);
|
||||||
b |= (b << 4);
|
b |= (b << 4);
|
||||||
if (bank & 0x1) {
|
b |= (b << 8);
|
||||||
b <<= 1;
|
if (col & 0x1) {
|
||||||
|
b >>= 2;
|
||||||
}
|
}
|
||||||
for (let idx = 0; idx < 7; idx++) {
|
for (let idx = 0; idx < 7; idx++) {
|
||||||
const color = (b & 0x80) ? fore : back;
|
const color = (b & 0x01) ? whiteCol : blackCol;
|
||||||
this._drawHalfPixel(data, offset, color);
|
this._drawHalfPixel(data, offset, color);
|
||||||
b <<= 1;
|
b >>= 1;
|
||||||
offset += 4;
|
offset += 4;
|
||||||
}
|
}
|
||||||
offset += 553 * 4;
|
offset += 553 * 4;
|
||||||
|
|
@ -387,28 +347,26 @@ export class LoresPage2D implements LoresPage {
|
||||||
(val & 0x0f) : (val >> 4)];
|
(val & 0x0f) : (val >> 4)];
|
||||||
for (let idx = 0; idx < 7; idx++) {
|
for (let idx = 0; idx < 7; idx++) {
|
||||||
this._drawHalfPixel(data, offset, color);
|
this._drawHalfPixel(data, offset, color);
|
||||||
off += 4;
|
offset += 4;
|
||||||
}
|
}
|
||||||
offset += 553 * 4;
|
offset += 553 * 4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else if (bank === 0) {
|
||||||
let offset = (col * 14 + row * 560 * 8) * 4;
|
let offset = (col * 14 + row * 560 * 8) * 4;
|
||||||
|
|
||||||
if (this._monoMode) {
|
if (this.vm.monoMode) {
|
||||||
fore = whiteCol;
|
|
||||||
back = blackCol;
|
|
||||||
for (let jdx = 0; jdx < 8; jdx++) {
|
for (let jdx = 0; jdx < 8; jdx++) {
|
||||||
let b = (jdx < 4) ? (val & 0x0f) : (val >> 4);
|
let b = (jdx < 4) ? (val & 0x0f) : (val >> 4);
|
||||||
b |= (b << 4);
|
b |= (b << 4);
|
||||||
b |= (b << 8);
|
b |= (b << 8);
|
||||||
if (col & 0x1) {
|
if (col & 0x1) {
|
||||||
b <<= 2;
|
b >>= 2;
|
||||||
}
|
}
|
||||||
for (let idx = 0; idx < 14; idx++) {
|
for (let idx = 0; idx < 14; idx++) {
|
||||||
const color = (b & 0x8000) ? fore : back;
|
const color = (b & 0x0001) ? whiteCol : blackCol;
|
||||||
this._drawHalfPixel(data, offset, color);
|
this._drawHalfPixel(data, offset, color);
|
||||||
b <<= 1;
|
b >>= 1;
|
||||||
offset += 4;
|
offset += 4;
|
||||||
}
|
}
|
||||||
offset += 546 * 4;
|
offset += 546 * 4;
|
||||||
|
|
@ -429,21 +387,19 @@ export class LoresPage2D implements LoresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh() {
|
refresh() {
|
||||||
|
this.highColorTextMode = !this.vm.an3State && this.vm.textMode && !this.vm._80colMode;
|
||||||
|
|
||||||
let addr = 0x400 * this.page;
|
let addr = 0x400 * this.page;
|
||||||
this._refreshing = true;
|
this._refreshing = true;
|
||||||
for (let idx = 0; idx < 0x400; idx++, addr++) {
|
for (let idx = 0; idx < 0x400; idx++, addr++) {
|
||||||
this._write(addr >> 8, addr & 0xff, this._buffer[0][idx], 0);
|
this._write(addr >> 8, addr & 0xff, this._buffer[0][idx], 0);
|
||||||
if (_80colMode) {
|
if (this.vm._80colMode) {
|
||||||
this._write(addr >> 8, addr & 0xff, this._buffer[1][idx], 1);
|
this._write(addr >> 8, addr & 0xff, this._buffer[1][idx], 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._refreshing = false;
|
this._refreshing = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
mono(on: boolean) {
|
|
||||||
this._monoMode = on;
|
|
||||||
}
|
|
||||||
|
|
||||||
blink() {
|
blink() {
|
||||||
let addr = 0x400 * this.page;
|
let addr = 0x400 * this.page;
|
||||||
this._refreshing = true;
|
this._refreshing = true;
|
||||||
|
|
@ -476,8 +432,6 @@ export class LoresPage2D implements LoresPage {
|
||||||
|
|
||||||
getState(): GraphicsState {
|
getState(): GraphicsState {
|
||||||
return {
|
return {
|
||||||
page: this.page,
|
|
||||||
mono: this._monoMode,
|
|
||||||
buffer: [
|
buffer: [
|
||||||
new Uint8Array(this._buffer[0]),
|
new Uint8Array(this._buffer[0]),
|
||||||
new Uint8Array(this._buffer[1]),
|
new Uint8Array(this._buffer[1]),
|
||||||
|
|
@ -486,8 +440,6 @@ export class LoresPage2D implements LoresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
setState(state: GraphicsState) {
|
setState(state: GraphicsState) {
|
||||||
this.page = state.page;
|
|
||||||
this._monoMode = state.mono;
|
|
||||||
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
||||||
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
||||||
|
|
||||||
|
|
@ -518,7 +470,7 @@ export class LoresPage2D implements LoresPage {
|
||||||
for (row = 0; row < 24; row++) {
|
for (row = 0; row < 24; row++) {
|
||||||
base = this.rowToBase(row);
|
base = this.rowToBase(row);
|
||||||
line = '';
|
line = '';
|
||||||
if (this.e && _80colMode) {
|
if (this.e && this.vm._80colMode) {
|
||||||
for (col = 0; col < 80; col++) {
|
for (col = 0; col < 80; col++) {
|
||||||
charCode = this.mapCharCode(this._buffer[1 - col % 2][base + Math.floor(col / 2)]);
|
charCode = this.mapCharCode(this._buffer[1 - col % 2][base + Math.floor(col / 2)]);
|
||||||
line += String.fromCharCode(charCode);
|
line += String.fromCharCode(charCode);
|
||||||
|
|
@ -548,16 +500,23 @@ export class HiresPage2D implements HiresPage {
|
||||||
|
|
||||||
private _buffer: memory[] = [];
|
private _buffer: memory[] = [];
|
||||||
private _refreshing = false;
|
private _refreshing = false;
|
||||||
private _monoMode = false;
|
|
||||||
|
highColorHGRMode: boolean;
|
||||||
|
oneSixtyMode: boolean;
|
||||||
|
mixedDHRMode: boolean;
|
||||||
|
monoDHRMode: boolean;
|
||||||
|
colorDHRMode: boolean = true;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private page: number) {
|
private vm: VideoModes,
|
||||||
this.imageData = new ImageData(560, 192);
|
private page: pageNo,
|
||||||
for (let idx = 0; idx < 560 * 192 * 4; idx++) {
|
) {
|
||||||
this.imageData.data[idx] = 0xff;
|
this.imageData = this.vm.context.createImageData(560, 192);
|
||||||
}
|
this.imageData.data.fill(0xff);
|
||||||
this._buffer[0] = allocMemPages(0x20);
|
this._buffer[0] = allocMemPages(0x20);
|
||||||
this._buffer[1] = allocMemPages(0x20);
|
this._buffer[1] = allocMemPages(0x20);
|
||||||
|
|
||||||
|
this.vm.setHiresPage(page, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
||||||
|
|
@ -645,7 +604,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
|
|
||||||
const data = this.imageData.data;
|
const data = this.imageData.data;
|
||||||
let dx, dy;
|
let dx, dy;
|
||||||
if ((rowa < 24) && (col < 40) && hiresMode) {
|
if ((rowa < 24) && (col < 40) && this.vm.hiresMode) {
|
||||||
let y = rowa << 4 | rowb << 1;
|
let y = rowa << 4 | rowb << 1;
|
||||||
if (y < this.dirty.top) { this.dirty.top = y; }
|
if (y < this.dirty.top) { this.dirty.top = y; }
|
||||||
y += 1;
|
y += 1;
|
||||||
|
|
@ -657,7 +616,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
|
|
||||||
dy = rowa << 4 | rowb << 1;
|
dy = rowa << 4 | rowb << 1;
|
||||||
let bz, b0, b1, b2, b3, b4, c, hb;
|
let bz, b0, b1, b2, b3, b4, c, hb;
|
||||||
if (oneSixtyMode && !this._monoMode) {
|
if (this.oneSixtyMode && !this.vm.monoMode) {
|
||||||
// 1 byte = two pixels, but 3:4 ratio
|
// 1 byte = two pixels, but 3:4 ratio
|
||||||
const c3 = val & 0xf;
|
const c3 = val & 0xf;
|
||||||
const c4 = val >> 4;
|
const c4 = val >> 4;
|
||||||
|
|
@ -667,7 +626,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
|
|
||||||
this._draw3Pixel(data, offset, dcolors[c3]);
|
this._draw3Pixel(data, offset, dcolors[c3]);
|
||||||
this._draw4Pixel(data, offset + 12, dcolors[c4]);
|
this._draw4Pixel(data, offset + 12, dcolors[c4]);
|
||||||
} else if (doubleHiresMode) {
|
} else if (this.vm.doubleHiresMode) {
|
||||||
val &= 0x7f;
|
val &= 0x7f;
|
||||||
|
|
||||||
// Every 4 bytes is 7 pixels
|
// Every 4 bytes is 7 pixels
|
||||||
|
|
@ -719,7 +678,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
let offset = dx * 4 + dy * 280 * 4;
|
let offset = dx * 4 + dy * 280 * 4;
|
||||||
|
|
||||||
let monoColor = null;
|
let monoColor = null;
|
||||||
if (this._monoMode || monoDHRMode) {
|
if (this.vm.monoMode || this.monoDHRMode) {
|
||||||
monoColor = whiteCol;
|
monoColor = whiteCol;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -734,7 +693,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
} else {
|
} else {
|
||||||
this._drawHalfPixel(data, offset, blackCol);
|
this._drawHalfPixel(data, offset, blackCol);
|
||||||
}
|
}
|
||||||
} else if (mixedDHRMode) {
|
} else if (this.mixedDHRMode) {
|
||||||
if (hbs) {
|
if (hbs) {
|
||||||
this._drawHalfPixel(data, offset, dcolor);
|
this._drawHalfPixel(data, offset, dcolor);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -744,7 +703,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
this._drawHalfPixel(data, offset, blackCol);
|
this._drawHalfPixel(data, offset, blackCol);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (colorDHRMode) {
|
} else if (this.colorDHRMode) {
|
||||||
this._drawHalfPixel(data, offset, dcolor);
|
this._drawHalfPixel(data, offset, dcolor);
|
||||||
} else if (
|
} else if (
|
||||||
((c[idx] != c[idx - 1]) && (c[idx] != c[idx + 1])) &&
|
((c[idx] != c[idx - 1]) && (c[idx] != c[idx + 1])) &&
|
||||||
|
|
@ -793,7 +752,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
|
|
||||||
let offset = dx * 4 + dy * 280 * 4;
|
let offset = dx * 4 + dy * 280 * 4;
|
||||||
|
|
||||||
const monoColor = this._monoMode ? whiteCol : null;
|
const monoColor = this.vm.monoMode ? whiteCol : null;
|
||||||
|
|
||||||
for (let idx = 0; idx < 9; idx++, offset += 8) {
|
for (let idx = 0; idx < 9; idx++, offset += 8) {
|
||||||
val >>= 1;
|
val >>= 1;
|
||||||
|
|
@ -801,7 +760,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
if (v1) {
|
if (v1) {
|
||||||
if (monoColor) {
|
if (monoColor) {
|
||||||
color = monoColor;
|
color = monoColor;
|
||||||
} else if (highColorHGRMode) {
|
} else if (this.highColorHGRMode) {
|
||||||
color = dcolors[this._buffer[1][base] >> 4];
|
color = dcolors[this._buffer[1][base] >> 4];
|
||||||
} else if (v0 || v2) {
|
} else if (v0 || v2) {
|
||||||
color = whiteCol;
|
color = whiteCol;
|
||||||
|
|
@ -811,7 +770,7 @@ export class HiresPage2D implements HiresPage {
|
||||||
} else {
|
} else {
|
||||||
if (monoColor) {
|
if (monoColor) {
|
||||||
color = blackCol;
|
color = blackCol;
|
||||||
} else if (highColorHGRMode) {
|
} else if (this.highColorHGRMode) {
|
||||||
color = dcolors[this._buffer[1][base] & 0x0f];
|
color = dcolors[this._buffer[1][base] & 0x0f];
|
||||||
} else if (odd && v2 && v0) {
|
} else if (odd && v2 && v0) {
|
||||||
color = v0 ? dim(evenCol) : evenCol;
|
color = v0 ? dim(evenCol) : evenCol;
|
||||||
|
|
@ -837,23 +796,24 @@ export class HiresPage2D implements HiresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh() {
|
refresh() {
|
||||||
|
this.highColorHGRMode = !this.vm.an3State && this.vm.hiresMode && !this.vm._80colMode;
|
||||||
|
this.oneSixtyMode = this.vm.flag == 1 && this.vm.doubleHiresMode;
|
||||||
|
this.mixedDHRMode = this.vm.flag == 2 && this.vm.doubleHiresMode;
|
||||||
|
this.monoDHRMode = this.vm.flag == 3 && this.vm.doubleHiresMode;
|
||||||
|
|
||||||
let addr = 0x2000 * this.page;
|
let addr = 0x2000 * this.page;
|
||||||
this._refreshing = true;
|
this._refreshing = true;
|
||||||
for (let idx = 0; idx < 0x2000; idx++, addr++) {
|
for (let idx = 0; idx < 0x2000; idx++, addr++) {
|
||||||
const page = addr >> 8;
|
const page = addr >> 8;
|
||||||
const off = addr & 0xff;
|
const off = addr & 0xff;
|
||||||
this._write(page, off, this._buffer[0][idx], 0);
|
this._write(page, off, this._buffer[0][idx], 0);
|
||||||
if (_80colMode) {
|
if (this.vm._80colMode) {
|
||||||
this._write(page, off, this._buffer[1][idx], 1);
|
this._write(page, off, this._buffer[1][idx], 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._refreshing = false;
|
this._refreshing = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
mono(on: boolean) {
|
|
||||||
this._monoMode = on;
|
|
||||||
}
|
|
||||||
|
|
||||||
start() {
|
start() {
|
||||||
return this._start();
|
return this._start();
|
||||||
}
|
}
|
||||||
|
|
@ -872,8 +832,6 @@ export class HiresPage2D implements HiresPage {
|
||||||
|
|
||||||
getState(): GraphicsState {
|
getState(): GraphicsState {
|
||||||
return {
|
return {
|
||||||
page: this.page,
|
|
||||||
mono: this._monoMode,
|
|
||||||
buffer: [
|
buffer: [
|
||||||
new Uint8Array(this._buffer[0]),
|
new Uint8Array(this._buffer[0]),
|
||||||
new Uint8Array(this._buffer[1]),
|
new Uint8Array(this._buffer[1]),
|
||||||
|
|
@ -882,8 +840,6 @@ export class HiresPage2D implements HiresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
setState(state: GraphicsState) {
|
setState(state: GraphicsState) {
|
||||||
this.page = state.page;
|
|
||||||
this._monoMode = state.mono;
|
|
||||||
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
||||||
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
||||||
|
|
||||||
|
|
@ -892,37 +848,53 @@ export class HiresPage2D implements HiresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class VideoModes2D implements VideoModes {
|
export class VideoModes2D implements VideoModes {
|
||||||
private _grs: LoresPage[];
|
private _grs: LoresPage[] = [];
|
||||||
private _hgrs: HiresPage[];
|
private _hgrs: HiresPage[] = [];
|
||||||
private _flag = 0;
|
private _screenContext: CanvasRenderingContext2D;
|
||||||
private _context: CanvasRenderingContext2D | null;
|
private _canvas: HTMLCanvasElement;
|
||||||
private _left: number;
|
private _left: number;
|
||||||
private _top: number;
|
private _top: number;
|
||||||
private _refreshFlag: boolean = true;
|
private _refreshFlag: boolean = true;
|
||||||
|
|
||||||
public ready = Promise.resolve();
|
public ready = Promise.resolve();
|
||||||
|
|
||||||
|
textMode: boolean;
|
||||||
|
mixedMode: boolean;
|
||||||
|
hiresMode: boolean;
|
||||||
|
pageMode: pageNo;
|
||||||
|
_80colMode: boolean;
|
||||||
|
altCharMode: boolean;
|
||||||
|
an3State: boolean;
|
||||||
|
doubleHiresMode: boolean;
|
||||||
|
|
||||||
|
flag = 0;
|
||||||
|
monoMode = false;
|
||||||
|
|
||||||
|
context: CanvasRenderingContext2D;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
gr: LoresPage,
|
private screen: HTMLCanvasElement,
|
||||||
hgr: HiresPage,
|
private e: boolean
|
||||||
gr2: LoresPage,
|
) {
|
||||||
hgr2: HiresPage,
|
this._canvas = document.createElement('canvas');
|
||||||
private canvas: HTMLCanvasElement,
|
const context = this._canvas.getContext('2d');
|
||||||
private e: boolean) {
|
const screenContext = this.screen.getContext('2d');
|
||||||
this._grs = [gr, gr2];
|
if (!context || !screenContext) {
|
||||||
this._hgrs = [hgr, hgr2];
|
throw new Error('No 2d context');
|
||||||
this._context = this.canvas.getContext('2d');
|
}
|
||||||
this._left = (this.canvas.width - 560) / 2;
|
this.context = context;
|
||||||
this._top = (this.canvas.height - 384) / 2;
|
|
||||||
|
const { width, height } = { width: 560, height: 192 };
|
||||||
|
this._canvas.width = width;
|
||||||
|
this._canvas.height = height;
|
||||||
|
|
||||||
|
this._screenContext = screenContext;
|
||||||
|
this._left = (this.screen.width - 560) / 2;
|
||||||
|
this._top = (this.screen.height - 384) / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _refresh() {
|
_refresh() {
|
||||||
highColorTextMode = !an3 && textMode && !_80colMode;
|
this.doubleHiresMode = !this.an3State && this.hiresMode && this._80colMode;
|
||||||
highColorHGRMode = !an3 && hiresMode && !_80colMode;
|
|
||||||
doubleHiresMode = !an3 && hiresMode && _80colMode;
|
|
||||||
oneSixtyMode = this._flag == 1 && doubleHiresMode;
|
|
||||||
mixedDHRMode = this._flag == 2 && doubleHiresMode;
|
|
||||||
monoDHRMode = this._flag == 3 && doubleHiresMode;
|
|
||||||
|
|
||||||
this._refreshFlag = true;
|
this._refreshFlag = true;
|
||||||
}
|
}
|
||||||
|
|
@ -932,25 +904,33 @@ export class VideoModes2D implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
reset() {
|
reset() {
|
||||||
textMode = true;
|
this.textMode = true;
|
||||||
mixedMode = false;
|
this.mixedMode = false;
|
||||||
hiresMode = true;
|
this.hiresMode = true;
|
||||||
pageMode = 1;
|
this.pageMode = 1;
|
||||||
|
|
||||||
_80colMode = false;
|
this._80colMode = false;
|
||||||
altCharMode = false;
|
this.altCharMode = false;
|
||||||
|
|
||||||
this._flag = 0;
|
this.flag = 0;
|
||||||
an3 = true;
|
this.an3State = true;
|
||||||
|
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setLoresPage(page: pageNo, lores: LoresPage) {
|
||||||
|
this._grs[page - 1] = lores;
|
||||||
|
}
|
||||||
|
|
||||||
|
setHiresPage(page: pageNo, hires: HiresPage) {
|
||||||
|
this._hgrs[page - 1] = hires;
|
||||||
|
}
|
||||||
|
|
||||||
text(on: boolean) {
|
text(on: boolean) {
|
||||||
const old = textMode;
|
const old = this.textMode;
|
||||||
textMode = on;
|
this.textMode = on;
|
||||||
if (on) {
|
if (on) {
|
||||||
this._flag = 0;
|
this.flag = 0;
|
||||||
}
|
}
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
|
|
@ -960,29 +940,29 @@ export class VideoModes2D implements VideoModes {
|
||||||
_80col(on: boolean) {
|
_80col(on: boolean) {
|
||||||
if (!this.e) { return; }
|
if (!this.e) { return; }
|
||||||
|
|
||||||
const old = _80colMode;
|
const old = this._80colMode;
|
||||||
_80colMode = on;
|
this._80colMode = on;
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
altchar(on: boolean) {
|
altChar(on: boolean) {
|
||||||
if (!this.e) { return; }
|
if (!this.e) { return; }
|
||||||
|
|
||||||
const old = altCharMode;
|
const old = this.altCharMode;
|
||||||
altCharMode = on;
|
this.altCharMode = on;
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hires(on: boolean) {
|
hires(on: boolean) {
|
||||||
const old = hiresMode;
|
const old = this.hiresMode;
|
||||||
hiresMode = on;
|
this.hiresMode = on;
|
||||||
if (!on) {
|
if (!on) {
|
||||||
this._flag = 0;
|
this.flag = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
|
|
@ -993,11 +973,11 @@ export class VideoModes2D implements VideoModes {
|
||||||
an3(on: boolean) {
|
an3(on: boolean) {
|
||||||
if (!this.e) { return; }
|
if (!this.e) { return; }
|
||||||
|
|
||||||
const old = an3;
|
const old = this.an3State;
|
||||||
an3 = on;
|
this.an3State = on;
|
||||||
|
|
||||||
if (on) {
|
if (on) {
|
||||||
this._flag = ((this._flag << 1) | (_80colMode ? 0x0 : 0x1)) & 0x3;
|
this.flag = ((this.flag << 1) | (this._80colMode ? 0x0 : 0x1)) & 0x3;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
|
|
@ -1010,47 +990,60 @@ export class VideoModes2D implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
mixed(on: boolean) {
|
mixed(on: boolean) {
|
||||||
const old = mixedMode;
|
const old = this.mixedMode;
|
||||||
mixedMode = on;
|
this.mixedMode = on;
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
page(pageNo: pageNo) {
|
page(pageNo: pageNo) {
|
||||||
const old = pageMode;
|
const old = this.pageMode;
|
||||||
pageMode = pageNo;
|
this.pageMode = pageNo;
|
||||||
if (old != pageNo) {
|
if (old != pageNo) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
isText() {
|
isText() {
|
||||||
return textMode;
|
return this.textMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isMixed() {
|
isMixed() {
|
||||||
return mixedMode;
|
return this.mixedMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isPage2() {
|
isPage2() {
|
||||||
return pageMode == 2;
|
return this.pageMode == 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
isHires() {
|
isHires() {
|
||||||
return hiresMode;
|
return this.hiresMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isDoubleHires() {
|
isDoubleHires() {
|
||||||
return doubleHiresMode;
|
return this.doubleHiresMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
is80Col() {
|
is80Col() {
|
||||||
return _80colMode;
|
return this._80colMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isAltChar() {
|
isAltChar() {
|
||||||
return altCharMode;
|
return this.altCharMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
buildScreen(mainData: ImageData, mixData?: ImageData | null) {
|
||||||
|
// TODO(whscullin): - figure out 80 column offset
|
||||||
|
const { x, y } = this._80colMode ? { x: 0, y: 0 } : { x: 0, y: 0 };
|
||||||
|
|
||||||
|
if (mixData) {
|
||||||
|
this.context.putImageData(mainData, x, y, 0, 0, 560, 160);
|
||||||
|
this.context.putImageData(mixData, x, y, 0, 160, 560, 32);
|
||||||
|
} else {
|
||||||
|
this.context.putImageData(mainData, x, y);
|
||||||
|
}
|
||||||
|
return this._canvas;
|
||||||
}
|
}
|
||||||
|
|
||||||
updateImage(
|
updateImage(
|
||||||
|
|
@ -1059,14 +1052,11 @@ export class VideoModes2D implements VideoModes {
|
||||||
mixData?: ImageData | null,
|
mixData?: ImageData | null,
|
||||||
mixDirty?: Region | null
|
mixDirty?: Region | null
|
||||||
) {
|
) {
|
||||||
if (!this._context) {
|
|
||||||
throw new Error('No 2D context');
|
|
||||||
}
|
|
||||||
let blitted = false;
|
let blitted = false;
|
||||||
|
|
||||||
if (mainDirty.bottom !== -1 || (mixDirty && mixDirty.bottom !== -1)) {
|
if (mainDirty.bottom !== -1 || (mixDirty && mixDirty.bottom !== -1)) {
|
||||||
const imageData = buildScreen(mainData, mixData);
|
const imageData = this.buildScreen(mainData, mixData);
|
||||||
this._context.drawImage(
|
this._screenContext.drawImage(
|
||||||
imageData,
|
imageData,
|
||||||
0, 0, 560, 192,
|
0, 0, 560, 192,
|
||||||
this._left, this._top, 560, 384
|
this._left, this._top, 560, 384
|
||||||
|
|
@ -1078,8 +1068,8 @@ export class VideoModes2D implements VideoModes {
|
||||||
|
|
||||||
blit(altData?: ImageData) {
|
blit(altData?: ImageData) {
|
||||||
let blitted = false;
|
let blitted = false;
|
||||||
const hgr = this._hgrs[pageMode - 1];
|
const hgr = this._hgrs[this.pageMode - 1];
|
||||||
const gr = this._grs[pageMode - 1];
|
const gr = this._grs[this.pageMode - 1];
|
||||||
|
|
||||||
if (this._refreshFlag) {
|
if (this._refreshFlag) {
|
||||||
hgr.refresh();
|
hgr.refresh();
|
||||||
|
|
@ -1092,12 +1082,12 @@ export class VideoModes2D implements VideoModes {
|
||||||
altData,
|
altData,
|
||||||
{ top: 0, left: 0, right: 560, bottom: 192 }
|
{ top: 0, left: 0, right: 560, bottom: 192 }
|
||||||
);
|
);
|
||||||
} else if (hiresMode && !textMode) {
|
} else if (this.hiresMode && !this.textMode) {
|
||||||
blitted = this.updateImage(
|
blitted = this.updateImage(
|
||||||
hgr.imageData,
|
hgr.imageData,
|
||||||
hgr.dirty,
|
hgr.dirty,
|
||||||
mixedMode ? gr.imageData : null,
|
this.mixedMode ? gr.imageData : null,
|
||||||
mixedMode ? gr.dirty : null
|
this.mixedMode ? gr.dirty : null
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
blitted = this.updateImage(
|
blitted = this.updateImage(
|
||||||
|
|
@ -1114,24 +1104,26 @@ export class VideoModes2D implements VideoModes {
|
||||||
return {
|
return {
|
||||||
grs: [this._grs[0].getState(), this._grs[1].getState()],
|
grs: [this._grs[0].getState(), this._grs[1].getState()],
|
||||||
hgrs: [this._hgrs[0].getState(), this._hgrs[1].getState()],
|
hgrs: [this._hgrs[0].getState(), this._hgrs[1].getState()],
|
||||||
textMode: textMode,
|
textMode: this.textMode,
|
||||||
mixedMode: mixedMode,
|
mixedMode: this.mixedMode,
|
||||||
hiresMode: hiresMode,
|
hiresMode: this.hiresMode,
|
||||||
pageMode: pageMode,
|
pageMode: this.pageMode,
|
||||||
_80colMode: _80colMode,
|
_80colMode: this._80colMode,
|
||||||
altCharMode: altCharMode,
|
altCharMode: this.altCharMode,
|
||||||
an3: an3
|
an3State: this.an3State,
|
||||||
|
flag: this.flag
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
setState(state: VideoModesState) {
|
setState(state: VideoModesState) {
|
||||||
textMode = state.textMode;
|
this.textMode = state.textMode;
|
||||||
mixedMode = state.mixedMode;
|
this.mixedMode = state.mixedMode;
|
||||||
hiresMode = state.hiresMode;
|
this.hiresMode = state.hiresMode;
|
||||||
pageMode = state.pageMode;
|
this.pageMode = state.pageMode;
|
||||||
_80colMode = state._80colMode;
|
this._80colMode = state._80colMode;
|
||||||
altCharMode = state.altCharMode;
|
this.altCharMode = state.altCharMode;
|
||||||
an3 = state.an3;
|
this.an3State = state.an3State;
|
||||||
|
this.flag = state.flag;
|
||||||
|
|
||||||
this._grs[0].setState(state.grs[0]);
|
this._grs[0].setState(state.grs[0]);
|
||||||
this._grs[1].setState(state.grs[1]);
|
this._grs[1].setState(state.grs[1]);
|
||||||
|
|
@ -1142,20 +1134,17 @@ export class VideoModes2D implements VideoModes {
|
||||||
|
|
||||||
mono(on: boolean) {
|
mono(on: boolean) {
|
||||||
if (on) {
|
if (on) {
|
||||||
this.canvas.classList.add('mono');
|
this.screen.classList.add('mono');
|
||||||
} else {
|
} else {
|
||||||
this.canvas.classList.remove('mono');
|
this.screen.classList.remove('mono');
|
||||||
}
|
}
|
||||||
this._grs[0].mono(on);
|
this.monoMode = on;
|
||||||
this._grs[1].mono(on);
|
|
||||||
this._hgrs[0].mono(on);
|
|
||||||
this._hgrs[1].mono(on);
|
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
scanlines(on: boolean) {
|
scanlines(on: boolean) {
|
||||||
// Can't apply scanline filter to canvas
|
// Can't apply scanline filter to canvas
|
||||||
const parent = this.canvas.parentElement;
|
const parent = this.screen.parentElement;
|
||||||
if (parent) {
|
if (parent) {
|
||||||
if (on) {
|
if (on) {
|
||||||
parent.classList.add('scanlines');
|
parent.classList.add('scanlines');
|
||||||
|
|
@ -1166,6 +1155,6 @@ export class VideoModes2D implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
getText() {
|
getText() {
|
||||||
return this._grs[pageMode - 1].getText();
|
return this._grs[this.pageMode - 1].getText();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
292
js/gl.ts
292
js/gl.ts
|
|
@ -25,41 +25,6 @@ import {
|
||||||
pageNo
|
pageNo
|
||||||
} from './videomodes';
|
} from './videomodes';
|
||||||
|
|
||||||
let textMode = true;
|
|
||||||
let mixedMode = false;
|
|
||||||
let hiresMode = false;
|
|
||||||
let pageMode: pageNo = 1;
|
|
||||||
let _80colMode = false;
|
|
||||||
let altCharMode = false;
|
|
||||||
let an3 = false;
|
|
||||||
let doubleHiresMode = false;
|
|
||||||
|
|
||||||
const tmpCanvas = document.createElement('canvas');
|
|
||||||
const tmpContext = tmpCanvas.getContext('2d');
|
|
||||||
|
|
||||||
const buildScreen = (mainData: ImageData, mixData?: ImageData | null) => {
|
|
||||||
if (!tmpContext) {
|
|
||||||
throw new Error('No 2d context');
|
|
||||||
}
|
|
||||||
|
|
||||||
const details = screenEmu.C.NTSC_DETAILS;
|
|
||||||
const { width, height } = details.imageSize;
|
|
||||||
const { x, y } = _80colMode ? details.topLeft80Col : details.topLeft;
|
|
||||||
|
|
||||||
tmpCanvas.width = width;
|
|
||||||
tmpCanvas.height = height;
|
|
||||||
tmpContext.fillStyle = 'rgba(0,0,0,1)';
|
|
||||||
tmpContext.fillRect(0, 0, width, height);
|
|
||||||
|
|
||||||
if (mixData) {
|
|
||||||
tmpContext.putImageData(mainData, x, y, 0, 0, 560, 160);
|
|
||||||
tmpContext.putImageData(mixData, x, y, 0, 160, 560, 32);
|
|
||||||
} else {
|
|
||||||
tmpContext.putImageData(mainData, x, y);
|
|
||||||
}
|
|
||||||
return tmpContext.getImageData(0, 0, width, height);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Color constants
|
// Color constants
|
||||||
const whiteCol: Color = [255, 255, 255];
|
const whiteCol: Color = [255, 255, 255];
|
||||||
const blackCol: Color = [0, 0, 0];
|
const blackCol: Color = [0, 0, 0];
|
||||||
|
|
@ -84,21 +49,23 @@ export class LoresPageGL implements LoresPage {
|
||||||
|
|
||||||
private _buffer: memory[] = [];
|
private _buffer: memory[] = [];
|
||||||
private _refreshing = false;
|
private _refreshing = false;
|
||||||
private _monoMode = false;
|
|
||||||
private _blink = false;
|
private _blink = false;
|
||||||
|
|
||||||
dirty: Region = {...notDirty}
|
dirty: Region = {...notDirty}
|
||||||
imageData: ImageData;
|
imageData: ImageData;
|
||||||
|
|
||||||
constructor(private page: number,
|
constructor(
|
||||||
|
private vm: VideoModes,
|
||||||
|
private page: pageNo,
|
||||||
private readonly charset: rom,
|
private readonly charset: rom,
|
||||||
private readonly e: boolean) {
|
private readonly e: boolean
|
||||||
this.imageData = new ImageData(560, 192);
|
) {
|
||||||
for (let idx = 0; idx < 560 * 192 * 4; idx++) {
|
this.imageData = this.vm.context.createImageData(560, 192);
|
||||||
this.imageData.data[idx] = 0xff;
|
this.imageData.data.fill(0xff);
|
||||||
}
|
|
||||||
this._buffer[0] = allocMemPages(0x4);
|
this._buffer[0] = allocMemPages(0x4);
|
||||||
this._buffer[1] = allocMemPages(0x4);
|
this._buffer[1] = allocMemPages(0x4);
|
||||||
|
|
||||||
|
this.vm.setLoresPage(page, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
||||||
|
|
@ -118,7 +85,7 @@ export class LoresPageGL implements LoresPage {
|
||||||
private _checkInverse(val: byte) {
|
private _checkInverse(val: byte) {
|
||||||
let inverse = false;
|
let inverse = false;
|
||||||
if (this.e) {
|
if (this.e) {
|
||||||
if (!_80colMode && !altCharMode) {
|
if (!this.vm._80colMode && !this.vm.altCharMode) {
|
||||||
inverse = ((val & 0xc0) == 0x40) && this._blink;
|
inverse = ((val & 0xc0) == 0x40) && this._blink;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -188,14 +155,14 @@ export class LoresPageGL implements LoresPage {
|
||||||
x += 14;
|
x += 14;
|
||||||
if (x > this.dirty.right) { this.dirty.right = x; }
|
if (x > this.dirty.right) { this.dirty.right = x; }
|
||||||
|
|
||||||
if (textMode || hiresMode || (mixedMode && row > 19)) {
|
if (this.vm.textMode || this.vm.hiresMode || (this.vm.mixedMode && row > 19)) {
|
||||||
if (_80colMode) {
|
if (this.vm._80colMode) {
|
||||||
const inverse = this._checkInverse(val);
|
const inverse = this._checkInverse(val);
|
||||||
|
|
||||||
fore = inverse ? blackCol : whiteCol;
|
fore = inverse ? blackCol : whiteCol;
|
||||||
back = inverse ? whiteCol : blackCol;
|
back = inverse ? whiteCol : blackCol;
|
||||||
|
|
||||||
if (!altCharMode) {
|
if (!this.vm.altCharMode) {
|
||||||
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -219,7 +186,7 @@ export class LoresPageGL implements LoresPage {
|
||||||
fore = inverse ? blackCol : whiteCol;
|
fore = inverse ? blackCol : whiteCol;
|
||||||
back = inverse ? whiteCol : blackCol;
|
back = inverse ? whiteCol : blackCol;
|
||||||
|
|
||||||
if (!altCharMode) {
|
if (!this.vm.altCharMode) {
|
||||||
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -251,7 +218,7 @@ export class LoresPageGL implements LoresPage {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (_80colMode && !an3) {
|
if (this.vm._80colMode && !this.vm.an3State) {
|
||||||
let offset = (col * 14 + (bank ? 0 : 1) * 7 + row * 560 * 8) * 4;
|
let offset = (col * 14 + (bank ? 0 : 1) * 7 + row * 560 * 8) * 4;
|
||||||
for (let jdx = 0; jdx < 8; jdx++) {
|
for (let jdx = 0; jdx < 8; jdx++) {
|
||||||
let b = (jdx < 4) ? (val & 0x0f) : (val >> 4);
|
let b = (jdx < 4) ? (val & 0x0f) : (val >> 4);
|
||||||
|
|
@ -295,17 +262,13 @@ export class LoresPageGL implements LoresPage {
|
||||||
this._refreshing = true;
|
this._refreshing = true;
|
||||||
for (let idx = 0; idx < 0x400; idx++, addr++) {
|
for (let idx = 0; idx < 0x400; idx++, addr++) {
|
||||||
this._write(addr >> 8, addr & 0xff, this._buffer[0][idx], 0);
|
this._write(addr >> 8, addr & 0xff, this._buffer[0][idx], 0);
|
||||||
if (_80colMode) {
|
if (this.vm._80colMode) {
|
||||||
this._write(addr >> 8, addr & 0xff, this._buffer[1][idx], 1);
|
this._write(addr >> 8, addr & 0xff, this._buffer[1][idx], 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._refreshing = false;
|
this._refreshing = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
mono(on: boolean) {
|
|
||||||
this._monoMode = on;
|
|
||||||
}
|
|
||||||
|
|
||||||
blink() {
|
blink() {
|
||||||
let addr = 0x400 * this.page;
|
let addr = 0x400 * this.page;
|
||||||
this._refreshing = true;
|
this._refreshing = true;
|
||||||
|
|
@ -338,8 +301,6 @@ export class LoresPageGL implements LoresPage {
|
||||||
|
|
||||||
getState(): GraphicsState {
|
getState(): GraphicsState {
|
||||||
return {
|
return {
|
||||||
page: this.page,
|
|
||||||
mono: this._monoMode,
|
|
||||||
buffer: [
|
buffer: [
|
||||||
new Uint8Array(this._buffer[0]),
|
new Uint8Array(this._buffer[0]),
|
||||||
new Uint8Array(this._buffer[1]),
|
new Uint8Array(this._buffer[1]),
|
||||||
|
|
@ -348,8 +309,6 @@ export class LoresPageGL implements LoresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
setState(state: GraphicsState) {
|
setState(state: GraphicsState) {
|
||||||
this.page = state.page;
|
|
||||||
this._monoMode = state.mono;
|
|
||||||
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
||||||
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
||||||
|
|
||||||
|
|
@ -380,7 +339,7 @@ export class LoresPageGL implements LoresPage {
|
||||||
for (row = 0; row < 24; row++) {
|
for (row = 0; row < 24; row++) {
|
||||||
base = this.rowToBase(row);
|
base = this.rowToBase(row);
|
||||||
line = '';
|
line = '';
|
||||||
if (this.e && _80colMode) {
|
if (this.e && this.vm._80colMode) {
|
||||||
for (col = 0; col < 80; col++) {
|
for (col = 0; col < 80; col++) {
|
||||||
charCode = this.mapCharCode(this._buffer[1 - col % 2][base + Math.floor(col / 2)]);
|
charCode = this.mapCharCode(this._buffer[1 - col % 2][base + Math.floor(col / 2)]);
|
||||||
line += String.fromCharCode(charCode);
|
line += String.fromCharCode(charCode);
|
||||||
|
|
@ -410,16 +369,17 @@ export class HiresPageGL implements HiresPage {
|
||||||
|
|
||||||
private _buffer: memory[] = [];
|
private _buffer: memory[] = [];
|
||||||
private _refreshing = false;
|
private _refreshing = false;
|
||||||
private _monoMode = false;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private page: number) {
|
private vm: VideoModes,
|
||||||
this.imageData = new ImageData(560, 192);
|
private page: pageNo,
|
||||||
for (let idx = 0; idx < 560 * 192 * 4; idx++) {
|
) {
|
||||||
this.imageData.data[idx] = 0xff;
|
this.imageData = this.vm.context.createImageData(560, 192);
|
||||||
}
|
this.imageData.data.fill(0xff);
|
||||||
this._buffer[0] = allocMemPages(0x20);
|
this._buffer[0] = allocMemPages(0x20);
|
||||||
this._buffer[1] = allocMemPages(0x20);
|
this._buffer[1] = allocMemPages(0x20);
|
||||||
|
|
||||||
|
this.vm.setHiresPage(page, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
|
||||||
|
|
@ -486,7 +446,7 @@ export class HiresPageGL implements HiresPage {
|
||||||
rowb = base >> 10;
|
rowb = base >> 10;
|
||||||
|
|
||||||
const data = this.imageData.data;
|
const data = this.imageData.data;
|
||||||
if ((rowa < 24) && (col < 40) && hiresMode) {
|
if ((rowa < 24) && (col < 40) && this.vm.hiresMode) {
|
||||||
let y = rowa << 3 | rowb;
|
let y = rowa << 3 | rowb;
|
||||||
if (y < this.dirty.top) { this.dirty.top = y; }
|
if (y < this.dirty.top) { this.dirty.top = y; }
|
||||||
y += 1;
|
y += 1;
|
||||||
|
|
@ -497,7 +457,7 @@ export class HiresPageGL implements HiresPage {
|
||||||
if (x > this.dirty.right) { this.dirty.right = x; }
|
if (x > this.dirty.right) { this.dirty.right = x; }
|
||||||
|
|
||||||
const dy = rowa << 3 | rowb;
|
const dy = rowa << 3 | rowb;
|
||||||
if (doubleHiresMode) {
|
if (this.vm.doubleHiresMode) {
|
||||||
const dx = col * 14 + (bank ? 0 : 7);
|
const dx = col * 14 + (bank ? 0 : 7);
|
||||||
let offset = dx * 4 + dy * 280 * 4 * 2;
|
let offset = dx * 4 + dy * 280 * 4 * 2;
|
||||||
|
|
||||||
|
|
@ -554,17 +514,13 @@ export class HiresPageGL implements HiresPage {
|
||||||
const page = addr >> 8;
|
const page = addr >> 8;
|
||||||
const off = addr & 0xff;
|
const off = addr & 0xff;
|
||||||
this._write(page, off, this._buffer[0][idx], 0);
|
this._write(page, off, this._buffer[0][idx], 0);
|
||||||
if (_80colMode) {
|
if (this.vm._80colMode) {
|
||||||
this._write(page, off, this._buffer[1][idx], 1);
|
this._write(page, off, this._buffer[1][idx], 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._refreshing = false;
|
this._refreshing = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
mono(on: boolean) {
|
|
||||||
this._monoMode = on;
|
|
||||||
}
|
|
||||||
|
|
||||||
start() {
|
start() {
|
||||||
return this._start();
|
return this._start();
|
||||||
}
|
}
|
||||||
|
|
@ -583,8 +539,6 @@ export class HiresPageGL implements HiresPage {
|
||||||
|
|
||||||
getState(): GraphicsState {
|
getState(): GraphicsState {
|
||||||
return {
|
return {
|
||||||
page: this.page,
|
|
||||||
mono: this._monoMode,
|
|
||||||
buffer: [
|
buffer: [
|
||||||
new Uint8Array(this._buffer[0]),
|
new Uint8Array(this._buffer[0]),
|
||||||
new Uint8Array(this._buffer[1]),
|
new Uint8Array(this._buffer[1]),
|
||||||
|
|
@ -593,8 +547,6 @@ export class HiresPageGL implements HiresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
setState(state: GraphicsState) {
|
setState(state: GraphicsState) {
|
||||||
this.page = state.page;
|
|
||||||
this._monoMode = state.mono;
|
|
||||||
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
this._buffer[0] = new Uint8Array(state.buffer[0]);
|
||||||
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
this._buffer[1] = new Uint8Array(state.buffer[1]);
|
||||||
|
|
||||||
|
|
@ -603,26 +555,44 @@ export class HiresPageGL implements HiresPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
export class VideoModesGL implements VideoModes {
|
export class VideoModesGL implements VideoModes {
|
||||||
private _grs: LoresPage[];
|
private _grs: LoresPage[] = [];
|
||||||
private _hgrs: HiresPage[];
|
private _hgrs: HiresPage[] = [];
|
||||||
private _sv: any;
|
private _sv: screenEmu.ScreenView;
|
||||||
private _displayConfig: screenEmu.DisplayConfiguration;
|
private _displayConfig: screenEmu.DisplayConfiguration;
|
||||||
private _monoMode: boolean = false;
|
|
||||||
private _scanlines: boolean = false;
|
private _scanlines: boolean = false;
|
||||||
private _refreshFlag: boolean = true;
|
private _refreshFlag: boolean = true;
|
||||||
|
private _canvas: HTMLCanvasElement;
|
||||||
|
|
||||||
public ready: Promise<void>
|
public ready: Promise<void>
|
||||||
|
|
||||||
|
public textMode: boolean;
|
||||||
|
public mixedMode: boolean;
|
||||||
|
public hiresMode: boolean;
|
||||||
|
public pageMode: pageNo;
|
||||||
|
public _80colMode: boolean;
|
||||||
|
public altCharMode: boolean;
|
||||||
|
public an3State: boolean;
|
||||||
|
public doubleHiresMode: boolean;
|
||||||
|
|
||||||
|
public flag = 0;
|
||||||
|
public monoMode: boolean = false;
|
||||||
|
|
||||||
|
public context: CanvasRenderingContext2D;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
gr: LoresPage,
|
private screen: HTMLCanvasElement,
|
||||||
hgr: HiresPage,
|
private e: boolean
|
||||||
gr2: LoresPage,
|
) {
|
||||||
hgr2: HiresPage,
|
this._canvas = document.createElement('canvas');
|
||||||
private canvas: HTMLCanvasElement,
|
const context = this._canvas.getContext('2d');
|
||||||
private e: boolean) {
|
if (!context) {
|
||||||
this._grs = [gr, gr2];
|
throw new Error('no 2d context');
|
||||||
this._hgrs = [hgr, hgr2];
|
}
|
||||||
this._sv = new screenEmu.ScreenView(this.canvas);
|
const { width, height } = screenEmu.C.NTSC_DETAILS.imageSize;
|
||||||
|
this._canvas.width = width;
|
||||||
|
this._canvas.height = height;
|
||||||
|
this.context = context;
|
||||||
|
this._sv = new screenEmu.ScreenView(this.screen);
|
||||||
|
|
||||||
this.ready = this.init();
|
this.ready = this.init();
|
||||||
}
|
}
|
||||||
|
|
@ -630,15 +600,13 @@ export class VideoModesGL implements VideoModes {
|
||||||
async init() {
|
async init() {
|
||||||
await this._sv.initOpenGL();
|
await this._sv.initOpenGL();
|
||||||
|
|
||||||
(window as any)._sv = this._sv;
|
|
||||||
|
|
||||||
this._displayConfig = this.defaultMonitor();
|
this._displayConfig = this.defaultMonitor();
|
||||||
this._sv.displayConfiguration = this._displayConfig;
|
this._sv.displayConfiguration = this._displayConfig;
|
||||||
}
|
}
|
||||||
|
|
||||||
private defaultMonitor(): screenEmu.DisplayConfiguration {
|
private defaultMonitor(): screenEmu.DisplayConfiguration {
|
||||||
const config = new screenEmu.DisplayConfiguration();
|
const config = new screenEmu.DisplayConfiguration();
|
||||||
config.displayResolution = new screenEmu.Size(this.canvas.width, this.canvas.height);
|
config.displayResolution = new screenEmu.Size(this.screen.width, this.screen.height);
|
||||||
config.displayScanlineLevel = 0.5;
|
config.displayScanlineLevel = 0.5;
|
||||||
config.videoWhiteOnly = true;
|
config.videoWhiteOnly = true;
|
||||||
config.videoSaturation = 0.8;
|
config.videoSaturation = 0.8;
|
||||||
|
|
@ -651,15 +619,15 @@ export class VideoModesGL implements VideoModes {
|
||||||
private monitorII(): screenEmu.DisplayConfiguration {
|
private monitorII(): screenEmu.DisplayConfiguration {
|
||||||
// Values taken from openemulator/libemulation/res/library/Monitors/Apple Monitor II.xml
|
// Values taken from openemulator/libemulation/res/library/Monitors/Apple Monitor II.xml
|
||||||
const config = new screenEmu.DisplayConfiguration();
|
const config = new screenEmu.DisplayConfiguration();
|
||||||
config.displayResolution = new screenEmu.Size(this.canvas.width, this.canvas.height);
|
config.displayResolution = new screenEmu.Size(this.screen.width, this.screen.height);
|
||||||
config.videoDecoder = 'CANVAS_MONOCHROME';
|
config.videoDecoder = 'CANVAS_MONOCHROME';
|
||||||
config.videoBrightness = 0.15;
|
config.videoBrightness = 0.15;
|
||||||
config.videoContrast = 0.8;
|
config.videoContrast = 0.8;
|
||||||
config.videoSaturation = 1.45;
|
config.videoSaturation = 1.45;
|
||||||
config.videoHue = 0.27;
|
config.videoHue = 0.27;
|
||||||
config.videoCenter = new screenEmu.Point(0, 0);
|
config.videoCenter = new screenEmu.Point(0.01, 0.02);
|
||||||
config.videoSize = new screenEmu.Size(1.05, 1.05);
|
config.videoSize = new screenEmu.Size(1.25, 1.15);
|
||||||
config.videoBandwidth = 6000000;
|
config.videoBandwidth = 9000000;
|
||||||
config.displayBarrel = 0.1;
|
config.displayBarrel = 0.1;
|
||||||
config.displayScanlineLevel = 0.5;
|
config.displayScanlineLevel = 0.5;
|
||||||
config.displayCenterLighting = 0.5;
|
config.displayCenterLighting = 0.5;
|
||||||
|
|
@ -668,12 +636,12 @@ export class VideoModesGL implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
private _refresh() {
|
private _refresh() {
|
||||||
doubleHiresMode = !an3 && hiresMode && _80colMode;
|
this.doubleHiresMode = !this.an3State && this.hiresMode && this._80colMode;
|
||||||
|
|
||||||
this._refreshFlag = true;
|
this._refreshFlag = true;
|
||||||
|
|
||||||
if (this._displayConfig) {
|
if (this._displayConfig) {
|
||||||
this._displayConfig.videoWhiteOnly = textMode || this._monoMode;
|
this._displayConfig.videoWhiteOnly = this.textMode || this.monoMode;
|
||||||
this._displayConfig.displayScanlineLevel = this._scanlines ? 0.5 : 0;
|
this._displayConfig.displayScanlineLevel = this._scanlines ? 0.5 : 0;
|
||||||
this._sv.displayConfiguration = this._displayConfig;
|
this._sv.displayConfiguration = this._displayConfig;
|
||||||
}
|
}
|
||||||
|
|
@ -684,22 +652,30 @@ export class VideoModesGL implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
reset() {
|
reset() {
|
||||||
textMode = true;
|
this.textMode = true;
|
||||||
mixedMode = false;
|
this.mixedMode = false;
|
||||||
hiresMode = true;
|
this.hiresMode = true;
|
||||||
pageMode = 1;
|
this.pageMode = 1;
|
||||||
|
|
||||||
_80colMode = false;
|
this._80colMode = false;
|
||||||
altCharMode = false;
|
this.altCharMode = false;
|
||||||
|
|
||||||
an3 = true;
|
this.an3State = true;
|
||||||
|
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setLoresPage(page: pageNo, lores: LoresPage) {
|
||||||
|
this._grs[page - 1] = lores;
|
||||||
|
}
|
||||||
|
|
||||||
|
setHiresPage(page: pageNo, hires: HiresPage) {
|
||||||
|
this._hgrs[page - 1] = hires;
|
||||||
|
}
|
||||||
|
|
||||||
text(on: boolean) {
|
text(on: boolean) {
|
||||||
const old = textMode;
|
const old = this.textMode;
|
||||||
textMode = on;
|
this.textMode = on;
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
|
|
@ -709,27 +685,27 @@ export class VideoModesGL implements VideoModes {
|
||||||
_80col(on: boolean) {
|
_80col(on: boolean) {
|
||||||
if (!this.e) { return; }
|
if (!this.e) { return; }
|
||||||
|
|
||||||
const old = _80colMode;
|
const old = this._80colMode;
|
||||||
_80colMode = on;
|
this._80colMode = on;
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
altchar(on: boolean) {
|
altChar(on: boolean) {
|
||||||
if (!this.e) { return; }
|
if (!this.e) { return; }
|
||||||
|
|
||||||
const old = altCharMode;
|
const old = this.altCharMode;
|
||||||
altCharMode = on;
|
this.altCharMode = on;
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hires(on: boolean) {
|
hires(on: boolean) {
|
||||||
const old = hiresMode;
|
const old = this.hiresMode;
|
||||||
hiresMode = on;
|
this.hiresMode = on;
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
|
|
@ -739,8 +715,8 @@ export class VideoModesGL implements VideoModes {
|
||||||
an3(on: boolean) {
|
an3(on: boolean) {
|
||||||
if (!this.e) { return; }
|
if (!this.e) { return; }
|
||||||
|
|
||||||
const old = an3;
|
const old = this.an3State;
|
||||||
an3 = on;
|
this.an3State = on;
|
||||||
|
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
|
|
@ -752,47 +728,47 @@ export class VideoModesGL implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
mixed(on: boolean) {
|
mixed(on: boolean) {
|
||||||
const old = mixedMode;
|
const old = this.mixedMode;
|
||||||
mixedMode = on;
|
this.mixedMode = on;
|
||||||
if (old != on) {
|
if (old != on) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
page(pageNo: pageNo) {
|
page(pageNo: pageNo) {
|
||||||
const old = pageMode;
|
const old = this.pageMode;
|
||||||
pageMode = pageNo;
|
this.pageMode = pageNo;
|
||||||
if (old != pageNo) {
|
if (old != pageNo) {
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
isText() {
|
isText() {
|
||||||
return textMode;
|
return this.textMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isMixed() {
|
isMixed() {
|
||||||
return mixedMode;
|
return this.mixedMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isPage2() {
|
isPage2() {
|
||||||
return pageMode == 2;
|
return this.pageMode == 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
isHires() {
|
isHires() {
|
||||||
return hiresMode;
|
return this.hiresMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isDoubleHires() {
|
isDoubleHires() {
|
||||||
return doubleHiresMode;
|
return this.doubleHiresMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
is80Col() {
|
is80Col() {
|
||||||
return _80colMode;
|
return this._80colMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
isAltChar() {
|
isAltChar() {
|
||||||
return altCharMode;
|
return this.altCharMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
updateImage(
|
updateImage(
|
||||||
|
|
@ -803,7 +779,7 @@ export class VideoModesGL implements VideoModes {
|
||||||
) {
|
) {
|
||||||
let blitted = false;
|
let blitted = false;
|
||||||
if (mainDirty.bottom !== -1 || (mixDirty && mixDirty.bottom !== -1)) {
|
if (mainDirty.bottom !== -1 || (mixDirty && mixDirty.bottom !== -1)) {
|
||||||
const imageData = buildScreen(mainData, mixData);
|
const imageData = this.buildScreen(mainData, mixData);
|
||||||
const imageInfo = new screenEmu.ImageInfo(imageData);
|
const imageInfo = new screenEmu.ImageInfo(imageData);
|
||||||
this._sv.image = imageInfo;
|
this._sv.image = imageInfo;
|
||||||
blitted = true;
|
blitted = true;
|
||||||
|
|
@ -812,10 +788,24 @@ export class VideoModesGL implements VideoModes {
|
||||||
return blitted;
|
return blitted;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
buildScreen(mainData: ImageData, mixData?: ImageData | null) {
|
||||||
|
const details = screenEmu.C.NTSC_DETAILS;
|
||||||
|
const { width, height } = details.imageSize;
|
||||||
|
const { x, y } = this._80colMode ? details.topLeft80Col : details.topLeft;
|
||||||
|
|
||||||
|
if (mixData) {
|
||||||
|
this.context.putImageData(mainData, x, y, 0, 0, 560, 160);
|
||||||
|
this.context.putImageData(mixData, x, y, 0, 160, 560, 32);
|
||||||
|
} else {
|
||||||
|
this.context.putImageData(mainData, x, y);
|
||||||
|
}
|
||||||
|
return this.context.getImageData(0, 0, width, height);
|
||||||
|
}
|
||||||
|
|
||||||
blit(altData?: ImageData) {
|
blit(altData?: ImageData) {
|
||||||
let blitted = false;
|
let blitted = false;
|
||||||
const hgr = this._hgrs[pageMode - 1];
|
const hgr = this._hgrs[this.pageMode - 1];
|
||||||
const gr = this._grs[pageMode - 1];
|
const gr = this._grs[this.pageMode - 1];
|
||||||
|
|
||||||
if (this._refreshFlag) {
|
if (this._refreshFlag) {
|
||||||
hgr.refresh();
|
hgr.refresh();
|
||||||
|
|
@ -828,12 +818,12 @@ export class VideoModesGL implements VideoModes {
|
||||||
altData,
|
altData,
|
||||||
{ top: 0, left: 0, right: 560, bottom: 192 }
|
{ top: 0, left: 0, right: 560, bottom: 192 }
|
||||||
);
|
);
|
||||||
} else if (hiresMode && !textMode) {
|
} else if (this.hiresMode && !this.textMode) {
|
||||||
blitted = this.updateImage(
|
blitted = this.updateImage(
|
||||||
hgr.imageData,
|
hgr.imageData,
|
||||||
hgr.dirty,
|
hgr.dirty,
|
||||||
mixedMode ? gr.imageData : null,
|
this.mixedMode ? gr.imageData : null,
|
||||||
mixedMode ? gr.dirty : null
|
this.mixedMode ? gr.dirty : null
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
blitted = this.updateImage(
|
blitted = this.updateImage(
|
||||||
|
|
@ -850,24 +840,25 @@ export class VideoModesGL implements VideoModes {
|
||||||
return {
|
return {
|
||||||
grs: [this._grs[0].getState(), this._grs[1].getState()],
|
grs: [this._grs[0].getState(), this._grs[1].getState()],
|
||||||
hgrs: [this._hgrs[0].getState(), this._hgrs[1].getState()],
|
hgrs: [this._hgrs[0].getState(), this._hgrs[1].getState()],
|
||||||
textMode: textMode,
|
textMode: this.textMode,
|
||||||
mixedMode: mixedMode,
|
mixedMode: this.mixedMode,
|
||||||
hiresMode: hiresMode,
|
hiresMode: this.hiresMode,
|
||||||
pageMode: pageMode,
|
pageMode: this.pageMode,
|
||||||
_80colMode: _80colMode,
|
_80colMode: this._80colMode,
|
||||||
altCharMode: altCharMode,
|
altCharMode: this.altCharMode,
|
||||||
an3: an3
|
an3State: this.an3State,
|
||||||
|
flag: 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
setState(state: VideoModesState) {
|
setState(state: VideoModesState) {
|
||||||
textMode = state.textMode;
|
this.textMode = state.textMode;
|
||||||
mixedMode = state.mixedMode;
|
this.mixedMode = state.mixedMode;
|
||||||
hiresMode = state.hiresMode;
|
this.hiresMode = state.hiresMode;
|
||||||
pageMode = state.pageMode;
|
this.pageMode = state.pageMode;
|
||||||
_80colMode = state._80colMode;
|
this._80colMode = state._80colMode;
|
||||||
altCharMode = state.altCharMode;
|
this.altCharMode = state.altCharMode;
|
||||||
an3 = state.an3;
|
this.an3State = state.an3State;
|
||||||
|
|
||||||
this._grs[0].setState(state.grs[0]);
|
this._grs[0].setState(state.grs[0]);
|
||||||
this._grs[1].setState(state.grs[1]);
|
this._grs[1].setState(state.grs[1]);
|
||||||
|
|
@ -877,12 +868,7 @@ export class VideoModesGL implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
mono(on: boolean) {
|
mono(on: boolean) {
|
||||||
this._grs[0].mono(on);
|
this.monoMode = on;
|
||||||
this._grs[1].mono(on);
|
|
||||||
this._hgrs[0].mono(on);
|
|
||||||
this._hgrs[1].mono(on);
|
|
||||||
|
|
||||||
this._monoMode = on;
|
|
||||||
this._displayConfig = on ? this.monitorII() : this.defaultMonitor();
|
this._displayConfig = on ? this.monitorII() : this.defaultMonitor();
|
||||||
this._refresh();
|
this._refresh();
|
||||||
}
|
}
|
||||||
|
|
@ -893,6 +879,6 @@ export class VideoModesGL implements VideoModes {
|
||||||
}
|
}
|
||||||
|
|
||||||
getText() {
|
getText() {
|
||||||
return this._grs[pageMode - 1].getText();
|
return this._grs[this.pageMode - 1].getText();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -519,11 +519,11 @@ export default class MMU implements Memory, Restorable<MMUState> {
|
||||||
break;
|
break;
|
||||||
case LOC.CLRALTCH:
|
case LOC.CLRALTCH:
|
||||||
this._debug('Alt Char off');
|
this._debug('Alt Char off');
|
||||||
this.vm.altchar(false);
|
this.vm.altChar(false);
|
||||||
break;
|
break;
|
||||||
case LOC.SETALTCH:
|
case LOC.SETALTCH:
|
||||||
this._debug('Alt Char on');
|
this._debug('Alt Char on');
|
||||||
this.vm.altchar(true);
|
this.vm.altChar(true);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
this._updateBanks();
|
this._updateBanks();
|
||||||
|
|
|
||||||
|
|
@ -38,10 +38,6 @@ export class OptionsModal {
|
||||||
private handlers: Record<string, OptionHandler> = {}
|
private handlers: Record<string, OptionHandler> = {}
|
||||||
private sections: OptionSection[] = []
|
private sections: OptionSection[] = []
|
||||||
|
|
||||||
construct() {
|
|
||||||
this.prefs = new Prefs();
|
|
||||||
}
|
|
||||||
|
|
||||||
addOptions(handler: OptionHandler) {
|
addOptions(handler: OptionHandler) {
|
||||||
const sections = handler.getOptions();
|
const sections = handler.getOptions();
|
||||||
for (const section of sections) {
|
for (const section of sections) {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { MemoryPages, Restorable, byte, memory } from './types';
|
import { MemoryPages, Restorable, memory } from './types';
|
||||||
|
|
||||||
export type bank = 0 | 1;
|
export type bank = 0 | 1;
|
||||||
export type pageNo = 1 | 2;
|
export type pageNo = 1 | 2;
|
||||||
|
|
@ -11,8 +11,6 @@ export interface Region {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface GraphicsState {
|
export interface GraphicsState {
|
||||||
page: byte;
|
|
||||||
mono: boolean;
|
|
||||||
buffer: memory[];
|
buffer: memory[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -25,7 +23,8 @@ export interface VideoModesState {
|
||||||
pageMode: pageNo,
|
pageMode: pageNo,
|
||||||
_80colMode: boolean,
|
_80colMode: boolean,
|
||||||
altCharMode: boolean,
|
altCharMode: boolean,
|
||||||
an3: boolean,
|
an3State: boolean,
|
||||||
|
flag: number,
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface VideoPage extends MemoryPages, Restorable<GraphicsState> {
|
export interface VideoPage extends MemoryPages, Restorable<GraphicsState> {
|
||||||
|
|
@ -35,7 +34,6 @@ export interface VideoPage extends MemoryPages, Restorable<GraphicsState> {
|
||||||
bank0(): MemoryPages
|
bank0(): MemoryPages
|
||||||
bank1(): MemoryPages
|
bank1(): MemoryPages
|
||||||
|
|
||||||
mono: (on: boolean) => void
|
|
||||||
refresh: () => void
|
refresh: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,14 +46,32 @@ export interface HiresPage extends VideoPage {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface VideoModes extends Restorable<VideoModesState> {
|
export interface VideoModes extends Restorable<VideoModesState> {
|
||||||
|
textMode: boolean
|
||||||
|
mixedMode: boolean
|
||||||
|
hiresMode: boolean
|
||||||
|
pageMode: pageNo
|
||||||
|
_80colMode: boolean
|
||||||
|
altCharMode: boolean
|
||||||
|
an3State: boolean
|
||||||
|
doubleHiresMode: boolean
|
||||||
|
|
||||||
|
flag: number
|
||||||
|
monoMode: boolean
|
||||||
|
|
||||||
|
context: CanvasRenderingContext2D;
|
||||||
|
|
||||||
page(pageNo: number): void
|
page(pageNo: number): void
|
||||||
|
|
||||||
blit(altData?: ImageData): boolean
|
blit(altData?: ImageData): boolean
|
||||||
|
|
||||||
reset(): void
|
reset(): void
|
||||||
|
|
||||||
|
setLoresPage(page: pageNo, lores: LoresPage): void
|
||||||
|
setHiresPage(page: pageNo, lores: HiresPage): void
|
||||||
|
|
||||||
_80col(on: boolean): void
|
_80col(on: boolean): void
|
||||||
altchar(on: boolean): void
|
altChar(on: boolean): void
|
||||||
|
an3(on: boolean): void
|
||||||
doubleHires(on: boolean): void
|
doubleHires(on: boolean): void
|
||||||
hires(on: boolean): void
|
hires(on: boolean): void
|
||||||
mixed(on: boolean): void
|
mixed(on: boolean): void
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -29,14 +29,17 @@
|
||||||
"@testing-library/dom": "^7.30.3",
|
"@testing-library/dom": "^7.30.3",
|
||||||
"@testing-library/user-event": "^13.1.3",
|
"@testing-library/user-event": "^13.1.3",
|
||||||
"@types/jest": "^26.0.14",
|
"@types/jest": "^26.0.14",
|
||||||
|
"@types/jest-image-snapshot": "^4.3.0",
|
||||||
"@types/micromodal": "^0.3.2",
|
"@types/micromodal": "^0.3.2",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.6.1",
|
"@typescript-eslint/eslint-plugin": "^4.6.1",
|
||||||
"@typescript-eslint/parser": "^4.6.1",
|
"@typescript-eslint/parser": "^4.6.1",
|
||||||
"ajv": "^6.12.0",
|
"ajv": "^6.12.0",
|
||||||
"babel-jest": "^26.6.3",
|
"babel-jest": "^26.6.3",
|
||||||
|
"canvas": "^2.7.0",
|
||||||
"eslint": "^7.22.0",
|
"eslint": "^7.22.0",
|
||||||
"file-loader": "^6.0.0",
|
"file-loader": "^6.0.0",
|
||||||
"jest": "^26.6.3",
|
"jest": "^26.6.3",
|
||||||
|
"jest-image-snapshot": "^4.5.0",
|
||||||
"node-forge": "^0.10.0",
|
"node-forge": "^0.10.0",
|
||||||
"raw-loader": "^4.0.0",
|
"raw-loader": "^4.0.0",
|
||||||
"ts-jest": "^26.5.0",
|
"ts-jest": "^26.5.0",
|
||||||
|
|
@ -48,7 +51,7 @@
|
||||||
"y18n": "^4.0.1"
|
"y18n": "^4.0.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apple2shader": "0.0.1",
|
"apple2shader": "0.0.3",
|
||||||
"micromodal": "^0.4.2"
|
"micromodal": "^0.4.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
||||||
|
|
||||||
|
expect.extend({ toMatchImageSnapshot });
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
export const screenEmu = (function () {
|
||||||
|
return {
|
||||||
|
C: {
|
||||||
|
NTSC_DETAILS: {
|
||||||
|
imageSize: {
|
||||||
|
width: 560,
|
||||||
|
height: 192,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
DisplayConfiguration: class {},
|
||||||
|
Point: class {},
|
||||||
|
ScreenView: class {
|
||||||
|
initOpenGL() {}
|
||||||
|
},
|
||||||
|
Size: class{},
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,258 @@
|
||||||
|
/** @fileoverview Test for canvas.ts. */
|
||||||
|
|
||||||
|
import { VideoPage } from 'js/videomodes';
|
||||||
|
import { LoresPage2D, HiresPage2D, VideoModes2D } from 'js/canvas';
|
||||||
|
import apple2enh_char from 'js/roms/apple2enh_char';
|
||||||
|
import { createImageFromImageData } from 'test/util/image';
|
||||||
|
|
||||||
|
function checkImageData(page: VideoPage) {
|
||||||
|
page.refresh();
|
||||||
|
const img = createImageFromImageData(page.imageData);
|
||||||
|
expect(img).toMatchImageSnapshot();
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('canvas', () => {
|
||||||
|
|
||||||
|
describe('LoresPage', () => {
|
||||||
|
let canvas: HTMLCanvasElement;
|
||||||
|
let lores1: LoresPage2D;
|
||||||
|
let vm: VideoModes2D;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
canvas = document.createElement('canvas');
|
||||||
|
vm = new VideoModes2D(canvas, true);
|
||||||
|
lores1 = new LoresPage2D(vm, 1, apple2enh_char, true);
|
||||||
|
vm.reset();
|
||||||
|
vm.hires(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('text mode', () => {
|
||||||
|
describe('40 column', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders alt chars', () => {
|
||||||
|
vm.altChar(true);
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('80 column', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm._80col(true);
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders alt chars', () => {
|
||||||
|
vm.altChar(true);
|
||||||
|
vm._80col(true);
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('graphics mode', () => {
|
||||||
|
describe('lores', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mixed', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm.mixed(true);
|
||||||
|
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mono', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm.mono(true);
|
||||||
|
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('double lores', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mixed', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm.mixed(true);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mono', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
vm.mono(true);
|
||||||
|
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('HiresPage', () => {
|
||||||
|
let canvas: HTMLCanvasElement;
|
||||||
|
let hires1: HiresPage2D;
|
||||||
|
let vm: VideoModes2D;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
canvas = document.createElement('canvas');
|
||||||
|
vm = new VideoModes2D(canvas, true);
|
||||||
|
hires1 = new HiresPage2D(vm, 1);
|
||||||
|
vm.reset();
|
||||||
|
vm.hires(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('hires', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
for (let page = 0x20; page < 0x40; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
hires1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(hires1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mono', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm.mono(true);
|
||||||
|
|
||||||
|
for (let page = 0x20; page < 0x40; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
hires1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(hires1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('double lores', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
|
||||||
|
const bank0 = hires1.bank0();
|
||||||
|
const bank1 = hires1.bank1();
|
||||||
|
for (let page = 0x20; page < 0x40; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(hires1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mono', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
vm.mono(true);
|
||||||
|
|
||||||
|
const bank0 = hires1.bank0();
|
||||||
|
const bank1 = hires1.bank1();
|
||||||
|
for (let page = 0x20; page < 0x40; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(hires1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
/** @fileoverview Test for canvas.ts. */
|
||||||
|
|
||||||
|
import { VideoPage } from 'js/videomodes';
|
||||||
|
import { LoresPageGL, HiresPageGL, VideoModesGL } from 'js/gl';
|
||||||
|
import apple2enh_char from 'js/roms/apple2enh_char';
|
||||||
|
import { createImageFromImageData } from 'test/util/image';
|
||||||
|
|
||||||
|
function checkImageData(page: VideoPage) {
|
||||||
|
page.refresh();
|
||||||
|
const img = createImageFromImageData(page.imageData);
|
||||||
|
expect(img).toMatchImageSnapshot();
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('gl', () => {
|
||||||
|
|
||||||
|
describe('LoresPage', () => {
|
||||||
|
let canvas: HTMLCanvasElement;
|
||||||
|
let lores1: LoresPageGL;
|
||||||
|
let vm: VideoModesGL;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
canvas = document.createElement('canvas');
|
||||||
|
vm = new VideoModesGL(canvas, true);
|
||||||
|
await vm.ready;
|
||||||
|
lores1 = new LoresPageGL(vm, 1, apple2enh_char, true);
|
||||||
|
vm.reset();
|
||||||
|
vm.hires(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('text mode', () => {
|
||||||
|
describe('40 column', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders alt chars', () => {
|
||||||
|
vm.altChar(true);
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('80 column', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm._80col(true);
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders alt chars', () => {
|
||||||
|
vm.altChar(true);
|
||||||
|
vm._80col(true);
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('graphics mode', () => {
|
||||||
|
describe('lores', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mixed', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm.mixed(true);
|
||||||
|
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
lores1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('double lores', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders mixed', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm.mixed(true);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
|
||||||
|
const bank0 = lores1.bank0();
|
||||||
|
const bank1 = lores1.bank1();
|
||||||
|
for (let page = 0x4; page < 0x8; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(lores1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('HiresPage', () => {
|
||||||
|
let canvas: HTMLCanvasElement;
|
||||||
|
let hires1: HiresPageGL;
|
||||||
|
let vm: VideoModesGL;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
canvas = document.createElement('canvas');
|
||||||
|
vm = new VideoModesGL(canvas, true);
|
||||||
|
hires1 = new HiresPageGL(vm, 1);
|
||||||
|
vm.reset();
|
||||||
|
vm.hires(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('hires', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
for (let page = 0x20; page < 0x40; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
hires1.write(page, off, off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(hires1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('double lores', () => {
|
||||||
|
it('renders', () => {
|
||||||
|
vm.text(false);
|
||||||
|
vm._80col(true);
|
||||||
|
vm.an3(false);
|
||||||
|
|
||||||
|
const bank0 = hires1.bank0();
|
||||||
|
const bank1 = hires1.bank1();
|
||||||
|
for (let page = 0x20; page < 0x40; page++) {
|
||||||
|
for (let off = 0; off < 0x100; off++) {
|
||||||
|
bank0.write(page, off, off);
|
||||||
|
bank1.write(page, off, 255 - off);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkImageData(hires1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const createImageFromImageData = (data: ImageData) => {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = data.width;
|
||||||
|
canvas.height = data.height;
|
||||||
|
const ctx = canvas.getContext('2d')!;
|
||||||
|
ctx.putImageData(data, 0, 0);
|
||||||
|
const url = canvas.toDataURL('image/png');
|
||||||
|
return Buffer.from(url.split(',')[1], 'base64');
|
||||||
|
};
|
||||||
|
|
@ -21,8 +21,11 @@
|
||||||
],
|
],
|
||||||
"js/*": [
|
"js/*": [
|
||||||
"js/*"
|
"js/*"
|
||||||
|
],
|
||||||
|
"test/*": [
|
||||||
|
"test/*"
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"js/**/*",
|
"js/**/*",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue