Refactor frontend

octo-technology · Oct 27, 2021 · 9ce0944 · 9ce0944
1 parent 7a57083
commit 9ce0944
Show file tree

Hide file tree

Showing 20 changed files with 29 additions and 278 deletions.
diff --git a/src/frontend/public/elements/admiral.png b/src/frontend/public/elements/admiral.png
diff --git a/src/frontend/public/elements/alien.png b/src/frontend/public/elements/alien.png
diff --git a/src/frontend/public/elements/mechanics.png b/src/frontend/public/elements/mechanics.png
diff --git a/src/frontend/public/elements/pilot.png b/src/frontend/public/elements/pilot.png
diff --git a/src/frontend/public/elements/robot.png b/src/frontend/public/elements/robot.png
diff --git a/src/frontend/public/elements/scientist.png b/src/frontend/public/elements/scientist.png
diff --git a/src/frontend/public/elements/soldier.png b/src/frontend/public/elements/soldier.png
diff --git a/src/frontend/public/elements/traitor.png b/src/frontend/public/elements/traitor.png
diff --git a/src/frontend/public/favicon.png b/src/frontend/public/favicon.png
diff --git a/src/frontend/public/images/adventure.png b/src/frontend/public/images/adventure.png
diff --git a/src/frontend/public/images/ship.png b/src/frontend/public/images/ship.png
diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="black" />
 

diff --git a/src/frontend/public/logo192.png b/src/frontend/public/logo192.png
diff --git a/src/frontend/public/logo512.png b/src/frontend/public/logo512.png
diff --git a/src/frontend/public/manifest.json b/src/frontend/public/manifest.json
@@ -3,7 +3,7 @@
   "name": "TezosAcademy",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },

diff --git a/src/frontend/public/ogimage.png b/src/frontend/public/ogimage.png
diff --git a/src/frontend/src/pages/Chapter/Chapter.components/Dialog/Dialog.style.tsx b/src/frontend/src/pages/Chapter/Chapter.components/Dialog/Dialog.style.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components/macro";
+import styled from 'styled-components/macro'
 
 export const DialogStyled = styled.div`
   margin-top: 10px;
@@ -9,7 +9,7 @@ export const DialogStyled = styled.div`
   @media (max-width: 900px) {
     grid-template-columns: auto;
   }
-`;
+`
 
 export const DialogCharacter = styled.div`
   position: relative;
@@ -42,281 +42,32 @@ export const DialogCharacter = styled.div`
     left: 8px;
     position: absolute;
   }
