Lock screen when loading Boriel BASIC

Author: stever

apps/web/public/style.css

@@ -100,7 +100,7 @@ code {
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.5);
     transition: opacity 350ms;
     visibility: hidden;
     opacity: 0;

apps/web/src/components/DemoAssemblyEditor.jsx

@@ -5,6 +5,7 @@ import CodeMirror from "./CodeMirror";
 import { setAssemblyCode, runAssembly } from "../redux/demo/actions";
 import "../lib/syntax/pasmo";
 import { dashboardLock } from "../dashboard_lock";
+import { showLoading } from "../dashboard_loading";
 import LineNumbersToggle from "./LineNumbersToggle";
 import { Divider } from "primereact/divider";
 
@@ -51,6 +52,7 @@ export function DemoAssemblyEditor() {
         className="margin-top-8"
         onClick={() => {
           dashboardLock();
+          showLoading();
           dispatch(runAssembly());
         }}
       />

apps/web/src/components/DemoSinclairBasicEditor.jsx

@@ -5,6 +5,7 @@ import CodeMirror from "./CodeMirror";
 import {setSinclairBasicCode, runSinclairBasic} from "../redux/demo/actions";
 import "../lib/syntax/zmakebas";
 import {dashboardLock} from "../dashboard_lock";
+import {showLoading} from "../dashboard_loading";
 import LineNumbersToggle from "./LineNumbersToggle";
 import {Divider} from "primereact/divider";
 
@@ -51,6 +52,7 @@ export function DemoSinclairBasicEditor() {
                 className="margin-top-8"
                 onClick={() => {
                     dashboardLock();
+                    showLoading();
                     dispatch(runSinclairBasic());
                 }}
             />

apps/web/src/components/LoadingScreen.jsx

@@ -1,5 +1,10 @@
-import React from "react";
-
-export default function LoadingScreen() {
-    return <div className="dashboard-loading-screen"/>
-}
+import React from "react";
+import {ProgressSpinner} from "primereact/progressspinner";
+
+export default function LoadingScreen() {
+    return (
+        <div className="dashboard-loading-screen">
+            <ProgressSpinner/>
+        </div>
+    )
+}

apps/web/src/components/LockScreen.jsx

@@ -1,14 +1,13 @@
 import React from "react";
-import {ProgressSpinner} from "primereact/progressspinner";
 
 export default function LockScreen() {
     return (
         <React.Fragment>
             <div className="dashboard-lock-screen" style={styles.fullPage}/>
             <div className="dashboard-lock-screen" style={styles.contentBlanker}/>
             <div className="dashboard-lock-screen" style={styles.container}>
-                <div className="center-screen" style={styles.centerScreen}>
-                    <ProgressSpinner/>
+                <div className="center-screen">
+
                 </div>
             </div>
         </React.Fragment>
@@ -38,7 +37,7 @@ const styles = {
         width: '100%',
         height: '100vh',
         backgroundColor: 'black',
-        opacity: 0.5,
+        opacity: 0.05,
         display: 'none',
         userSelect: 'none'
     },
@@ -53,12 +52,5 @@ const styles = {
         height: '100vh',
         display: 'none',
         userSelect: 'none'
-    },
-    centerScreen: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%'
     }
 };

apps/web/src/components/ProjectEditor.jsx

@@ -22,6 +22,7 @@ import "../lib/syntax/z88dk-c";
 import "../lib/syntax/sdcc";
 import "../lib/syntax/zxbasic";
 import { dashboardLock } from "../dashboard_lock";
+import { showLoading } from "../dashboard_loading";
 import clsx from "clsx";
 import { Dialog } from "primereact/dialog";
 import { InputText } from "primereact/inputtext";
@@ -157,6 +158,7 @@ export function ProjectEditor() {
         className={clsx("mt-2 mr-2", isMobile && "ml-2")}
         onClick={() => {
           dashboardLock();
+          showLoading();
           dispatch(runProjectCode());
         }}
       />

apps/web/src/dashboard_loading.js

@@ -3,7 +3,7 @@ export function showLoading() {
     for (let i = 0; i < elems.length; i++) {
         const elem = elems[i];
         elem.style.visibility = 'visible';
-        elem.style.opacity = '0.5';
+        elem.style.opacity = '1';
     }
 }
 

apps/web/src/dashboard_lock.js

@@ -1,3 +1,5 @@
+import {hideLoading} from "./dashboard_loading";
+
 export function dashboardLock() {
     const elems = document.getElementsByClassName('dashboard-lock-screen');
     for (let i = 0; i < elems.length; i++) {
@@ -12,4 +14,8 @@ export function dashboardUnlock() {
         const elem = elems[i];
         elem.style.display = 'none';
     }
+
+    // The run-program overlay (with spinner) is shown only on run paths, but is
+    // torn down here so it can't be stranded by any lock-release site.
+    hideLoading();
 }