fix animation

geometry-app · Oct 13, 2024 · d0ff160 · d0ff160
1 parent b77c1a1
commit d0ff160
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
         "buffer": "^6.0.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.26.2"
+        "react-router-dom": "^6.26.2",
+        "seeded-random-utilities": "^1.1.4"
     },
     "devDependencies": {
         "@babel/core": "^7.25.7",

diff --git a/src/components/Roulette/Roulette.tsx b/src/components/Roulette/Roulette.tsx
@@ -1,5 +1,6 @@
 import React, { CSSProperties, useEffect, useState } from 'react';
 import { HighlightedString } from '../../services/models';
+import SeededRandomUtilities from 'seeded-random-utilities';
 
 export interface IRouletteSegment {
     text?: HighlightedString,
@@ -18,10 +19,12 @@ export interface RollManager {
 }
 
 const Roulette: React.FC<IRouletteProps> = p => {
-    const rand360 = Math.floor(Math.random() * 360);
-    const randSpins = 3 + Math.floor(Math.random() * 2);
-    const randSeconds = 5 + Math.random() * 3;
-    const rand90 = Math.floor(Math.random() * 90);
+    const name = p.segments[0].text?.items[0].value;
+    const rand = new SeededRandomUtilities(name);
+    const rand360 = Math.floor((rand.getRandomIntegar(65535, 0) / 65535) * 360);
+    const randSpins = 3 + Math.floor((rand.getRandomIntegar(65535, 0) / 65535) * 2);
+    const randSeconds = 5 + (rand.getRandomIntegar(65535, 0) / 65535) * 3;
+    const rand90 = Math.floor((rand.getRandomIntegar(65535, 0) / 65535) * 90);
     const t = `translate(120, 120) rotate(${rand360}deg)`;
     const style: CSSProperties = {
         transform: `translate(1200px, 1200px) rotate(${rand360}deg)`,
@@ -31,7 +34,7 @@ const Roulette: React.FC<IRouletteProps> = p => {
         animationFillMode: 'forwards'
     };
 
-    const content = <svg key={p.segments[0].text?.items[0].value} xmlns="http://www.w3.org/2000/svg" width={p.radius * 2} height={p.radius * 2} viewBox="0 0 2400 2400">
+    const content = <svg key={name} xmlns="http://www.w3.org/2000/svg" width={p.radius * 2} height={p.radius * 2} viewBox="0 0 2400 2400">
         <style>
             {
                 `@keyframes roulette_spin {

diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { ReactNode, useState } from "react";
 import constants from "../constants";
 
 interface ITextFieldProps {
-    hint?: string,
+    hint?: ReactNode,
     children?: string,
     onChange?: (value: string) => void,
     filter?: (value: string) => boolean

diff --git a/src/pages/RoulettePage.tsx b/src/pages/RoulettePage.tsx
@@ -14,9 +14,11 @@ import { CreatingNewRouletteSubpage } from './Roulette/CreatingNewRouletteSubpag
 import { FinishRouletteSubpage } from './Roulette/FinishedRouletteSubpage';
 import { NotFoundSubpage } from './Roulette/NotFoundSubpage';
 import { PrepareToStartSubpage } from './Roulette/PrepareToStartSubpage';
+import { LengthType } from '../services/models';
 
 const RoulettePage: React.FC = () => {
     const [viewState, setViewState] = useState<number>(1);
+    const [stopManager, setStopManager] = useState({stop: false});
     console.debug("VIEW STATE: " + viewState);
 
     const roulette = useRoulette();
@@ -54,13 +56,20 @@ const RoulettePage: React.FC = () => {
     };
 
     const tryRolling = () => {
-        let rollManager = { "stop": false };
         return <>
-            <Roulette radius={360} manager={rollManager} segments={segments} onComplite={e => { }}></Roulette>
+            <Roulette radius={360} manager={stopManager} segments={segments} onComplite={e => {
+                if (stopManager.stop)
+                    return;
+                stopManager.stop = true;
+                setViewState(0);
+            }}></Roulette>
             <Button text='Skip'
                 centered={true}
                 onClick={e => {
-                    rollManager.stop = true;
+                    if (stopManager.stop)
+                        return;
+                    stopManager.stop = true;
+                    setViewState(0);
                 }}></Button>
         </>
     }
@@ -81,16 +90,42 @@ const RoulettePage: React.FC = () => {
                 </div>
                 {<>
                     <Button text='Take Me Home' onClick={e => navigate("/")} centered={true}></Button>
-                    <TextField
-                        hint={`${toDefaultText(roulette.getNext()?.levels[0].name)} progress (at least ${(roulette.getProgress(0, true)?.progress ?? 0) + 1}%)`}
+                    <TextField key={viewState}
+                        hint={`${viewState == 0 ? toDefaultText(roulette.getNext()?.levels[0].name) : "***** ****"} progress (at least ${(roulette.getProgress(0, true)?.progress ?? 0) + 1}%)`}
                         filter={e => Number(e) > (roulette.getProgress(0, true)?.progress ?? 0) && Number(e) <= 100}
                         apply={e => {
                             roulette.setNextProgress(Number(e));
-                            setViewState(state + 1);
+                            setViewState(1);
+                            setStopManager({stop: false});
                         }}>{`${(roulette.getProgress(0, true)?.progress ?? 0) + 1}`}</TextField>
-                    <Level
-                        level={roulette.getNext()?.levels[0]!}
-                    />
+                    {viewState == 0 &&
+                        <div>
+                            <Level
+                                level={roulette.getNext()?.levels[0]!}
+                            />
+                        </div>
+                    }
+                    {
+                        viewState == 1 &&
+                        <div style={{filter: "blur(2em)"}}>
+                            <Level level={{
+                                name: {
+                                    items: [{ value: "***** NO NAMED *****", highlighted: false }]
+                                },
+                                difficulty: 0,
+                                difficultyIcon: 0,
+                                demonDifficulty: 0,
+                                description: { items: [{ value: "why did you see this text... there is nothing to seee....", highlighted: false }] },
+                                id: 123456789,
+                                isDemon: false,
+                                length: LengthType.Tiny,
+                                likes: 100500,
+                                type: 1,
+                                notFound: [],
+                                server: "geometrydash"
+                            }} />
+                        </div>
+                    }
                 </>
                 }
                 {roulette.getAvaliableList()?.reverse().map((x, i) => {