Merge pull request #678 from bamdadfr/next/bamdad

package.json

@@ -66,6 +66,9 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/gl-react": "^3.15.8",
+    "@types/gl-react-dom": "^3.15.8",
+    "@types/gl-react-image": "^3.2.4",
     "@types/grecaptcha": "^3.0.9",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",

src/app/shared.styles.ts

@@ -1,4 +1,5 @@
 import {mediaQueries} from 'src/app/styles/breakpoints';
+import {widths} from 'src/app/styles/widths';
 import styled, {css} from 'styled-components';
 
 export const centerFlex = css`
@@ -11,9 +12,9 @@ export const CenteredDiv = styled.div`
   ${centerFlex};
 `;
 
-const p = 14;
-export const addMargins = css`
-  margin: ${p - 4}px ${p}px;
+export const p = 14;
+export const addPaddings = css`
+  padding: ${p - 4}px ${p}px;
 `;
 
 export const addFontSizeSmall = css`
@@ -58,6 +59,13 @@ export const addColorsDefault = css`
 export const addVerticalScroll = css`
   overflow-x: hidden;
   overflow-y: auto;
+`;
+
+export const addPaddingTop = css`
+  padding-top: ${p * 4}px;
+`;
+
+export const addPaddingRight = css`
   padding-right: ${p}px;
 `;
 
@@ -71,3 +79,38 @@ export const addHoverLink = css`
     }
   }
 `;
+
+export const addGap = css`
+  gap: ${p}px;
+`;
+
+export const addGapDouble = css`
+  gap: ${p * 2}px;
+`;
+
+export const maximize = css`
+  width: 100%;
+  height: 100%;
+`;
+
+export const addSquareWidths = css`
+  ${mediaQueries.below.tablet} {
+    width: calc(${widths.mobile} + 3em);
+  }
+
+  ${mediaQueries.above.tablet} {
+    width: calc(${widths.tablet} + 2em);
+  }
+
+  ${mediaQueries.above.desktop} {
+    width: calc(${widths.desktop} + 2em);
+  }
+
+  ${mediaQueries.above.widescreen} {
+    width: calc(${widths.widescreen} + 2em);
+  }
+
+  ${mediaQueries.above.fullhd} {
+    width: calc(${widths.fullhd} + 2em);
+  }
+`;

src/app/styles/global.js → src/app/styles/global.ts

@@ -1,11 +1,18 @@
 import '@fontsource/noto-sans';
 
+import {addColorsDefault, addFontSizes} from 'src/app/shared.styles';
 import {createGlobalStyle} from 'styled-components';
 
 // noinspection CssUnusedSymbol
 export const Global = createGlobalStyle`
   html {
     font-family: 'Noto Sans', sans-serif;
+    ${addColorsDefault};
+    ${addFontSizes};
+  }
+
+  body {
+    overflow: hidden
   }
 
   // scrollbars

src/app/styles/widths.ts

@@ -1,7 +1,7 @@
 export const widths = {
-  mobile: '95vw',
-  tablet: '80vw',
-  desktop: '60vw',
-  widescreen: '45vw',
-  fullhd: '40vw',
+  mobile: '95%',
+  tablet: '80%',
+  desktop: '60%',
+  widescreen: '45%',
+  fullhd: '40%',
 };

src/components/form/form.component.styles.ts

@@ -1,11 +1,11 @@
-import {addMargins, centerFlex} from 'src/app/shared.styles';
+import {addGapDouble, centerFlex} from 'src/app/shared.styles';
 import styled, {css} from 'styled-components';
 
 export const Form = styled.form`
   ${centerFlex};
-  ${addMargins};
+  height: 100%;
   flex-direction: column;
-  gap: 14px;
+  ${addGapDouble};
 `;
 
 const formElement = css`

src/components/header/header.component.styles.ts

@@ -1,12 +1,22 @@
 import {Icon} from '@iconify/react';
-import {addHoverLink, addMargins, centerFlex} from 'src/app/shared.styles';
+import {
+  addColorsDefault,
+  addHoverLink,
+  addPaddingRight,
+  addPaddings,
+  centerFlex,
+  p,
+} from 'src/app/shared.styles';
 import styled from 'styled-components';
 
-const p = 14;
-
 export const Container = styled.div`
   ${centerFlex};
-  ${addMargins};
+  ${addPaddings};
+  width: calc(100% - ${p}px);
+  position: fixed;
+  z-index: 100;
+  ${addColorsDefault};
+  ${addPaddingRight};
 `;
 
 const Side = styled.div`
@@ -23,7 +33,7 @@ export const Left = styled(Side)`
 `;
 
 export const Right = styled(Side)`
-  right: ${p}px;
+  right: ${p + 4}px;
 `;
 
 export const Podium = styled(Icon)`

src/components/loading/components/dots/dots.component.tsx

@@ -8,5 +8,5 @@ import {useDotsComponent} from './hooks/use-dots-component';
 export function DotsComponent(): ReactElement {
   const {dots} = useDotsComponent();
 
-  return <div>{dots}</div>;
+  return <>{dots}</>;
 }

