Added tooltip for beatmap stats (#20)

package.json

@@ -6,7 +6,7 @@
     "email": "doughtnerd@gmail.com",
     "url": "https://github.com/Doughtnerd"
   },
-  "version": "1.5.4",
+  "version": "1.6.1",
   "main": "./src/electron.js",
   "license": "(MIT OR Apache-2.0)",
   "repository": {

src/render/actions/tooltip.js

@@ -1,12 +1,12 @@
 import { listen } from "svelte/internal";
 
-export function tooltip(node, tooltipText) {
+export function tooltip(node, { text, position = "right" }) {
   const tooltip = document.createElement("div");
   const style = document.createElement("style");
-  tooltip.textContent = tooltipText;
+  tooltip.textContent = text;
   tooltip.className = "tooltip";
 
-  style.textContent = `
+  const tooltipStyle = `
     .tooltip {
       position: absolute;
       color: var(--backgroundText);
@@ -18,7 +18,22 @@ export function tooltip(node, tooltipText) {
       transition: opacity .5s;
       transform: translate(5px, -50%);
     }
+  `;
+
+  const leftPointerStyle = `
+      .tooltip::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 100%;
+        margin-top: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent transparent var(--tooltipBackgroundColor) ;
+      }
+  `;
 
+  const rightPointerStyle = `
     .tooltip::after {
       content: "";
       position: absolute;
@@ -31,18 +46,38 @@ export function tooltip(node, tooltipText) {
     }
   `;
 
-  function position() {
-    const { top, right, bottom } = node.getBoundingClientRect();
+  switch (position) {
+    case "right": {
+      style.textContent = tooltipStyle + rightPointerStyle;
+      break;
+    }
+    case "left": {
+      style.textContent = tooltipStyle + leftPointerStyle;
+      break;
+    }
+  }
+
+  function positionTooltip() {
+    const { top, right, bottom, left, width } = node.getBoundingClientRect();
     tooltip.style.top = `${(top + bottom) / 2}px`;
-    tooltip.style.left = `${right}px`;
+    switch (position) {
+      case "right": {
+        tooltip.style.left = `${right}px`;
+        break;
+      }
+      case "left": {
+        tooltip.style.left = `${left - width}px`; // = `${left}px`;
+        break;
+      }
+    }
   }
 
   function append() {
     document.body.appendChild(tooltip);
     tooltip.prepend(style);
     tooltip.style.opacity = "0";
     setTimeout(() => (tooltip.style.opacity = "1"));
-    position();
+    positionTooltip();
   }
 
   function remove() {
@@ -59,8 +94,8 @@ export function tooltip(node, tooltipText) {
       cancelMouseleave();
     },
 
-    update(newText) {
-      tooltip.textContent = newText;
-    }
+    update({ text, position }) {
+      tooltip.textContent = text;
+    },
   };
 }

src/render/components/BeatmapKey.svelte

@@ -1,9 +1,11 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
-
+  import { tooltip } from "../actions/tooltip";
   import { key } from "svelte-awesome/icons";
 </script>
 
-<BeatmapStat icon={key} iconColor="var(--beatmapKeyIconColor)">
-  <slot />
-</BeatmapStat>
+<div use:tooltip={{ text: 'Id', position: 'left' }}>
+  <BeatmapStat icon={key} iconColor="var(--beatmapKeyIconColor)">
+    <slot />
+  </BeatmapStat>
+</div>

src/render/components/BeatmapListItem.svelte

@@ -119,7 +119,9 @@
       <PrimaryText>
         <span style="font-size: 24px">{beatmap.metadata.songName}</span>
       </PrimaryText>
-      <SecondaryText>{beatmap.metadata.songAuthorName}</SecondaryText>
+      <SecondaryText>
+        {beatmap.metadata.songAuthorName.toLowerCase() === beatmap.metadata.levelAuthorName.toLowerCase() ? beatmap.metadata.songSubName : beatmap.metadata.songAuthorName}
+      </SecondaryText>
       <SecondaryText>
         Uploaded by: {beatmap.metadata.levelAuthorName}
       </SecondaryText>

src/render/components/Downloads.svelte

@@ -1,12 +1,15 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
+  import { tooltip } from "../actions/tooltip";
   import { download } from "svelte-awesome/icons";
 
   export let count;
 
   $: textVal = count.toLocaleString();
 </script>
 
-<BeatmapStat icon={download} iconColor="var(--beatmapDownloadsIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Downloads', position: 'left' }}>
+  <BeatmapStat icon={download} iconColor="var(--beatmapDownloadsIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+</div>

src/render/components/Downvotes.svelte

@@ -1,12 +1,15 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
   import { thumbsDown } from "svelte-awesome/icons";
-
+  import { tooltip } from "../actions/tooltip";
   export let count;
 
   $: textVal = count.toLocaleString();
 </script>
 
-<BeatmapStat icon={thumbsDown} iconColor="var(--beatmapDownvotesIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Downvotes', position: 'left' }}>
+  <BeatmapStat icon={thumbsDown} iconColor="var(--beatmapDownvotesIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+
+</div>

src/render/components/DrawerItem.svelte

@@ -37,7 +37,7 @@
 <div
   class="drawer-item"
   class:active={currentActiveView === itemName}
-  use:tooltip={itemName}
+  use:tooltip={{ text: itemName }}
   on:click>
   <Icon scale={2} data={icon} />
 

src/render/components/Rating.svelte

@@ -1,12 +1,14 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
   import { percent } from "svelte-awesome/icons";
-
+  import { tooltip } from "../actions/tooltip";
   export let percentage;
 
   $: textVal = Math.round(percentage * 100);
 </script>
 
-<BeatmapStat icon={percent} iconColor="var(--beatmapRatingIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Avg. Rating', position: 'left' }}>
+  <BeatmapStat icon={percent} iconColor="var(--beatmapRatingIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+</div>

src/render/components/Upvotes.svelte

@@ -1,12 +1,14 @@
 <script>
   import BeatmapStat from "./BeatmapStat.svelte";
   import { thumbsUp } from "svelte-awesome/icons";
-
+  import { tooltip } from "../actions/tooltip";
   export let count;
 
   $: textVal = count.toLocaleString();
 </script>
 
-<BeatmapStat icon={thumbsUp} iconColor="var(--beatmapUpvotesIconColor)">
-  <span>{textVal}</span>
-</BeatmapStat>
+<div use:tooltip={{ text: 'Upvotes', position: 'left' }}>
+  <BeatmapStat icon={thumbsUp} iconColor="var(--beatmapUpvotesIconColor)">
+    <span>{textVal}</span>
+  </BeatmapStat>
+</div>