+`
 
-  .glitch .glitch__item:nth-child(n + 2) {
-    opacity: 0;
-    animation-duration: var(--time-anim);
-    animation-delay: var(--delay-anim);
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-  }
-  .glitch .glitch__item:nth-child(2) {
-    background-color: var(--blend-color-2);
-    background-blend-mode: var(--blend-mode-2);
-    animation-name: glitch-anim-2;
-  }
-  .glitch .glitch__item:nth-child(2) {
-    background-color: var(--blend-color-3);
-    background-blend-mode: var(--blend-mode-3);
-    animation-name: glitch-anim-3;
-  }
-  .glitch .glitch__item:nth-child(4) {
-    background-color: var(--blend-color-4);
-    background-blend-mode: var(--blend-mode-4);
-    animation-name: glitch-anim-4;
-  }
-  .glitch .glitch__item:nth-child(5) {
-    background-color: var(--blend-color-5);
-    background-blend-mode: var(--blend-mode-5);
-    animation-name: glitch-anim-flash;
-  }
-  @keyframes glitch-anim-flash {
-    0%,
-    5% {
-      opacity: 0.2;
-      transform: translate3d(var(--glitch-horizontal), var(--glitch-height), 0);
-    }
-    5.5%,
-    100% {
-      opacity: 0;
-      transform: translate3d(0, 0, 0);
-    }
-  }
-  @keyframes glitch-anim-2 {
-    0% {
-      opacity: 1;
-      transform: translate3d(var(--gap-horizontal), 0, 0);
-      -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
-      clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
-    }
-    2% {
-      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
-      clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
-    }
-    4% {
-      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
-      clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
-    }
-    6% {
-      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
-      clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
-    }
-    8% {
-      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
-      clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
-    }
-    10% {
-      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
-      clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
-    }
-    12% {
-      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
-      clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
-    }
-    14% {
-      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
-      clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
-    }
-    16% {
-      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
-      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
-    }
-    18% {
-      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
-      clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
-    }
-    20% {
-      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
-      clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
-    }
-    21.9% {
-      opacity: 1;
-      transform: translate3d(var(--gap-horizontal), 0, 0);
-    }
-    22%,
-    100% {
-      opacity: 0;
-      transform: translate3d(0, 0, 0);
-      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-    }
-  }
-  @keyframes glitch-anim-3 {
-    0% {
-      opacity: 1;
-      transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
-      -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
-      clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
-    }
-    3% {
-      -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
-      clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
-    }
-    5% {
-      -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
-      clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
-    }
-    7% {
-      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
-      clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
-    }
-    9% {
-      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
-      clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
-    }
-    11% {
-      -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
-      clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
-    }
-    13% {
-      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
-      clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
-    }
-    15% {
-      -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
-      clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
-    }
-    17% {
-      -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
-      clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
-    }
-    19% {
-      -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
-      clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
-    }
-    20% {
-      -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
-      clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
-    }
-    21.9% {
-      opacity: 1;
-      transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
-    }
-    22%,
-    100% {
-      opacity: 0;
-      transform: translate3d(0, 0, 0);
-      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-    }
-  }
-  @keyframes glitch-anim-4 {
-    0% {
-      opacity: 1;
-      transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
-      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
-      clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
-    }
-    1.5% {
-      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
-      clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
-    }
-    2% {
-      -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
-      clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
-    }
-    2.5% {
-      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
-      clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
-    }
-    3% {
-      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
-      clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
-    }
-    5% {
-      -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
-      clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
-    }
-    5.5% {
-      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
-      clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
-    }
-    7% {
-      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
-      clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
-    }
-    8% {
-      -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
-      clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
-    }
-    9% {
-      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
-      clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
-    }
-    10.5% {
-      -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
-      clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
-    }
-    11% {
-      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
-      clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
-    }
-    13% {
-      -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
-      clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
-    }
-    14% {
-      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
-      clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
-    }
-    14.5% {
-      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
-      clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
-    }
-    15% {
-      -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
-      clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
-    }
-    16% {
-      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
-      clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
-    }
-    18% {
-      -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
-      clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
-    }
-    20% {
-      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
-      clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
-    }
-    21.9% {
-      opacity: 1;
-      transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
-    }
-    22%,
-    100% {
-      opacity: 0;
-      transform: translate3d(0, 0, 0);
-      -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-      clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-    }
-  }
-`;
-
-export const DialogText = styled.div``;
+export const DialogText = styled.div``
 
 export const DialogTextInside = styled.div`
   position: relative;
-  background-image: url("/elements/dialog.png");
+  background-image: url('/elements/dialog.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   padding: 10px 10px 30px 10px;
   margin-top: 7px;
 
   &.evil {
-    font-family: "Modern vulcan 1.1";
+    font-family: 'Modern vulcan 1.1';
     font-size: 22px;
-    background-image: url("/elements/dialog-evil.png");
+    background-image: url('/elements/dialog-evil.png');
   }
 
   @media (max-width: 900px) {
     grid-template-columns: auto;
-    background-image: url("/elements/dialog-mobile.png");
+    background-image: url('/elements/dialog-mobile.png');
     padding: 30px 10px 10px 10px;
     margin-top: -10px;
 
     &.evil {
-      background-image: url("/elements/dialog-mobile-evil.png");
+      background-image: url('/elements/dialog-mobile-evil.png');
     }
   }
-`;
+`
diff --git a/src/frontend/src/pages/Chapter/Chapter.components/Dialog/Dialog.view.tsx b/src/frontend/src/pages/Chapter/Chapter.components/Dialog/Dialog.view.tsx
@@ -1,39 +1,35 @@
-import * as PropTypes from "prop-types";
-import * as React from "react";
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
 
-import { DialogCharacter, DialogStyled, DialogText, DialogTextInside } from "./Dialog.style";
+import { DialogCharacter, DialogStyled, DialogText, DialogTextInside } from './Dialog.style'
 
 type DialogProps = {
-  text: string;
-  character: string;
-};
+  text: string
+  character: string
+}
 
 export const DialogView = ({ text, character }: DialogProps) => {
-  const characterStyle = { background: `url("/elements/${character}.png") no-repeat 50% 50% / cover` };
+  const characterStyle = { background: `url("/elements/${character}.png") no-repeat 50% 50% / cover` }
   return (
     <DialogStyled>
       <DialogCharacter>
         <img
           alt="character-bg"
           className="character-bg"
-          src={`${character === "alien" ? "/elements/character-bg-evil.svg" : "/elements/character-bg.svg"}`}
+          src={`${character === 'alien' ? '/elements/character-bg-evil.svg' : '/elements/character-bg.svg'}`}
         />
         <div className="glitch">
           <div className="glitch__item" style={characterStyle}></div>
-          <div className="glitch__item" style={characterStyle}></div>
-          <div className="glitch__item" style={characterStyle}></div>
-          <div className="glitch__item" style={characterStyle}></div>
-          <div className="glitch__item" style={characterStyle}></div>
         </div>
       </DialogCharacter>
       <DialogText>
-        <DialogTextInside className={character === "alien" ? "evil" : "light"}>{text}</DialogTextInside>
+        <DialogTextInside className={character === 'alien' ? 'evil' : 'light'}>{text}</DialogTextInside>
       </DialogText>
     </DialogStyled>
-  );
-};
+  )
+}
 
 DialogView.propTypes = {
   text: PropTypes.string.isRequired,
   character: PropTypes.string.isRequired,
-};
+}
diff --git a/src/frontend/src/pages/Home/Home.style.tsx b/src/frontend/src/pages/Home/Home.style.tsx
@@ -51,6 +51,10 @@ export const HomeHeaderLeft = styled.div`
 export const HomeHeaderRight = styled.div`
   position: relative;
   margin: 200px auto;
+
+  > img {
+    max-width: 100%;
+  }
 `
 
 export const HomeAdventure = styled.div`

diff --git a/src/frontend/src/pages/Home/Home.view.tsx b/src/frontend/src/pages/Home/Home.view.tsx
@@ -26,7 +26,7 @@ export const HomeView = () => {
             </Link>
           </HomeHeaderLeft>
           <HomeHeaderRight>
-            <img src="/images/tezos.svg" />
+            <img src="/images/ship.png" />
           </HomeHeaderRight>
         </HomeHeaderGrid>
       </HomeHeader>