corpi/hushroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 별 자리 좌우 반전 수정

Browse Source
This commit is contained in:
corpi
2026-02-14 02:57:56 +09:00
parent f32b7ee615
commit efdec596b2
2 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/features/lobby-starfield/model/constellationData.ts
View File

@@ -13,7 +13,7 @@ export type LobbySegment = {
}; };
export type LobbyConstellation = { export type LobbyConstellation = {
key: 'orion' | 'auriga' | 'ursaMajor'; key: "orion" | "auriga" | "ursaMajor";
className: string; className: string;
viewBox: string; viewBox: string;
colorClass: string; colorClass: string;
@@ -23,31 +23,33 @@ export type LobbyConstellation = {
export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [ export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [
{ {
key: 'orion', key: "orion",
className: 'absolute bottom-10 left-5 w-72 h-72 opacity-30', className: "absolute bottom-10 left-5 h-72 w-72 opacity-38",
viewBox: '0 0 100 100', viewBox: "0 0 100 100",
colorClass: 'text-indigo-200', colorClass: "text-[#ffffff]",
stars: [ stars: [
{ cx: 25, cy: 15, r: 0.82 }, { cx: 26, cy: 20, r: 1.2, armScale: 1.2 },
{ cx: 75, cy: 25, r: 0.96, armScale: 1.08 }, { cx: 65, cy: 22, r: 0.82 },
{ cx: 45, cy: 48, r: 0.58 }, { cx: 45, cy: 53, r: 0.58 },
{ cx: 50, cy: 50, r: 0.54 }, { cx: 50, cy: 50, r: 0.54 },
{ cx: 55, cy: 52, r: 0.6 }, { cx: 55, cy: 47, r: 0.6 },
{ cx: 30, cy: 85, r: 0.86 }, { cx: 38, cy: 84, r: 0.86 },
{ cx: 70, cy: 80, r: 0.98, armScale: 1.08 }, { cx: 70, cy: 82, r: 1.1, armScale: 1.2 },
], ],
segments: [ segments: [
{ x1: 25, y1: 15, x2: 45, y2: 48 }, { x1: 26, y1: 20, x2: 45, y2: 53 },
{ x1: 75, y1: 25, x2: 55, y2: 52 }, { x1: 65, y1: 22, x2: 55, y2: 47 },
{ x1: 45, y1: 48, x2: 30, y2: 85 }, { x1: 45, y1: 53, x2: 50, y2: 50 },
{ x1: 55, y1: 52, x2: 70, y2: 80 }, { x1: 50, y1: 50, x2: 55, y2: 47 },
{ x1: 45, y1: 53, x2: 38, y2: 84 },
{ x1: 55, y1: 47, x2: 70, y2: 82 },
], ],
}, },
{ {
key: 'auriga', key: "auriga",
className: 'absolute top-10 right-10 w-64 h-64 opacity-25', className: "absolute top-10 right-10 h-64 w-64 opacity-34",
viewBox: '0 0 100 100', viewBox: "0 0 100 100",
colorClass: 'text-blue-200', colorClass: "text-[#ffffff]",
stars: [ stars: [
{ cx: 50, cy: 15, r: 1.06, armScale: 1.1 }, { cx: 50, cy: 15, r: 1.06, armScale: 1.1 },
{ cx: 20, cy: 35, r: 0.67 }, { cx: 20, cy: 35, r: 0.67 },
@@ -64,27 +66,27 @@ export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [
], ],
}, },
{ {
key: 'ursaMajor', key: "ursaMajor",
className: 'absolute top-20 left-10 w-80 h-48 opacity-25', className: "absolute top-20 left-10 h-48 w-80 opacity-34",
viewBox: '0 0 100 60', viewBox: "0 0 100 60",
colorClass: 'text-slate-200', colorClass: "text-[#ffffff]",
stars: [ stars: [
{ cx: 10, cy: 20, r: 0.64 }, { cx: 8, cy: 12, r: 0.64 },
{ cx: 25, cy: 25, r: 0.67 }, { cx: 32, cy: 12, r: 0.67 },
{ cx: 40, cy: 35, r: 0.69 }, { cx: 46, cy: 24, r: 0.69 },
{ cx: 55, cy: 45, r: 0.99 }, { cx: 58, cy: 30, r: 0.99 },
{ cx: 75, cy: 45, r: 0.98 }, { cx: 88, cy: 36, r: 0.98 },
{ cx: 80, cy: 15, r: 0.93 }, { cx: 78, cy: 48, r: 0.93 },
{ cx: 60, cy: 10, r: 0.96 }, { cx: 58, cy: 42, r: 0.96 },
], ],
segments: [ segments: [
{ x1: 10, y1: 20, x2: 25, y2: 25 }, { x1: 8, y1: 12, x2: 32, y2: 12 },
{ x1: 25, y1: 25, x2: 40, y2: 35 }, { x1: 32, y1: 12, x2: 46, y2: 24 },
{ x1: 40, y1: 35, x2: 55, y2: 45 }, { x1: 46, y1: 24, x2: 58, y2: 30 },
{ x1: 55, y1: 45, x2: 75, y2: 45 }, { x1: 58, y1: 30, x2: 88, y2: 36 },
{ x1: 75, y1: 45, x2: 80, y2: 15 }, { x1: 88, y1: 36, x2: 78, y2: 48 },
{ x1: 80, y1: 15, x2: 60, y2: 10 }, { x1: 78, y1: 48, x2: 58, y2: 42 },
{ x1: 60, y1: 10, x2: 55, y2: 45 }, { x1: 58, y1: 42, x2: 58, y2: 30 },
], ],
}, },
]; ];

46
src/features/lobby-starfield/ui/StarGlint.tsx
View File

@@ -1,6 +1,9 @@
import { CSSProperties } from 'react'; import { CSSProperties } from "react";
import { LOBBY_STAR_TIMINGS, LobbyStar } from '@/features/lobby-starfield/model/constellationData'; import {
LOBBY_STAR_TIMINGS,
LobbyStar,
} from "@/features/lobby-starfield/model/constellationData";
export function StarGlint({ export function StarGlint({
star, star,
@@ -10,37 +13,38 @@ export function StarGlint({
starIndex: number; starIndex: number;
}) { }) {
const timing = LOBBY_STAR_TIMINGS[starIndex % LOBBY_STAR_TIMINGS.length]; const timing = LOBBY_STAR_TIMINGS[starIndex % LOBBY_STAR_TIMINGS.length];
const coreRadius = star.r * 0.5;
const strengthTier = const strengthTier =
star.r >= 0.95 ? 'bright' : star.r >= 0.72 ? 'mid' : 'faint'; coreRadius >= 0.9 ? "bright" : coreRadius >= 0.7 ? "mid" : "faint";
const glintPeak = const glintPeak =
strengthTier === 'bright' ? 0.7 : strengthTier === 'mid' ? 0.61 : 0.52; strengthTier === "bright" ? 0.54 : strengthTier === "mid" ? 0.47 : 0.41;
const bloomPeak = const bloomPeak =
strengthTier === 'bright' ? 0.16 : strengthTier === 'mid' ? 0.12 : 0.08; strengthTier === "bright" ? 0.085 : strengthTier === "mid" ? 0.065 : 0.045;
const coreLow = const coreLow =
strengthTier === 'bright' ? 0.9 : strengthTier === 'mid' ? 0.73 : 0.6; strengthTier === "bright" ? 0.88 : strengthTier === "mid" ? 0.73 : 0.6;
const coreHigh = const coreHigh =
strengthTier === 'bright' ? 1 : strengthTier === 'mid' ? 0.9 : 0.82; strengthTier === "bright" ? 0.98 : strengthTier === "mid" ? 0.89 : 0.81;
const coreReduced = const coreReduced =
strengthTier === 'bright' ? 0.9 : strengthTier === 'mid' ? 0.76 : 0.66; strengthTier === "bright" ? 0.88 : strengthTier === "mid" ? 0.75 : 0.64;
const coreStyle = { const coreStyle = {
animationDuration: `${timing.duration}s`, animationDuration: `${timing.duration}s`,
animationDelay: `${timing.delay}s`, animationDelay: `${timing.delay}s`,
'--core-low': `${coreLow}`, "--core-low": `${coreLow}`,
'--core-high': `${coreHigh}`, "--core-high": `${coreHigh}`,
'--core-reduced': `${coreReduced}`, "--core-reduced": `${coreReduced}`,
} as CSSProperties; } as CSSProperties;
const glintStyle = { const glintStyle = {
animationDuration: `${timing.duration}s`, animationDuration: `${timing.duration}s`,
animationDelay: `${timing.delay + 0.12}s`, animationDelay: `${timing.delay + 0.12}s`,
'--glint-peak': `${glintPeak}`, "--glint-peak": `${glintPeak}`,
'--glint-base': '0.02', "--glint-base": "0.02",
'--bloom-peak': `${bloomPeak}`, "--bloom-peak": `${bloomPeak}`,
'--bloom-base': '0.01', "--bloom-base": "0.01",
} as CSSProperties; } as CSSProperties;
const glintLength = star.r * 4.4 * (star.armScale ?? 1); const glintLength = coreRadius * 5.2 * (star.armScale ?? 1);
const gradientXId = `glint-x-${starIndex}`; const gradientXId = `glint-x-${starIndex}`;
const gradientYId = `glint-y-${starIndex}`; const gradientYId = `glint-y-${starIndex}`;
@@ -73,11 +77,17 @@ export function StarGlint({
</linearGradient> </linearGradient>
</defs> </defs>
<circle cx={star.cx} cy={star.cy} r={star.r} className="star-core" style={coreStyle} />
<circle <circle
cx={star.cx} cx={star.cx}
cy={star.cy} cy={star.cy}
r={star.r * 1.9} r={coreRadius}
className="star-core"
style={coreStyle}
/>
<circle
cx={star.cx}
cy={star.cy}
r={coreRadius * 1.55}
className="star-core-bloom" className="star-core-bloom"
style={coreStyle} style={coreStyle}
/> />