cha0s/silphius
1
1
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: dialogue styles

Browse Source
This commit is contained in:
cha0s 2024-07-13 16:56:47 -05:00
parent a0f6ca9056
commit 59e3c71a1a
2 changed files with 76 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
app/react-components/dom/dialogue.jsx
View File

@ -141,20 +141,11 @@ export default function Dialogue({
caretPosition.y += Math.cos(caretRotation) * (CARET_SIZE / 2); caretPosition.y += Math.cos(caretRotation) * (CARET_SIZE / 2);
return ( return (
<div <div
className={styles.dialogue}
ref={ref} ref={ref}
style={{ style={{
backgroundColor: '#00000044',
border: 'solid 1px white',
borderRadius: '8px',
color: 'white',
padding: '1em',
position: 'absolute',
left: `${left}px`, left: `${left}px`,
margin: '0',
top: `${top}px`, top: `${top}px`,
transform: 'translate(-50%, -50%)',
userSelect: 'none',
whiteSpace: 'nowrap',
}} }}
> >
<svg <svg
@ -174,62 +165,64 @@ export default function Dialogue({
> >
<polygon points="0 0, 24 0, 12 24" /> <polygon points="0 0, 24 0, 12 24" />
</svg> </svg>
{ <p className={styles.letters}>
dialogue.letters {
.map(({character, indices, params}, i) => { dialogue.letters
let color = 'inherit'; .map(({character, indices, params}, i) => {
let fade = 0; let color = 'inherit';
let fontStyle = 'normal'; let fade = 0;
let fontWeight = 'normal'; let fontStyle = 'normal';
let left = 0; let fontWeight = 'normal';
let opacity = 1; let left = 0;
let top = 0; let opacity = 1;
if (params.blink) { let top = 0;
const {frequency = 1} = params.blink; if (params.blink) {
opacity = (radians * (2 / frequency) % TAU) > (TAU / 2) ? opacity : 0; const {frequency = 1} = params.blink;
} opacity = (radians * (2 / frequency) % TAU) > (TAU / 2) ? opacity : 0;
if (params.fade) { }
const {frequency = 1} = params.fade; if (params.fade) {
fade = frequency; const {frequency = 1} = params.fade;
} fade = frequency;
if (params.wave) { }
const {frequency = 1, magnitude = 3} = params.wave; if (params.wave) {
top += magnitude * Math.cos((radians * (1 / frequency)) + TAU * indices.wave / params.wave.length); const {frequency = 1, magnitude = 3} = params.wave;
} top += magnitude * Math.cos((radians * (1 / frequency)) + TAU * indices.wave / params.wave.length);
if (params.rainbow) { }
const {frequency = 1} = params.rainbow; if (params.rainbow) {
color = `hsl(${(radians * (1 / frequency)) + TAU * indices.rainbow / params.rainbow.length}rad 100 50)`; const {frequency = 1} = params.rainbow;
} color = `hsl(${(radians * (1 / frequency)) + TAU * indices.rainbow / params.rainbow.length}rad 100 50)`;
if (params.shake) { }
const {magnitude = 1} = params.shake; if (params.shake) {
left += (Math.random() * magnitude * 2) - magnitude; const {magnitude = 1} = params.shake;
top += (Math.random() * magnitude * 2) - magnitude; left += (Math.random() * magnitude * 2) - magnitude;
} top += (Math.random() * magnitude * 2) - magnitude;
if (params.em) { }
fontStyle = 'italic'; if (params.em) {
} fontStyle = 'italic';
if (params.strong) { }
fontWeight = 'bold'; if (params.strong) {
} fontWeight = 'bold';
return ( }
<span return (
className={styles.letter} <span
key={i} className={styles.letter}
style={{ key={i}
color, style={{
fontStyle, color,
fontWeight, fontStyle,
left: `${left}px`, fontWeight,
opacity: i <= caret ? opacity : 0, left: `${left}px`,
top: `${top}px`, opacity: i <= caret ? opacity : 0,
transition: `opacity ${fade}s`, top: `${top}px`,
}} transition: `opacity ${fade}s`,
> }}
{character} >
</span> {character}
); </span>
}) );
} })
}
</p>
</div> </div>
); );
} }

17
app/react-components/dom/dialogue.module.css
View File

@ -6,6 +6,23 @@
top: 50%; top: 50%;
} }
.dialogue {
background-color: #00000044;
border: solid 1px white;
border-radius: 8px;
color: white;
padding: 1em;
position: absolute;
margin: 0;
transform: translate(-50%, -50%);
user-select: none;
width: 33%;
}
.letters {
margin: 0;
}
.letter { .letter {
opacity: 0; opacity: 0;
position: relative; position: relative;