Add work in progress layout (#5)

* Create WorkInProgress component * Create stylesheet * Reinstall node-sass * Add layout * Update meta * Add squirrel * Add hover
vexuas · Dec 5, 2021 · 7d0ffb5 · 7d0ffb5
1 parent 097d9ba
commit 7d0ffb5
Show file tree

Hide file tree

Showing 11 changed files with 2,090 additions and 1,865 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
-    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -42,6 +41,8 @@
     ]
   },
   "devDependencies": {
-    "auto": "^10.32.3"
+    "auto": "^10.32.3",
+    "node-sass": "^6.0.0",
+    "sass-loader": "^12.0.0"
   }
 }
diff --git a/public/armor_body.png b/public/armor_body.png
diff --git a/public/audio/Jamie Berry ft. Octavia Rose - Lost In The Rhythm (128 kbps).mp3 b/public/audio/Jamie Berry ft. Octavia Rose - Lost In The Rhythm (128 kbps).mp3
diff --git a/public/index.html b/public/index.html
@@ -2,13 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/armor_body.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Armor Swap Training For Apex Legends" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Armor Swap | Apex Legends</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.module.scss b/src/App.module.scss
@@ -0,0 +1,10 @@
+@import './assets/styles/variables.scss';
+
+.Container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: $color-white;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
+import styles from './App.module.scss';
+import { WorkInProgress } from './app/components/WorkInProgress';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className={styles.Container}>
+      <WorkInProgress />
     </div>
   );
 }

diff --git a/src/app/components/WorkInProgress/WorkInProgress.module.scss b/src/app/components/WorkInProgress/WorkInProgress.module.scss
@@ -0,0 +1,26 @@
+.Container {
+  font-size: 64px;
+}
+.Squirrel {
+  display: flex;
+  justify-content: center;
+  margin-top: 42px;
+}
+.ImagePlaying,
+.ImageDisabled {
+  width: 500px;
+  border: 5px solid red;
+  border-radius: 12px;
+  filter: saturate(1.7);
+  cursor: pointer;
+  transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
+}
+.ImagePlaying {
+  transform: scale(1.05);
+}
+.ImageDisabled {
+  filter: grayscale(1);
+  &:hover {
+    filter: grayscale(0.7);
+  }
+}
diff --git a/src/app/components/WorkInProgress/index.tsx b/src/app/components/WorkInProgress/index.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import styles from './WorkInProgress.module.scss';
+
+export function WorkInProgress() {
+  const [audio] = useState(
+    new Audio('/audio/Jamie Berry ft. Octavia Rose - Lost In The Rhythm (128 kbps).mp3')
+  );
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const handleAudio = () => {
+    if (isPlaying) {
+      setIsPlaying(false);
+      audio.pause();
+    } else {
+      setIsPlaying(true);
+      audio.play();
+    }
+  };
+  return (
+    <div className={styles.Container}>
+      <div>Nothing here yet :)</div>
+      <div>Have a dancing squirrel while you wait</div>
+      <div className={styles.Squirrel}>
+        {isPlaying ? (
+          <img
+            onClick={handleAudio}
+            className={styles.ImagePlaying}
+            alt="Dancing Squirrel"
+            src="https://cdn.discordapp.com/attachments/248430185463021569/917123652200321034/dancing_squirrel.gif"
+          />
+        ) : (
+          <img
+            onClick={handleAudio}
+            className={styles.ImageDisabled}
+            alt="Dancing Squirrel"
+            src="https://cdn.discordapp.com/attachments/248430185463021569/917137831716085780/dancing_squirrel_still.png"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
@@ -0,0 +1,4 @@
+//Text color
+$color-default: #002240;
+$color-white: #fff;
+$color-black: #000;