From 1eb3c2712bf6ed30be25a832c0ceadaf984487eb Mon Sep 17 00:00:00 2001
From: MasterGordon <gologo.x@gmail.com>
Date: Wed, 28 Mar 2018 02:01:07 +0200
Subject: [PATCH] Added Tooltips

---
 css/main.css        | 16 ++++++++++++--
 index.html          |  5 +++++
 js/game.js          |  7 ++++++
 js/userinterface.js | 53 ++++++++++++++++++++++++++++++++++++++++++---
 lang/en.json        |  4 +++-
 5 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/css/main.css b/css/main.css
index 74c3136..03dc56b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -42,7 +42,7 @@ body {
 #infoDesc {
   position: fixed;
   width: 240;
-  height: 192;
+  height: 180;
   font-family: 'Electrolize', sans-serif;
   direction: rtl;
 }
@@ -56,7 +56,19 @@ body {
   font-size: 19px;
   overflow-y: auto;
   direction: ltr;
-  height: 166;
+  height: 154;
+}
+
+#tooltip {
+  background-color: rgba(0, 0, 0, 0.3);
+  font-family: 'Electrolize', sans-serif;
+  position: fixed;
+  width: fit-content;
+  color: floralwhite;
+  padding: 2px;
+  border: 2px;
+  border-style: solid;
+  border-color: gray;
 }
 
 .buildtile {
diff --git a/index.html b/index.html
index de7e5f0..8eae7bd 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,11 @@
   </div>
   <div id="buildselect">
   </div>
+  <div id="tooltip">
+    <span>
+      Example
+    </span>
+  </div>
 </body>
 
 </html>
diff --git a/js/game.js b/js/game.js
index 2b23c5e..6f09c01 100644
--- a/js/game.js
+++ b/js/game.js
@@ -259,4 +259,11 @@ function drawInfoBar() {
     $('#infoDesc h1').text("")
     $('#infoDesc p').text("")
   }
+  if(selectedTile.maxwork!=0){
+    $('#infoDesc p').css("height", 154)
+    infoCtx.fillStyle = "green";
+    infoCtx.fillRect(0, 228, 432*(selectedTile.currentwork/selectedTile.maxwork), 12)
+  }else{
+    $('#infoDesc p').css("height", 166)
+  }
 }
diff --git a/js/userinterface.js b/js/userinterface.js
index 19ef850..08bf12c 100644
--- a/js/userinterface.js
+++ b/js/userinterface.js
@@ -60,8 +60,28 @@ var isCursorInInfo = true
 
 var mousedown = false
 
-function onDocumentMouseMove(event) {
+var tooltip = ""
 
+function onDocumentMouseMove(event) {
+  //Tooltip POS
+  setTooltip()
+  if (tooltip) {
+    var tooltipX = event.clientX + 3
+    var tooltipY = event.clientY - $('#tooltip').height() - 6
+
+    if (tooltipX + $('#tooltip').width() > innerWidth) {
+      tooltipX -= ($('#tooltip').width() + 12)
+    }
+
+    if (tooltipY < 0) {
+      tooltipY += $('#tooltip').height() + 3
+    }
+
+    $('#tooltip').css("top", tooltipY)
+    $('#tooltip').css("left", tooltipX)
+  }
+
+  //Track CursorPos
   var mX = event.clientX - screenleftpos;
   var mY = event.clientY - screentoppos;
   if (mX < 0 || mX > 1200 || mY < 0 || mY > 576) {
@@ -82,8 +102,8 @@ function onDocumentMouseMove(event) {
         cursorInfoY = Math.floor(mY / 48);
       }
     } else {
-      cursorItemCountX = Math.floor(mX / 48);
-      cursorItemCountY = Math.floor(mY / 48);
+      cursorItemCountX = Math.floor(mX / 72);
+      cursorItemCountY = Math.floor((mY - 24) / 72);
     }
   } else {
     cursorScreenX = Math.floor(mX / 48);
@@ -161,6 +181,33 @@ var moveFromY = 0
 var moveFromCX = -1
 var moveFromCY = -1
 
+//itemId[]
+
+function setTooltip() {
+  if (cursorInfoY == 0) {
+    if (lang.infotooltips[cursorInfoX] == "") {
+      $('#tooltip').hide()
+      tooltip = false
+      return
+    }
+    $('#tooltip').text(lang.infotooltips[cursorInfoX])
+    $('#tooltip').show()
+    tooltip = true
+    return;
+  }
+  if (isCursorInItemCount) {
+    if (cursorItemCountX + cursorItemCountY * 10 < itemId.length) {
+      $('#tooltip').text(lang.items[itemId[cursorItemCountX + cursorItemCountY * 10]])
+      $('#tooltip').show()
+      tooltip = true
+      return;
+    }
+  }
+
+  $('#tooltip').hide()
+  tooltip = false
+}
+
 function buildEvents() {
   $('img').click(function() {
     var id = $(this).attr("id");
diff --git a/lang/en.json b/lang/en.json
index a35f5a2..ad7c71c 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -17,7 +17,9 @@
       "description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
     }
   },
+  "items": ["Coal", "Log", "Planks"],
   "more": "show more...",
   "inventory": "Inventory",
-  "player": "Player"
+  "player": "Player",
+  "infotooltips": ["Build", "Move", "Rotate", "Delete!", "", "Upgrade", "Information", "", "Go To Space!!"]
 }