Fix costume loading in sprite info pane and costumes tab (#290)

* Fix costume loading in sprite info pane

Requires LLK/scratch-vm#517

* Fix costume loading in costumes tab

Requires LLK/scratch-vm#517

src/components/asset-panel/selector.jsx

@@ -27,7 +27,7 @@ const Selector = props => {
                 {items.map((item, index) => (
                     <SpriteSelectorItem
                         className={styles.listItem}
-                        costumeURL={item.image}
+                        costumeURL={item.url}
                         id={index}
                         key={`asset-${index}`}
                         name={item.name}
@@ -43,7 +43,7 @@ const Selector = props => {
 
 Selector.propTypes = {
     items: React.PropTypes.arrayOf(React.PropTypes.shape({
-        image: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string,
         name: React.PropTypes.string.isRequired
     })),
     newText: React.PropTypes.string.isRequired,

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -38,7 +38,7 @@ const SpriteSelectorItem = props => (
 
 SpriteSelectorItem.propTypes = {
     className: React.PropTypes.string,
-    costumeURL: React.PropTypes.string.isRequired,
+    costumeURL: React.PropTypes.string,
     name: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onDeleteButtonClick: React.PropTypes.func,

src/components/sprite-selector/sprite-selector.jsx

@@ -54,7 +54,10 @@ const SpriteSelectorComponent = function (props) {
                         .map(id => (
                             <SpriteSelectorItem
                                 className={styles.sprite}
-                                costumeURL={sprites[id].costume.skin}
+                                costumeURL={
+                                    sprites[id].costume &&
+                                    sprites[id].costume.url
+                                }
                                 id={id}
                                 key={id}
                                 name={sprites[id].name}
@@ -83,7 +86,7 @@ SpriteSelectorComponent.propTypes = {
     sprites: React.PropTypes.shape({
         id: React.PropTypes.shape({
             costume: React.PropTypes.shape({
-                skin: React.PropTypes.string.isRequired,
+                url: React.PropTypes.string,
                 name: React.PropTypes.string.isRequired,
                 bitmapResolution: React.PropTypes.number.isRequired,
                 rotationCenterX: React.PropTypes.number.isRequired,

src/components/target-pane/target-pane.jsx

@@ -81,7 +81,10 @@ class TargetPane extends React.Component {
                         backdropCount={stage.costumeCount}
                         id={stage.id}
                         selected={stage.id === editingTarget}
-                        url={stage.costume.skin}
+                        url={
+                            stage.costume &&
+                            stage.costume.url
+                        }
                         onSelect={onSelectSprite}
                     />}
                     <Box>
@@ -134,11 +137,11 @@ class TargetPane extends React.Component {
 }
 const spriteShape = React.PropTypes.shape({
     costume: React.PropTypes.shape({
-        skin: React.PropTypes.string,
-        name: React.PropTypes.string,
-        bitmapResolution: React.PropTypes.number,
-        rotationCenterX: React.PropTypes.number,
-        rotationCenterY: React.PropTypes.number
+        url: React.PropTypes.string,
+        name: React.PropTypes.string.isRequired,
+        bitmapResolution: React.PropTypes.number.isRequired,
+        rotationCenterX: React.PropTypes.number.isRequired,
+        rotationCenterY: React.PropTypes.number.isRequired
     }),
     draggable: React.PropTypes.bool,
     id: React.PropTypes.string,

src/containers/costume-tab.jsx

@@ -53,12 +53,7 @@ class CostumeTab extends React.Component {
             onNewBackdropClick
         } = this.props;
 
-        const costumes = vm.editingTarget ? vm.editingTarget.sprite.costumes.map(costume => (
-            {
-                image: costume.skin,
-                name: costume.name
-            }
-        )) : [];
+        const costumes = vm.editingTarget ? vm.editingTarget.sprite.costumes : [];
 
         const addText = vm.editingTarget && vm.editingTarget.isStage ? 'Add Backdrop' : 'Add Costume';
         const addFunc = vm.editingTarget && vm.editingTarget.isStage ? onNewBackdropClick : onNewCostumeClick;