Added dynamic frames for darwin + win32.

The darwin frame is the same as the original, however the button behavior is corrected. The win32 frame uses the traditional buttons found on windows. Also added a small logo image to the windows frame. Each frame is dynamically loaded on startup via ejs.

Also disabled the server selection test UI.

app/assets/css/launcher.css

@@ -49,22 +49,113 @@ p {
  *                                                                             *
  ******************************************************************************/
 
-#frame_bar {
+/* Frame Bar */
-    -webkit-app-region: drag;
+#frameBar {
-    -webkit-user-select: none;
-    background: rgba(1, 2, 1, 0.5);
-    min-height: 22px;
     display: flex;
+    flex-direction: column;
+    background: rgba(1, 2, 1, 0.5);
+    -webkit-user-select: none;
+}
+
+/* Undraggable region on the top of the frame. */
+#frameResizableTop {
+    height: 2px;
+    width: 100%;
+    -webkit-app-region: no-drag;
+}
+
+/* Flexbox to wrap the main frame content. */
+#frameMain {
+    display: flex;
+    height: 20px
+}
+
+/* Undraggable region on the left and right of the frame. */
+.frameResizableVert {
+    width: 2px;
+    -webkit-app-region: no-drag;
+}
+
+/* Main frame content for windows. */
+#frameContentWin {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    -webkit-app-region: drag;
+}
+
+/* Main frame content for darwin. */
+#frameContentDarwin {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    -webkit-app-region: drag;
+}
+
+/* Frame logo (windows only). */
+#frameImageDock {
+    width: 100px;
+    display: flex;
+    justify-content: center;
     align-items: center;
     position: relative;
-    z-index: 10000;
+}
+#frameImage {
+    height: 15px;
+    filter: grayscale(100%);
 }
 
-#frame_btn_dock {
+/* Windows frame button dock. */
-    margin-left: 2px;
+#frameButtonDockWin {
+    -webkit-app-region: no-drag !important;
+    position: relative;
+    top: -2px;
+    right: -2px;
+    height: 22px;
+}
+#frameButtonDockWin > .frameButton:not(:first-child) {
+    margin-left: -4px;
 }
 
-.frame_btn {
+/* Darwin frame button dock: NaN; */
+#frameButtonDockDarwin {
+    -webkit-app-region: no-drag !important;
+    position: relative;
+    top: -1px;
+    right: -1px;
+}
+
+/* Windows Frame Button Styles. */
+.frameButton {
+    background: none;
+    border: none;
+    height: 22px;
+    width: 39px;
+    cursor: pointer;
+}
+.frameButton:hover,
+.frameButton:focus {
+    background: rgba(189, 189, 189, 0.43);
+}
+.frameButton:active {
+    background: rgba(156, 156, 156, 0.43);
+}
+.frameButton:focus {
+    outline: 0px;
+}
+
+/* Close button is red. */
+#frameButton_close:hover,
+#frameButton_close:focus {
+    background: rgba(255, 53, 53, 0.61) !important;
+}
+#frameButton_close:active {
+    background: rgba(235, 0, 0, 0.61) !important;
+}
+
+/* Darwin Frame Button Styles. */
+.frameButtonDarwin {
     height: 12px;
     width: 12px;
     border-radius: 50%;
@@ -73,41 +164,40 @@ p {
     -webkit-app-region: no-drag !important;
     cursor: pointer;
 }
-
+.frameButtonDarwin:focus {
-.frame_btn:focus {
     outline: 0px;
 }
 
-#frame_btn_close {
+#frameButtonDarwin_close {
     background-color: #e74c32;
 }
-#frame_btn_close:hover,
+#frameButtonDarwin_close:hover,
-#frame_btn_close:focus {
+#frameButtonDarwin_close:focus {
     background-color: #FF9A8A;
 }
-#frame_btn_close:active {
+#frameButtonDarwin_close:active {
     background-color: #ff8d7b;
 }
 
-#frame_btn_restoredown {
+#frameButtonDarwin_minimize {
     background-color: #fed045;
 }
-#frame_btn_restoredown:hover,
+#frameButtonDarwin_minimize:hover,
-#frame_btn_restoredown:focus {
+#frameButtonDarwin_minimize:focus {
     background-color: #FFE9A9;
 }
-#frame_btn_restoredown:active {
+#frameButtonDarwin_minimize:active {
     background-color: #ffde7b;
 }
 
-#frame_btn_minimize {
+#frameButtonDarwin_restoredown {
     background-color: #96e734;
 }
-#frame_btn_minimize:hover,
+#frameButtonDarwin_restoredown:hover,
-#frame_btn_minimize:focus {
+#frameButtonDarwin_restoredown:focus {
     background-color: #D6FFA6;
 }
