Define CSS styles for the Lincoln Writer output.

TX-2 · Jul 21, 2024 · 55865dd · 55865dd
1 parent 7a5ffa3
commit 55865dd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/tx2-web/public/index.html b/tx2-web/public/index.html
@@ -3,21 +3,37 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Styles which are directly mentioned in the WASM code are --
+    -- defined here so that they don't get renamed by the webpack
+    -- style sheet loaders.  Names are short becuase the class names
+    -- are frequently used.
+    -->
+    <style>
+      .lwb {
+          color: black;
+          font-weight: bold;
+      }
+
+      .lwr {
+          color: red;
+          font-weight: bold;
+      }
+    </style>
     <title>TX-2</title>
   </head>
 
   <body>
     <noscript>
       <div class="box nojs-warning">
-	<p>This page contains webassembly and Javascript content.  To
-	  see it, please enable Javascript in your browser.
-	</p>
-	<p>
-	  If you don't want to do that, please see
-	  <a href="https://github.com/TX-2/TX-2-simulator/blob/main/README.md">the
-	    README.md file</a> for information about how to run the
-	  simulator using a locally-built binary.
-	</p>
+        <p>This page contains webassembly and Javascript content.  To
+          see it, please enable Javascript in your browser.
+        </p>
+        <p>
+          If you don't want to do that, please see
+          <a href="https://github.com/TX-2/TX-2-simulator/blob/main/README.md">the
+            README.md file</a> for information about how to run the
+          simulator using a locally-built binary.
+        </p>
       </div>
     </noscript>
     <div id="root"></div>

diff --git a/tx2-web/rust/src/lw.rs b/tx2-web/rust/src/lw.rs
@@ -6,8 +6,10 @@ use base::Unsigned6Bit;
 
 fn generate_html_for_char(uch: char, attributes: &LincolnState, _advance: bool) -> String {
     let colour_class = match attributes.colour {
-        Colour::Black => "lw-black",
-        Colour::Red => "lw-red",
+        // These styles are defined in index.html, not in CSS files
+        // (because those styles get renamed).
+        Colour::Black => "lwb",
+        Colour::Red => "lwr",
     };
     let (script_open, script_close) = match attributes.script {
         Script::Normal => ("", ""),