fullscreen button (kinda)

src/css/browser.css

@@ -10,6 +10,10 @@ iframe.browser {
   margin-top: var(--browser-bar-height);
 }
 
+iframe.browser.fullscren {
+  margin-top: 0;
+}
+
 [data-mode="tall"] iframe.browser {
   height: 100%;
 }
@@ -48,6 +52,12 @@ iframe:focus {
   transform: scaleX(-1);
 }
 
+#fullscreen-button {
+  position: absolute;
+  right: 15;
+  top: -1;
+}
+
 #close-button {
   position: absolute;
   right: -10;

src/html/layout.tsx

@@ -11,7 +11,6 @@ export const Layout: FC = async ({ children, title }) => (
       <link href="/css/reset.css" rel="stylesheet" />
       <link href="/css/main.css" rel="stylesheet" />
       <link href="/css/game.css" rel="stylesheet" />
-      <link href="/css/browser.css" rel="stylesheet" />
 
       <script type="importmap" dangerouslySetInnerHTML={{ __html: `{ "imports": { "@/": "/" } }` }} />
       <script src={process.env.NODE_ENV === "production" ? `/bundle.js?${GIT_SHA}` : "/js/main.js"} type="module" async></script>

src/html/terminal.tsx

@@ -4,12 +4,14 @@ export const Terminal: FC = async () => (
   <>
     <link rel="stylesheet" href="/css/terminal.css" />
     <link rel="stylesheet" href="/css/editor.css" />
+    <link rel="stylesheet" href="/css/browser.css" />
 
     <div id="browser-controls" style="display:none">
       <a id="back-button" href="#"></a>
       <a id="forward-button" href="#"></a>
       <a id="stop-button" href="#"></a>
       <a id="reload-button" href="#">@</a>
+      <a id="fullscreen-button" href="#"></a>
       <a id="close-button" href="#">╳</a>
       <span id="browser-address">chris.nose-pluto.local</span>
     </div>

src/js/browser.ts

@@ -104,6 +104,8 @@ function handleClick(e: MouseEvent) {
       stopLoading(); break
     case "reload-button":
       reloadBrowser(); break
+    case "fullscreen-button":
+      fullscreenBrowser(); break
     case "close-button":
       closeBrowser(); break
     default:
@@ -136,6 +138,11 @@ function stopLoading() {
   sendNavCommand('stop')
 }
 
+function fullscreenBrowser() {
+  controls.style.display = 'none'
+  iframe.classList.add('fullscren')
+}
+
 function sendNavCommand(action: 'back' | 'forward' | 'reload' | 'stop') {
   if (!iframe.contentWindow) return
 

src/js/hyperlink.ts

@@ -21,7 +21,7 @@ async function handleClick(e: MouseEvent) {
   const href = a.getAttribute("href")
   if (!href) return
 
-  if (href.startsWith("#")) {
+  if (href.startsWith("#") && href.length > 1) {
     e.preventDefault()
     await runCommand(href.slice(1))
     focusInput()