webapp: Room settings dialog mockup

webapp/src/css/style.css

@@ -1,6 +1,6 @@
 body {
     background-color: #3A6EA5;
-    font-size: 8pt;
+    font-size: 11px;
 }
 
 #logonView {
@@ -12,19 +12,26 @@ body {
 }
 
 .window {
-    display: none;
+    display: flex;
+    flex-direction: column;
+
     position: fixed;
     .title-bar {
         user-select: none;
     }
 }
 
+.window-body {
+    flex: 1;
+}
+
 #motdContainer {
     font-family: "Arial", sans-serif;
 }
 
 #bottomLinks {
-    font-family: "Pixelated MS Sans Serif", Arial;
+    font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
+
     li {
         display: inline;
         border-right: 1px solid black;
@@ -41,11 +48,13 @@ body {
             color: #fff;
         }
     }
+
     li:last-child {
         border-right: none;
         padding-right: 0;
         margin-right: 0;
     }
+
     list-style: none;
     display: block;
     position: fixed;
@@ -54,6 +63,7 @@ body {
     transform: translateX(-50%);
 }
 
+
 #logonWindowLogo {
     background-color: #ffffff;
     margin: 0;
@@ -93,6 +103,53 @@ body {
     margin-right: 90px;
 }
 
+
+#roomSettingsBody {
+    display: flex;
+    flex-direction: column;
+}
+
+#roomSettingsTabContent {
+    flex: 1;
+    margin-bottom: 8px;
+}
+
+/* CSS nesting isn't even a year old as of writing this, we should consider using SASS or something for now */
+#roomSettingsWallpaperTab {
+    display: flex;
+    flex-direction: column;
+
+    .wallpaperMonitor {
+        text-align: center;
+        flex: 1;
+    }
+
+    #roomSettingsWallpaperSelect {
+        height: 114px;
+        display: flex;
+        flex-direction: row;
+
+        gap: 8px;
+
+        .mainCol {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+
+            .tree-view {
+                flex: 1;
+                overflow: auto;
+            }
+        }
+
+        #roomSettingsWallpaperURL {
+            margin-top: 8px;
+            width: 100%;
+        }
+    }
+}
+
+
 #chatBar {
     margin: 0;
     padding: 0;
@@ -117,6 +174,26 @@ body {
     margin-right: 4px;
 }
 
