⚙️ Fix #54 Fix #55

- 🎨 Add an image for the `MazeWrongExitError`.
- 🎨 Improve game messages.

### 🤖 PixiJS Engine

- 🎨 [v1.0.1] `starvationCheckerBuilder`: Improve error message (#54).
- 🎨 [v1.0.1] `hasBecomeTheFallenOneBuilder`: Improve error message (#54).
- 🎨 [v1.0.1] `hasBecomeTheFallenOneBuilder`: Replace image with an animated one (#55).
- 🎨 [v1.0.1] `hasHitAWallBuilder`: Improve error message (#54).
- 🎨 [v1.0.1] `hasHitAWallBuilder`: Replace image with an animated one (#55).

activities/NumericLine/CHANGELOG.md

@@ -1,5 +1,8 @@
 ## HEAD
 
+- 🎨 Add an image for the `MazeWrongExitError`.
+- 🎨 Improve game messages.
+
 ## v1.0.1
 
 - Add SVG image instead of emoji to `leave_maze` block. This homogenize the icon through every OS and browser, and ensures is going to be rendered as expected.

activities/NumericLine/engine/processors/hasLeftTheMazeProcessorBuilder.js

@@ -20,17 +20,19 @@ import {
 } from 'core/engines/pixijs/components/functionalities/emotionFunctionalityBuilder';
 
 import { type EngineData$NumericLineData } from '../components/numericLineGenerator';
-import MazeExitError from '../../images/MazeExitError.png';
+import MazeExitErrorURL from '../../images/MazeExitError.png';
+import MazeWrongExitErrorURL from '../../images/MazeWrongExitError.png';
 
 const mazeExitError = engineErrorBuilder('MazeExitError', {
-  // FIXME add folder for images or make a loader for activity files
-  imageUrl: MazeExitError,
-  title: parseEmoji('🤖 El número no pudo saltar 🤖'),
-  text: 'El número solo tiene fuerzas para saltar cuando llega a una salida',
+  imageUrl: MazeExitErrorURL,
+  title: parseEmoji('🤖 NO PUDO SALTAR 🤖'),
+  text: 'EL NÚMERO SÓLO PUEDE SALTAR CUANDO ESTÁ EN UN FINAL DEL LABERINTO',
 });
 const mazeWrongExitError = engineErrorBuilder('MazeWrongExitError', {
-  title: parseEmoji('👻 El número se equivocó de lugar 👻'),
-  text: '¿El número es más grande que el de su izquierda y más chico que el de su derecha?',
+  imageUrl: MazeWrongExitErrorURL,
+  title: parseEmoji('👻 ¡OJO! ¿QUÉ PASO? 👻'),
+  // eslint-disable-next-line max-len
+  html: '¿EL NÚMERO ES MÁS <b>GRANDE</b> QUE EL DE SU <b>IZQUIERDA</b> Y MÁS <b>CHICO</b> QUE EL DE SU <b>DERECHA</b>?',
 });
 
 type Props = {
@@ -43,7 +45,7 @@ type Props = {
  * It verifies if the number has entered the numeric and in which empty slot.
  * Informs the result to the user.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @param  {CodimoComponent}            number          The actor.
  * @param  {CodimoComponent}            numericLine     The numeric line which the actor will enter.
  * @param  {Array<string>}              endPositions    An array of possible endings.

core/CHANGELOG.md

@@ -1,10 +1,20 @@
 ## HEAD
 
+### 🤖 PixiJS Engine
+
+- 🎨 [v1.0.1] `starvationCheckerBuilder`: Improve error message (#54).
+- 🎨 [v1.0.1] `hasBecomeTheFallenOneBuilder`: Improve error message (#54).
+- 🎨 [v1.0.1] `hasBecomeTheFallenOneBuilder`: Replace image with an animated one (#55).
+- 🎨 [v1.0.1] `hasHitAWallBuilder`: Improve error message (#54).
+- 🎨 [v1.0.1] `hasHitAWallBuilder`: Replace image with an animated one (#55).
+
 ### 💅 React UI
 
+- 🎨 `constants`: Add an animated image to the success message (#55).
+- 🎨 `constants`: Improve success message (#54).
 - 🎨 [v1.0.1] `Activity`: Add more visually atractive cursors (#57).
 - 🎨 [v1.0.1] `BlocklyApp`: Add more visually atractive cursors (#57).
-- 🎨 [v1.0.1] `BlocklyApp/components/BlocklyWorkspace`: Increase the opaque to the scrollbars and the trashcan (#53).
+- 🎨 [v1.0.1] `BlocklyWorkspace`: Increase the opaque to the scrollbars and the trashcan (#53).
 
 ## v1.0.0-alpha.0
 

core/constants/images/README.md

@@ -0,0 +1,6 @@
+# Original links
+
+- `complete.gif`:
+  - Author: Unknown.
+  - Original link to gif: http://www.clipartbest.com/cliparts/xig/aaz/xigaazLpT.gif.
+  - Original webpage link: http://www.laughinggif.com/view/fy3ylsnont/60.html.

core/constants/localize/es/gameTextUI.js

@@ -4,7 +4,7 @@
  *
  * @flow
  */
-import parseEmoji from 'core/helpers/parseEmoji';
+import CompleteURL from '../../images/complete.gif';
 
 export default {
   accept: 'Aceptar',
@@ -16,10 +16,9 @@ export default {
     'Dibujando los bloques',
   ],
   successMessage: {
-    confirmButtonText: 'Ir al siguiente nivel',
-    text: '¡Nivel completado!',
-    title: parseEmoji('🎉'),
-    type: 'success',
+    imageUrl: CompleteURL,
+    title: '¡NIVEL COMPLETADO!',
+    confirmButtonText: 'IR AL SIGUIENTE NIVEL',
   },
   exercise: 'Ejercicio',
   levels: [

core/engines/pixijs/engineGenerator/beforeStopExecutionCheckers/starvationCheckerBuilder.js

@@ -16,15 +16,15 @@ import StarvationError from './StarvationError.png';
 
 const starvationError = engineErrorBuilder('StarvationError', {
   imageUrl: StarvationError,
-  title: 'El número jamás saltó hacia la recta numérica',
-  html: parseEmoji('Estará perdido en el laberinto por toda la eternidad 😢'),
+  title: '¡UPS! EL NÚMERO NUNCA LLEGÓ A LA RECTA',
+  html: parseEmoji('😢 Y NO PODRÁ VOLVER CON SUS AMIGOS 😢'),
 });
 
 /**
  * If the component contains a consistent position, it means it didn't reach
  * its objective. Hence the name `starvation` for the thrown error.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @param  {CodimoComponent} component Required to verify its position.
  * @return {WillStopExecutionChecker}  The checker itself.
  */

core/engines/pixijs/engineGenerator/processors/checkers/README.md

@@ -0,0 +1,10 @@
+# Original links
+
+- `HasHitAWallError.png`:
+  - Author: Unknown.
+  - Original webpack link: http://www.sherv.net/cm/emoticons/fighting/bash-head.gif.
+  - Original webpage link: http://www.sherv.net/bash.head-emoticon-584.html.
+- `PathOverflowErrorOrig.gif`:
+  - Author: Unknown.
+  - Original link to gif: https://fat.gfycat.com/EnviousHugeIberianchiffchaff.gif.
+  - Original webpage link: https://gfycat.com/EnviousHugeIberianchiffchaff.

core/engines/pixijs/engineGenerator/processors/checkers/hasBecomeTheFallenOneBuilder.js

@@ -14,11 +14,12 @@ import { type PositioningState } from '../positioningProcessorBuilder';
 import { type Checker } from '../processorGenerator';
 
 import engineErrorBuilder from './engineErrorBuilder';
+import PathOverflowErrorURL from './PathOverflowError.gif';
 
 const pathOverflowError = engineErrorBuilder('PathOverflowError', {
-  // eslint-disable-next-line max-len
-  text: 'Diste un paso de más y, en vez de saltar, ¡el número se cayó del laberinto! El pobre cayó en las profundidades del abismo, jamás podrá volver... a no ser que...',
-  title: parseEmoji('😱 ¡Oh no! 😱'),
+  imageUrl: PathOverflowErrorURL,
+  title: parseEmoji('😱 ¡OH NO! ¡EL NÚMERO SE CAYÓ! 😱'),
+  text: '¿PROBASTE EN SALTAR?',
 });
 
 /**
@@ -27,7 +28,7 @@ const pathOverflowError = engineErrorBuilder('PathOverflowError', {
  * But there won't be anything after and the component will fall into the void.
  * And we don't want that.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @param  {CodimoComponent}  component  The component to check.
  * @param  {EngineData}       engineData Contains the required data for validation.
  * @return {Checker}                     The new instance.

core/engines/pixijs/engineGenerator/processors/checkers/hasHitAWallBuilder.js

@@ -18,7 +18,7 @@ import { type PositioningState } from '../positioningProcessorBuilder';
 import { type Checker } from '../processorGenerator';
 
 import engineErrorBuilder from './engineErrorBuilder';
-import HasHitAWallError from './HasHitAWallError.png';
+import HasHitAWallError from './HasHitAWallError.gif';
 
 type ActivePathBorders = {|
   bottom?: boolean,
@@ -40,16 +40,16 @@ const directionsToWalls = {
 
 const hasHitaWallError = engineErrorBuilder('HasHitAWallError', {
   imageUrl: HasHitAWallError,
-  text: 'La dirección que intentás tomar es incorrecta',
-  title: parseEmoji('🙅 Camino no válido 🙅‍♂️'),
+  title: parseEmoji('🙅 POR AHÍ NO 🙅‍♂️'),
+  html: '¡UY! ¡TE CHOCASTE LA PARED!<br/>TRATÁ DE SEGUIR EL CAMINO',
 });
 
 /**
  * It validates the next position.
  * If there is a wall, it throws a new exection
  * and stop the execution of the animation.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @param  {CodimoComponent}  component  The component to check.
  * @param  {EngineData}       engineData Contains the required data for validation.
  * @return {Checker}                     The new instance.

core/ui/Activity/index.jsx

@@ -39,7 +39,7 @@ type Activity$Props = {|
 /**
  * The Container is in charge of loading the required activity.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @todo 1. Subcomponents async loading.
  * @todo 2. Make it more generic.
  * @todo 3. Add example.

core/ui/BlocklyApp/components/BlocklyWorkspace.jsx

@@ -34,7 +34,7 @@ const Workspace = styled.div`
   }
 
   & .blocklyScrollbarBackground {
-    &:hover+.blocklyScrollbarHandle {
+    &:hover + .blocklyScrollbarHandle {
       fill: rgba(80, 80, 80, 0.75);
     }
   }
@@ -57,6 +57,15 @@ type Props = {|
   elements: Array<BlocklyToolboxElement>,
   handleWorkspaceCreation(toolbox: HTMLElement): void,
 |};
+/**
+ * It contains the Blockly UI definition.
+ *
+ * @version 1.0.1
+ * @param {string}                       id                      Element ID.
+ * @param {Array<BlocklyToolboxElement>} elements                JSON blocks definition.
+ * @param {Function}                     handleWorkspaceCreation Blockly instantiation callback.
+ * @return {React$Element}                                       Blockly workspace.
+ */
 const BlocklyWorkspace = ({ id, elements, handleWorkspaceCreation }: Props) => (
   <Workspace id={id}>
     <BlocklyToolbox

core/ui/BlocklyApp/index.jsx

@@ -59,7 +59,7 @@ type BlocklyApp$State = {|
  * for passing the array of Instructions and one for
  * resetting the game.
  *
- * @version 1.0.0
+ * @version 1.0.1
  */
 export default class BlocklyApp extends React.Component {
   props: BlocklyApp$Props;