Next version: Major UI upgrade

.nvmrc

@@ -0,0 +1 @@
+12.19.1

README.md

@@ -2,10 +2,11 @@
 
 ### Live at [https://fifa.sauravmh.com](https://fifa.sauravmh.com)
 
-[![HitCount](http://hits.dwyl.com/sauravhiremath/fifa.svg)](http://hits.dwyl.com/sauravhiremath/fifa)
-
 A multiplayer game simulating Football players draft on a web platform.
 
+### Beta version
+
+![beta-landing](https://user-images.githubusercontent.com/28642011/119253304-2f878600-bbce-11eb-805d-52badaa2302f.png)
 ![gameplay](https://i.giphy.com/media/W28AHIGbv0DOBcGoD8/source.gif)
 
 ## About

craco.config.js

@@ -0,0 +1,8 @@
+// craco.config.js
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require('tailwindcss'), require('autoprefixer')]
+    }
+  }
+};

package.json

@@ -1,18 +1,23 @@
 {
   "name": "fifa",
   "version": "1.1.0",
+  "engines": {
+    "node": ">=12.x.x"
+  },
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.2",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.7.1",
     "algoliasearch": "4.8.5",
     "axios": "0.21.1",
     "bootstrap": "4.6.0",
+    "clsx": "^1.1.1",
     "jquery": "3.5.1",
     "js-cookie": "2.2.1",
     "prop-types": "15.7.2",
-    "react": "17.0.1",
+    "react": "17.0.2",
     "react-bootstrap": "1.4.3",
     "react-chat-elements": "10.13.0",
     "react-countdown-circle-timer": "2.4.0",
@@ -21,16 +26,16 @@
     "react-instantsearch-dom": "6.9.0",
     "react-lazyload": "^3.2.0",
     "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.3",
     "react-uwp": "1.3.3",
     "redux": "4.0.5",
     "shortid": "2.2.16",
     "socket.io-client": "4.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint --fix --ext js,jsx src"
   },
@@ -53,6 +58,7 @@
     "@babel/plugin-proposal-export-default-from": "7.12.13",
     "@types/react-redux": "7.1.16",
     "@types/redux-logger": "3.0.8",
+    "autoprefixer": "^9",
     "babel-eslint": "10.1.0",
     "eslint-config-prettier": "7.2.0",
     "eslint-config-xo": "0.34.0",
@@ -62,9 +68,11 @@
     "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "postcss": "^7",
     "prettier": "2.2.1",
     "react-redux": "7.2.2",
     "redux-logger": "3.0.6",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "typescript": "4.1.5"
   }
 }

public/index.html

@@ -26,7 +26,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.0.0/themes/algolia-min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.0.0/themes/algolia-min.css">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Aldrich" media="all">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,35 +1,22 @@
+import './App.css';
 import React from 'react';
-import { Theme as UWPThemeProvider, getTheme } from 'react-uwp/Theme';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { Container } from 'react-bootstrap';
 
 import ROUTES, { RenderRoutes } from './routes';
 import { Nav } from './components';
 import background from './images/background.jpg';
 
-import './App.css';
-import 'react-chat-elements/dist/main.css';
-
-export default class App extends React.Component {
-  render() {
-    return (
-      <UWPThemeProvider
-        theme={getTheme({
-          themeName: 'dark', // set custom theme
-          accent: '#0078D7', // set accent color
-          useFluentDesign: true, // sure you want use new fluent design.
-          desktopBackgroundImage: background // set global desktop background image
-        })}
-      >
-        <div className="App">
-          <Router>
-            <Nav />
-            <Container fluid="sm" className="p-0">
-              <RenderRoutes routes={ROUTES} />
-            </Container>
-          </Router>
+const App = () => {
+  return (
+    <div className="App">
+      <Router>
+        <Nav />
+        <div className="container mx-auto">
+          <RenderRoutes routes={ROUTES} />
         </div>
-      </UWPThemeProvider>
-    );
-  }
-}
+      </Router>
+    </div>
+  );
+};
+
+export default App;

src/components/Core/Lobby.js

