diff --git a/example/public/images/icon_104.png b/example/public/images/icon_104.png new file mode 100755 index 0000000..261ce4e Binary files /dev/null and b/example/public/images/icon_104.png differ diff --git a/example/public/images/icon_67.png b/example/public/images/icon_67.png new file mode 100755 index 0000000..9a110af Binary files /dev/null and b/example/public/images/icon_67.png differ diff --git a/example/public/images/icon_78.png b/example/public/images/icon_78.png new file mode 100755 index 0000000..017dd86 Binary files /dev/null and b/example/public/images/icon_78.png differ diff --git a/example/public/images/icon_79.png b/example/public/images/icon_79.png new file mode 100755 index 0000000..ffad54e Binary files /dev/null and b/example/public/images/icon_79.png differ diff --git a/example/public/images/icon_80.png b/example/public/images/icon_80.png new file mode 100755 index 0000000..a3dbd76 Binary files /dev/null and b/example/public/images/icon_80.png differ diff --git a/example/public/images/icon_86.png b/example/public/images/icon_86.png new file mode 100755 index 0000000..83419fa Binary files /dev/null and b/example/public/images/icon_86.png differ diff --git a/example/public/images/icon_92.png b/example/public/images/icon_92.png new file mode 100755 index 0000000..1ef34a8 Binary files /dev/null and b/example/public/images/icon_92.png differ diff --git a/example/src/components/page/Examples.js b/example/src/components/page/Examples.js index 84c20d0..926db3e 100644 --- a/example/src/components/page/Examples.js +++ b/example/src/components/page/Examples.js @@ -10,7 +10,7 @@ import SlayTree from "../../trees/slay"; const types = ["Simple", "Themed", "Enhaced"]; const choiceDic = { text: { label: "Text", key: "text", type: "Simple", Tree: TextTree }, - effects: { label: "Pixelated Effects", key: "effects", type: "Simple", Tree: EffectsTree }, // prettier-ignore + effects: { label: "Image", key: "effects", type: "Simple", Tree: EffectsTree }, // prettier-ignore superhero: { label: "X-Men", key: "superhero", type: "Themed", Tree: SuperheroTree }, // prettier-ignore slay: { label: "Slay The Spire", key: "slay", type: "Themed", Tree: SlayTree }, // prettier-ignore text_tooltip: { label: "Text Tooltip", key: "text_tooltip", type: "Enhaced", Tree: TextTooltipTree } // prettier-ignore diff --git a/example/src/trees/effects/data/spritesheet.json b/example/src/trees/effects/data/spritesheet.json deleted file mode 100644 index d00568e..0000000 --- a/example/src/trees/effects/data/spritesheet.json +++ /dev/null @@ -1,543 +0,0 @@ -{"frames": { - -"icon_10": -{ - "frame": {"x":1,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_103": -{ - "frame": {"x":37,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_104": -{ - "frame": {"x":73,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_105": -{ - "frame": {"x":109,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_106": -{ - "frame": {"x":145,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_107": -{ - "frame": {"x":181,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_108": -{ - "frame": {"x":217,"y":1,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_109": -{ - "frame": {"x":1,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_110": -{ - "frame": {"x":37,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_111": -{ - "frame": {"x":73,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_22": -{ - "frame": {"x":109,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_23": -{ - "frame": {"x":145,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_24": -{ - "frame": {"x":181,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_25": -{ - "frame": {"x":217,"y":37,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_26": -{ - "frame": {"x":1,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_27": -{ - "frame": {"x":37,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_28": -{ - "frame": {"x":73,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_32": -{ - "frame": {"x":109,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_51": -{ - "frame": {"x":145,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_52": -{ - "frame": {"x":181,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_53": -{ - "frame": {"x":217,"y":73,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_57": -{ - "frame": {"x":1,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_58": -{ - "frame": {"x":37,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_59": -{ - "frame": {"x":73,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_60": -{ - "frame": {"x":109,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_61": -{ - "frame": {"x":145,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_62": -{ - "frame": {"x":181,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_63": -{ - "frame": {"x":217,"y":109,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_64": -{ - "frame": {"x":1,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_65": -{ - "frame": {"x":37,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_66": -{ - "frame": {"x":73,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_67": -{ - "frame": {"x":109,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_71": -{ - "frame": {"x":145,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_72": -{ - "frame": {"x":181,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_73": -{ - "frame": {"x":217,"y":145,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_74": -{ - "frame": {"x":1,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_75": -{ - "frame": {"x":37,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_76": -{ - "frame": {"x":73,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_77": -{ - "frame": {"x":109,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_78": -{ - "frame": {"x":145,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_79": -{ - "frame": {"x":181,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_80": -{ - "frame": {"x":217,"y":181,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_81": -{ - "frame": {"x":1,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_82": -{ - "frame": {"x":37,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_83": -{ - "frame": {"x":73,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_84": -{ - "frame": {"x":109,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_85": -{ - "frame": {"x":145,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_86": -{ - "frame": {"x":181,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_87": -{ - "frame": {"x":217,"y":217,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_88": -{ - "frame": {"x":1,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_89": -{ - "frame": {"x":37,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_90": -{ - "frame": {"x":73,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_91": -{ - "frame": {"x":109,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_92": -{ - "frame": {"x":145,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_93": -{ - "frame": {"x":181,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_94": -{ - "frame": {"x":217,"y":253,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_95": -{ - "frame": {"x":1,"y":289,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_96": -{ - "frame": {"x":1,"y":325,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}, -"icon_97": -{ - "frame": {"x":1,"y":361,"w":34,"h":34}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":34,"h":34}, - "sourceSize": {"w":34,"h":34}, - "pivot": {"x":0.5,"y":0.5} -}}, -"meta": { - "app": "http://www.codeandweb.com/texturepacker", - "version": "1.0", - "image": "spritesheet.png", - "format": "RGBA8888", - "size": {"w":256,"h":512}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:8c0437e761b3e9144a71eece856f1850:9a76cebb7999a5a2dd1ccca0365f7e70:729adc6043343cfda41c447ce8f464d6$" -} -} diff --git a/example/src/trees/effects/data/spritesheet.png b/example/src/trees/effects/data/spritesheet.png deleted file mode 100644 index 6f43a8c..0000000 Binary files a/example/src/trees/effects/data/spritesheet.png and /dev/null differ diff --git a/example/src/trees/effects/data/tree.json b/example/src/trees/effects/data/tree.json index 932b359..57b132a 100644 --- a/example/src/trees/effects/data/tree.json +++ b/example/src/trees/effects/data/tree.json @@ -1,7 +1,7 @@ { "nodes": [ [ - { "name": "icon_104", "id": "A" }, + { "name": "icon_78", "id": "A" }, { "name": "icon_92", "id": "B" } ], [ diff --git a/example/src/trees/effects/index.js b/example/src/trees/effects/index.js index e5688d7..36a454a 100644 --- a/example/src/trees/effects/index.js +++ b/example/src/trees/effects/index.js @@ -1,21 +1,23 @@ import React from "react"; -import { Tree, prepareSpritesheetStyle } from "react-tech-tree"; +import { Tree } from "react-tech-tree"; import treeData from "./data/tree.json"; -import spriteInformation from "./data/spritesheet.json"; -import spriteImage from "./data/spritesheet.png"; import "./index.css"; const { nodes, links } = treeData; +const styleName = name => ({ + backgroundImage: `url(https://github.com/$%7Bprocess.env.PUBLIC_URL%7D/images/$%7Bname%7D.png)`, + width: 34, + height: 34 +}); + function EffectsTree() { return ( ); }