Skip to content

Commit b4eb644

Browse files
rosstarossta
committed
Rename project
1 parent c671e2f commit b4eb644

File tree

6 files changed

+65
-45
lines changed

6 files changed

+65
-45
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
tsconfig.tsbuildinfo
2+
src/**/*.d.ts

‎index.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
8-
</head>
9-
<body>
10-
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
12-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Ruby Enumeration Demo</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
1316
</html>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "demo-ruby-array-evaluation",
2+
"name": "demo-ruby-enumeration",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",

‎src/App.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import ArrayEvaluationDemo from './components/ArrayEvaluationDemo';
1+
import EnumerationDemo, { EnumerationType } from './components/EnumerationDemo';
22

33
function App() {
4+
const queryParams = new URLSearchParams(window.location.search);
5+
6+
let demoType: EnumerationType | undefined;
7+
8+
if (
9+
queryParams.get('demoType') === 'eager' ||
10+
queryParams.get('demoType') === 'lazy'
11+
) {
12+
demoType = queryParams.get('demoType') as EnumerationType;
13+
}
14+
415
return (
516
<div className='min-h-screen flex items-center justify-center p-4'>
6-
<ArrayEvaluationDemo />
17+
<EnumerationDemo demoType={demoType} />
718
</div>
819
);
920
}

‎src/components/ArrayEvaluationDemo.tsx‎ renamed to ‎src/components/EnumerationDemo.tsx‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Switch } from '@/components/ui/switch';
33
import { Slider } from '@/components/ui/slider';
44
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
55

6-
type EvaluationType = 'eager' | 'lazy';
6+
export type EnumerationType = 'eager' | 'lazy';
77

88
interface Dot {
99
pos: number;
@@ -41,23 +41,21 @@ interface Narration {
4141
description: string;
4242
}
4343

44-
type ArrayEvaluationDemoProps = {
45-
demoType?: EvaluationType | undefined;
46-
};
44+
interface EnumerationDemoProps extends React.HTMLAttributes<HTMLDivElement> {
45+
demoType?: EnumerationType | undefined | null;
46+
}
4747

48-
const ArrayEvaluationDemo: React.FC = ({
49-
demoType,
50-
}: ArrayEvaluationDemoProps) => {
48+
const EnumerationDemo: React.FC<EnumerationDemoProps> = ({ demoType }) => {
5149
const [progress, setProgress] = useState(0);
5250
const [playing, setPlaying] = useState(false);
53-
const [type, setType] = useState<EvaluationType>(demoType || 'eager');
51+
const [type, setType] = useState<EnumerationType>(demoType || 'eager');
5452
const [explosions, setExplosions] = useState<ExplosionParticle[]>([]);
5553
const [positions, setPositions] = useState<Position[]>([]);
5654
const processedStepsRef = useRef<Set<string>>(new Set());
5755
const animationRef = useRef<number | null>(null);
5856

5957
const EXPLOSION_DURATION = 500;
60-
const ANIMATION_STEP = 0.15;
58+
const ANIMATION_STEP = 0.18;
6159
const FRAME_DURATION = 16;
6260
const MAX_PROGRESS = 150;
6361
const isEven = (n: number): boolean => n % 2 === 0;
@@ -67,7 +65,7 @@ const ArrayEvaluationDemo: React.FC = ({
6765
.fill(null)
6866
.map((_, i) => ({ pos: i, column: 0 }));
6967

70-
const steps: Record<EvaluationType, Step[]> = {
68+
const steps: Record<EnumerationType, Step[]> = {
7169
eager: [
7270
...Array(7)
7371
.fill(null)
@@ -453,7 +451,7 @@ const ArrayEvaluationDemo: React.FC = ({
453451
<Card className='w-full max-w-2xl'>
454452
<CardHeader>
455453
<CardTitle className='flex items-baseline gap-2'>
456-
<span>{type === 'eager' ? 'Eager' : 'Lazy'} Evaluation</span>
454+
<span>{type === 'eager' ? 'Eager' : 'Lazy'} Enumeration</span>
457455
<span className='text-sm text-gray-500 font-normal'>
458456
{type === 'eager'
459457
? 'Processes all items through each step before moving to next step'
@@ -538,7 +536,9 @@ const ArrayEvaluationDemo: React.FC = ({
538536
</svg>
539537

540538
<div className='space-y-4'>
541-
{demoType || (
539+
{demoType ? (
540+
''
541+
) : (
542542
<div className='flex items-center justify-between mb-4'>
543543
<div className='flex items-center gap-2'>
544544
<span>Eager</span>
@@ -558,25 +558,30 @@ const ArrayEvaluationDemo: React.FC = ({
558558
</div>
559559
)}
560560

561-
<Slider
562-
value={[progress]}
563-
onValueChange={([value]) => {
564-
setPlaying(false);
565-
setProgress(value);
566-
}}
567-
max={MAX_PROGRESS}
568-
step={ANIMATION_STEP}
569-
className='w-full'
570-
/>
561+
{demoType ? (
562+
''
563+
) : (
564+
<Slider
565+
value={[progress]}
566+
onValueChange={([value]) => {
567+
setPlaying(false);
568+
setProgress(value);
569+
}}
570+
max={MAX_PROGRESS}
571+
step={ANIMATION_STEP}
572+
className='w-full'
573+
/>
574+
)}
571575

572576
<div className='flex gap-2'>
573-
<button
574-
onClick={() => setPlaying((prev) => !prev)}
575-
className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600'
576-
>
577-
{playing ? 'Pause' : 'Play'}
578-
</button>
579-
577+
{progress < MAX_PROGRESS && (
578+
<button
579+
onClick={() => setPlaying((prev) => !prev)}
580+
className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600'
581+
>
582+
{playing ? 'Pause' : 'Play'}
583+
</button>
584+
)}
580585
<button
581586
onClick={() => {
582587
cleanup();
@@ -596,4 +601,4 @@ const ArrayEvaluationDemo: React.FC = ({
596601
);
597602
};
598603

599-
export default ArrayEvaluationDemo;
604+
export default EnumerationDemo;

0 commit comments

Comments
 (0)