refactor tooltip

nattthebear · Jul 14, 2023 · f70fe99 · f70fe99
1 parent ea19b9f
commit f70fe99
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 85 deletions.
diff --git a/docs/index.1445ecdb.css b/docs/index.1445ecdb.css
diff --git a/docs/index.203c95b7.js b/docs/index.203c95b7.js
diff --git a/docs/index.928c49fb.css b/docs/index.928c49fb.css
diff --git a/docs/index.9c03c1ec.js b/docs/index.9c03c1ec.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="icon" href="data:,"><title>Final Fantasy 12 Character Planner</title><link rel="stylesheet" href="index.928c49fb.css"><script defer type="module" src="index.203c95b7.js"></script></head><body></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="icon" href="data:,"><title>Final Fantasy 12 Character Planner</title><link rel="stylesheet" href="index.1445ecdb.css"><script defer type="module" src="index.9c03c1ec.js"></script></head><body></body></html>
diff --git a/src/MouseOver.ts b/src/MouseOver.ts
diff --git a/src/component/App.tsx b/src/component/App.tsx
diff --git a/src/component/CharacterPlanner.tsx b/src/component/CharacterPlanner.tsx
@@ -1,21 +1,36 @@
 import { h, TPC } from "vdomk";
 import CharacterPanel from "./CharacterPanel";
 import LicenseBoard from "./LicenseBoard";
-import "./CharacterPlanner.css";
 import QeBoard from "./QeBoard";
 import Dps from "./Dps";
 import { useStore } from "../store/Store";
+import PartyModel from "../model/PartyModel";
+
+import "./CharacterPlanner.css";
 
 const CharacterPlanner: TPC<{}> = (_, instance) => {
  const getState = useStore(instance);
+ let prevParty: PartyModel | undefined;
+
  return () => {
- const store = getState();
+ const { party, qeActive, dpsActive } = getState();
+
+ if (party !== prevParty) {
+ requestIdleCallback(() => {
+ const urlBase = window.location.href.split("?")[0];
+ const search = party.encode();
+ const urlSuffix = search === "AA.AA.AA.AA.AA.AA" ? "" : "?" + search;
+ window.history.replaceState(null, "", urlBase + urlSuffix);
+ });
+ prevParty = party;
+ }
+
  return <div class="character-planner">
  <CharacterPanel />
- {store.qeActive
+ {qeActive
  ? <QeBoard />
- : store.dpsActive
- ? <Dps party={store.party} />
+ : dpsActive
+ ? <Dps party={party} />
  : <LicenseBoard />
  }
  </div>;

diff --git a/src/MouseOver.css → src/component/MouseOver.css b/src/MouseOver.css → src/component/MouseOver.css
@@ -9,4 +9,8 @@
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: none;
+
+ &.hidden {
+ display: none;
+ }
 }
diff --git a/src/component/MouseOver.tsx b/src/component/MouseOver.tsx
@@ -0,0 +1,35 @@
+import { computePosition, shift, flip } from "@floating-ui/dom";
+import { TPC, effect, h, scheduleUpdate } from "vdomk";
+import "./MouseOver.css";
+
+const Tooltip: TPC<{}> = (_, instance) => {
+ let floatingElement: HTMLDivElement | null = null;
+ const ref = (value: HTMLDivElement | null) => floatingElement = value;
+
+ let labelText: string | null = null;
+ let referenceElement: Element | null = null;
+
+ document.addEventListener("mouseover", event => {
+ referenceElement = event.target as Element | null;
+ while (referenceElement && (labelText = referenceElement.getAttribute("aria-label")) == null) {
+ referenceElement = referenceElement.parentElement;
+ }
+ scheduleUpdate(instance);
+ }, { passive: true });
+
+ async function updateStyles() {
+ if (referenceElement && floatingElement) {
+ const styles = await computePosition(referenceElement, floatingElement, { middleware: [flip(), shift()] });
+ floatingElement.style.transform = `translate(${Math.round(styles.x)}px,${Math.round(styles.y)}px)`;
+ }
+ }
+
+ document.addEventListener("scroll", updateStyles, { passive: true, capture: true });
+
+ return () => {
+ effect(instance, updateStyles);
+ return <div ref={ref} class={labelText ? "tooltip" : "tooltip hidden"}>{labelText}</div>;
+ };
+};
+
+export default Tooltip;
diff --git a/src/component/App.css → src/component/shared.css b/src/component/App.css → src/component/shared.css
@@ -1,3 +1,5 @@
+/* Global and shared styles */
+
 button {
  cursor: pointer;
  &:disabled {
@@ -13,7 +15,6 @@ button {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
-/* Some shared styles */
 .button {
  margin: 2px;
  border: 2px solid #000;

diff --git a/src/index.tsx b/src/index.tsx
@@ -22,12 +22,17 @@ if (!window.requestIdleCallback) {
  };
 }
 
-import { h, createRoot } from "vdomk";
-import App from "./component/App";
-import "./MouseOver";
+import "modern-normalize/modern-normalize.css";
+import "./component/shared.css";
+
+import { h, Fragment, createRoot } from "vdomk";
+import CharacterPlanner from "./component/CharacterPlanner";
+import MouseOver from "./component/MouseOver";
 
 createRoot(
  document.body,
- <App />,
- document.body.lastChild // tooltip must come after the app root
+ <>
+ <CharacterPlanner />
+ <MouseOver />
+ </>
 );