feat: initial display support

examples/web/react/app.tsx

 import React, { FC, useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 
+declare const require: any;
+
 import {
     Button,
     ButtonContainer,
     ButtonIncrement,
     ButtonSwitch,
+    Display,
     Footer,
     Info,
     Link,
@@ -61,7 +64,13 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
                     João Magalhães
                 </Link>
             </Footer>
-            <PanelSplit left={<div>This is the left panel</div>}>
+            <PanelSplit
+                left={
+                    <div>
+                        <Display />
+                    </div>
+                }
+            >
                 <Title
                     text={emulator.getName()}
                     version={emulator.getVersion()}

examples/web/react/components/display/display.css

+.display {
+    max-width: 100%;
+}
+
+.display.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;
+}
+
+.display > .display-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;
+}
+
+.display > .display-close > img {
+    height: 32px;
+    width: 32px;
+}
+
+.display.fullscreen > .display-close {
+    display: block;
+}
+
+.display > .display-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) {
+    .display > .display-frame {
+        margin-top: 12px;
+    }
+}
+
+.display.fullscreen > .display-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;
+}
+
+.display > .display-frame > .display-canvas {
+    width: 100%;
+}

examples/web/react/components/display/display.tsx

+import React, { FC, useState } from "react";
+
+import "./display.css";
+
+declare const require: any;
+
+type DisplayOptions = {
+    width: number;
+    height: number;
+    scale?: number;
+};
+
+type DisplayProps = {
+    options?: DisplayOptions;
+    size?: string;
+    style?: string[];
+};
+
+export const Display: FC<DisplayProps> = ({
+    options = {},
+    size = "small",
+    style = []
+}) => {
+    const classes = () => ["display", size, ...style].join(" ");
+    options = { ...options, ...{ width: 320, height: 288 } };
+    if (!options.scale) {
+        options.scale = window.devicePixelRatio ? window.devicePixelRatio : 1;
+    }
+    return (
+        <div id="display" className={classes()}>
+            <span id="display-close" className="magnify-button canvas-close">
+                <img
+                    className="large"
+                    src={require("./minimise.svg")}
+                    alt="minimise"
+                />
+            </span>
+            <div className="display-frame">
+                <canvas
+                    id="display-canvas"
+                    className="canvas"
+                    width={options.width * options.scale}
+                    height={options.height * options.scale}
+                    style={{
+                        width: `${options.width}px`,
+                        height: `${options.height}px`
+                    }}
+                ></canvas>
+            </div>
+        </div>
+    );
+};
+
+export default Display;

examples/web/react/components/display/minimise.svg

+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="minimiseIconTitle" stroke="#ffffff" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#ffffff"> <title id="minimiseIconTitle">Minimise View</title> <polyline points="8 3 8 8 3 8"/> <polyline points="21 8 16 8 16 3"/> <polyline points="3 16 8 16 8 21"/> <polyline points="16 21 16 16 21 16"/> </svg>
\ No newline at end of file

examples/web/react/components/index.ts

@@ -2,6 +2,7 @@ export * from "./button/button";
 export * from "./button-container/button-container";
 export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
+export * from "./display/display";
 export * from "./footer/footer";
 export * from "./info/info";
 export * from "./link/link";