Skip to content
Snippets Groups Projects
Verified Commit 8ae6949b authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

refactor: removed old canvas

parent 43b098dd
No related branches found
No related tags found
1 merge request!9Version 0.4.0 🍾
Pipeline #1371 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
examples/web/index.css
+ 0
− 72
View file @ 8ae6949b
......@@ -56,78 +56,6 @@ p {
text-align: center;
}
.main > .side-left .canvas-container {
max-width: 100%;
}
.main > .side-left .canvas-container.fullscreen {
align-items: center;
background-color: #2d2d2d;
display: flex;
height: 100%;
justify-content: center;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 6;
}
.main > .side-left .canvas-container > .canvas-close {
bottom: 22px;
display: none;
position: absolute;
right: 22px;
user-select: none;
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
.main > .side-left .canvas-container > .canvas-close > img {
height: 32px;
width: 32px;
}
.main > .side-left .canvas-container.fullscreen > .canvas-close {
display: block;
}
.main > .side-left .canvas-container > .canvas-frame {
background-color: #1b1a17;
border: 2px solid #50cb93;
font-size: 0px;
margin-top: 78px;
max-width: 320px;
padding: 8px 8px 8px 8px;
}
@media only screen and (max-width: 1120px) {
.main > .side-left .canvas-container > .canvas-frame {
margin-top: 12px;
}
}
.main > .side-left .canvas-container.fullscreen > .canvas-frame {
background-color: transparent;
border: none;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
-o-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
-ms-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
-khtml-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
margin: 0px 0px 0px 0px;
max-width: unset;
padding: 0px 0px 0px 0px;
}
.main > .side-left .canvas-container > .canvas-frame > .canvas {
width: 100%;
}
.main > .side-right {
flex: 0 1;
max-width: 100%;
......
examples/web/index.html
+ 0
− 8
View file @ 8ae6949b
......@@ -16,14 +16,6 @@
<div id="app"></div>
<div class="main">
<div class="side-left">
<div id="canvas-container" class="canvas-container">
<span id="canvas-close" class="magnify-button canvas-close">
<img class="large" src="res/minimise.svg" alt="minimise" />
</span>
<div class="canvas-frame">
<canvas id="engine-canvas" class="canvas" width="320" height="288"></canvas>
</div>
</div>
</div>
<div class="side-right">
<h1>Boytacean <a id="version" href="https://gitlab.stage.hive.pt/joamag/boytacean/-/blob/master/CHANGELOG.md" target="_blank"></a> <img class="logo-image" src="res/thunder.png" alt="thunder" />
......
examples/web/index.ts
+ 3
− 187
View file @ 8ae6949b
......@@ -78,12 +78,6 @@ class GameboyEmulator extends Observable implements Emulator {
private timerFrequency: number = TIMER_HZ;
private idleFrequency: number = IDLE_HZ;
private canvas: HTMLCanvasElement | null = null;
private canvasScaled: HTMLCanvasElement | null = null;
private canvasCtx: CanvasRenderingContext2D | null = null;
private canvasScaledCtx: CanvasRenderingContext2D | null = null;
private image: ImageData | null = null;
private videoBuff: DataView | null = null;
private toastTimeout: number | null = null;
private paused: boolean = false;
private nextTickTime: number = 0;
......@@ -162,13 +156,10 @@ class GameboyEmulator extends Observable implements Emulator {
// system and the machine state (to be able to recover)
// also sets the default color on screen to indicate the issue
if (isPanic) {
await this.clearCanvas(undefined, {
image: require("./res/storm.png"),
imageScale: 0.2
});
await wasm();
await this.start({ restore: false });
this.trigger("error");
}
}
......@@ -224,12 +215,6 @@ class GameboyEmulator extends Observable implements Emulator {
this.gameBoy!.ppu_mode() == PpuMode.VBlank &&
this.gameBoy!.ppu_frame() != lastFrame
) {
// updates the canvas object with the new
// visual information coming in
this.updateCanvas(
this.gameBoy!.frame_buffer_eager(),
PixelFormat.RGB
);
lastFrame = this.gameBoy!.ppu_frame();
// triggers the frame event indicating that
......@@ -344,14 +329,13 @@ class GameboyEmulator extends Observable implements Emulator {
this.registerKeys(),
this.registerButtons(),
this.registerKeyboard(),
this.registerCanvas(),
this.registerToast(),
this.registerModal()
]);
}
async init() {
await Promise.all([this.initBase(), this.initCanvas()]);
await Promise.all([this.initBase()]);
}
registerDrop() {
......@@ -429,10 +413,6 @@ class GameboyEmulator extends Observable implements Emulator {
this.logicFrequency - FREQUENCY_DELTA
);
break;
case "Escape":
this.minimize();
break;
}
});
......@@ -511,11 +491,6 @@ class GameboyEmulator extends Observable implements Emulator {
}
});
const buttonFullscreen = document.getElementById("button-fullscreen")!;
buttonFullscreen.addEventListener("click", () => {
this.maximize();
});
const buttonKeyboard = document.getElementById("button-keyboard")!;
buttonKeyboard.addEventListener("click", () => {
const sectionKeyboard =
......@@ -734,13 +709,6 @@ class GameboyEmulator extends Observable implements Emulator {
});
}
registerCanvas() {
const canvasClose = document.getElementById("canvas-close")!;
canvasClose.addEventListener("click", () => {
this.minimize();
});
}
registerToast() {
const toast = document.getElementById("toast")!;
toast.addEventListener("click", () => {
......@@ -775,104 +743,6 @@ class GameboyEmulator extends Observable implements Emulator {
this.setVersion(info.version);
}
async initCanvas() {
// initializes the off-screen canvas that is going to be
// used in the drawing process
this.canvas = document.createElement("canvas");
this.canvas.width = DISPLAY_WIDTH;
this.canvas.height = DISPLAY_HEIGHT;
this.canvasCtx = this.canvas.getContext("2d")!;
this.canvasScaled = document.getElementById(
"engine-canvas"
) as HTMLCanvasElement;
this.canvasScaled.width =
this.canvasScaled.width * window.devicePixelRatio;
this.canvasScaled.height =
this.canvasScaled.height * window.devicePixelRatio;
this.canvasScaledCtx = this.canvasScaled.getContext("2d")!;
this.canvasScaledCtx.scale(
this.canvasScaled.width / this.canvas.width,
this.canvasScaled.height / this.canvas.height
);
this.canvasScaledCtx.imageSmoothingEnabled = false;
this.image = this.canvasCtx.createImageData(
this.canvas.width,
this.canvas.height
);
this.videoBuff = new DataView(this.image.data.buffer);
}
updateCanvas(pixels: Uint8Array, format: PixelFormat = PixelFormat.RGB) {
let offset = 0;
for (let index = 0; index < pixels.length; index += format) {
const color =
(pixels[index] << 24) |
(pixels[index + 1] << 16) |
(pixels[index + 2] << 8) |
(format == PixelFormat.RGBA ? pixels[index + 3] : 0xff);
this.videoBuff!.setUint32(offset, color);
offset += PixelFormat.RGBA;
}
this.canvasCtx!.putImageData(this.image!, 0, 0);
this.canvasScaledCtx!.drawImage(this.canvas!, 0, 0);
}
async clearCanvas(
color = PIXEL_UNSET_COLOR,
{
image = null,
imageScale = 1
}: { image?: string | null; imageScale?: number } = {}
) {
this.canvasScaledCtx!.fillStyle = `#${color
.toString(16)
.toUpperCase()}`;
this.canvasScaledCtx!.fillRect(
0,
0,
this.canvasScaled!.width,
this.canvasScaled!.height
);
// in case an image was requested then uses that to load
// an image at the center of the screen properly scaled
if (image) {
const img = await new Promise<HTMLImageElement>((resolve) => {
const img = new Image();
img.onload = () => {
resolve(img);
};
img.src = image;
});
const [imgWidth, imgHeight] = [
img.width * imageScale * window.devicePixelRatio,
img.height * imageScale * window.devicePixelRatio
];
const [x0, y0] = [
this.canvasScaled!.width / 2 - imgWidth / 2,
this.canvasScaled!.height / 2 - imgHeight / 2
];
this.canvasScaledCtx!.setTransform(1, 0, 0, 1, 0, 0);
try {
this.canvasScaledCtx!.drawImage(
img,
x0,
y0,
imgWidth,
imgHeight
);
} finally {
this.canvasScaledCtx!.scale(
this.canvasScaled!.width / this.canvas!.width,
this.canvasScaled!.height / this.canvas!.height
);
}
}
}
async showToast(message: string, error = false, timeout = 3500) {
const toast = document.getElementById("toast")!;
toast.classList.remove("error");
......@@ -1015,60 +885,6 @@ class GameboyEmulator extends Observable implements Emulator {
this.start({ engine: null });
}
toggleWindow() {
this.maximize();
}
/**
* Maximizes the emulator's viewport taking up all the available
* window space. This method is responsible for keeping the aspect
* ratio of the emulator canvas according to the width/height ratio.
*/
maximize() {
const canvasContainer = document.getElementById("canvas-container")!;
canvasContainer.classList.add("fullscreen");
window.addEventListener("resize", this.crop);
this.crop();
}
/**
* Restore the emulator's viewport to the minimal size, should make all
* the other emulator's meta-information (info, buttons, etc.) visible.
*/
minimize() {
const canvasContainer = document.getElementById("canvas-container")!;
const engineCanvas = document.getElementById("engine-canvas")!;
canvasContainer.classList.remove("fullscreen");
engineCanvas.style.width = "";
engineCanvas.style.height = "";
window.removeEventListener("resize", this.crop);
}
crop() {
// @todo let's make this more flexible
const engineCanvas = document.getElementById("engine-canvas")!;
// calculates the window ratio as this is fundamental to
// determine the proper way to crop the fullscreen
const windowRatio = window.innerWidth / window.innerHeight;
// in case the window is wider (more horizontal than the base ratio)
// this means that we must crop horizontally
if (windowRatio > DISPLAY_RATIO) {
engineCanvas.style.width = `${
window.innerWidth * (DISPLAY_RATIO / windowRatio)
}px`;
engineCanvas.style.height = `${window.innerHeight}px`;
} else {
engineCanvas.style.width = `${window.innerWidth}px`;
engineCanvas.style.height = `${
window.innerHeight * (windowRatio / DISPLAY_RATIO)
}px`;
}
}
async fetchRom(romPath: string): Promise<[string, Uint8Array]> {
// extracts the name of the ROM from the provided
// path by splitting its structure
......
examples/web/react/app.tsx
+ 17
− 0
View file @ 8ae6949b
......@@ -8,6 +8,7 @@ import {
ButtonContainer,
ButtonIncrement,
ButtonSwitch,
ClearHandler,
Display,
DrawHandler,
Footer,
......@@ -98,6 +99,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
const [romInfo, setRomInfo] = useState<RomInfo>({});
const [framerate, setFramerate] = useState(0);
const frameRef = useRef<boolean>(false);
const errorRef = useRef<boolean>(false);
const getPauseText = () => (paused ? "Resume" : "Pause");
const getPauseIcon = () =>
paused ? require("../res/play.svg") : require("../res/pause.svg");
......@@ -126,6 +128,13 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
setFramerate(emulator.getFramerate());
});
};
const onClearHandler = (handler: ClearHandler) => {
if (errorRef.current) return;
errorRef.current = true;
emulator.bind("error", async () => {
await handler(undefined, require("../res/storm.png"), 0.2);
});
};
useEffect(() => {
document.body.style.backgroundColor = `#${getBackground()}`;
});
......@@ -133,6 +142,13 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
setFullscreen(false);
event.stopPropagation();
event.preventDefault();
}
if (event.key === "f" && event.ctrlKey === true) {
setFullscreen(true);
event.stopPropagation();
event.preventDefault();
}
});
emulator.bind("loaded", () => {
......@@ -154,6 +170,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
<Display
fullscreen={fullscreen}
onDrawHandler={onDrawHandler}
onClearHandler={onClearHandler}
onMinimize={onMinimize}
/>
</div>
......
examples/web/react/components/display/display.tsx
+ 79
− 1
View file @ 8ae6949b
......@@ -3,6 +3,8 @@ import { PixelFormat } from "../../app";
import "./display.css";
const PIXEL_UNSET_COLOR = 0x1b1a17ff;
declare const require: any;
/**
......@@ -11,6 +13,12 @@ declare const require: any;
*/
export type DrawHandler = (pixels: Uint8Array, format: PixelFormat) => void;
export type ClearHandler = (
color?: number,
image?: string,
imageScale?: number
) => Promise<void>;
type DisplayOptions = {
width: number;
height: number;
......@@ -25,10 +33,12 @@ type DisplayProps = {
fullscreen?: boolean;
style?: string[];
onDrawHandler?: (caller: DrawHandler) => void;
onClearHandler?: (caller: ClearHandler) => void;
onMinimize?: () => void;
};
type CanvasContents = {
canvas: HTMLCanvasElement;
canvasCtx: CanvasRenderingContext2D;
canvasBuffer: HTMLCanvasElement;
canvasBufferCtx: CanvasRenderingContext2D;
......@@ -42,6 +52,7 @@ export const Display: FC<DisplayProps> = ({
fullscreen = false,
style = [],
onDrawHandler,
onClearHandler,
onMinimize
}) => {
options = {
......@@ -88,12 +99,22 @@ export const Display: FC<DisplayProps> = ({
}, [canvasRef, fullscreen]);
if (onDrawHandler) {
onDrawHandler((pixels: Uint8Array, format: PixelFormat) => {
onDrawHandler((pixels, format) => {
if (!canvasContentsRef.current) return;
updateCanvas(canvasContentsRef.current, pixels, format);
});
}
if (onClearHandler) {
onClearHandler(async (color, image, imageScale) => {
if (!canvasContentsRef.current) return;
await clearCanvas(canvasContentsRef.current, color, {
image: image,
imageScale: imageScale
});
});
}
return (
<div id="display" className={classes()}>
<span
......@@ -151,6 +172,7 @@ const initCanvas = (
canvasCtx.imageSmoothingEnabled = false;
return {
canvas: canvas,
canvasCtx: canvasCtx,
canvasBuffer: canvasBuffer,
canvasBufferCtx: canvasBufferCtx,
......@@ -178,6 +200,62 @@ const updateCanvas = (
canvasContents.canvasCtx.drawImage(canvasContents.canvasBuffer, 0, 0);
};
const clearCanvas = async (
canvasContents: CanvasContents,
color = PIXEL_UNSET_COLOR,
{
image = null,
imageScale = 1
}: { image?: string | null; imageScale?: number } = {}
) => {
// uses the "clear" color to fill a rectangle with the complete
// size of the canvas contents
canvasContents.canvasCtx.fillStyle = `#${color.toString(16).toUpperCase()}`;
canvasContents.canvasCtx.fillRect(
0,
0,
canvasContents.canvas.width,
canvasContents.canvas.height
);
// in case an image was requested then uses that to load
// an image at the center of the screen properly scaled
if (image) {
await drawImageCanvas(canvasContents, image, imageScale);
}
};
const drawImageCanvas = async (
canvasContents: CanvasContents,
image: string,
imageScale = 1.0
) => {
const img = await new Promise<HTMLImageElement>((resolve) => {
const img = new Image();
img.onload = () => {
resolve(img);
};
img.src = image;
});
const [imgWidth, imgHeight] = [
img.width * imageScale * window.devicePixelRatio,
img.height * imageScale * window.devicePixelRatio
];
const [x0, y0] = [
canvasContents.canvas.width / 2 - imgWidth / 2,
canvasContents.canvas.height / 2 - imgHeight / 2
];
canvasContents.canvasCtx.setTransform(1, 0, 0, 1, 0, 0);
try {
canvasContents.canvasCtx.drawImage(img, x0, y0, imgWidth, imgHeight);
} finally {
canvasContents.canvasCtx.scale(
canvasContents.canvas.width / canvasContents.canvasBuffer.width,
canvasContents.canvas.height / canvasContents.canvasBuffer.height
);
}
};
const crop = (ratio: number): [number, number] => {
// calculates the window ratio as this is fundamental to
// determine the proper way to crop the fullscreen
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment