https://github.com/chuckis/screenplay/releases/tag/pre-0.0.1
#logseqplugin
#devdiary
This is my first release! Sure, it's a bit rough around the edges. Automation, TypeScript, unfamiliar API territories—yeah, all that jazz. It was just an itch I had to scratch! It's raw and green, but hey, I think it's fitting for Nostr. I’m asking for help and inviting collaboration. Alright, I'm off to grab some coffee! 😊
I would say, a kind of priests
#grownostr
Thinking about all that stuff with sprites, collisions, music, engine. A lot of abstractions. Or may it be a simple such as now...
In this tutorial, we'll build a React component using TypeScript that includes sliders for adjusting length, width, height, and volume. You will be able to fix the values of the sliders and automatically recalculate other parameters based on the volume.
### Step 1: Create a New Project
First, let's create a new project using `Create React App` with the TypeScript template.
Open your terminal and run the following command:
```bash
npx create-react-app volume-slider-app --template typescript
```
After the installation is complete, navigate to the project directory:
```bash
cd volume-slider-app
```
Start the project with the following command:
```bash
npm start
```
The project will open in your browser at `http://localhost:3000`.
### Step 2: Basic Slider Component
Let's create a basic component that will contain sliders for length, width, and height.
1. Create a new file `src/SliderComponent.tsx`.
2. Add the following code:
```tsx
import React, { useState } from 'react';
const SliderComponent: React.FC = () => {
const [length, setLength] = useState
const [width, setWidth] = useState
const [height, setHeight] = useState
return (
type="range" min="1" max="100" value={length} onChange={(e) => setLength(Number(e.target.value))} />
type="range" min="1" max="100" value={width} onChange={(e) => setWidth(Number(e.target.value))} />
type="range" min="1" max="100" value={height} onChange={(e) => setHeight(Number(e.target.value))} />
);
};
export default SliderComponent;
```
3. Open the `src/App.tsx` file and replace its content with the following:
```tsx
import React from 'react';
import SliderComponent from './SliderComponent';
const App: React.FC = () => {
return (
Volume Calculator
);
}
export default App;
```
Now, when you refresh your browser, you'll see three sliders that allow you to adjust the length, width, and height.
### Step 3: Adding Volume Calculation
Next, let's add volume calculation based on the length, width, and height values.
1. Update the code in `SliderComponent.tsx`:
```tsx
const calculateVolume = (length: number, width: number, height: number): number => {
return length * width * height;
};
const SliderComponent: React.FC = () => {
const [length, setLength] = useState
const [width, setWidth] = useState
const [height, setHeight] = useState
const [volume, setVolume] = useState
// Update volume when parameters change
const updateVolume = () => {
setVolume(calculateVolume(length, width, height));
};
return (
type="range" min="1" max="100" value={length} onChange={(e) => { setLength(Number(e.target.value)); updateVolume(); }} />
type="range" min="1" max="100" value={width} onChange={(e) => { setWidth(Number(e.target.value)); updateVolume(); }} />
type="range" min="1" max="100" value={height} onChange={(e) => { setHeight(Number(e.target.value)); updateVolume(); }} />
);
};
```
Now, the volume will be recalculated whenever any of the parameters (length, width, height) change.
### Step 4: Adding Toggle Switches to Fix Values
Next, let's add the ability to fix the values of length, width, height, and volume using toggle switches.
1. Add toggle switches to the sliders in `SliderComponent.tsx`:
```tsx
const SliderComponent: React.FC = () => {
const [length, setLength] = useState
const [width, setWidth] = useState
const [height, setHeight] = useState
const [volume, setVolume] = useState
const [isLengthFixed, setIsLengthFixed] = useState
const [isWidthFixed, setIsWidthFixed] = useState
const [isHeightFixed, setIsHeightFixed] = useState
const [isVolumeFixed, setIsVolumeFixed] = useState
const updateVolume = () => {
if (!isVolumeFixed) {
setVolume(calculateVolume(length, width, height));
}
};
return (
type="range" min="1" max="100" value={length} onChange={(e) => { if (!isLengthFixed) { setLength(Number(e.target.value)); updateVolume(); } }} disabled={isLengthFixed} /> type="checkbox" checked={isLengthFixed} onChange={() => setIsLengthFixed(!isLengthFixed)} /> Fix
type="range" min="1" max="100" value={width} onChange={(e) => { if (!isWidthFixed) { setWidth(Number(e.target.value)); updateVolume(); } }} disabled={isWidthFixed} /> type="checkbox" checked={isWidthFixed} onChange={() => setIsWidthFixed(!isWidthFixed)} /> Fix
type="range" min="1" max="100" value={height} onChange={(e) => { if (!isHeightFixed) { setHeight(Number(e.target.value)); updateVolume(); } }} disabled={isHeightFixed} /> type="checkbox" checked={isHeightFixed} onChange={() => setIsHeightFixed(!isHeightFixed)} /> Fix
type="range" min="1" max="100000" value={volume} onChange={(e) => { if (!isVolumeFixed) { setVolume(Number(e.target.value)); } }} disabled={isVolumeFixed} /> type="checkbox" checked={isVolumeFixed} onChange={() => setIsVolumeFixed(!isVolumeFixed)} /> Fix
);
};
```
### Step 5: Implementing Dependency Between Values
Now, let's implement the logic where, when the fixed volume changes, the length, width, or height is recalculated.
1. Update `SliderComponent.tsx`, adding the dependency logic between the parameters:
```tsx
const handleVolumeChange = (event: React.ChangeEvent
const newVolume = Number(event.target.value);
if (!isVolumeFixed) {
setVolume(newVolume);
if (isLengthFixed) {
setHeight(newVolume / (length * width));
} else if (isWidthFixed) {
setHeight(newVolume / (length * width));
} else if (isHeightFixed) {
setWidth(newVolume / (length * height));
} else {
setHeight(newVolume / (length * width));
}
}
};
```
### Conclusion
)
You've created a component with sliders and dependent values, where each value can be fixed. The component automatically recalculates parameters based on the fixed values and changes in volume. You can expand this component by adding styling, additional logic, or other features as needed.
caturday
#til #ui #ux 44px