@@ -15,7 +15,7 @@ import TurnTimer from './TurnTimer';
 
 class Lobby extends React.Component {
   state = {
-    warning: [true, '', ''],
+    warning: [false, '', ''],
     isReady: false,
     isDraftReady: false,
     isTurn: false,
@@ -137,15 +137,16 @@ class Lobby extends React.Component {
 
   showWarning = warning => {
     return (
+      // Toast does not work, issue from react-uwp project
       <Toast
         showCloseIcon
         closeDelay={3000}
         defaultShow={warning[0]}
         title={warning[1]}
-        description={warning[2]}
+        description={[warning[2]]}
         onToggleShowToast={isToast => {
           if (isToast) {
-            this.setState({ warning: [false, undefined, undefined] });
+            this.setState({ warning: [false, '', ''] });
           }
         }}
       />
@@ -250,7 +251,7 @@ const warnIfDuplicateAcrossCollections = (item, collections, players) => {
       }
     }
   }
-  return [false, undefined, undefined];
+  return [false, '', ''];
 };
 
 export default connect(mapStateToProps)(Lobby);

src/components/Core/PlayerSearch.js

@@ -50,6 +50,11 @@ export default class PlayerSearch extends React.Component {
   };
 
   Hits = ({ hits }) => {
+    const image = process.env.NODE_ENV === 'production' ? 'photo_url' : 'image';
+    const name = process.env.NODE_ENV === 'production' ? 'name' : 'title';
+    const rating = process.env.NODE_ENV === 'production' ? 'Overall Rating' : 'rating';
+    const positions = process.env.NODE_ENV === 'production' ? 'positions' : 'genre';
+
     return (
       <div>
         {hits.map(item => (
@@ -61,15 +66,15 @@ export default class PlayerSearch extends React.Component {
             <div className="playerHitsImage">
               <LazyLoad height={100}>
                 <Image
-                  src={item.photo_url.replace('https', 'http')}
+                  src={item[image].replace('https', 'http')}
                   onError={e => (e.target.src = playerLoading)}
                 />
               </LazyLoad>
             </div>
             <div className="playerHitsContent">
-              <div>{item.name}</div>
+              <div>{item[name]}</div>
               <div>
-                <b>Rating:</b> {item['Overall Rating']} <b>Positions:</b> {item.positions}
+                <b>Rating:</b> {item[rating]} <b>Positions:</b> {item[positions]}
               </div>
             </div>
           </div>
@@ -96,7 +101,7 @@ export default class PlayerSearch extends React.Component {
         }}
       >
         <InstantSearch
-          indexName="dev_PLAYERS"
+          indexName={process.env.NODE_ENV === 'production' ? 'dev_PLAYERS' : 'movies'}
           searchClient={customSearchClient}
           stalledSearchDelay={500}
         >

src/components/Landing/Landing.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+
+import ErrorHandler from '../ErrorHandler';
+
+const Landing = () => {
+  return (
+    <div className="font-landing container max-w-lg px-4 py-8 mx-auto text-center md:py-32 md:max-w-none">
+      <h1 className="text-5xl font-extrabold leading-tight tracking-tight text-center text-gray-900 md:text-6xl md:leading-8 lg:text-7xl">
+        <span className="inline md:block">Build and Play with your</span>{' '}
+        <span className="relative mt-2 text-transparent bg-clip-text bg-gradient-to-br md:inline-block from-red-600 to-red-300">
+          Dream FIFA Team
+        </span>
+      </h1>
+      <div className="mx-auto mt-5 text-gray-500 text-center md:mt-12 md:max-w-lg lg:text-lg">
+        Simplifying the way we play multiplayer games. Build custom teams and compete with
+        others in a turn based game
+      </div>
+      <div className="flex flex-col items-center mt-12 text-center">
+        <span className="relative inline-flex w-full md:w-auto">
+          <a
+            href="/auth"
+            type="button"
+            className="inline-flex items-center justify-center w-full px-8 text-base font-bold leading-6 text-white border border-transparent md:w-auto focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 hover:bg-red-400 bg-red-500 py-3 rounded-sm"
+          >
+            PLAY FREE
+          </a>
+          <span className="" />
+        </span>
+        <a href="#" className="mt-3 text-sm text-indigo-500">
+          Learn More
+        </a>
+      </div>
+    </div>
+  );
+
+  return (
+    <Redirect
+      push
+      to={{
+        pathname: '/room',
+        search: `?=${roomId}`,
+        state: { referrer: '/' }
+      }}
+    />
+  );
+};
+
+const mapStateToProps = function (state) {
+  return {
+    username: state.username
+  };
+};
+
+export default connect(mapStateToProps)(Landing);

src/components/Landing/index.js

@@ -0,0 +1 @@
+export { default as Landing } from './Landing';