@react-text-game/ui 0.3.5 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/InteractiveMapComponent/Hotspot.d.ts.map +1 -1
- package/dist/components/InteractiveMapComponent/Hotspot.js +3 -5
- package/dist/components/InteractiveMapComponent/Hotspot.js.map +1 -1
- package/dist/components/InteractiveMapComponent/HotspotMenu.d.ts.map +1 -1
- package/dist/components/InteractiveMapComponent/HotspotMenu.js +3 -5
- package/dist/components/InteractiveMapComponent/HotspotMenu.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hotspot.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/Hotspot.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,eAAe,EACf,eAAe,EAClB,MAAM,gCAAgC,CAAC;AAMxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,YAAY,GAAG;IAChB,OAAO,EAAE,eAAe,GAAG,eAAe,CAAC;IAC3C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,gCAAgC,YAAY,
|
|
1
|
+
{"version":3,"file":"Hotspot.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/Hotspot.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,eAAe,EACf,eAAe,EAClB,MAAM,gCAAgC,CAAC;AAMxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,YAAY,GAAG;IAChB,OAAO,EAAE,eAAe,GAAG,eAAe,CAAC;IAC3C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,gCAAgC,YAAY,4CA4CnE,CAAC"}
|
|
@@ -10,14 +10,12 @@ export const Hotspot = ({ hotspot, imagePositionInfo }) => {
|
|
|
10
10
|
// Position the hotspot based on percentage coordinates and image position info
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
if (hotspotRef.current && imagePositionInfo) {
|
|
13
|
-
const { x, y } = hotspot.position;
|
|
13
|
+
const { x, y } = callIfFunction(hotspot.position);
|
|
14
14
|
const { offsetLeft, offsetTop, scaledWidth, scaledHeight } = imagePositionInfo;
|
|
15
15
|
// Calculate position based on percentage of the scaled image
|
|
16
16
|
// x and y are percentages (0-100), so we convert to 0-1 by dividing by 100
|
|
17
|
-
const xPos = offsetLeft +
|
|
18
|
-
|
|
19
|
-
const yPos = offsetTop +
|
|
20
|
-
((typeof y === "number" ? y : y()) / 100) * scaledHeight;
|
|
17
|
+
const xPos = offsetLeft + (x / 100) * scaledWidth;
|
|
18
|
+
const yPos = offsetTop + (y / 100) * scaledHeight;
|
|
21
19
|
hotspotRef.current.style.left = `${xPos}px`;
|
|
22
20
|
hotspotRef.current.style.top = `${yPos}px`;
|
|
23
21
|
// Ensure transforms are applied
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hotspot.js","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/Hotspot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAMb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAgB,EAAE,EAAE;IACpE,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEhE,+EAA+E;IAC/E,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO,IAAI,iBAAiB,EAAE,CAAC;YAC1C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Hotspot.js","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/Hotspot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAMb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAgB,EAAE,EAAE;IACpE,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEhE,+EAA+E;IAC/E,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,CAAC,OAAO,IAAI,iBAAiB,EAAE,CAAC;YAC1C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAClD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,GACtD,iBAAiB,CAAC;YAEtB,6DAA6D;YAC7D,2EAA2E;YAC3E,MAAM,IAAI,GAAG,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,WAAW,CAAC;YAClD,MAAM,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,YAAY,CAAC;YAElD,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;YAC5C,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC;YAE3C,gCAAgC;YAChC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,uBAAuB,CAAC;QACjE,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1C,OAAO,CACH,cAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,eAAe,YAC1C,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACxB,KAAC,YAAY,IACT,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,KACvC,CAAC,iBAAiB,IAAI,EAAE,iBAAiB,EAAE,CAAC,GAClD,CACL,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAC3B,KAAC,YAAY,IACT,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,GAC7C,CACL,CAAC,CAAC,CAAC,CACA,iDAA+B,CAClC,GACC,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotspotMenu.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/HotspotMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,KAAK,GAAG,QAAQ,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,6BAA6B,KAAK,
|
|
1
|
+
{"version":3,"file":"HotspotMenu.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/HotspotMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,KAAK,GAAG,QAAQ,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACzC,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,6BAA6B,KAAK,mDA6C7D,CAAC"}
|
|
@@ -12,13 +12,11 @@ export const HotspotMenu = ({ menu, imagePositionInfo }) => {
|
|
|
12
12
|
// Position the menu based on percentage coordinates and image position info
|
|
13
13
|
useEffect(() => {
|
|
14
14
|
if (menuRef.current && imagePositionInfo && items.length) {
|
|
15
|
-
const { x, y } = menu.position;
|
|
15
|
+
const { x, y } = callIfFunction(menu.position);
|
|
16
16
|
const { offsetLeft, offsetTop, scaledWidth, scaledHeight } = imagePositionInfo;
|
|
17
17
|
// Calculate position based on percentage of the scaled image
|
|
18
|
-
const xPos = offsetLeft +
|
|
19
|
-
|
|
20
|
-
const yPos = offsetTop +
|
|
21
|
-
((typeof y === "number" ? y : y()) / 100) * scaledHeight;
|
|
18
|
+
const xPos = offsetLeft + (x / 100) * scaledWidth;
|
|
19
|
+
const yPos = offsetTop + (y / 100) * scaledHeight;
|
|
22
20
|
menuRef.current.style.left = `${xPos}px`;
|
|
23
21
|
menuRef.current.style.top = `${yPos}px`;
|
|
24
22
|
menuRef.current.style.transform = "translate(-50%, -50%)";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotspotMenu.js","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/HotspotMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAS,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CACD,IAAI,CAAC,KAAK;SACL,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SACnC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,CAAC,EAC7C,CAAC,IAAI,CAAC,KAAK,CAAC,CACf,CAAC;IAEF,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,CAAC,OAAO,IAAI,iBAAiB,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACvD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC/
|
|
1
|
+
{"version":3,"file":"HotspotMenu.js","sourceRoot":"","sources":["../../../src/components/InteractiveMapComponent/HotspotMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAS,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CACD,IAAI,CAAC,KAAK;SACL,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;SACnC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,CAAC,EAC7C,CAAC,IAAI,CAAC,KAAK,CAAC,CACf,CAAC;IAEF,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,CAAC,OAAO,IAAI,iBAAiB,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACvD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/C,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,GACtD,iBAAiB,CAAC;YAEtB,6DAA6D;YAC7D,MAAM,IAAI,GAAG,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,WAAW,CAAC;YAClD,MAAM,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,YAAY,CAAC;YAElD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;YACzC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC;YACxC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,uBAAuB,CAAC;QAC9D,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAErD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,CAAC,8CAA8C;IAC/D,CAAC;IAED,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,OAAO,CACd,oDAAoD,EACpD,oCAAoC,EACpC,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAC5D,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,IAAO,KAAK,CAAI,CAC9C,CAAC,GACA,CACT,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-text-game/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.6",
|
|
4
4
|
"description": "Themeable React UI component library for text-based games with Tailwind CSS v4, featuring story passages, interactive maps, and customizable game interfaces",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|