Add icons to app and refactoring toolbar

I've chosen to manually include fonts in the web app so that work on new font assets can be done in parallel to app development, so that I'm not inadventantly making breaking changes in the app when there are changes to the icon font.

This also works well as a flow if the font icon ends up moving to it's own repository.

Author: iaincollins

src/web/components/panels/event-types-panel.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useSocket, useEventListener } from 'components/socket'
+import { useSocket, useEventListener } from 'lib/socket'
 
 function gameEventsToArray (gameEvents) {
   return Object.keys(gameEvents).map(event => {

src/web/components/toolbar.js

@@ -0,0 +1,17 @@
+import { toggleFullScreen } from 'lib/window'
+
+export default function Toolbar ({ connected }) {
+  return (
+    <>
+      <h2 style={{ padding: '1rem 0' }}>ICARUS Terminal</h2>
+      <div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
+        <button disabled className='button-with-icon button-transparent' style={{ opacity: 1, marginRight: '.5rem' }}>
+          <i className={`icarus-terminal-signal ${connected ? 'text-primary' : 'text-danger text-blink'}`} />
+        </button>
+        <button onClick={toggleFullScreen} className='button-with-icon'>
+          <i className='icarus-terminal-fullscreen' />
+        </button>
+      </div>
+    </>
+  )
+}

src/web/css/buttons.css

@@ -24,3 +24,21 @@ button:not(:disabled):active {
   background: var(--secondary-color);
   color: var(--dark-secondary-color);
 }
+
+button.button-with-icon {
+  position: relative;
+  height: 3rem;
+  width: 3rem;
+  display: inline-block;
+  min-width: initial;
+  padding: 0;
+}
+
+button.button-with-icon > * {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+button.button-transparent {
+  background: none;
+}

src/web/css/icarus-terminal-font.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: "icarus-terminal";
+  src: url('../public/fonts/icarus-terminal.ttf?t=1637863636375') format('truetype');
+}
+
+[class^="icarus-terminal-"], [class*=" icarus-terminal-"] {
+  font-family: 'icarus-terminal' !important;
+  font-style: normal;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icarus-terminal-asteroid-base:before { content: "\ea01"; }
+.icarus-terminal-coriolis-starport:before { content: "\ea02"; }
+.icarus-terminal-credits:before { content: "\ea03"; }
+.icarus-terminal-engineering:before { content: "\ea04"; }
+.icarus-terminal-fullscreen-window:before { content: "\ea05"; }
+.icarus-terminal-fullscreen:before { content: "\ea06"; }
+.icarus-terminal-ocellus-starport:before { content: "\ea07"; }
+.icarus-terminal-orbis-starport:before { content: "\ea08"; }
+.icarus-terminal-outpost:before { content: "\ea09"; }
+.icarus-terminal-planet:before { content: "\ea0a"; }
+.icarus-terminal-planetary-port:before { content: "\ea0b"; }
+.icarus-terminal-route:before { content: "\ea0c"; }
+.icarus-terminal-signal:before { content: "\ea0d"; }
+.icarus-terminal-star:before { content: "\ea0e"; }
+.icarus-terminal-system-bodies:before { content: "\ea0f"; }
+.icarus-terminal-system-orbits:before { content: "\ea10"; }
+.icarus-terminal-table:before { content: "\ea11"; }

src/web/css/main.css

@@ -7,6 +7,8 @@
 @import "panels.css";
 @import "table.css";
 
+@import "icarus-terminal-font.css";
+
 @font-face {
   font-family: 'Jura';
   src: url('../public/fonts/Jura-VariableFont_wght.ttf') format('truetype');

src/web/css/text.css

@@ -40,4 +40,12 @@
 
 .text-right {
   text-align: right;
+}
+
+.text-blink {
+  animation: text-blink-animation .5s ease-in-out infinite;
+}
+
+@keyframes text-blink-animation {
+  50% { opacity: 0; }
 }

src/web/components/socket.js renamed to src/web/lib/socket.js

@@ -1,3 +1,4 @@
+/* global Element */
 function toggleFullScreen () {
   if (typeof window.app_toggleFullScreen === 'function') { return window.app_toggleFullScreen() }
 
@@ -20,7 +21,7 @@ function toggleFullScreen () {
   }
 }
 
-function newWindow() {
+function newWindow () {
   if (typeof window.app_newWindow === 'function') { return window.app_newWindow() }
 
   window.open(`//${window.location.host}`)

src/web/lib/window.js

@@ -1,5 +1,5 @@
 import '../css/main.css'
-import { Socket } from 'components/socket'
+import { Socket } from 'lib/socket'
 
 export default function MyApp ({ Component, pageProps }) {
   return (

src/web/pages/_app.js

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react'
-import { toggleFullScreen } from 'lib/window'
+import Toolbar from 'components/toolbar'
 import Loader from 'components/loader'
 import Panel from 'components/panel'
 import LogPanel from 'components/panels/log-panel'
-import { useSocket, useEventListener } from 'components/socket'
+import { useSocket, useEventListener } from 'lib/socket'
 
 let loadNewLogEntries
 
@@ -38,12 +38,9 @@ export default function IndexPage () {
 
   return (
     <>
+      <Toolbar connected={connected} />
       <Loader visible={!connected || logEntries.length === 0} />
       <Panel visible={connected && logEntries.length > 0}>
-        <h2 style={{ padding: '1rem 0' }}>ICARUS Terminal</h2>
-        <div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
-          <button onClick={toggleFullScreen}>Toggle Fullscreen</button>
-        </div>
         <div className='scrollable' style={{ position: 'absolute', top: '5rem', bottom: '1rem', left: '1rem', right: '1rem' }}>
           <LogPanel logEntries={logEntries} />
         </div>

src/web/pages/index.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { formatBytes } from 'lib/format'
 import { newWindow } from 'lib/window'
-import { useSocket, useEventListener } from 'components/socket'
+import { useSocket, useEventListener } from 'lib/socket'
 import Loader from 'components/loader'
 import Panel from 'components/panel'
 import packageJson from '../../../package.json'