-#frame_btn_minimize:active {
+#frameButtonDarwin_restoredown:active {
     background-color: #bfff76;
 }
 

app/assets/js/uicore.js

@@ -22,25 +22,33 @@ document.addEventListener('readystatechange', function () {
         console.log('UICore Initializing..');
 
         // Bind close button.
-        document.getElementById("frame_btn_close").addEventListener("click", function (e) {
+        Array.from(document.getElementsByClassName('fCb')).map((val) => {
+            val.addEventListener('click', e => {
                 const window = remote.getCurrentWindow()
                 window.close()
             })
+        })
 
         // Bind restore down button.
-        document.getElementById("frame_btn_restoredown").addEventListener("click", function (e) {
+        Array.from(document.getElementsByClassName('fRb')).map((val) => {
+            val.addEventListener('click', e => {
                 const window = remote.getCurrentWindow()
                 if(window.isMaximized()){
-                window.unmaximize();
+                    window.unmaximize()
                 } else {
                     window.maximize()
                 }
+                document.activeElement.blur()
+            })
         })
 
         // Bind minimize button.
-        document.getElementById("frame_btn_minimize").addEventListener("click", function (e) {
+        Array.from(document.getElementsByClassName('fMb')).map((val) => {
+            val.addEventListener('click', e => {
                 const window = remote.getCurrentWindow()
                 window.minimize()
+                document.activeElement.blur()
+            })
         })
 
     } else if(document.readyState === 'complete'){

app/frame.ejs

@@ -1,7 +1,33 @@
-<div id="frame_bar">
+<div id="frameBar">
-    <div id="frame_btn_dock">
+    <div id="frameResizableTop" class="frameDragPadder"></div>
-        <button class="frame_btn" id="frame_btn_close" tabIndex="-1"></button>
+    <div id="frameMain">
-        <button class="frame_btn" id="frame_btn_restoredown" tabIndex="-1"></button>
+        <div class="frameResizableVert frameDragPadder"></div>
-        <button class="frame_btn" id="frame_btn_minimize" tabIndex="-1"></button>
+        <%if (process.platform === 'darwin') { %>
+            <div id="frameContentDarwin">
+                <div id="frameButtonDockDarwin">
+                    <button class="frameButtonDarwin fCb" id="frameButtonDarwin_close" tabIndex="-1"></button>
+                    <button class="frameButtonDarwin fMb" id="frameButtonDarwin_minimize" tabIndex="-1"></button>
+                    <button class="frameButtonDarwin fRb" id="frameButtonDarwin_restoredown" tabIndex="-1"></button>
+                </div>
+            </div>
+        <% } else{ %>  
+            <div id="frameContentWin">
+                <div id="frameImageDock">
+                    <img id= "frameImage" src="./assets/images/WCTextCrop.png" />
+                </div>
+                <div id="frameButtonDockWin">
+                    <button class="frameButton fMb" id="frameButton_minimize" tabIndex="-1">
+                        <svg name="TitleBarMinimize" width="10" height="10" viewBox="0 0 12 12"><rect stroke="#ffffff" fill="#ffffff" width="10" height="1" x="1" y="6"></rect></svg>
+                    </button>
+                    <button class="frameButton fRb" id="frameButton_restoredown" tabIndex="-1">
+                        <svg name="TitleBarMaximize" width="10" height="10" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="#ffffff" stroke-width="1.4px"></rect></svg>
+                    </button>
+                    <button class="frameButton fCb" id="frameButton_close" tabIndex="-1">
+                        <svg name="TitleBarClose" width="10" height="10" viewBox="0 0 12 12"><polygon stroke="#ffffff" fill="#ffffff" fill-rule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
+                    </button>
+                </div>
+            </div>
+        <% } %>
+        <div class="frameResizableVert frameDragPadder"></div>
     </div>
 </div>

app/landing.ejs

@@ -126,7 +126,7 @@
                     <button id="launch_button">PLAY</button>
                     <div class="bot_divider"></div>
                     <!-- Span until we implement the real selection -->
-                    <div id="serverSelectContainer">
+                    <div id="serverSelectContainer" style="display:none;">
                         <div id="serverSelectContent">
                             <div class="serverSelectElement" sel>
                                 <span class="serverSelected">◆</span>
@@ -145,7 +145,7 @@
                             </div>
                         </div>
                     </div>
-                    <span class="bot_label" id="server_selection"style="display:none;line-height: 24px;">&#8226; No Server Selected</span>
+                    <span class="bot_label" id="server_selection"style="line-height: 24px;">&#8226; No Server Selected</span>
                 </div>
                 <div id="launch_details">
                     <div id="launch_details_left">