From f2a548f772e54e9d6dade3eb3546bcdb112a3000 Mon Sep 17 00:00:00 2001
From: avlyalin <lyalin.alexey@gmail.com>
Date: Mon, 1 Jun 2020 19:57:17 +0300
Subject: [PATCH] feat: app loader component

---
 package-lock.json                             |   5 +
 package.json                                  |   1 +
 ...y-looks-correct-prop-is-loading-1-snap.png | Bin 0 -> 11202 bytes
 ...rrect-prop-is-loading-with-text-1-snap.png | Bin 0 -> 10860 bytes
 ...-looks-correct-prop-not-loading-1-snap.png | Bin 0 -> 3249 bytes
 src/components/loader/index.js                |   1 +
 src/components/loader/loader.ispec.js         |  28 +++++
 src/components/loader/loader.js               |  34 +++++
 src/components/loader/loader.stories.js       |  17 +++
 src/components/loader/logo.js                 | 119 ++++++++++++++++++
 src/components/loader/logo.module.css         |  53 ++++++++
 src/components/loader/text.js                 |  23 ++++
 src/containers/app/app.js                     |  82 +++++++-----
 tailwind.config.js                            |   1 +
 14 files changed, 331 insertions(+), 33 deletions(-)
 create mode 100644 src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-is-loading-1-snap.png
 create mode 100644 src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-is-loading-with-text-1-snap.png
 create mode 100644 src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-not-loading-1-snap.png
 create mode 100644 src/components/loader/index.js
 create mode 100644 src/components/loader/loader.ispec.js
 create mode 100644 src/components/loader/loader.js
 create mode 100644 src/components/loader/loader.stories.js
 create mode 100644 src/components/loader/logo.js
 create mode 100644 src/components/loader/logo.module.css
 create mode 100644 src/components/loader/text.js

diff --git a/package-lock.json b/package-lock.json
index d041f8f..1f8bf02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4177,6 +4177,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "animate.css": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.0.tgz",
+      "integrity": "sha512-0aVcfWDeU9ykV6vjn1P67ZSs01jxoUQZCGaYbkk0SIIelIG8kUdLrIkua1+VabHfTtsSivDRMMn0ILPvZum2gw=="
+    },
     "ansi-align": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
diff --git a/package.json b/package.json
index 4ba49ee..f5593bf 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@hot-loader/react-dom": "^16.13.0",
+    "animate.css": "^4.1.0",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "firebase": "^7.14.1",
diff --git a/src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-is-loading-1-snap.png b/src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-is-loading-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1bd270935fbb8a03add061edd14e42979df8ce0
GIT binary patch
literal 11202
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
L<|UUO{QAEDWr?_0

literal 0
HcmV?d00001

diff --git a/src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-is-loading-with-text-1-snap.png b/src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-is-loading-with-text-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..10b31c0ef4299ca108b8b077ef9b2802ee1404e2
GIT binary patch
literal 10860
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
KN!j^Z5C0eMEsnha

literal 0
HcmV?d00001

diff --git a/src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-not-loading-1-snap.png b/src/components/loader/__image_snapshots__/loader-ispec-js-loader-visually-looks-correct-prop-not-loading-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..c53502031f31e98bf0d3e31e6fc1826ac7d56a65
GIT binary patch
literal 3249
zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>i1B%QlYbpRzjKx9jP7LeL$-HD>;K}xM
zaSW-L^Y*$SBZC6Z0fPhkpFdnAqr&y8?ED!W28M<Mm9juBe-1YQNl9iV28I+K4hDt^
zh6)S}4#!3XM+0OuF^pz}(UM`bR2;1lMr*^-+HkZs9IXvUYeVd{q29}Ijx}j+8%=>-
O2?kGBKbLh*2~7ZyoZj&O

literal 0
HcmV?d00001

