C2LC-620: Update characters to use the new circular design

src/CharacterPositionController.scss

@@ -77,15 +77,9 @@
     transform: rotate(225deg) scaleY(-1);
 }
 
-.CharacterPositionController__character-column-character-container {
-    position: relative;
-    border-radius: 50%;
-}
-
 .CharacterPositionController__character-column-character {
     width: 2.5rem;
     height: 2.5rem;
-    padding: 0.4rem;
 }
 
 .CharacterPositionController__character-turn-positions {

src/Scene.js

@@ -321,9 +321,6 @@ class Scene extends React.Component<SceneProps, {}> {
             characterTransform += ` scale(1 -1)`
         }
 
-        // For the background, use the same translation, but skip the rotation and mirroring.
-        const characterBackgroundTransform = `translate(${this.props.characterState.xPos} ${this.props.characterState.yPos})`;
-
         return (
             <React.Fragment>
                 <div className='Scene__container'>
@@ -368,15 +365,6 @@ class Scene extends React.Component<SceneProps, {}> {
                             {grid}
                             <g clipPath='url(#Scene-clippath)'>
                                 {this.drawCharacterPath()}
-                                <rect
-                                    className={`Character-background--${this.props.world}`}
-                                    x={-0.5}
-                                    y={-0.5}
-                                    height={1}
-                                    width={1}
-                                    ref={this.characterBackgroundRef}
-                                    transform={characterBackgroundTransform}
-                                />
                                 <Character
                                     world={this.props.world}
                                     theme={this.props.theme}

src/Worlds.js

@@ -42,6 +42,8 @@ import { ReactComponent as SketchpadThumbnailDark } from './svg/SketchpadThumbna
 import { ReactComponent as SketchpadThumbnailGray } from './svg/SketchpadThumbnail-gray.svg';
 import { ReactComponent as SketchpadThumbnailContrast } from './svg/SketchpadThumbnail-contrast.svg';
 import { ReactComponent as Robot } from './svg/Robot.svg';
+import { ReactComponent as RobotGray } from './svg/RobotGray.svg';
+import { ReactComponent as RobotContrast } from './svg/RobotContrast.svg';
 
 // Space
 import { ReactComponent as Space } from './svg/Space.svg';
@@ -234,8 +236,8 @@ const worlds: {|
         thumbnailGray: SketchpadThumbnailGray,
         thumbnailContrast: SketchpadThumbnailContrast,
         character: Robot,
-        characterGray: Robot,
-        characterContrast: Robot,
+        characterGray: RobotGray,
+        characterContrast: RobotContrast,
         startingX: 1,
         startingY: 1,
         startingDirection: 2, // East

src/Worlds.scss

@@ -1,11 +1,5 @@
 /* Landmarks */
 
-.Character-background--Landmarks {
-    fill: #FFE5B4;
-    stroke: none;
-}
-
-.CharacterPositionController__character-column-character-container--Landmarks,
 .ProgramBlockEditor__character-column-character-container--Landmarks {
     background-color: #FFE5B4;
 }
@@ -33,16 +27,10 @@
 }
 
 body.gray-theme {
-    .Character-background--Landmarks {
-        fill: #505862;
-        stroke: none;
-    }
-
-    .CharacterPositionController__character-column-character-container--Landmarks,
     .ProgramBlockEditor__character-column-character-container--Landmarks {
-        background-color: #505862;
+        background-color: #FFFFFF;
     }
-    
+
     .Scene__grid-line--Landmarks {
         stroke: #FFFFFF;
     }
@@ -67,12 +55,6 @@ body.gray-theme {
 }
 
 body.contrast-theme {
-    .Character-background--Landmarks {
-        fill: #FFFFFF;
-        stroke: none;
-    }
-
-    .CharacterPositionController__character-column-character-container--Landmarks,
     .ProgramBlockEditor__character-column-character-container--Landmarks {
         background-color: #FFFFFF;
     }
@@ -118,14 +100,8 @@ body.contrast-theme {
 
 /* DeepOcean */
 
-.Character-background--DeepOcean {
-    fill: #003C50;
-    stroke: none;
-}
-
-.CharacterPositionController__character-column-character-container--DeepOcean,
 .ProgramBlockEditor__character-column-character-container--DeepOcean {
-    background-color: #003C50;
+    background-color: #1B2432;
 }
 
 .Scene__grid-line--DeepOcean {
@@ -145,11 +121,6 @@ body.contrast-theme {
 }
 
 body.gray-theme {
-    .Character-background--DeepOcean {
-        fill: #67717E;
-    }
-
-    .CharacterPositionController__character-column-character-container--DeepOcean,
     .ProgramBlockEditor__character-column-character-container--DeepOcean {
         background-color: #67717E;
     }
@@ -172,15 +143,10 @@ body.gray-theme {
 }
 
 body.contrast-theme {
-    .Character-background--DeepOcean {
-        fill: #FFFFFF;
-    }
-
-    .CharacterPositionController__character-column-character-container--DeepOcean,
     .ProgramBlockEditor__character-column-character-container--DeepOcean {
         background-color: #FFFFFF;
     }
-
+    
     .Scene__grid-line--DeepOcean {
         stroke: #0078FF;
     }
@@ -213,12 +179,6 @@ body.contrast-theme {
 
 /* Jungle */
 
-.Character-background--Jungle {
-    fill: #FFE5B4;
-    stroke: none;
-}
-
-.CharacterPositionController__character-column-character-container--Jungle,
 .ProgramBlockEditor__character-column-character-container--Jungle {
     background-color: #FFE5B4;
 }
@@ -240,11 +200,6 @@ body.contrast-theme {
 }
 
 body.gray-theme {
-    .Character-background--Jungle {
-        fill: #505862;
-    }
-
-    .CharacterPositionController__character-column-character-container--Jungle,
     .ProgramBlockEditor__character-column-character-container--Jungle {
         background-color: #505862;
     }
@@ -267,11 +222,6 @@ body.gray-theme {
 }
 
 body.contrast-theme {
-    .Character-background--Jungle {
-        fill: #FFFFFF;
-    }
-
-    .CharacterPositionController__character-column-character-container--Jungle,
     .ProgramBlockEditor__character-column-character-container--Jungle {
         background-color: #FFFFFF;
     }
@@ -318,12 +268,6 @@ body.contrast-theme {
 
 /* Sketchpad */
 
-.Character-background--Sketchpad {
-    fill: #4C9990;
-    stroke: none;
-}
-
-.CharacterPositionController__character-column-character-container--Sketchpad,
 .ProgramBlockEditor__character-column-character-container--Sketchpad {
     background-color: #4C9990;
 }
@@ -355,13 +299,8 @@ body.dark-theme {
 }
 
 body.gray-theme {
-    .Character-background--Sketchpad {
-        fill: #818A98;
-    }
-
-    .CharacterPositionController__character-column-character-container--Sketchpad,
     .ProgramBlockEditor__character-column-character-container--Sketchpad {
-        background-color: #818A98;
+        background-color: #9DA4AF;
     }
 
     .Scene__grid-line--Sketchpad {
@@ -382,11 +321,6 @@ body.gray-theme {
 }
 
 body.contrast-theme {
-    .Character-background--Sketchpad {
-        fill: #FFFFFF;
-    }
-
-    .CharacterPositionController__character-column-character-container--Sketchpad,
     .ProgramBlockEditor__character-column-character-container--Sketchpad {
         background-color: #FFFFFF;
     }
@@ -424,12 +358,6 @@ body.contrast-theme {
 
 /* Space */
 
-.Character-background--Space {
-    fill: #1B2432;
-    stroke: none;
-}
-
-.CharacterPositionController__character-column-character-container--Space,
 .ProgramBlockEditor__character-column-character-container--Space {
     background-color: #1B2432;
 }
@@ -451,11 +379,6 @@ body.contrast-theme {
 }
 
 body.gray-theme {
-    .Character-background--Space {
-        fill: #505862;
-    }
-
-    .CharacterPositionController__character-column-character-container--Space,
     .ProgramBlockEditor__character-column-character-container--Space {
         background-color: #505862;
     }
@@ -478,11 +401,6 @@ body.gray-theme {
 }
 
 body.contrast-theme {
-    .Character-background--Space {
-        fill: #FFFFFF;
-    }
-
-    .CharacterPositionController__character-column-character-container--Space,
     .ProgramBlockEditor__character-column-character-container--Space {
         background-color: #FFFFFF;
     }