game page

Author: igorburak-zenio

src/components/containers/game/index.scss

@@ -10,8 +10,17 @@
         justify-content: space-between;
     }
 
+    .start-button-block{
+        width: 100%;
+        padding: 15rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
     .square-container{
-        border: 1px solid #979797;
+        border: 1px solid $green;
         padding: 1.2rem;
         width: 100%;
         height: 50vh;
@@ -29,6 +38,7 @@
         width: 5rem;
         height: 5rem;
         background-color: $green;
+        animation-duration: 0.4s;
     }
 
     .completed{

src/components/containers/game/index.tsx

@@ -10,6 +10,7 @@ import {setTransactionInfo} from "../../../actions/set-transaction-info";
 import {IService} from "../../../services/model";
 import {withService} from "../../hoc-helpers/with-service";
 import {ITransactionsService, TransactionInfoService} from "../../../services/transactions-service/model";
+import {ButtonAnimate} from "../../ui/button-animate";
 
 interface IDispatchProps {
     dispatch: Dispatch
@@ -57,9 +58,12 @@ class Game extends React.Component<IProps, {}> {
                             <p>Total amount of transactions: {transactions.length}</p>
                         </div>
                     </div>
+                    {/*<div className={'start-button-block'}>*/}
+                    {/*    <ButtonAnimate name={'Begin'}/>*/}
+                    {/*</div>*/}
                     <div className={'square-container'} onClick={this.handlerClick}>
                         {transactions && transactions.map((item: ITransaction.Model) => (
-                            <div key={item.id} className={`square ${item.status}`}/>
+                            <div key={item.id} className={`square ${item.status} animated zoomInRight`}/>
                         ))}
                     </div>
                 </div>

src/components/containers/home/index.tsx

@@ -19,10 +19,10 @@ export default class Home extends React.Component {
                             At the end, we will show you how close you came to overhelm the system.</p>
                         <Button name={'Play the game'} linkTo={'/game'}/>
                         <div className={'padding-b'}/>
-                        <Button name={'Read how it works'} linkTo={'/'}/>
+                        <Button typeALink={true} name={'Read how it works'} linkTo={'https://solana.com/category/blog/'}/>
                     </div>
                     <div className={'hero-illustration'}>
-                        <object id={'hero'} data={heroImage} type={'image/svg+xml'}></object>
+                        <object id={'hero'} data={heroImage} type={'image/svg+xml'}/>
                     </div>
                 </div>
             </div>

src/components/ui/button-animate/index.scss

@@ -0,0 +1,27 @@
+@import '~@styles/variables/colors';
+@import '~@styles/tools/transitions';
+
+.button-animate-component {
+    font-size: 1.8rem;
+    line-height: 2.4rem;
+    padding: 2.4rem;
+    min-width: 20rem;
+    background-color: $green;
+    border: 1px solid $green;
+    box-shadow: none;
+    color: #242424;
+    font-weight: 700;
+    text-transform: uppercase;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    @include transition;
+
+    &:hover{
+        background-color: $black;
+        color: $green;
+        @include transition;
+    }
+}

src/components/ui/button-animate/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import './index.scss';
+
+interface IProps {
+    name: string
+    onClick?(): void
+}
+
+export const ButtonAnimate = ({name, onClick}: IProps) => {
+
+    return (
+        <button onClick={onClick} className={'button-animate-component animated infinite pulse'}>{name}</button>
+    )
+};

src/components/ui/button/index.tsx

@@ -6,11 +6,18 @@ import {Link} from "react-router-dom";
 interface IProps {
     name: string
     linkTo: string
+    typeButton?: boolean
+    typeALink?: boolean
+    onClick?(): void
 }
 
-export const Button = ({name, linkTo}: IProps) => {
+export const Button = ({name, linkTo, typeButton,typeALink,onClick}: IProps) => {
 
     return (
-        <Link to={linkTo} className={'button-component'}>{name}</Link>
+        <React.Fragment>
+            {!typeButton && !typeALink && <Link to={linkTo} className={'button-component'}>{name}</Link>}
+            {typeButton && <button onClick={onClick} className={'button-component'}>{name}</button>}
+            {typeALink && <a href={linkTo} className={'button-component'}>{name}</a>}
+        </React.Fragment>
     );
 };

src/shared/styles/animate.scss

@@ -1,6 +1,7 @@
 @import "./variables/colors.scss";
 @import "./tools/transitions.scss";
 @import "./typography/typography.scss";
+@import "/animate.scss";
 
 @font-face {
     font-family: 'Exo';

src/shared/styles/global.scss

@@ -1,5 +1,5 @@
 @mixin transition(){
-  transition: 0.15s ease-in-out;
+  transition: 0.2s ease-in-out;
 }
 
 @mixin transition-hover(){