Removed live indicator + began to write graphics menu

client/components/help_entry/help_entry.js

@@ -0,0 +1,44 @@
+class HelpEntry extends HTMLElement{
+    constructor(title, description){
+        super();
+        this.title = title;
+        this.description = description;
+    }
+
+    displayPopup(){
+        this.getElementsByTagName("sea-help-popup")[0].style.visibility = "visible";
+    }
+
+    hidePopup(){
+        this.getElementsByTagName("sea-help-popup")[0].style.visibility = "hidden";
+    }
+
+    toggleVisibility(){
+        if (this.getElementsByTagName("sea-help-popup")[0].style.visibility == "visible")
+            this.hidePopup();
+        else
+            this.displayPopup();
+    }
+
+    connectedCallback(){
+        this.render();
+        this.getElementsByTagName("img")[0].onmouseenter = () => {this.displayPopup();};
+        this.getElementsByTagName("img")[0].onmouseleave = () => {this.hidePopup();};
+        // For mobile phones
+        this.getElementsByTagName("img")[0].onclick = () => {this.toggleVisibility();};
+    }
+
+    render(){
+        this.innerHTML = `
+        <link rel="stylesheet" href="./components/help_entry/help_entry.css">
+        <script src="./components/help_popup/help_popup.js"></script>
+        <div class="help-entry">
+            <span class="help-entry-title">${this.title}</span>
+            <img src="res/arrow.png" class="help-entry-arrow">     
+        </div>
+        <sea-help-popup style="visibility:hidden;" helptitle="${this.title}" helpdescription="${this.description}"></sea-help-popup>
+        `;
+    }
+}
+
+customElements.define("sea-help-entry", HelpEntry);