added show hint button

src/css/main.css

@@ -81,7 +81,9 @@ body,
 }
 
 .rebus__hint {
+  cursor: pointer;
   text-align: center;
+  font-size: 1.3rem;
   grid-column-start: 2;
   grid-column-end: span 3;
   grid-row-start: 3;
@@ -284,7 +286,7 @@ progress[value]::-webkit-progress-value {
 }
 
 .animation--shake {
-  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   perspective: 1000px;
@@ -319,19 +321,24 @@ progress[value]::-webkit-progress-value {
 }
 
 @keyframes shake {
-  10%, 90% {
+  10%,
+  90% {
     transform: translate3d(-1px, 0, 0);
   }
 
-  20%, 80% {
+  20%,
+  80% {
     transform: translate3d(2px, 0, 0);
   }
 
-  30%, 50%, 70% {
+  30%,
+  50%,
+  70% {
     transform: translate3d(-4px, 0, 0);
   }
 
-  40%, 60% {
+  40%,
+  60% {
     transform: translate3d(4px, 0, 0);
   }
-}
+}

src/js/components/Hint.js

@@ -1,25 +1,39 @@
+import { trimCharsStart } from 'lodash/fp';
 import { createComponent } from '../mini';
 import { connect } from '../store';
 
 export function Hint(props) {
+  function setShowHintButtonFunctionality(Component) {
+    const showHintButton = document.querySelector('.rebus__hint');
+    showHintButton.addEventListener('click', () => {
+      Component.showHint = !Component.showHint;
+
+      Component.update();
+    });
+  }
   return connect(
     createComponent({
       props,
+      componentDidMount() {
+        this.showHint = false;
+        setShowHintButtonFunctionality(this);
+      },
+      componentDidUpdate() {
+        this.showHint = false;
+        setShowHintButtonFunctionality(this);
+      },
       render({ current, rebuses, incorrectAnswerCount }) {
-        const INCORRECT_ANSWER_MAX_COUNT = 3;
+        // const INCORRECT_ANSWER_MAX_COUNT = 3;
         const HINT_SYMBOL = '💡';
         const rebus = rebuses[current];
-        const showHint =
-          incorrectAnswerCount >= INCORRECT_ANSWER_MAX_COUNT && !rebus.isAnswered && rebus.hint;
-        return ` 
-        ${
+        const showHint = this.showHint;
+        // (incorrectAnswerCount >= INCORRECT_ANSWER_MAX_COUNT && !rebus.isAnswered && rebus.hint) ||
+
+        return `${
           showHint
-            ? `<span class="rebus__hint">
-                ${HINT_SYMBOL} ${rebus.hint}
-              </span>`
-            : '<span></span>'
-        }
-        `;
+            ? `<span class="rebus__hint"> ${HINT_SYMBOL} ${rebus.hint} </span>`
+            : `<span class="rebus__hint">${HINT_SYMBOL} Show Hint</span>`
+        }`;
       }
     })
   );

src/js/mini/component.js

@@ -14,7 +14,8 @@ export function createComponent({
     render,
     componentDidMount,
     componentDidUpdate,
-    update() {
+    update(updateProps) {
+      // this.updateProps = updateProps;
       if (this.rendered !== this.render(this.props)) {
         renderComponent(this, this.$parent);
         if (isFunction(this.componentDidUpdate)) {

tests/__snapshots__/app.spec.js.snap

@@ -55,8 +55,8 @@ Object {
     },
     Object {
       "children": Array [],
-      "componentDidMount": undefined,
-      "componentDidUpdate": undefined,
+      "componentDidMount": [Function],
+      "componentDidUpdate": [Function],
       "props": Object {},
       "render": [Function],
       "update": [Function],

tests/__snapshots__/components.spec.js.snap

@@ -276,8 +276,8 @@ exports[`Tests for components GithubCorner renders correctly 2`] = `
 exports[`Tests for components Hint renders correctly (when incorrect answer count is less than max incorrect answer count) 1`] = `
 Object {
   "children": Array [],
-  "componentDidMount": undefined,
-  "componentDidUpdate": undefined,
+  "componentDidMount": [Function],
+  "componentDidUpdate": [Function],
   "props": Object {
     "animation": "none",
     "current": 0,
@@ -311,17 +311,13 @@ Object {
 }
 `;
 
-exports[`Tests for components Hint renders correctly (when incorrect answer count is less than max incorrect answer count) 2`] = `
-" 
-        <span></span>
-        "
-`;
+exports[`Tests for components Hint renders correctly (when incorrect answer count is less than max incorrect answer count) 2`] = `"<span class=\\"rebus__hint\\">💡 Show Hint</span>"`;
 
 exports[`Tests for components Hint renders correctly (when incorrect answer count is more than max incorrect answer count) 1`] = `
 Object {
   "children": Array [],
-  "componentDidMount": undefined,
-  "componentDidUpdate": undefined,
+  "componentDidMount": [Function],
+  "componentDidUpdate": [Function],
   "props": Object {
     "animation": "none",
     "current": 0,
@@ -355,13 +351,7 @@ Object {
 }
 `;
 
-exports[`Tests for components Hint renders correctly (when incorrect answer count is more than max incorrect answer count) 2`] = `
-" 
-        <span class=\\"rebus__hint\\">
-                💡 hint
-              </span>
-        "
-`;
+exports[`Tests for components Hint renders correctly (when incorrect answer count is more than max incorrect answer count) 2`] = `"<span class=\\"rebus__hint\\">💡 Show Hint</span>"`;
 
 exports[`Tests for components Logo renders correctly 1`] = `
 Object {