Fixed #818, improved blocks editor

.env.template

@@ -1,7 +1,7 @@
 PUBLIC_CONTEXT = local
 PUBLIC_FIREBASE_API_KEY = myfakeapikeymyfakeapikeymyfakeapikeymyf
 PUBLIC_FIREBASE_AUTH_DOMAIN = wordplay-dev.firebaseapp.com
-PUBLIC_FIREBASE_PROJECT_ID = demo
+PUBLIC_FIREBASE_PROJECT_ID = demo-wordplay
 PUBLIC_FIREBASE_MESSAGING_SENDER_ID = 123456789123
 PUBLIC_FIREBASE_APP_ID = 1:123456789123:web:1234567890123456789012
 PUBLIC_FIREBASE_MEASUREMENT_ID = G-FAKEFAKEFA

functions/src/index.ts

@@ -23,7 +23,19 @@ const db = getFirestore();
 
 type UserMatch = { uid: string; email: string | null; name: string | null };
 
+// Permit local testing and calls from our two domains.
+const cors = {
+    cors: [
+        '/firebase\.com$/',
+        '/127.0.0.1*/',
+        'http://localhost:5173',
+        'https://test.wordplay.dev',
+        'https://wordplay.dev',
+    ],
+};
+
 export const getCreators = onCall<UserIdentifier[]>(
+    cors,
     async (request): Promise<UserMatch[]> => {
         const users = await admin.auth().getUsers(request.data);
         const matches: UserMatch[] = [];
@@ -42,7 +54,7 @@ export const getCreators = onCall<UserIdentifier[]>(
 export const emailExists = onCall<
     EmailExistsInputs,
     Promise<EmailExistsOutput>
->(async (request) => {
+>(cors, async (request) => {
     const emails = request.data;
     return admin
         .auth()
@@ -70,100 +82,85 @@ export const getTranslations = onCall<{
     from: string;
     to: string;
     text: string[];
-}>(
-    // Permit local testing and calls from our two domains.
-    {
-        cors: [
-            '/firebase\.com$/',
-            '/127.0.0.1*/',
-            '/localhost*/',
-            'https://test.wordplay.dev',
-            'https://wordplay.dev',
-        ],
-    },
-    async (request): Promise<string[] | null> => {
-        const from = request.data.from;
-        const to = request.data.to;
-        const text = request.data.text;
+}>(cors, async (request): Promise<string[] | null> => {
+    const from = request.data.from;
+    const to = request.data.to;
+    const text = request.data.text;
 
-        try {
-            // Creates a Google Translate client
-            const translator = new Translate.v2.Translate();
+    try {
+        // Creates a Google Translate client
+        const translator = new Translate.v2.Translate();
 
-            const [translations] = await translator.translate(text, {
-                from,
-                to,
-            });
+        const [translations] = await translator.translate(text, {
+            from,
+            to,
+        });
 
-            return translations;
-        } catch (e) {
-            console.error(e);
-            return null;
-        }
-    },
-);
+        return translations;
+    } catch (e) {
+        console.error(e);
+        return null;
+    }
+});
 
 /** Given a URL that should refer to an HTML document, sends a GET request to the URL to try to get the document's text. */
-export const getWebpage = onRequest(
-    { cors: true },
-    async (request, response) => {
-        const url: string | undefined =
-            'url' in request.query && typeof request.query.url === 'string'
-                ? decodeURI(request.query['url'])
-                : undefined;
-
-        const lib =
-            url === undefined
-                ? undefined
-                : url.startsWith('https://')
-                  ? https
-                  : http;
-
-        // Cache the response for 10 minutes to minimize requests.
-        response.set('Cache-Control', 'public, max-age=600, s-maxage=600');
-
-        if (lib === undefined || url === undefined) {
-            console.log('Invalid URL ' + url);
-            response.json('invalid-url');
-        } else {
-            const result: string = await new Promise((resolve) => {
-                lib.get(url, (resp) => {
-                    const contentType = resp.headers['content-type'];
-                    if (resp.statusCode !== 200) {
-                        console.error(`GET status: Code: ${resp.statusCode}`);
-                        resolve('not-available');
-                    } else if (!contentType?.startsWith('text/html')) {
-                        console.error(`GET received ${contentType}`);
-                        resolve('not-html');
-                    }
-
-                    // Get the data
-                    let data = '';
-
-                    // A chunk of data has been recieved.
-                    resp.on('data', (chunk) => {
-                        data += chunk;
-                    });
-
-                    // The whole response has been received. Print out the result.
-                    resp.on('end', () => {
-                        console.log('GET success');
-                        resolve(data);
-                    });
-                }).on('error', (err) => {
-                    console.error('GET error: ' + err.message);
+export const getWebpage = onRequest(cors, async (request, response) => {
+    const url: string | undefined =
+        'url' in request.query && typeof request.query.url === 'string'
+            ? decodeURI(request.query['url'])
+            : undefined;
+
+    const lib =
+        url === undefined
+            ? undefined
+            : url.startsWith('https://')
+              ? https
+              : http;
+
+    // Cache the response for 10 minutes to minimize requests.
+    response.set('Cache-Control', 'public, max-age=600, s-maxage=600');
+
+    if (lib === undefined || url === undefined) {
+        console.log('Invalid URL ' + url);
+        response.json('invalid-url');
+    } else {
+        const result: string = await new Promise((resolve) => {
+            lib.get(url, (resp) => {
+                const contentType = resp.headers['content-type'];
+                if (resp.statusCode !== 200) {
+                    console.error(`GET status: Code: ${resp.statusCode}`);
                     resolve('not-available');
+                } else if (!contentType?.startsWith('text/html')) {
+                    console.error(`GET received ${contentType}`);
+                    resolve('not-html');
+                }
+
+                // Get the data
+                let data = '';
+
+                // A chunk of data has been recieved.
+                resp.on('data', (chunk) => {
+                    data += chunk;
                 });
+
+                // The whole response has been received. Print out the result.
+                resp.on('end', () => {
+                    console.log('GET success');
+                    resolve(data);
+                });
+            }).on('error', (err) => {
+                console.error('GET error: ' + err.message);
+                resolve('not-available');
             });
+        });
 
-            // Set the content length header.
-            response.set('Content-Length', `${new Blob([result]).size}`);
+        // Set the content length header.
+        response.set('Content-Length', `${new Blob([result]).size}`);
 
-            // Send the HTML back as JSON-encoded text.
-            response.json(result);
-        }
-    },
-);
+        // Send the HTML back as JSON-encoded text.
+        response.json(result);
+    }
+});
 
 const PurgeDayDelay = 30;
 const MillisecondsPerDay = 24 * 60 * 60 * 1000;
@@ -202,7 +199,7 @@ export const purgeArchivedProjects = onSchedule(
 export const createClass = onCall<
     CreateClassInputs,
     Promise<CreateClassOutput>
->(async (request) => {
+>(cors, async (request) => {
     const auth = admin.auth();
     const { teacher, name, description, students, existing } = request.data;
 

src/app.html

@@ -303,17 +303,34 @@
 
             :root {
                 --color-blue: #648fff;
+                --color-blue-transparent: color-mix(
+                    in srgb,
+                    var(--color-blue) 10%,
+                    transparent
+                );
                 --color-purple: #785ef0;
+                --color-purple-transparent: color-mix(
+                    in srgb,
+                    var(--color-purple) 10%,
+                    transparent
+                );
                 --color-pink: #dc267f;
-                --color-light-pink: #f7d3e4;
+                --color-pink-transparent: color-mix(
+                    in srgb,
+                    var(--color-pink) 2%,
+                    transparent
+                );
                 --color-orange: #fe6100;
                 --color-yellow: #ffb000;
+                --color-yellow-transparent: #ffae004b;
                 --color-white: #ffffff;
                 --color-black: #000000;
                 --color-light-grey: #9f9f9f;
+                --color-light-grey-transparent: #9f9f9f36;
                 --color-very-light-grey: #f3f3f3;
                 --color-dark-grey: #303030;
                 --color-shadow: rgb(0, 0, 0, 0.2);
+                --color-shadow-transparent: rgb(0, 0, 0, 0.05);
 
                 /* Colors */
                 --wordplay-foreground: var(--color-black);
@@ -324,7 +341,7 @@
                 --wordplay-evaluation-color: var(--color-pink);
                 --wordplay-highlight-color: var(--color-yellow);
                 --wordplay-focus-color: var(--color-blue);
-                --wordplay-hover: #feebc3;
+                --wordplay-hover: var(--color-yellow-transparent);
                 --wordplay-error: var(--color-orange);
                 --wordplay-warning: var(--color-yellow);
                 --wordplay-inactive-color: var(--color-light-grey);
@@ -346,12 +363,13 @@
                 --wordplay-editor-indent: 3em;
                 --wordplay-editor-radius: 3px;
                 --wordplay-spacing: 0.5em;
+                --wordplay-spacing-half: 0.25em;
                 --wordplay-font-weight: 400;
                 --wordplay-font-size: 12pt;
                 --wordplay-small-font-size: 10pt;
                 --wordplay-border-width: 1px;
                 --wordplay-focus-width: 4px;
-                --wordplay-border-radius: 5px;
+                --wordplay-border-radius: 8px;
                 --wordplay-code-line-height: 1.6;
                 --wordplay-palette-min-width: 5em;
                 --wordplay-palette-max-width: 15em;
@@ -368,15 +386,17 @@
                 --color-purple: #5b3ce6;
                 --color-purple-transparent: #261862;
                 --color-pink: #ee68a9;
-                --color-light-pink: rgb(77, 15, 45);
+                --color-pink-transparent: rgb(77, 15, 45);
                 --color-orange: #993800;
-                --color-yellow: #d69600;
+                --color-yellow: #b67c00;
+                --color-yellow-transparent: #b67c004b;
                 --color-white: #ffffff;
                 --color-black: #000000;
                 --color-light-grey: #b4b4b4;
                 --color-very-light-grey: #373636;
                 --color-dark-grey: #eaeaea;
-                --color-shadow: rgb(32, 32, 32, 0.2);
+                --color-shadow: rgba(227, 227, 227, 0.8);
+                --color-shadow-transparent: rgba(227, 227, 227, 0.95);
 
                 --wordplay-foreground: var(--color-white);
                 --wordplay-background: var(--color-black);
@@ -386,7 +406,7 @@
                 --wordplay-evaluation-color: var(--color-pink);
                 --wordplay-highlight-color: var(--color-yellow);
                 --wordplay-focus-color: var(--color-blue);
-                --wordplay-hover: #463000;
+                --wordplay-hover: var(--color-yellow-transparent);
                 --wordplay-error: var(--color-orange);
                 --wordplay-warning: var(--color-yellow);
                 --wordplay-inactive-color: var(--color-light-grey);
@@ -486,15 +506,15 @@
 
             @keyframes pulse {
                 0% {
-                    stroke-width: calc(var(--wordplay-border-width) * 2);
+                    stroke-width: var(--wordplay-focus-width);
                 }
 
                 70% {
                     stroke-width: var(--wordplay-border-width);
                 }
 
                 100% {
-                    stroke-width: calc(var(--wordplay-border-width) * 2);
+                    stroke-width: var(--wordplay-focus-width);
                 }
             }
 
@@ -653,6 +673,27 @@
                 border-bottom: var(--wordplay-border-width) solid
                     var(--wordplay-border-color);
             }
+
+            a {
+                color: var(--wordplay-highlight-color);
+                text-decoration: none;
+                /* In case a parent disables pointer events, we need to enable them here. */
+                pointer-events: auto;
+            }
+
+            /* Links in paragraphs should have underlines for visibility. */
+            p > a {
+                text-decoration: calc(var(--wordplay-focus-width) / 2) underline
+                    var(--wordplay-highlight-color);
+            }
+
+            a:focus,
+            a:hover {
+                outline: none;
+                text-decoration: underline;
+                text-decoration-thickness: var(--wordplay-focus-width);
+                text-decoration-color: var(--wordplay-focus-color);
+            }
         </style>
 
         %sveltekit.head%

src/basis/Basis.test.ts

@@ -1,7 +1,6 @@
 import Templates from '@concepts/Templates';
 import UnusedBind from '@conflicts/UnusedBind';
 import DefaultLocales from '@locale/DefaultLocales';
-import Context from '@nodes/Context';
 import type Node from '@nodes/Node';
 import Source from '@nodes/Source';
 import UnparsableExpression from '@nodes/UnparsableExpression';
@@ -16,7 +15,7 @@ const basis = Basis.getLocalizedBasis(DefaultLocales);
 
 const source = new Source('basis', '');
 const project = Project.make(null, 'test', source, [], DefaultLocale);
-const context = new Context(project, source);
+const context = project.getContext(source);
 
 function checkBasisNodes(node: Node) {
     // Check for syntax errors

src/basis/InternalExpression.ts

@@ -52,7 +52,7 @@ export default class InternalExpression extends SimpleExpression {
     }
 
     getPurpose() {
-        return Purpose.Evaluate;
+        return Purpose.Hidden;
     }
 
     computeType(): Type {

src/basis/Iteration.ts

@@ -87,7 +87,7 @@ export class Iteration<State = any> extends Expression {
     }
 
     getPurpose(): Purpose {
-        return Purpose.Evaluate;
+        return Purpose.Hidden;
     }
 
     computeType() {