Added new server selection UI.

The UI is still being tweaked and modified. Functionality will be added once it is finalized.

app/assets/css/launcher.css

@@ -1235,6 +1235,7 @@ p {
     padding: 0px;
 }
 
+/*
 #serverSelectContainer {
     display: flex;
     align-items: center;
@@ -1284,7 +1285,7 @@ p {
 }
 .serverSelectElement[sel] > .serverSelected {
     display: initial;
-}
+}*/
 
 /*.serverSelectName {
 }*/

app/overlay.ejs

@@ -1,5 +1,281 @@
+<style text="text/css">
+#serverSelectContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 75%;
+}
+
+#serverSelectHeader {
+    font-family: 'Avenir Medium';
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 25px;
+}
+
+#serverSelectList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: scroll;
+    padding: 0px 5px;
+    height: 65%;
+}
+#serverSelectList::-webkit-scrollbar {
+    width: 2px;
+}
+
+#serverSelectList::-webkit-scrollbar-track {
+    display: none;
+}
+
+#serverSelectList::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
+}
+
+.serverListing {
+    width: 350px;
+    min-height: 65px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px 0px;
+    opacity: 0.6;
+    transition: 0.25s ease;
+    cursor: pointer;
+    position: relative;
+}
+.serverListing[selected] {
+    cursor: default;
+    background: rgba(255, 255, 255, 0.25);
+    opacity: 1.0;
+}
+.serverListing:hover {
+    opacity: 1.0;
+}
+
+.serverListingImg {
+    margin: 0px 10px 0px 5px;
+    border: 1px solid #fff;
+    height: 50px;
+    width: auto;
+}
+
+.serverListingDetails {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    height: 50px;
+}
+
+.serverListingName {
+    font-family: 'Avenir Book';
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+}
+
+.serverListingDescription {
+    font-family: 'Avenir Book';
+    font-size: 10px;
+    line-height: 10px;
+    font-weight: bold;
+    color: #fff;
+}
+
+#serverSelectActions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 25px;
+}
+
+#serverSelectConfirm {
+    background: none;
+    border: 1px solid #ffffff;
+    color: white;
+    font-family: 'Avenir Medium';
+    font-weight: bold;
+    border-radius: 2px;
+    padding: 0px 8.1px;
+    cursor: pointer;
+    transition: 0.25s ease;
+}
+#serverSelectConfirm:hover,
+#serverSelectConfirm:focus {
+    box-shadow: 0px 0px 10px 0px #fff;
+    outline: none;
+}
+#serverSelectConfirm:active {
+    border-color: rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.75);
+}
+
+#serverSelectCancel {
+    font-family: 'Avenir Book';
+    font-weight: bold;
+    font-size: 10px;
+    text-decoration: none;
+    padding-top: 2.5px;
+    color: rgba(202, 202, 202, 0.75);
+    transition: 0.25s ease;
+}
+#serverSelectCancel:hover {
+    color: rgba(255, 255, 255, 0.75);
+}
+#serverSelectCancel:active {
+    color: rgba(165, 165, 165, 0.75);
+}
+
+.serverListingInfo {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.serverListingVersion {
+    font-size: 10px;
+    color: #fff;
+    font-family: 'Avenir Book';
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 12px;
+    height: 12px;
+    border-radius: 2px;
+    background: rgb(174, 70, 66);
+    padding: 0px 2px;
+}
+
+.serverListingRevision {
+    font-family: 'Avenir Book';
+    color: #969696;
+    font-size: 10px;
+    line-height: 12px;
+    padding: 0px 5px;
+}
+
+.serverListingDivider {
+    min-height: 1px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.4);
+    margin: 2px 0px;
+}
+
+#starWrap {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    left: 322px;
+    top: 3px;
+    cursor: pointer;
+}
+
+.tooltiptext {
+    visibility: hidden;
+    width: 70px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    right: 120%;
+    font-family: 'Avenir Book';
+    font-size: 10px;
+}
+
+.tooltiptext::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    left: 100%; /* To the right of the tooltip */
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent black;
+}
+
+#starWrap:hover .tooltiptext {
+    visibility: visible;
+}
+
+</style>
 <div id="overlayContainer" style="display: none;">
-    <div id="overlayContent">
+    <div id="serverSelectContent">
+        <span id="serverSelectHeader">Available Servers</span>
+        <div id="serverSelectList">
+            <div class="serverListing" selected>
+                <img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/>
+                <div class="serverListingDetails">
+                    <span class="serverListingName">WesterosCraft Production Server</span>
+                    <span class="serverListingDescription">Main WesterosCraft server. Connect to enter the Realm.</span>
+                    <div class="serverListingInfo">
+                        <div class="serverListingVersion">1.11.2</div>
+                        <div class="serverListingRevision">3.4.17</div>
+                    </div>
+                </div>
+                <div id="starWrap">
+                    <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="25px" height="25px">
+                        <defs>
+                            <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                        </defs>
+                        <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
+                        <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                    </svg>
+                    <span class="tooltiptext">Main Server</span>
+                </div>
+            </div>
+            <div class="serverListingDivider"></div>
+            <div class="serverListing">
+                <img class="serverListingImg" src="./assets/images/testserver.png"/>
+                <div class="serverListingDetails">
+                    <span class="serverListingName">WesterosCraft Test Server</span>
+                    <span class="serverListingDescription">Main testing server. Experimental changes live here.</span>
+                    <div class="serverListingInfo">
+                        <div class="serverListingVersion">1.11.2</div>
+                        <div class="serverListingRevision">3.6.0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="serverListingDivider"></div>
+            <div class="serverListing">
+                <img class="serverListingImg" src="./assets/images/testserver.png"/>
+                <div class="serverListingDetails">
+                    <span class="serverListingName">WesterosCraft 1.12.2 Test Server</span>
+                    <span class="serverListingDescription">Tests for our version change to 1.12.2 are live here.</span>
+                    <div class="serverListingInfo">
+                        <div class="serverListingVersion">1.12.2</div>
+                        <div class="serverListingRevision">4.0.1</div>
+                    </div>
+                </div>
+            </div>
+            <div class="serverListingDivider"></div>
+            <div class="serverListing">
+                <img class="serverListingImg" src="./assets/images/testserver.png"/>
+                <div class="serverListingDetails">
+                    <span class="serverListingName">EssosCraft Test Server</span>
+                    <span class="serverListingDescription">Tests for our next project!</span>
+                    <div class="serverListingInfo">
+                        <div class="serverListingVersion">1.15.0</div>
+                        <div class="serverListingRevision">9.7.2</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="serverSelectActions">
+            <button id="serverSelectConfirm">Select</button>
+            <a href="javascript:void(0);" id="serverSelectCancel">Cancel</a>
+        </div>
+    </div>
+    <div id="overlayContent" style="display: none;">
         <span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
         <span id="overlayDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..</span>
         <div id="overlayActionContainer">