diff --git a/src/components/loader/index.js b/src/components/loader/index.js
new file mode 100644
index 0000000..0223844
--- /dev/null
+++ b/src/components/loader/index.js
@@ -0,0 +1 @@
+export { Loader } from './loader';
diff --git a/src/components/loader/loader.ispec.js b/src/components/loader/loader.ispec.js
new file mode 100644
index 0000000..c620200
--- /dev/null
+++ b/src/components/loader/loader.ispec.js
@@ -0,0 +1,28 @@
+const customConfig = {
+  failureThreshold: 0.01,
+  failureThresholdType: 'percent',
+};
+
+describe('<Loader /> visually looks correct', () => {
+  test('prop: is loading', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?id=components-loader--common&knob-Message=&knob-Animation=false&knob-Is%20loading=true',
+    );
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+  test('prop: not loading', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?id=components-loader--common&knob-Message=application%20start&knob-Animation=false&knob-Is%20loading=false',
+    );
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+  test('prop: is loading with text', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?id=components-loader--common&knob-Message=application%20start&knob-Animation=false&knob-Is%20loading=true',
+    );
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+});
diff --git a/src/components/loader/loader.js b/src/components/loader/loader.js
new file mode 100644
index 0000000..a42b108
--- /dev/null
+++ b/src/components/loader/loader.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { Logo } from './logo';
+import { Text } from './text';
+
+const Loader = ({ isLoading = false, animation = true, text = '' }) => {
+  return (
+    isLoading && (
+      <div
+        className={classnames(
+          'fixed z-50',
+          'h-screen w-screen',
+          'xs:px-1 sm:px-4',
+          'space-y-3 xs:space-y-5 sm:space-y-8',
+          'flex flex-col justify-center items-center',
+          'bg-white',
+          'overflow-hidden',
+        )}
+      >
+        <Logo animation={animation} />
+        <Text text={text} />
+      </div>
+    )
+  );
+};
+
+Loader.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  text: PropTypes.string,
+  animation: PropTypes.bool,
+};
+
+export { Loader };
diff --git a/src/components/loader/loader.stories.js b/src/components/loader/loader.stories.js
new file mode 100644
index 0000000..1dfd5ba
--- /dev/null
+++ b/src/components/loader/loader.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { containerDecorator } from '_storybook/container';
+import { Loader } from './loader';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'Components/Loader',
+  decorators: [containerDecorator({ style: { padding: 0 } }), withKnobs],
+};
+
+export const Common = () => {
+  const isLoading = boolean('Is loading', true);
+  const message = text('Message', 'Запуск приложения');
+  const animation = boolean('Animation', true);
+  return <Loader isLoading={isLoading} text={message} animation={animation} />;
+};
diff --git a/src/components/loader/logo.js b/src/components/loader/logo.js
new file mode 100644
index 0000000..04ef705
--- /dev/null
+++ b/src/components/loader/logo.js
@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './logo.module.css';
+
+const Logo = ({ animation = true }) => {
+  const [letterIndex, setLetterIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const newLetterIndex = (letterIndex + 1) % 'codenames'.length;
+      setLetterIndex(newLetterIndex);
+    }, 1500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [letterIndex]);
+
+  return (
+    <div className={classnames('w-full text-center')}>
+      <Letter
+        letter={'c'}
+        color={'blue'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 0,
+        })}
+      />
+      <Letter
+        letter={'o'}
+        color={'red'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 1,
+        })}
+      />
+      <Letter
+        letter={'d'}
+        color={'blue'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 2,
+        })}
+      />
+      <Letter
+        letter={'e'}
+        color={'blue'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 3,
+        })}
+      />
+      <Letter
+        letter={'n'}
+        color={'red'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 4,
+        })}
+      />
+      <Letter
+        letter={'a'}
+        color={'red'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 5,
+        })}
+      />
+      <Letter
+        letter={'m'}
+        color={'blue'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 6,
+        })}
+      />
+      <Letter
+        letter={'e'}
+        color={'red'}
+        classes={classnames({
+          [styles.letterAnimationFlip]: animation && letterIndex === 7,
+        })}
+      />
+      <Letter
+        letter={'s'}
+        color={'black'}
+        classes={classnames({
+          [styles.letterAnimationHinge]: animation && letterIndex === 8,
+        })}
+      />
+    </div>
+  );
+};
+
+Logo.propTypes = {
+  animation: PropTypes.bool.isRequired,
+};
+
+const Letter = ({ letter, color, classes }) => {
+  return (
+    <span
+      className={classnames(
+        classes,
+        styles.letter,
+        'h-9 xs:h-10 w-7 xs:w-9 inline-flex justify-center items-center',
+        'text-white font-medium uppercase text-2xl xs:text-3xl',
+        'rounded-md xs:rounded-lg',
+        {
+          'bg-blue-100': color === 'blue',
+          'bg-red-100': color === 'red',
+          'bg-black': color === 'black',
+        },
+      )}
+    >
+      {letter}
+    </span>
+  );
+};
+
+Letter.propTypes = {
+  letter: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['blue', 'red', 'black']).isRequired,
+  classes: PropTypes.string,
+};
+
+export { Logo };
diff --git a/src/components/loader/logo.module.css b/src/components/loader/logo.module.css
new file mode 100644
index 0000000..74cb07b
--- /dev/null
+++ b/src/components/loader/logo.module.css
@@ -0,0 +1,53 @@
+@import "animate.css/source/flippers/flip.css";
+
+.letter {
+    margin-left: 0.35rem;
+}
+
+@responsive {
+    @screen xs {
+        .letter {
+            margin-left: 0.29rem;
+        }
+    }
+    @screen sm {
+        .letter {
+            margin-left: 0.35rem;
+        }
+    }
+}
+
+.letter_animation_flip {
+    animation: flip;
+    animation-duration: 1.5s;
+}
+
+.letter_animation_hinge {
+    transform-origin: top right;
+    animation: fall;
+    animation-duration: 1.5s;
+}
+
+@keyframes fall {
+    0% {
+        animation-timing-function: ease-in-out;
+    }
+
+    20%,
+    60% {
+        transform: rotate3d(0, 0, 1, -40deg);
+        animation-timing-function: ease-in-out;
+    }
+
+    40%,
+    80% {
+        transform: rotate3d(0, 0, 1, -25deg);
+        animation-timing-function: ease-in-out;
+        opacity: 1;
+    }
+
+    to {
+        transform: translate3d(0, 300px, 0);
+        opacity: 0;
+    }
+}
diff --git a/src/components/loader/text.js b/src/components/loader/text.js
new file mode 100644
index 0000000..14e11d2
--- /dev/null
+++ b/src/components/loader/text.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Text = ({ text = '' }) => {
+  return (
+    text && (
+      <span
+        className={classnames(
+          'text-2xl font-semibold tracking-wide text-gray-400 text-center',
+        )}
+      >
+        {text}
+      </span>
+    )
+  );
+};
+
+Text.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
+export { Text };
diff --git a/src/containers/app/app.js b/src/containers/app/app.js
index 973c85f..af398ec 100644
--- a/src/containers/app/app.js
+++ b/src/containers/app/app.js
@@ -11,6 +11,7 @@ import {
 import { getGameSessionId } from 'src/utils/query-params';
 import * as FirebaseService from 'src/service';
 import { getRemainingCardsCount } from 'src/utils/team-progress';
+import { Loader } from 'src/components/loader';
 import { Lobby } from '../lobby';
 import { NotFound } from '../not-found';
 import { ProtectedGame } from '../game';
@@ -38,6 +39,8 @@ class App extends Component {
         team: '',
       },
       winnerTeam: '',
+      isLoading: true,
+      loadingText: 'Запуск приложения',
     };
     this.sessionId = '';
   }
