feat(web): server logo with pre-defined placements(in the config) (#4)

Author: LRemp

web/assets/images/logo.png

@@ -2,7 +2,8 @@ import {
   TIP_CHANGE_INTERVAL,
   BACKGROUND_CHANGE_INTERVAL,
   BACKGROUND_IMAGES,
-  ENABLE_CURSOR
+  ENABLE_CURSOR,
+  SERVER_LOGO_POSITION
 } from '../config.js'
 
 import { parsedMdTips } from "./markdown_parser.js";
@@ -19,6 +20,7 @@ const hintHelpTxtEl = $('#hint-help-text')
 const containerEL = $('#container')
 const bgImgEl = $('#bgImg')
 const spinnerEl = $('#spinner')
+const logoEl = $('#server-logo')
 
 
 // We store the current tipInterval if any here
@@ -119,11 +121,19 @@ const startBackgroundInterval = () => {
   }, BACKGROUND_CHANGE_INTERVAL)
 }
 
+/*
+  Set Initial element class for server logo placement
+*/
+const setServerLogoPosition = () => {
+  logoEl.addClass(SERVER_LOGO_POSITION)
+}
+
 /* Listeners */
 
 window.addEventListener('DOMContentLoaded', () => {
   startBackgroundInterval()
   setRandomTip()
+  setServerLogoPosition()
   spinnerEl.fadeIn()
 })
 

web/assets/script.js

@@ -73,6 +73,36 @@ a[onclick] {
   position: absolute;
 }
 
+#server-logo {
+  background:  url("./images/logo.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  width: 15vh;
+  height: 15vh;
+  z-index: 2;
+}
+
+#server-logo.top-left {
+  top: 2.5vh;
+  left: 2.5vh;
+}
+
+#server-logo.top-right {
+  top: 2.5vh;
+  right: 2.5vh;
+}
+
+#server-logo.bottom-right {
+  bottom: 2.5vh;
+  right: 2.5vh;
+}
+
+#server-logo.center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .header-container {
   display: flex;
   justify-content: space-between;

web/assets/styles.css

@@ -47,4 +47,7 @@ export const BACKGROUND_IMAGES = [
 export const ENABLE_CURSOR = true
 
 // Enable github flavored markdown
-export const ENABLE_GFM_MARKDOWN = false
+export const ENABLE_GFM_MARKDOWN = false
+
+// Define server logo placement ['top-left', 'top-right', 'bottom-right', 'center']
+export const SERVER_LOGO_POSITION = 'center'

web/config.js

@@ -16,6 +16,7 @@
     <div id="container">
         <div id="cursor"></div>
         <div id="bgImg"></div>
+        <div id="server-logo"></div>
         <div id="tip-container">
             <div class="header-container">
                 <div class="header-text" id="tip-header"></div>