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 = {
key: 'orion' | 'auriga' | 'ursaMajor';
key: "orion" | "auriga" | "ursaMajor";
className: string;
viewBox: string;
colorClass: string;
@@ -23,31 +23,33 @@ export type LobbyConstellation = {
export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [
{
key: 'orion',
className: 'absolute bottom-10 left-5 w-72 h-72 opacity-30',
viewBox: '0 0 100 100',
colorClass: 'text-indigo-200',
key: "orion",
className: "absolute bottom-10 left-5 h-72 w-72 opacity-38",
viewBox: "0 0 100 100",
colorClass: "text-[#ffffff]",
stars: [
{ cx: 25, cy: 15, r: 0.82 },
{ cx: 75, cy: 25, r: 0.96, armScale: 1.08 },
{ cx: 45, cy: 48, r: 0.58 },
{ cx: 26, cy: 20, r: 1.2, armScale: 1.2 },
{ cx: 65, cy: 22, r: 0.82 },
{ cx: 45, cy: 53, r: 0.58 },
{ cx: 50, cy: 50, r: 0.54 },
{ cx: 55, cy: 52, r: 0.6 },
{ cx: 30, cy: 85, r: 0.86 },
{ cx: 70, cy: 80, r: 0.98, armScale: 1.08 },
{ cx: 55, cy: 47, r: 0.6 },
{ cx: 38, cy: 84, r: 0.86 },
{ cx: 70, cy: 82, r: 1.1, armScale: 1.2 },
],
segments: [
{ x1: 25, y1: 15, x2: 45, y2: 48 },
{ x1: 75, y1: 25, x2: 55, y2: 52 },
{ x1: 45, y1: 48, x2: 30, y2: 85 },
{ x1: 55, y1: 52, x2: 70, y2: 80 },
{ x1: 26, y1: 20, x2: 45, y2: 53 },
{ x1: 65, y1: 22, x2: 55, y2: 47 },
{ x1: 45, y1: 53, x2: 50, y2: 50 },
{ 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',
className: 'absolute top-10 right-10 w-64 h-64 opacity-25',
viewBox: '0 0 100 100',
colorClass: 'text-blue-200',
key: "auriga",
className: "absolute top-10 right-10 h-64 w-64 opacity-34",
viewBox: "0 0 100 100",
colorClass: "text-[#ffffff]",
stars: [
{ cx: 50, cy: 15, r: 1.06, armScale: 1.1 },
{ cx: 20, cy: 35, r: 0.67 },
@@ -64,27 +66,27 @@ export const LOBBY_CONSTELLATIONS: LobbyConstellation[] = [
],
},
{
key: 'ursaMajor',
className: 'absolute top-20 left-10 w-80 h-48 opacity-25',
viewBox: '0 0 100 60',
colorClass: 'text-slate-200',
key: "ursaMajor",
className: "absolute top-20 left-10 h-48 w-80 opacity-34",
viewBox: "0 0 100 60",
colorClass: "text-[#ffffff]",
stars: [
{ cx: 10, cy: 20, r: 0.64 },
{ cx: 25, cy: 25, r: 0.67 },
{ cx: 40, cy: 35, r: 0.69 },
{ cx: 55, cy: 45, r: 0.99 },
{ cx: 75, cy: 45, r: 0.98 },
{ cx: 80, cy: 15, r: 0.93 },
{ cx: 60, cy: 10, r: 0.96 },
{ cx: 8, cy: 12, r: 0.64 },
{ cx: 32, cy: 12, r: 0.67 },
{ cx: 46, cy: 24, r: 0.69 },
{ cx: 58, cy: 30, r: 0.99 },
{ cx: 88, cy: 36, r: 0.98 },
{ cx: 78, cy: 48, r: 0.93 },
{ cx: 58, cy: 42, r: 0.96 },
],
segments: [
{ x1: 10, y1: 20, x2: 25, y2: 25 },
{ x1: 25, y1: 25, x2: 40, y2: 35 },
{ x1: 40, y1: 35, x2: 55, y2: 45 },
{ x1: 55, y1: 45, x2: 75, y2: 45 },
{ x1: 75, y1: 45, x2: 80, y2: 15 },
{ x1: 80, y1: 15, x2: 60, y2: 10 },
{ x1: 60, y1: 10, x2: 55, y2: 45 },
{ x1: 8, y1: 12, x2: 32, y2: 12 },
{ x1: 32, y1: 12, x2: 46, y2: 24 },
{ x1: 46, y1: 24, x2: 58, y2: 30 },
{ x1: 58, y1: 30, x2: 88, y2: 36 },
{ x1: 88, y1: 36, x2: 78, y2: 48 },
{ x1: 78, y1: 48, x2: 58, y2: 42 },
{ 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({
star,
@@ -10,37 +13,38 @@ export function StarGlint({
starIndex: number;
}) {
const timing = LOBBY_STAR_TIMINGS[starIndex % LOBBY_STAR_TIMINGS.length];
const coreRadius = star.r * 0.5;
const strengthTier =
star.r >= 0.95 ? 'bright' : star.r >= 0.72 ? 'mid' : 'faint';
coreRadius >= 0.9 ? "bright" : coreRadius >= 0.7 ? "mid" : "faint";
const glintPeak =
strengthTier === 'bright' ? 0.7 : strengthTier === 'mid' ? 0.61 : 0.52;
strengthTier === "bright" ? 0.54 : strengthTier === "mid" ? 0.47 : 0.41;
const bloomPeak =
strengthTier === 'bright' ? 0.16 : strengthTier === 'mid' ? 0.12 : 0.08;
strengthTier === "bright" ? 0.085 : strengthTier === "mid" ? 0.065 : 0.045;
const coreLow =
strengthTier === 'bright' ? 0.9 : strengthTier === 'mid' ? 0.73 : 0.6;
strengthTier === "bright" ? 0.88 : strengthTier === "mid" ? 0.73 : 0.6;
const coreHigh =
strengthTier === 'bright' ? 1 : strengthTier === 'mid' ? 0.9 : 0.82;
strengthTier === "bright" ? 0.98 : strengthTier === "mid" ? 0.89 : 0.81;
const coreReduced =
strengthTier === 'bright' ? 0.9 : strengthTier === 'mid' ? 0.76 : 0.66;
strengthTier === "bright" ? 0.88 : strengthTier === "mid" ? 0.75 : 0.64;
const coreStyle = {
animationDuration: `${timing.duration}s`,
animationDelay: `${timing.delay}s`,
'--core-low': `${coreLow}`,
'--core-high': `${coreHigh}`,
'--core-reduced': `${coreReduced}`,
"--core-low": `${coreLow}`,
"--core-high": `${coreHigh}`,
"--core-reduced": `${coreReduced}`,
} as CSSProperties;
const glintStyle = {
animationDuration: `${timing.duration}s`,
animationDelay: `${timing.delay + 0.12}s`,
'--glint-peak': `${glintPeak}`,
'--glint-base': '0.02',
'--bloom-peak': `${bloomPeak}`,
'--bloom-base': '0.01',
"--glint-peak": `${glintPeak}`,
"--glint-base": "0.02",
"--bloom-peak": `${bloomPeak}`,
"--bloom-base": "0.01",
} 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 gradientYId = `glint-y-${starIndex}`;
@@ -73,11 +77,17 @@ export function StarGlint({
</linearGradient>
</defs>
<circle cx={star.cx} cy={star.cy} r={star.r} className="star-core" style={coreStyle} />
<circle
cx={star.cx}
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"
style={coreStyle}
/>