+.wallpaperMonitor {
+    div {
+        display: inline-block;
+        position: relative;
+    }
+
+    .wallpaperMonitorFg {
+        position: absolute;
+        width: 152px;
+        height: 112px;
+        margin: 17px 16px;
+        background: linear-gradient(160deg, #9b4f96, #0038a8);
+    }
+}
+
+
+.fieldRowRight {
+    justify-content: flex-end;
+}
+
 .context-menu {
     background-color: silver;
     ul {
@@ -144,4 +221,8 @@ body {
 .context-menu-item:hover {
     background-color: navy;
     color: #fff;
+}
+
+.d-none {
+    display: none;
 }

webapp/src/html/index.html

@@ -14,9 +14,7 @@
         <div id="logonView">
             <div class="window" id="logonWindow">
                 <div class="title-bar">
-                    <div class="title-bar-text">
+                    <div class="title-bar-text">Log on to Agent Chat</div>
-                        Log on to Agent Chat
-                    </div>
                 </div>
                 <div class="window-body">
                     <div id="logonWindowLogo">
@@ -40,6 +38,7 @@
                     </form>
                 </div>
             </div>
+
             <div class="window" id="motdWindow">
                 <div class="title-bar">
                     <div class="title-bar-text">
@@ -53,11 +52,74 @@
                     <div id="motdContainer"></div>
                 </div>
             </div>
+
             <ul id="bottomLinks">
                 <li><a href="#" id="rulesLink">Rules</a></li><li><a target="blank" href="https://discord.gg/a4kqb4mGyX">Discord</a></li><li><a target="blank" href="https://git.computernewb.com/computernewb/msagent-chat">Source Code</a></li>
             </ul>
         </div>
         <div id="chatView">
+            <div class="window" id="roomSettingsWindow">
+                <div class="title-bar">
+                    <div class="title-bar-text">Room Settings</div>
+                    <div class="title-bar-controls">
+                        <button aria-label="Minimize"></button>
+                        <button aria-label="Close"></button>
+                    </div>
+                </div>
+                <div class="window-body" id="roomSettingsBody">
+                    <menu role="tablist">
+                        <li role="tab" aria-selected="true"><a>Wallpaper</a></li>
+                    </menu>
+                    <div class="window" role="tabpanel" id="roomSettingsTabContent">
+                        <div class="window-body" id="roomSettingsWallpaperTab">
+                            <div class="wallpaperMonitor">
+                                <div>
+                                    <div class="wallpaperMonitorFg" id="roomWallpaperPreview"></div>
+                                    <img src="../../assets/monitor.png"/>
+                                </div>
+                            </div>
+                            <div>
+                                <span>Select a picture or enter a URL to use as a wallpaper:</span>
+                                <div id="roomSettingsWallpaperSelect">
+                                    <div class="mainCol">
+                                        <ul class="tree-view">
+                                            <!-- Should be actual links later but this is just a mockup for now :P -->
+                                            <li>None</li>
+                                            <li>Blue Lace 16</li>
+                                            <li>Boiling Point</li>
+                                            <li>Chateau</li>
+                                            <li>Coffee Bean</li>
+                                            <li>Fall Memories</li>
+                                            <li>FeatherTexture</li>
+                                        </ul>
+                                        <input type="text" placeholder="Wallpaper URL" id="roomSettingsWallpaperURL"/>
+                                    </div>
+                                    <div>
+                                        <div class="field-row-stacked">
+                                            <label for="roomSettingsWallpaperDisplay">Picture Display:</label>
+                                            <select id="roomSettingsWallpaperDisplay">
+                                                <option selected>Center</option>
+                                                <option>Tile</option>
+                                                <option>Stretch</option>
+                                            </select>
+                                        </div>
+                                        <div class="field-row">
+                                            <!-- *Should* be a HTML color select, but 98.css doesn't support those grr -->
+                                            <button>Color</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="field-row fieldRowRight">
+                        <button>OK</button>
+                        <button>Cancel</button>
+                        <button>Apply</button>
+                    </div>
+                </div>
+            </div>
+            
             <div id="chatBar">
                 <input type="text" id="chatInput" placeholder="Send a message"/>
                 <button id="chatSendBtn">Send</button>

webapp/src/ts/MSWindow.ts

@@ -3,7 +3,7 @@ export interface MSWindowConfig {
     minHeight: number,
     maxWidth?: number | undefined,
     maxHeight?: number | undefined,
-    startPosition: MSWindowStartPosition
+    startPosition: MSWindowStartPosition // TODO: Should be a union with the enum and a "Point" (containing X and Y)
 }
 
 export enum MSWindowStartPosition {
@@ -22,23 +22,27 @@ export class MSWindow {
     x: number;
     y: number;
     constructor(wnd: HTMLDivElement, config: MSWindowConfig) {
-        this.shown = false;
         this.wnd = wnd;
+        this.shown = false;
         this.config = config;
         this.wnd.style.minWidth = config.minWidth + "px";
         this.wnd.style.minHeight = config.minHeight + "px";
-        if (config.maxWidth) {
+
+        if (config.maxWidth)
             this.wnd.style.maxWidth = config.maxWidth + "px";
-        }
+        if (config.maxHeight)
-        if (config.maxHeight) {
             this.wnd.style.maxHeight = config.maxHeight + "px";
-        }
+
+        this.wnd.classList.add("d-none");
+
         let titlebar = this.wnd.querySelector("div.title-bar");
         let body = this.wnd.querySelector("div.window-body");
         if (!titlebar || !body)
             throw new Error("MSWindow is missing titlebar or body element.");
+
         this.titlebar = titlebar as HTMLDivElement;
         this.body = body as HTMLDivElement;
+
         let closeBtn = this.titlebar.querySelector("div.title-bar-controls > button[aria-label='Close']") as HTMLButtonElement;
         if (closeBtn) {
             this.closeBtn = closeBtn;
@@ -46,6 +50,7 @@ export class MSWindow {
                 this.hide();
             });
         }
+
         // Register window move handlers
         this.dragging = false;
         switch (this.config.startPosition) {
@@ -64,30 +69,33 @@ export class MSWindow {
             }
         }
         this.setLoc();
+
         this.titlebar.addEventListener('mousedown', () => {
             this.dragging = true;
             document.addEventListener('mouseup', () => {
                 this.dragging = false;
             }, {once: true});
         });
+
         document.addEventListener('mousemove', e => {
             if (!this.dragging) return;
             this.x += e.movementX;
             this.y += e.movementY;
             this.setLoc();
         });
+
         window.addEventListener('resize', () => {
             this.setLoc();
         });
     }
 
     show() {
-        this.wnd.style.display = "block";
+        this.wnd.classList.remove("d-none");
         this.shown = true;
     }
 
     hide() {
-        this.wnd.style.display = "none";
+        this.wnd.classList.add("d-none");
         this.shown = false;
     }
 

webapp/src/ts/main.ts

@@ -18,7 +18,9 @@ const elements = {
 
     chatView: document.getElementById("chatView") as HTMLDivElement,
     chatInput: document.getElementById("chatInput") as HTMLInputElement,
-    chatSendBtn: document.getElementById("chatSendBtn") as HTMLButtonElement
+    chatSendBtn: document.getElementById("chatSendBtn") as HTMLButtonElement,
+
+    roomSettingsWindow: document.getElementById("roomSettingsWindow") as HTMLDivElement
 }
 
 let Room : MSAgentClient;
@@ -51,7 +53,14 @@ let logonWindow = new MSWindow(elements.logonWindow, {
     startPosition: MSWindowStartPosition.Center
 });
 
+let roomSettingsWindow = new MSWindow(elements.roomSettingsWindow, {
+    minWidth: 398,
+    minHeight: 442,
+    startPosition: MSWindowStartPosition.Center
+});
+
 logonWindow.show();
+// roomSettingsWindow.show();
 
 let loggingIn = false;
 elements.logonForm.addEventListener('submit', e => {