icons

website/src/playground/files.ts

@@ -45,7 +45,7 @@ const files: Record<string, string | nil> = {
       return "Hello world!";
     }
 
-    // When you're ready, click the next arrow ('>') above to continue.
+    // When you're ready to continue, click next below.
   `),
 
   'tutorial/valueSemantics.ts': blockTrim(`

website/src/playground/index.html

@@ -10,19 +10,25 @@
     <div id="editor">
       <div id="editor-loading"></div>
     </div>
-    <div id="file-selector">
-      <div id="file-previous">&lt;</div>
+    <div id="file-menu">
+      <div id="list-button" class="icon-btn ph-list"></div>
       <div id="file-location">
-        <select></select>
+        Loading...
       </div>
-      <div id="file-next">&gt;</div>
+      <div id="rename-button" class="icon-btn ph-pencil-simple"></div>
+      <div class="grow-spacer"></div>
+      <div id="add-button" class="icon-btn ph-file-plus"></div>
+      <div id="restore-button" class="icon-btn ph-clock-counter-clockwise"></div>
+      <div id="delete-button" class="icon-btn ph-trash"></div>
     </div>
 
     <div id="footer-buttons">
-      <div>New</div>
-      <div>Rename</div>
-      <div>Restore</div>
-      <div>Delete</div>
+      <div id="file-previous">
+        <i class="ph-caret-left"></i><div class="icon-spacer"></div>Previous
+      </div>
+      <div id="file-next">
+        Next<div class="icon-spacer"></div><i class="ph-caret-right"></i>
+      </div>
     </div>
 
     <div id="display">
@@ -39,5 +45,6 @@
     </div>
 
     <script src="index.ts" type="module" defer></script>
+    <script src="https://unpkg.com/phosphor-icons"></script>
   </body>
 </html>

website/src/playground/index.ts

@@ -17,19 +17,13 @@ function domQuery<T = HTMLElement>(query: string): T {
 
 const editorEl = domQuery('#editor');
 
-const selectEl = domQuery<HTMLSelectElement>('#file-location select');
+const fileLocation = domQuery<HTMLSelectElement>('#file-location');
 const filePreviousEl = domQuery('#file-previous');
 const fileNextEl = domQuery('#file-next');
 const outcomeEl = domQuery('#outcome');
 const vsmEl = domQuery('#vsm');
 const diagnosticsEl = domQuery('#diagnostics');
 
-for (const filename of Object.keys(files)) {
-  const option = document.createElement('option');
-  option.textContent = filename;
-  selectEl.appendChild(option);
-}
-
 let currentFile = '';
 
 editorEl.innerHTML = '';
@@ -104,7 +98,7 @@ editorEl.innerHTML = '';
     }
 
     location.hash = currentFile;
-    selectEl.selectedIndex = fileIdx;
+    fileLocation.textContent = currentFile;
 
     const model = fileModels[currentFile];
 
@@ -112,13 +106,8 @@ editorEl.innerHTML = '';
     handleUpdate();
   }
 
-  selectEl.addEventListener('change', () => {
-    changeFile(selectEl.value);
-  });
-
   const moveFileIndex = (change: number) => () => {
-    const filenames = Object.keys(files);
-    let idx = filenames.indexOf(currentFile);
+    let idx = fs.list.indexOf(currentFile);
 
     if (idx === -1) {
       throw new Error('This should not happen');
@@ -126,9 +115,9 @@ editorEl.innerHTML = '';
 
     idx += change;
     idx = Math.max(idx, 0);
-    idx = Math.min(idx, filenames.length - 1);
+    idx = Math.min(idx, fs.list.length - 1);
 
-    changeFile(filenames[idx]);
+    changeFile(fs.list[idx]);
   };
 
   filePreviousEl.addEventListener('click', moveFileIndex(-1));

website/src/playground/styles.scss

@@ -14,7 +14,7 @@ a, a:visited {
   text-decoration: none;
 }
 
-#file-selector {
+#file-menu {
   background-color: #181818;
   position: absolute;
   left: 0;
@@ -24,15 +24,32 @@ a, a:visited {
   width: 50vw;
   border-bottom: 1px solid black;
   user-select: none;
+
+  #file-location {
+    padding: 0.5em 0;
+  }
+
+  #list-button {
+    padding: 0 0.7em;
+  }
+
+  .icon-btn {
+    padding: 0 0.5em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
 }
 
-#file-selector > div {
-  width: 2em;
-  padding: 0.5em;
-}
-
-#file-location {
+.grow-spacer {
   flex-grow: 1;
+  flex-basis: 0;
+}
+
+.icon-spacer {
+  display: inline-block;
+  width: 0.5em;
 }
 
 #file-location select, #file-location option {
@@ -46,13 +63,6 @@ a, a:visited {
   cursor: pointer;
 }
 
-#file-previous, #file-next {
-  color: hsl(44, 100%, 50%);
-  font-weight: bold;
-  text-align: center;
-  cursor: pointer;
-}
-
 #editor {
   position: absolute;
   left: 0;
@@ -74,16 +84,13 @@ a, a:visited {
   left: 0;
   bottom: 0;
   width: 50vw;
-  height: 4em;
   background-color: #181818;
   border-top: 1px solid black;
   display: flex;
   flex-direction: row;
-  // justify-content: space-around;
   align-items: center;
 
   > div {
-    height: 4em;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -92,13 +99,16 @@ a, a:visited {
     text-align: center;
     border-left: 1px solid black;
     cursor: pointer;
+    font-size: 1.5em;
+    user-select: none;
+    padding: 0.72em;
 
     &:first-child {
       border-left: none;
     }
 
     &:hover {
-      background-color: rgba(0, 0, 255, 0.2);
+      background-color: rgba(0, 0, 255, 0.1);
     }
   }
 }