Update.

src/snek/static/container.js

@@ -36,6 +36,11 @@ export class Container extends EventHandler{
         this._container.classList.toggle("hidden")
         this.refresh()
     }
+    fit(){
+        this._fitAddon.fit();
+    
+    }
+
 
     constructor(channelUid,log){
         super()

src/snek/templates/app.html

@@ -60,7 +60,59 @@
       import { app } from "/app.js";
       import { Container } from "/container.js";
       let prevKey = null;
-      document.addEventListener("keydown", () => {
+
+      function toggleDevelopmentMode(){
+      const headerElement = document.querySelector('header');
+      headerElement.style.display = 'none';
+      const sidebarElement = document.querySelector('aside');
+      
+      sidebarElement.style.position = 'fixed'
+      sidebarElement.style.width= '10%'
+      sidebarElement.style.top = '0px'
+      sidebarElement.style.left='0px'
+      sidebarElement.style.height='100%'
+    
+     // sidebarElement.style.display = 'none';
+const containerElement = document.querySelector('#terminal');
+containerElement.style.position = 'fixed';
+containerElement.style.width = '40%';
+containerElement.style.height = '100%';
+containerElement.style.left = '10%';
+containerElement.style.top = '0px';
+//window.container.resizeToPercentage(document.body,'50%','100%')
+
+const messagesElement = document.querySelector('.chat-area');
+messagesElement.style.position = 'fixed';
+messagesElement.style.width = '40%';
+messagesElement.style.height = '100%';
+messagesElement.style.left = '50%';
+messagesElement.style.top = '0px';
+
+const messageList = document.querySelector('message-list')
+messageList.scrollToBottom()
+
+window.container.fit()
+
+app.starField.renderWord("H4x0r 1337")
+}
+
+    {% if channel %}
+      app.channelUid = '{{ channel.uid.value }}'
+      window.getContainer = async function (){
+        if(window.c) return window.c
+            window.c = new Container(app.channelUid,false)
+            window.c.start()
+            window.t = document.querySelector("#terminal")
+            window.t.classList.toggle("hidden")
+            window.c.render(window.t)
+
+
+        return window.c
+        }
+        {% endif %}
+
+
+      document.addEventListener("keydown", async() => {
         if(prevKey == "Escape"){
             document.querySelector("chat-input").querySelector("textarea").value = "";
         }  
@@ -70,10 +122,15 @@
         }
         if(event.key == "." && event.ctrlKey){
             event.preventDefault();
-            if(window.container){
-
-                window.container.terminal.element.hidden = !window.container.terminal.element.hidden
+            if(!window.c)
+            {
+                window.getContainer()
+            }
+            if(window.c){
 
+                toggleDevelopmentMode()
+                //window.container.terminal.element.hidden = !window.container.terminal.element.hidden
+                
             
             }
         }
@@ -84,17 +141,11 @@
             let textAreas = document.querySelectorAll("textarea")
             textAreas.forEach(textArea => {
                 if(document.activeElement != textArea)
-                    setTimeout(() => textArea.focus(), 300)
+                    setTimeout(() => textArea.focus(), 10)
             })
         }
       })
     
-    {% if channel %}
-      app.channelUid = '{{ channel.uid.value }}'
-      window.getContainer = function(){
-        return new Container(app.channelUid,false)
-      }
-        {% endif %}
 let installPrompt = null 
         window.addEventListener("beforeinstallprompt", (e) => {
             //e.preventDefault();

src/snek/templates/web.html

@@ -30,7 +30,6 @@
             {{ message.html }}
             {% endautoescape %}
         {% endfor %}
-
         <div class="message-list-bottom"></div>
     </message-list>
     <chat-input live-type="true" channel="{{ channel.uid.value }}"></chat-input>
@@ -48,7 +47,6 @@ const messagesContainer = document.querySelector(".chat-messages");
 const chatArea = document.querySelector(".chat-area");
 const channelUid = "{{ channel.uid.value }}";
 const username = "{{ user.username.value }}";
-let container = null
 // --- Command completions ---
 chatInputField.autoCompletions = {
     "/online": showOnline,
@@ -56,14 +54,7 @@ chatInputField.autoCompletions = {
     "/live": () => { chatInputField.liveType = !chatInputField.liveType; },
     "/help": showHelp,
     "/container": async() =>{ 
-        if(container == null){
-            window.c = await window.getContainer()
-            await window.c.start()
-            window.t = document.querySelector("#terminal")
-            window.t.classList.toggle("hidden")
-            window.c.render(window.t)
-        }
-        //containerDialog.openWithStatus()
+                //containerDialog.openWithStatus()
     }
 };