Merge pull request #559 from mrhappyasthma/master

Add tooltips to the influence icons.
Longwelwind · Apr 20, 2020 · 38244e6 · 38244e6
2 parents 31cd0a7 + 9e4effd
commit 38244e6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/agot-bg-game-server/src/client/IngameComponent.tsx b/agot-bg-game-server/src/client/IngameComponent.tsx
@@ -49,6 +49,7 @@ import Tab from "react-bootstrap/Tab";
 import ChatComponent from "./chat-client/ChatComponent";
 import {HouseCardState} from "../common/ingame-game-state/game-data-structure/house-card/HouseCard";
 import HouseCardBackComponent from "./game-state-panel/utils/HouseCardBackComponent";
+import InfluenceIconComponent from "./game-state-panel/utils/InfluenceIconComponent";
 import Dropdown from "react-bootstrap/Dropdown";
 import User from "../server/User";
 import Player from "../common/ingame-game-state/Player";
@@ -163,9 +164,9 @@ export default class IngameComponent extends Component<IngameComponentProps> {
                                                 </Col>
                                                 {tracker.map((h, i) => (
                                                     <Col xs="auto" key={h.id}>
-                                                        <div className="influence-icon hover-weak-outline"
-                                                             style={{backgroundImage: `url(${houseInfluenceImages.get(h.id)})`}}>
-                                                        </div>
+                                                        <InfluenceIconComponent
+                                                            house={h}
+                                                        />
                                                         <div className="tracker-star-container">
                                                             {stars && i < this.game.starredOrderRestrictions.length && (
                                                                 _.range(0, this.game.starredOrderRestrictions[i]).map(i => (

diff --git a/agot-bg-game-server/src/client/game-state-panel/utils/InfluenceIconComponent.tsx b/agot-bg-game-server/src/client/game-state-panel/utils/InfluenceIconComponent.tsx
@@ -0,0 +1,29 @@
+import {Component, default as React, ReactNode} from "react";
+import {observer} from "mobx-react";
+import Tooltip from "react-bootstrap/Tooltip";
+import houseInfluenceImages from "../../houseInfluenceImages";
+import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import House from "../../../common/ingame-game-state/game-data-structure/House";
+
+interface InfluenceIconComponentProps {
+    house: House;
+}
+
+@observer
+export default class InfluenceIconComponent extends Component<InfluenceIconComponentProps> {
+    render(): ReactNode {
+        return (
+            <OverlayTrigger overlay={
+                    <Tooltip id="influence-icon">
+                        <b>{this.props.house.name}</b>
+                    </Tooltip>
+                }
+                placement="bottom"
+            >
+                <div className="influence-icon hover-weak-outline"
+                    style={{backgroundImage: `url(${houseInfluenceImages.get(this.props.house.id)})`}}>
+                </div>
+            </OverlayTrigger>
+        );
+    }
+}