From bd5ccdf6b1d4dc1b66fc32c2f6cdb5dd8e3f0169 Mon Sep 17 00:00:00 2001 From: Sean Boult <996134+Hacksore@users.noreply.github.com> Date: Wed, 15 Jul 2020 20:56:05 -0500 Subject: [PATCH] Update storybook --- .storybook/main.js | 4 +- examples/stories/animation.story.js | 49 +++++++++++++ examples/stories/basic.story.js | 19 +++++ examples/stories/index.stories.js | 100 --------------------------- examples/stories/textures.story.js | 103 ++++++++++++++++++++++++++++ examples/stories/util.js | 21 ++++++ 6 files changed, 194 insertions(+), 102 deletions(-) create mode 100644 examples/stories/animation.story.js create mode 100644 examples/stories/basic.story.js delete mode 100644 examples/stories/index.stories.js create mode 100644 examples/stories/textures.story.js create mode 100644 examples/stories/util.js diff --git a/.storybook/main.js b/.storybook/main.js index 13feb3a..328ed69 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { - stories: ['../examples/stories/**/*.stories.js'], - addons: ['@storybook/addon-knobs/register'] + stories: ["../examples/stories/**/*.story.js"], + addons: ["@storybook/addon-knobs/register"], }; diff --git a/examples/stories/animation.story.js b/examples/stories/animation.story.js new file mode 100644 index 0000000..27d659b --- /dev/null +++ b/examples/stories/animation.story.js @@ -0,0 +1,49 @@ +/* eslint-disable */ +import { createViewer } from "./util"; +import { withKnobs, number } from "@storybook/addon-knobs"; +import * as skinview3d from "../.."; +import { radios } from "@storybook/addon-knobs"; + +let { viewer, element, defaultAnimation } = createViewer(); +let currentAnimation = defaultAnimation; + +export default { + title: "Skinview3d", + name: "Animation", + decorators: [withKnobs], +}; + +export const Animation = () => { + if (currentAnimation) { + currentAnimation.remove(); + } + + const animationMap = { + Walk: skinview3d.WalkingAnimation, + Run: skinview3d.RunningAnimation, + Rotate: skinview3d.RotatingAnimation, + }; + + const animationKey = radios("Animations", Object.keys(animationMap), "Run"); + + if (currentAnimation) { + currentAnimation.resetAndRemove(); + } + + currentAnimation = viewer.animations.add(animationMap[animationKey]); + + const label = "Speed"; + + const defaultValue = 0.5; + const options = { + range: true, + min: 0.1, + max: 2, + step: 0.01, + }; + const value = number(label, defaultValue, options); + + currentAnimation.speed = value; + + return element; +}; diff --git a/examples/stories/basic.story.js b/examples/stories/basic.story.js new file mode 100644 index 0000000..b74f2c5 --- /dev/null +++ b/examples/stories/basic.story.js @@ -0,0 +1,19 @@ +/* eslint-disable */ +import { createViewer } from "./util"; +import { withKnobs, number } from "@storybook/addon-knobs"; +let { viewer, element } = createViewer(); + +export default { + title: "Skinview3d", + name: "Basic", + decorators: [withKnobs], +}; + +export const Basic = () => { + const width = number("Canvas Width", 300); + const height = number("Canvas Height", 400); + + viewer.setSize(width, height); + + return element; +}; diff --git a/examples/stories/index.stories.js b/examples/stories/index.stories.js deleted file mode 100644 index 5a40678..0000000 --- a/examples/stories/index.stories.js +++ /dev/null @@ -1,100 +0,0 @@ -/* eslint-disable */ -import * as skinview3d from "../.."; -import { withKnobs, radios, number } from "@storybook/addon-knobs"; - -export default { - title: "Skinview3d", - decorators: [withKnobs], -}; - -let currentAnimation; - -const createViewer = () => { - const element = document.createElement("div"); - const viewer = new skinview3d.SkinViewer(element, { - width: 300, - height: 400, - skin: "textures/1_8_texturemap_redux.png", - }); - - console.log(viewer); - - // Control objects with your mouse! - const control = skinview3d.createOrbitControls(viewer); - control.enableRotate = true; - control.enableZoom = false; - control.enablePan = false; - - // Add an animation - currentAnimation = viewer.animations.add(skinview3d.WalkingAnimation); - - return { viewer, element }; -}; - -let { viewer, element } = createViewer(); - -export const Basic = () => { - // reset - let { viewer, element } = createViewer(); - if (currentAnimation) { - currentAnimation.remove(); - } - - return element; -}; - -export const Animation = () => { - if (currentAnimation) { - currentAnimation.remove(); - } - - const animationMap = { - Walk: skinview3d.WalkingAnimation, - Run: skinview3d.RunningAnimation, - Rotate: skinview3d.RotatingAnimation, - }; - - const animationKey = radios("Animations", Object.keys(animationMap), "Run"); - currentAnimation = viewer.animations.add(animationMap[animationKey]); - - const label = "Speed"; - - const defaultValue = 0.5; - const options = { - range: true, - min: 0.1, - max: 2, - step: 0.01, - }; - const value = number(label, defaultValue, options); - - currentAnimation.speed = value; - - return element; -}; - -export const Textures = () => { - const skinOptions = { - "1.8 Skin": "1_8_texturemap_redux", - "Classic Skin": "Hacksore", - "HD Skin": "ironman_hd", - }; - const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux"); - - const capeOptions = { - None: "none", - "Classic Cape": "cape", - "HD Cape": "hd_cape", - }; - - const capeUrl = radios("Cape Textures", capeOptions, "none"); - viewer.loadSkin(`textures/${skinUrl}.png`); - - if (capeUrl === "none") { - viewer.loadCape(null); - } else { - viewer.loadCape(`textures/${capeUrl}.png`); - } - - return element; -}; diff --git a/examples/stories/textures.story.js b/examples/stories/textures.story.js new file mode 100644 index 0000000..4b460fa --- /dev/null +++ b/examples/stories/textures.story.js @@ -0,0 +1,103 @@ +/* eslint-disable */ +import { createViewer } from "./util"; +import { radios, withKnobs, optionsKnob } from "@storybook/addon-knobs"; +let { viewer, element } = createViewer(); + +const bodyParts = viewer.playerObject.skin; +const skinParts = {}; + +// set inner parts +skinParts.head = bodyParts.head.innerLayer; +skinParts.body = bodyParts.body.innerLayer; +skinParts.leftArm = bodyParts.leftArm.innerLayer; +skinParts.rightArm = bodyParts.rightArm.innerLayer; +skinParts.leftLeg = bodyParts.leftLeg.innerLayer; +skinParts.rightLeg = bodyParts.rightLeg.innerLayer; + +// set outter parts +skinParts.head2 = bodyParts.head.outerLayer; +skinParts.body2 = bodyParts.body.outerLayer; +skinParts.leftArm2 = bodyParts.leftArm.outerLayer; +skinParts.rightArm2 = bodyParts.rightArm.outerLayer; +skinParts.leftLeg2 = bodyParts.leftLeg.outerLayer; +skinParts.rightLeg2 = bodyParts.rightLeg.outerLayer; + +export default { + title: "Skinview3d", + name: "Textures", + decorators: [withKnobs], +}; + +export const Textures = () => { + const skinOptions = { + "1.8 Skin": "1_8_texturemap_redux", + "Classic Skin": "Hacksore", + "HD Skin": "ironman_hd", + }; + const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux"); + + const capeOptions = { + None: "none", + "Classic Cape": "cape", + "HD Cape": "hd_cape", + }; + + const capeUrl = radios("Cape Textures", capeOptions, "none"); + viewer.loadSkin(`textures/${skinUrl}.png`); + + if (capeUrl === "none") { + viewer.loadCape(null); + } else { + viewer.loadCape(`textures/${capeUrl}.png`); + } + + // bottom layers + const valuesBottomLayer = { + Head: "head", + Body: "body", + LeftArm: "leftArm", + RightArm: "rightArm", + RightLeg: "rightLeg", + LeftLeg: "leftLeg", + }; + + const optionsBottomLayer = optionsKnob( + "Bottom Layer", + valuesBottomLayer, + Object.values(valuesBottomLayer), + { + display: "inline-check", + } + ); + + // bottom layers + const valuesTopLayer = { + Head2: "head2", + Body2: "body2", + LeftArm2: "leftArm2", + RightArm2: "rightArm2", + RightLeg2: "rightLeg2", + LeftLeg2: "leftLeg2", + }; + + const optionsTopLayer = optionsKnob( + "Top Layer", + valuesTopLayer, + Object.values(valuesTopLayer), + { + display: "inline-check", + } + ); + + // toggle parts + console.log(skinParts); + for (let partName in skinParts) { + const visible = optionsBottomLayer + .concat(optionsTopLayer) + .includes(partName); + + skinParts[partName].visible = visible; + } + + return element; +}; diff --git a/examples/stories/util.js b/examples/stories/util.js new file mode 100644 index 0000000..44f52bc --- /dev/null +++ b/examples/stories/util.js @@ -0,0 +1,21 @@ +/* eslint-disable */ +import * as skinview3d from "../.."; + +export const createViewer = (config) => { + const width = config?.width || 300; + const height = config?.height || 400; + + const element = document.createElement("div"); + const viewer = new skinview3d.SkinViewer(element, { + width: width, + height: height, + skin: "textures/1_8_texturemap_redux.png", + }); + + const control = skinview3d.createOrbitControls(viewer); + control.enableRotate = true; + control.enableZoom = true; + control.enablePan = true; + + return { viewer, element }; +};