uva-cs · winstliu · Mar 10, 2020 · Mar 10, 2020 · Mar 10, 2020 · Mar 11, 2020
diff --git a/book/.gitignore b/book/.gitignore
@@ -1,10 +1,13 @@
 *.aux
 *.bbl
 *.blg
+*.fdb_latexmk
+*.fls
 *.lof
 *.log
 *.lol
 *.lot
+*.synctex.gz
 *.toc
 *.blg
 *.bbl

diff --git a/book/ibcm-chapter.pdf b/book/ibcm-chapter.pdf
diff --git a/book/ibcm.tex b/book/ibcm.tex
@@ -735,21 +735,13 @@ \section{The IBCM Simulator/Debugger}
   you will lose any and all changes you have made to the memory
   locations!
 
-\item The simulator page is a PHP script, which means that it will not
-  work if you are viewing it as a local file (if the beginning of your
-  URL is ``file://'' instead of ``http://''), or if the web server
-  hosting this page does not have PHP installed (this latter
-  restriction includes UVa's Collab web server).
-
-\item Browser compatibility: It has been tested in Internet Explorer
-  under Windows, Safari under Mac OS X, and Firefox under Windows, Mac
-  OS X, and Ubuntu Linux. Note that the display of the changing of the
-  values as the simulation is run (the PC, memory values, etc.) will
-  only work on some browser / operating system combinations (Firefox,
-  in particular, works well for this). The other browsers will have
-  the same end state after the program is run, but will not animate
-  the execution of the IBCM program when 'Run' is pressed (the 'Step'
-  command will still animate each step).
+\item Browser compatibility: The simulator should work under any major
+  browsers released after 2018. Note that the display of the changing
+  of the values as the simulation is run (the PC, memory values, etc.)
+  only works under Firefox. The other browsers will have the same end
+  state after the program is run, but will not animate the execution
+  of the IBCM program when 'Run' is pressed (the 'Step' command will
+  still animate each step).
 
 \item The format of your program file is very rigid~-- the first four
   characters of each line are interpreted as a hexadecimal number. The
@@ -1312,12 +1304,10 @@ \subsection{Materials Available}
   One of the assignments is to write a quine, or an IBCM program that
   will print itself out~-- the smallest quine produced is nine IBCM
   commands.
-\item An online PHP/Javascript simulator, which is the primary way that
+\item An online Javascript simulator, which is the primary way that
   the students program in IBCM.  This is shown above in
-  Figure~\ref{wwwinterface}.  The PHP is used to allow loading of an
-  IBCM program from a text file; the Javascript implements the IBCM
-  simulator in the browser itself.  The simulator works across all
-  major browsers on all major operating systems.
+  Figure~\ref{wwwinterface}.  The simulator works across all major
+  browsers released after 2018.
 \item A C++-based command-line program, which can both compile and
   execute IBCM programs.  Not surprisingly, this is much faster than
   the online simulator.  This is particularly useful for automated

diff --git a/ibcm/directions.html b/ibcm/directions.html
diff --git a/ibcm/ibcm.css b/ibcm/ibcm.css
@@ -4,12 +4,84 @@
 /*  Created Day 01.12.2006                                  */
 /* ======================================================== */
 
+* {
+    box-sizing: border-box;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 1rem;
+    row-gap: 1rem;
+}
+
+.grid .settings {
+    grid-column: 1 / 3;
+}
+
+#instructionsTable {
+    width: 300px;
+}
+
+#instructionsTable th {
+    position: sticky;
+    top: -2px; /* counteract the 2px border-top */
+    background-color: #ffffff;
+}
+
+.controls .internal {
+    position: sticky;
+    -webkit-position: sticky; /* Safari is still prefixed as of Safari 13, released Sept. 2019 */
+    top: 1rem;
+}
+
+.divider {
+    margin: 1.5rem 0;
+}
+
+.input-group {
+    display: grid;
+    margin-bottom: 1.5rem;
+    grid-template-columns: 1fr 1fr;
+}
+
+.input-group label {
+    text-align: right;
+    margin-right: 0.5rem;
+}
+
+.control-grid {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.control-grid button {
+    margin: 0 0.25rem;
+}
+
+.output-group {
+    text-align: center;
+}
+
+.output-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+.monospace-input {
+    font-family: monospace;
+}
+
+.active {
+    font-style: italic;
+}
+
 body {
     margin: 0px;
     background: url(img/top_bg.gif);
     background-repeat: repeat-x;
     font-family: Verdana, Arial, sans-serif;
-    font-size: .6em;
 }
 
 p {
@@ -78,7 +150,7 @@ blockquote{
 #wrap {
     margin-left: auto;
     margin-right: auto;
-    width: 730px;
+    width: 50vw;
 }
 
 
@@ -96,7 +168,7 @@ blockquote{
 #top h2 {
     color: White;
     letter-spacing: 3px;
-    font-size: 2.4em;
+    font-size: 1.5em;
     font-weight: normal;
     position: relative;
     margin: 0px;
@@ -302,24 +374,19 @@ blockquote{
 
 
 /**** Table ***/
-div#tbl-container {
-    width: 309px;
-    height: 750px;
-    overflow: auto;
-/*  scrollbar-base-color:#ffeaff;*/
-}
-
 table {
     table-layout: fixed;
     border-collapse: collapse;
     background-color: #f5f5f5; /* whitesmoke */
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
 }
 
-table.foo {
-    table-layout: fixed;
-    border-collapse: collapse;
-    background-color: #f5f5f5; /* whitesmoke */
-    margin-right: auto;
+table td, table th {
+    padding: 0.5rem;
+    border: 1px solid gray;
+}
+
+table th {
+    border-top: 2px solid gray;
+    border-bottom: 2px solid gray;
 }
diff --git a/ibcm/ibcm.html b/ibcm/ibcm.html
@@ -18,8 +18,8 @@ <h1 id="program-and-data-representation-itty-bitty-computing-machine-ibcm">Progr
 <p>IBCM was described in a SIGCSE 2011 article: &quot;<a href="http://dl.acm.org/citation.cfm?id=1953273">IBCM: The Itty Bitty Computing Machine</a>&quot; by Aaron Bloomfield and William Wulf (Proceedings of the 42nd ACM Technical Symposium on Computer Science Education (SIGCSE), March 2011, Dallas, TX); that article describes the Turing completeness of IBCM. Due to copyright restrictions, that article cannot be included in this repository. However, much of that material is similar to the material found in the <a href="../book/index.html">book chapter</a> on IBCM.</p>
 <p>The primary mechanism for learning IBCM is through the <a href="../slides/07-ibcm.html">IBCM slide set</a> and the <a href="../book/ibcm-chapter.pdf">IBCM book chapter</a>. The material in both of those largely duplicates itself, but in different formats. IBCM is utilized through an online set of web pages, described next. A few C++ utilities are described at the bottom of this page.</p>
 <h2 id="website">Website</h2>
-<p>The IBCM is utilized through an online series of webpages. The IBCM simulator needs PHP in order to run, and thus must be run from a web server (i.e., not as a local file). Most of the computational load is on the client side (via Javascript), and little is on the server side. There are a few mirros of this website available, which are listed below. All the necessary code to run a separate copy are included in this repository.</p>
-<p>The primary file for the website is <a href="index.html" class="uri">index.html</a>, and the directions are on the <a href="directions.html" class="uri">directions.html</a> page. The simulator itself is on the <a href="simulator.php" class="uri">simulator.php</a> page -- but as described above, this must be run on an actual web server. Two supporting files (<a href="simulator.js" class="uri">simulator.js</a> and <a href="ibcm.css" class="uri">ibcm.css</a>) and the entire img/ directory are needed as well. Note that two of the programs listed below (<a href="summation.ibcm" class="uri">summation.ibcm</a> and <a href="array-summation.ibcm" class="uri">array-summation.ibcm</a>) are linked to from the various website pages.</p>
+<p>The IBCM is utilized through an online series of webpages and requires a modern browser released after 2018. All the necessary code to run a separate copy are included in this repository.</p>
+<p>The primary file for the website is <a href="index.html" class="uri">index.html</a>, and the directions are on the <a href="directions.html" class="uri">directions.html</a> page. The simulator itself is on the <a href="simulator.html" class="uri">simulator.html</a> page. Two supporting files (<a href="simulator.js" class="uri">simulator.js</a> and <a href="ibcm.css" class="uri">ibcm.css</a>) and the entire img/ directory are needed as well. Note that two of the programs listed below (<a href="summation.ibcm" class="uri">summation.ibcm</a> and <a href="array-summation.ibcm" class="uri">array-summation.ibcm</a>) are linked to from the various website pages.</p>
 <p>The simulator can be accessed via <a href="http://pegasus.cs.virginia.edu/ibcm/" class="uri">http://pegasus.cs.virginia.edu/ibcm/</a>.</p>
 <h2 id="sample-ibcm-code">Sample IBCM code</h2>
 <p>The sample IBCM code included in this repository:</p>

diff --git a/ibcm/ibcm.md b/ibcm/ibcm.md
@@ -13,9 +13,9 @@ The primary mechanism for learning IBCM is through the [IBCM slide set](../slide
 Website
 -------
 
-The IBCM is utilized through an online series of webpages.  The IBCM simulator needs PHP in order to run, and thus must be run from a web server (i.e., not as a local file).  Most of the computational load is on the client side (via Javascript), and little is on the server side.  There are a few mirros of this website available, which are listed below.  All the necessary code to run a separate copy are included in this repository.
+The IBCM is utilized through an online series of webpages and requires a modern browser released after 2018.  All the necessary code to run a separate copy are included in this repository.
 
-The primary file for the website is [index.html](index.html), and the directions are on the [directions.html](directions.html) page.  The simulator itself is on the [simulator.php](simulator.php) page -- but as described above, this must be run on an actual web server.  Two supporting files ([simulator.js](simulator.js) and [ibcm.css](ibcm.css)) and the entire img/ directory are needed as well.  Note that two of the programs listed below ([summation.ibcm](summation.ibcm) and [array-summation.ibcm](array-summation.ibcm)) are linked to from the various website pages.
+The primary file for the website is [index.html](index.html), and the directions are on the [directions.html](directions.html) page.  The simulator itself is on the [simulator.html](simulator.html) page.  Two supporting files ([simulator.js](simulator.js) and [ibcm.css](ibcm.css)) and the entire img/ directory are needed as well.  Note that two of the programs listed below ([summation.ibcm](summation.ibcm) and [array-summation.ibcm](array-summation.ibcm)) are linked to from the various website pages.
 
 The simulator can be accessed via [http://pegasus.cs.virginia.edu/ibcm/](http://pegasus.cs.virginia.edu/ibcm/).