src/components/loading/loading.component.styles.ts

@@ -1,45 +1,31 @@
-import styled from 'styled-components';
+import {p} from 'src/app/shared.styles';
+import styled, {css} from 'styled-components';
 
 export const Container = styled.div`
-  display: grid;
+  display: flex;
   justify-content: center;
   align-items: center;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 1em;
+  height: 100%;
+`;
 
-  transform: translateX(0.5em);
+const width = css`
+  width: 4em;
 `;
 
 export const ImageContainer = styled.div`
   display: flex;
   justify-self: flex-end;
-  align-items: flex-start;
-
-  position: relative;
 
-  width: 4em;
+  ${width};
   height: 10em;
 
-  transform: translateX(-1.5em);
+  transform: translate3d(-${p}px, -${p * 6}px, 0);
 `;
 
-export const TextContainer = styled.div`
+export const Text = styled.span`
   display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  flex-direction: column;
-
-  height: 100%;
-  width: 100%;
-
+  justify-content: flex-start;
+  align-items: center;
   text-align: left;
-
-  > h2 {
-    height: 3em;
-  }
-
-  > div {
-    height: 40px;
-    font-size: 0.8em;
-  }
+  ${width};
 `;

src/components/loading/loading.component.tsx

@@ -2,7 +2,7 @@ import Image from 'next/legacy/image';
 import React, {ReactElement} from 'react';
 
 import {DotsComponent} from './components/dots/dots.component';
-import {Container, ImageContainer, TextContainer} from './loading.component.styles';
+import {Container, ImageContainer, Text} from './loading.component.styles';
 
 /**
  * Component for the loading screen
@@ -18,12 +18,11 @@ export function LoadingComponent(): ReactElement {
           objectFit="contain"
         />
       </ImageContainer>
-      <TextContainer>
-        <h2>
-          loading
-          <DotsComponent />
-        </h2>
-      </TextContainer>
+
+      <Text>
+        loading
+        <DotsComponent />
+      </Text>
     </Container>
   );
 }

src/components/screw-texture/screw-texture.component.tsx

@@ -1,8 +1,8 @@
 import {Surface} from 'gl-react-dom/lib';
 import GLImage from 'gl-react-image';
 import React, {ReactElement} from 'react';
+import {withTimeLoop} from 'src/app/components/with-time-loop/with-time-loop';
 
-import {withTimeLoop} from '../../app/components/with-time-loop/with-time-loop';
 import {ScrewTextureNode} from './screw-texture.node';
 
 const AnimatedScrewTextureNode = withTimeLoop(ScrewTextureNode);
@@ -22,9 +22,15 @@ export function ScrewTextureComponent({
   width,
 }: ScrewTextureComponentProps): ReactElement {
   return (
-    <Surface width={width} height={width}>
+    <Surface
+      width={width}
+      height={width}
+    >
       <AnimatedScrewTextureNode dryWet={dryWet}>
-        <GLImage source={image} resizeMode="cover" />
+        <GLImage
+          source={image}
+          resizeMode="cover"
+        />
       </AnimatedScrewTextureNode>
     </Surface>
   );

src/components/screw-texture/screw-texture.node.tsx

@@ -1,7 +1,7 @@
 import {Node} from 'gl-react';
 import React, {ReactElement} from 'react';
+import {mapRange} from 'src/utils/map-range/map-range';
 
-import {mapRange} from '../../utils/map-range/map-range';
 import {shaders} from './screw-texture.shaders';
 
 interface ScrewTextureNodeProps {
@@ -17,14 +17,8 @@ export function ScrewTextureNode({
 }: ScrewTextureNodeProps): ReactElement {
   const time = propTime / 1000;
 
-  const dryWet = 0.005 + mapRange(
-    parseFloat(propDryWet),
-    0.5,
-    1.5,
-    1.6,
-    -1.6,
-    true,
-  );
+  const dryWet =
+    0.005 + mapRange(parseFloat(propDryWet), 0.5, 1.5, 1.6, -1.6, true);
 
   return (
     <Node

src/components/slider/slider.component.styles.ts

@@ -1,3 +1,4 @@
+import {addSquareWidths} from 'src/app/shared.styles';
 import {type SliderComponentProps} from 'src/components/slider/slider.component';
 import styled, {css} from 'styled-components';
 
@@ -58,6 +59,7 @@ export const Input = styled.input.attrs((props) => ({
 
   margin: 0;
   padding: 0;
+  ${addSquareWidths};
   width: ${config.trackW};
   height: ${config.thumbD};
   background: transparent;

src/components/table/table.component.styles.ts

@@ -1,8 +1,11 @@
-import {addVerticalScroll} from 'src/app/shared.styles';
+import {addGap, addVerticalScroll} from 'src/app/shared.styles';
 import styled from 'styled-components';
 
 export const Container = styled.div`
   ${addVerticalScroll};
+  display: flex;
+  flex-direction: column;
+  ${addGap};
 `;
 
 export const Item = styled.div`