From 4d6e8b3459c8e5df76078b6e925d653ce306a7d4 Mon Sep 17 00:00:00 2001
From: Sean Boult <996134+Hacksore@users.noreply.github.com>
Date: Fri, 10 Jul 2020 08:52:13 -0500
Subject: [PATCH] Update stories

---
 stories/index.stories.js | 88 +++++++++++++++++++++-------------------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/stories/index.stories.js b/stories/index.stories.js
index 3ceb7af..a492884 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -1,37 +1,41 @@
 /* eslint-disable */
-import * as skinview3d from '../libs/skinview3d';
-import { withKnobs, radios, number  } from '@storybook/addon-knobs';
+import * as skinview3d from "../libs/skinview3d";
+import { withKnobs, radios, number } from "@storybook/addon-knobs";
 
 export default {
-	title: 'Skinview3d',
-	decorators: [withKnobs]
+	title: "Skinview3d",
+	decorators: [withKnobs],
 };
 
 let currentAnimation;
 
 const createViewer = () => {
-	const element = document.createElement('div');
-  element.style.width = '400px';
-	element.style.height = '500px';
-
-	let viewer = new skinview3d.SkinViewer({
-		domElement: element,
-		width: 600,
-		height: 600,
-		skinUrl: 'texture/1_8_texturemap_redux.png',
+	const element = document.createElement("div");
+	const viewer = new skinview3d.SkinViewer(element, {
+		width: 300,
+		height: 400,
+		skin: "texture/1_8_texturemap_redux.png",
 	});
 
-	let control = skinview3d.createOrbitControls(viewer);
+	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 NoAnimation = () => {
+export const Basic = () => {
+	// reset
+	let { viewer, element } = createViewer();
 	if (currentAnimation) {
 		currentAnimation.remove();
 	}
@@ -39,30 +43,28 @@ export const NoAnimation = () => {
 	return element;
 };
 
-export const WithAnimation = () => {
-
+export const Animation = () => {
 	if (currentAnimation) {
 		currentAnimation.remove();
 	}
 
 	const animationMap = {
-		'Walk': skinview3d.WalkingAnimation,
-		'Run': skinview3d.RunningAnimation,
-		'Rotate': skinview3d.RotatingAnimation,
+		Walk: skinview3d.WalkingAnimation,
+		Run: skinview3d.RunningAnimation,
+		Rotate: skinview3d.RotatingAnimation,
 	};
 
-	const animationKey = radios('Animations', Object.keys(animationMap), 'Run');
+	const animationKey = radios("Animations", Object.keys(animationMap), "Run");
 	currentAnimation = viewer.animations.add(animationMap[animationKey]);
 
+	const label = "Speed";
 
-	const label = 'Speed';
-
-	const defaultValue = 1;
+	const defaultValue = 0.5;
 	const options = {
-		 range: true,
-		 min: 0.1,
-		 max: 3,
-		 step: 0.01,
+		range: true,
+		min: 0.1,
+		max: 2,
+		step: 0.01,
 	};
 	const value = number(label, defaultValue, options);
 
@@ -71,26 +73,28 @@ export const WithAnimation = () => {
 	return element;
 };
 
-export const TestTextures = () => {
-
+export const Textures = () => {
 	const skinOptions = {
-		'1.8 Skin': '1_8_texturemap_redux',
-		'Classic Skin': 'Hacksore',
-		'HD Skin': 'ironman_hd',
+		"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 skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
 
 	const capeOptions = {
-		'None': 'none',
-		'Classic Cape': 'cape',
-		'HD Cape': 'hd_cape',
+		None: "none",
+		"Classic Cape": "cape",
+		"HD Cape": "hd_cape",
 	};
 
-	const capeUrl = radios('Cape Textures', capeOptions, 'none');
-	viewer.skinUrl = `texture/${skinUrl}.png`;
+	const capeUrl = radios("Cape Textures", capeOptions, "none");
+	viewer.loadSkin(`texture/${skinUrl}.png`);
 
-	// Will fix with #48
-	viewer.capeUrl = capeUrl !== 'none' ? `texture/${capeUrl}.png` : null;
+	if (capeUrl === "none") {
+		viewer.loadCape(null);
+	}
+
+	viewer.loadCape(`texture/${capeUrl}.png`);
 
 	return element;
 };