From a6636a7d2643cf07364c3ae28555f439a4773cbb Mon Sep 17 00:00:00 2001 From: hamzahasa067 Date: Wed, 6 Oct 2021 08:19:00 +0200 Subject: [PATCH] added show hint button --- src/css/main.css | 19 +++++++---- src/js/components/Hint.js | 36 ++++++++++++++------- src/js/mini/component.js | 3 +- tests/__snapshots__/app.spec.js.snap | 4 +-- tests/__snapshots__/components.spec.js.snap | 22 ++++--------- 5 files changed, 48 insertions(+), 36 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 5cc52766..a072f5df 100644 --- a/src/css/main.css +++ b/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); } -} \ No newline at end of file +} diff --git a/src/js/components/Hint.js b/src/js/components/Hint.js index 07d3c3df..c3931188 100644 --- a/src/js/components/Hint.js +++ b/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 - ? ` - ${HINT_SYMBOL} ${rebus.hint} - ` - : '' - } - `; + ? ` ${HINT_SYMBOL} ${rebus.hint} ` + : `${HINT_SYMBOL} Show Hint` + }`; } }) ); diff --git a/src/js/mini/component.js b/src/js/mini/component.js index 763e484d..d48f922d 100644 --- a/src/js/mini/component.js +++ b/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)) { diff --git a/tests/__snapshots__/app.spec.js.snap b/tests/__snapshots__/app.spec.js.snap index 35771e19..ae6e32a0 100644 --- a/tests/__snapshots__/app.spec.js.snap +++ b/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], diff --git a/tests/__snapshots__/components.spec.js.snap b/tests/__snapshots__/components.spec.js.snap index 0474d471..010fee91 100644 --- a/tests/__snapshots__/components.spec.js.snap +++ b/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`] = ` -" - - " -`; +exports[`Tests for components Hint renders correctly (when incorrect answer count is less than max incorrect answer count) 2`] = `"💡 Show Hint"`; 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`] = ` -" - - 💡 hint - - " -`; +exports[`Tests for components Hint renders correctly (when incorrect answer count is more than max incorrect answer count) 2`] = `"💡 Show Hint"`; exports[`Tests for components Logo renders correctly 1`] = ` Object {