@@ -68,10 +71,15 @@ class App extends Component {
       ));
     }
     this.sessionId = sessionId;
-    this.setState({
-      connected: true,
-      currentUser: { ...this.state.currentUser, id: userId },
-    });
+    this.setState(
+      {
+        connected: true,
+        currentUser: { ...this.state.currentUser, id: userId },
+      },
+      () => {
+        this.setState({ isLoading: false });
+      },
+    );
   }
 
   addListeners() {
@@ -162,35 +170,43 @@ class App extends Component {
 
   render() {
     return (
-      <Router>
-        <Switch>
-          <Route exact path="/">
-            <Lobby
-              sessionId={this.sessionId}
-              settings={this.state.settings}
-              users={this.state.users}
-              captains={this.state.captains}
-              currentUser={this.state.currentUser}
-              onChangeSettings={this.saveSettings.bind(this)}
-              onChangeUsername={this.saveUsername.bind(this)}
-              onJoinTeam={this.joinTeam.bind(this)}
-              onJoinTeamAsCaptain={this.joinTeamAsCaptain.bind(this)}
-            />
-          </Route>
-          <Route path="/game">
-            <ProtectedGame
-              connected={this.state.connected}
-              sessionId={this.sessionId}
-              captains={this.state.captains}
-              currentUser={this.state.currentUser}
-              cards={this.state.cards}
-              winnerTeam={this.state.winnerTeam}
-              onOpenCard={this.saveCard.bind(this)}
-            />
-          </Route>
-          <Route component={NotFound} />
-        </Switch>
-      </Router>
+      <>
+        {this.state.isLoading && (
+          <Loader
+            isLoading={this.state.isLoading}
+            text={this.state.loadingText}
+          />
+        )}
+        <Router>
+          <Switch>
+            <Route exact path="/">
+              <Lobby
+                sessionId={this.sessionId}
+                settings={this.state.settings}
+                users={this.state.users}
+                captains={this.state.captains}
+                currentUser={this.state.currentUser}
+                onChangeSettings={this.saveSettings.bind(this)}
+                onChangeUsername={this.saveUsername.bind(this)}
+                onJoinTeam={this.joinTeam.bind(this)}
+                onJoinTeamAsCaptain={this.joinTeamAsCaptain.bind(this)}
+              />
+            </Route>
+            <Route path="/game">
+              <ProtectedGame
+                connected={this.state.connected}
+                sessionId={this.sessionId}
+                captains={this.state.captains}
+                currentUser={this.state.currentUser}
+                cards={this.state.cards}
+                winnerTeam={this.state.winnerTeam}
+                onOpenCard={this.saveCard.bind(this)}
+              />
+            </Route>
+            <Route component={NotFound} />
+          </Switch>
+        </Router>
+      </>
     );
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index c22a1fe..517ab77 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
         '1/4': '25%',
       },
       screens: {
+        xs: '375px',
         sm: '568px',
         '2xl': '1920',
       },