Merge pull request #21 from jaljo/feat/burrow-characters

Feat/burrow characters

src/Component/Board/Board.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import './Board.scss'
 import Character from './../Character'
+import { isGoal } from './../../Util'
 
 // Board :: Props -> React.Component
 export default ({
@@ -17,7 +18,9 @@ export default ({
 // Tile :: Props -> React.Component
 const Tile = ({
   char,
+  x,
+  y,
 }) =>
   <div data-is="tile">
-    {char && <Character {...char} />}
+    {char && <Character {...char} isBurrowed={isGoal(x, y)} />}
   </div>

src/Component/Board/__snapshots__/Board.spec.js.snap

@@ -14,7 +14,7 @@ exports[`Component/Board renders a board with an empty tile and a tile with a ch
       data-is="tile"
     >
       <div
-        className="fox down"
+        className="fox down "
         data-is="character"
       />
     </div>

src/Component/Character/Character.js

@@ -3,11 +3,12 @@ import './Character.scss'
 
 // Character :: Props -> React.Component
 export default ({
+  asset,
   direction,
-  asset
+  isBurrowed,
 }) =>
   <div
     data-is="character"
-    className={`${asset} ${direction}`}
+    className={`${asset} ${direction} ${isBurrowed ? 'is-burrowed' : ''}`}
   >
   </div>

src/Component/Character/Character.scss

@@ -12,17 +12,37 @@ div[data-is="character"] {
 
   &.up {
     background-position-x: 0px;
+
+    &.is-burrowed {
+      background-position-x: -512px;
+    }
   }
 
   &.down {
     background-position-x: -384px;
+
+    &.is-burrowed {
+      background-position-x: -896px;
+    }
   }
 
   &.left {
     background-position-x: -256px;
+
+    &.is-burrowed {
+      background-position-x: -768px;
+    }
   }
 
   &.right {
     background-position-x: -128px;
+
+    &.is-burrowed {
+      background-position-x: -640px;
+    }
+  }
+
+  &.burrow {
+    background-position-x: -512px;
   }
 }

src/Component/Character/Character.spec.js

@@ -4,8 +4,26 @@ import Character from './Character'
 
 describe('Component/Character', () => {
   it('renders a character component', () => {
+    const state = {
+      direction: 'up',
+      asset: 'fox',
+      isBurrowed: false,
+    }
+
+    expect(
+      renderer.create(<Character {...state} />)
+    ).toMatchSnapshot()
+  })
+
+  it('renders a burrowed character component', () => {
+    const state = {
+      direction: 'down',
+      asset: 'chick',
+      isBurrowed: true,
+    }
+
     expect(
-      renderer.create(<Character direction="up" asset="fox" />)
+      renderer.create(<Character {...state} />)
     ).toMatchSnapshot()
   })
 })

src/Component/Character/__snapshots__/Character.spec.js.snap

@@ -1,8 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Component/Character renders a burrowed character component 1`] = `
+<div
+  className="chick down is-burrowed"
+  data-is="character"
+/>
+`;
+
 exports[`Component/Character renders a character component 1`] = `
 <div
-  className="fox up"
+  className="fox up "
   data-is="character"
 />
 `;

src/Component/Game/Game.scss

@@ -3,8 +3,8 @@
 div[data-is="game"] {
   display: flex;
   flex-direction: row;
-  transform: scale(.8);
-  margin-top: -2rem;
+  transform: scale(.75);
+  margin-top: -4rem;
 
   section.game-section {
     flex: 1;

src/Component/RightPanel/RightPanel.js

@@ -17,12 +17,17 @@ export default ({
           <img src="/images/chick_face.png" alt="chick"/> !
         </p>
         <p>
-          Il va falloir survivre en faisant tomber les renards&nbsp;
+          Fais tomber les renards&nbsp;
           <img src="/images/fox_face.png" alt="fox" /> dans leurs terriers&nbsp;
           <img src="/images/burrow.png" alt="burrow" /> grâce aux flèches de
           ton clavier.
         </p>
-        <p>Mais prend garde à ne pas te faire manger !</p>
+        <p>
+          Pour réussir, les deux renards&nbsp;
+          <img src="/images/fox_face.png" alt="fox" /> doivent être dans leurs
+          terriers <img src="/images/goal.png" alt="goal" /> en même temps !
+        </p>
+        <p>Prends bien garde à ne pas te faire manger ou tu devras recommencer !</p>
       </>
     }
 

src/Component/RightPanel/__snapshots__/RightPanel.spec.js.snap

@@ -37,7 +37,7 @@ exports[`Component/RightPanel renders the welcome message when the game is neith
      !
   </p>
   <p>
-    Il va falloir survivre en faisant tomber les renards 
+    Fais tomber les renards 
     <img
       alt="fox"
       src="/images/fox_face.png"
@@ -50,7 +50,20 @@ exports[`Component/RightPanel renders the welcome message when the game is neith
      grâce aux flèches de ton clavier.
   </p>
   <p>
-    Mais prend garde à ne pas te faire manger !
+    Pour réussir, les deux renards 
+    <img
+      alt="fox"
+      src="/images/fox_face.png"
+    />
+     doivent être dans leurs terriers 
+    <img
+      alt="goal"
+      src="/images/goal.png"
+    />
+     en même temps !
+  </p>
+  <p>
+    Prends bien garde à ne pas te faire manger où tu devra reccomencer !
   </p>
   <button
     className="retry"

src/Util.js

@@ -56,3 +56,6 @@ export const getOppositeDirection = direction => prop(direction, {
   right: 'left',
   left: 'right',
 })
+
+// isGoal :: (Number, Number) -> Boolean
+export const isGoal = (x , y) => y === 4 && (x === 1 || x === 3)