fixed title width

src/components/UsersList.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useMemo} from "react";
+import React, {FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
 import styled from "styled-components";
 import {TypeAnimation} from "react-type-animation";
 
@@ -9,43 +9,75 @@ export type TUsersList = {
 
 const emoji = ["😡", "😈", "😬", "🤪", "🤓", "😎", "🥸", "🤯", "😳", "🤬", "🫡", "🫠", "💀", "👽", "🤖"]
 
+function vminToPx(vmin: number) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const minSide = Math.min(vw, vh);
+  return (vmin / 100) * minSide;
+}
+
+const getRandomEmoji = (emojiList: string[]) => {
+  const idx = Math.floor(Math.random() * (emojiList.length - 1));
+  const result = emojiList[idx];
+  emojiList.splice(idx, 1);
+  return result;
+}
+
 const UsersList: FC<TUsersList> = ({
   users,
   round,
 }) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const getLine = useCallback((text: string, symbolSize: number, containerWidth: number) => {
+    const symbolWidth = symbolSize * 0.6;
+    const textSize = (text.length + 3) * symbolWidth;
+    const separatorWidth = (containerWidth - textSize) / 2;
+    const separatorCount = Math.floor(separatorWidth / symbolWidth);
+    const separators = '='.repeat(separatorCount);
+    return `${separators} ${text} ${separators}\n\n\n`
+  }, []);
+
   const usersSequence = useMemo(() => {
-    const copyEmoji = [...emoji];
+    if (!containerWidth) {
-    const getRandomEmoji = () => {
+      return ''
-      const idx = Math.floor(Math.random() * (copyEmoji.length - 1));
-      const result = copyEmoji[idx];
-      copyEmoji.splice(idx, 1);
-      return result;
     }
 
-    let result: string = '';
+    const copyEmoji = [...emoji];
-    if (true) {
+    const symbolSize = vminToPx(5);
-      result += `==========    ${round}    ==========\n\n\n`;
+
-    }
+    let result: string = getLine(round, symbolSize, containerWidth);
-      result += `==========    List start    ==========\n\n\n`;
+    result += getLine('List start', symbolSize, containerWidth);
 
     for (let i = 0; i < users.length; i++) {
-      result += `${i + 1}) ${users[i]} ${getRandomEmoji()}\n\n`;
+      result += `${i + 1}) ${users[i]} ${getRandomEmoji(copyEmoji)}\n\n`;
     }
 
-    result += "\n===========    List end    ===========";
+    result += `\n\n\n${getLine('List end', symbolSize, containerWidth)}`;
 
     return result;
-  }, [round, users]);
+  }, [containerWidth, getLine, round, users]);
+
+  useLayoutEffect(() => {
+    const width = contentRef.current?.clientWidth;
+    if (width) {
+      setContainerWidth(width)
+    }
+  }, []);
 
   return (
     <Wrapper>
-      <Content>
+      <Content ref={contentRef}>
-        <TypeAnimation
+        {containerWidth > 0 && (
-          style={{ whiteSpace: 'pre-line', display: 'block', color: "#0F0", fontSize: "5vmin", opacity: 0.8 }}
+          <TypeAnimation
-          sequence={[usersSequence]}
+            style={{ whiteSpace: 'pre-line', display: 'block', color: "#0F0", fontSize: "5vmin", opacity: 0.8 }}
-           // @ts-ignore
+            sequence={[usersSequence]}
-          speed={70}
+             // @ts-ignore
-        />
+            speed={70}
+          />
+        )}
       </Content>
     </Wrapper>
   );
@@ -53,12 +85,13 @@ const UsersList: FC<TUsersList> = ({
 
 const Wrapper = styled.div`
   position: absolute;
+  z-index: 2;
   display: flex;
   justify-content: center;
-  top: 70px;
+  top: 5%;
-  bottom: 70px;
+  bottom: 5%;
-  left: 300px;
+  left: 15%;
-  right: 300px;
+  right: 15%;
   background: #000;
   padding: 50px;
   border-radius: 5px;

src/constants.ts

@@ -1,5 +1,5 @@
 // export const round = 'LAST ROUND'
-export const round = 'ROUND\u00A0\u00A06\u00A0'
+export const round = 'ROUND 6'
 
 export const constants = [
   // "Всем спасибо!!!!!!"
@@ -7,31 +7,4 @@ export const constants = [
   "Я добрался до исходников",
   "Я просто хакир",
   "пушка самолет",
-  "Попа",
-  "happy_sardin64",
-  // "Vik",
-  // "Vaddus",
-  // "Anonim undefined'ович",
-
-
-  // "SashaMelva",
-  // "mariel",
-  // "Pavlov",
-  // "BackenderReus",
-
-  // "Ларионов Николай",
-  // 'Павлов'
-  // "trof",
-  // "Enotick_XD",
-  // "elil_",
-  // "Crystalys",
-  // "Ice",
-  // "ivanwgk",
-  // "AlYa",
-  // "Литвинов Михаил",
-  // "Сыч",
-  // "Pavlov",
-  // 'Samurai_backender',
-  // "mr cucumber",
-  // "AIYa",
 ]