Skip to content

Commit fed13f4

Browse files
junpei-chanjunpei-chan
committed
[add] 一旦ね
1 parent 3afc530 commit fed13f4

3 files changed

Lines changed: 52 additions & 21 deletions

File tree

‎front/src/components/features/housework/housework-detail-overview.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ChevronLeft, Sparkles } from "lucide-react";
22
import { HOMEWORK_ITEMS } from "@/data/homework-items";
3-
import { calculateTimeDifference, getHouseworkStatusById, getDirtinessLevel } from "@/lib/utils/";
3+
import { calculateTimeDifference, getHouseworkStatusById } from "@/lib/utils/";
44
import { getCaloriesByHouseworkAndLevel } from "@/lib/utils/housework";
55
import { HouseworkStatusBadge } from "@/components/features/housework";
66
import { IBM_Plex_Sans_JP } from "next/font/google";
@@ -35,7 +35,6 @@ export function HouseworkDetailOverview({
3535
const label = calculateTimeDifference(housework.doneAt);
3636
const status = getHouseworkStatusById(housework.doneAt, String(houseworkId));
3737
const calorie = getCaloriesByHouseworkAndLevel(String(houseworkId), status);
38-
const dirtiness = getDirtinessLevel(status);
3938

4039
const handleOverviewClose = () => {
4140
onHiddenAction();
@@ -66,9 +65,7 @@ export function HouseworkDetailOverview({
6665
<div
6766
className="absolute bottom-0 w-full flex flex-col items-center gap-9 pt-35 pb-14"
6867
style={{
69-
background: dirtiness.level >= 2
70-
? `linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 40%, ${dirtiness.color}${Math.round(dirtiness.opacity * 255).toString(16).padStart(2, "0")} 100%)`
71-
: 'linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 100%)',
68+
background: 'linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 100%)',
7269
pointerEvents: 'auto'
7370
}}
7471
>

‎front/src/components/features/room/clickable-room.tsx‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@ import { getHouseworkStatusById } from "@/lib/utils/get-housework-status";
99
import { getDirtinessLevel } from "@/lib/utils/get-dirtiness-level";
1010
import { useHouseworkStore } from "@/stores/housework-store";
1111

12+
// 雲の形状バリエーション（SVGパス）
13+
const CLOUD_PATHS = [
14+
// もこもこした雲形状1
15+
"M15,60 C5,55 2,40 12,32 C8,20 22,10 35,16 C40,5 58,3 65,14 C72,5 90,12 88,28 C98,32 100,48 90,55 C96,65 85,75 72,70 C65,80 50,82 42,74 C32,82 15,75 18,65 C8,68 5,62 15,60Z",
16+
// 横に広がった雲形状2
17+
"M12,55 C2,48 4,32 16,26 C18,14 32,6 45,14 C52,2 68,5 72,18 C82,8 96,20 92,34 C100,42 96,58 84,58 C88,70 76,78 62,72 C52,82 38,80 30,70 C20,78 6,68 12,55Z",
18+
// 不規則な雲形状3
19+
"M22,58 C10,52 5,38 16,28 C14,16 28,6 42,14 C50,2 66,6 74,18 C85,10 98,24 92,38 C100,48 94,62 82,60 C86,72 74,82 58,74 C46,84 30,80 26,68 C14,76 6,66 22,58Z",
20+
];
21+
1222
interface ClickableRoomProps {
1323
onItemClick: (houseworkId: string) => void;
1424
selectedId: string | null;
@@ -83,7 +93,7 @@ export function ClickableRoom({ onItemClick, selectedId }: ClickableRoomProps) {
8393
/>
8494

8595
{/* クリック可能な領域と汚れオーバーレイ */}
86-
{ROOM_ITEMS.map((item) => {
96+
{ROOM_ITEMS.map((item, index) => {
8797
const houseworkData = houseworksMap[item.houseworkId];
8898
const isRunning = runningHouseworkId !== null && Number(item.houseworkId) === runningHouseworkId;
8999

@@ -95,24 +105,47 @@ export function ClickableRoom({ onItemClick, selectedId }: ClickableRoomProps) {
95105

96106
return (
97107
<div key={item.id}>
98-
{/* 汚れオーバーレイ（レベル2以上で表示） */}
108+
{/* 汚れモヤモヤオーバーレイ（レベル2以上で表示） */}
99109
{showOverlay && (
100110
<motion.div
101111
initial={{ opacity: 0 }}
102112
animate={{ opacity: 1 }}
103113
exit={{ opacity: 0 }}
104-
transition={{ duration: 0.3 }}
105-
className="absolute z-50 pointer-events-none rounded-lg"
114+
transition={{ duration: 0.5 }}
115+
className="absolute z-50 pointer-events-none"
106116
style={{
107117
top: item.position.top,
108118
left: item.position.left,
109119
width: item.position.width,
110120
height: item.position.height,
111-
backdropFilter: `blur(${dirtiness.blur}px)`,
112-
WebkitBackdropFilter: `blur(${dirtiness.blur}px)`,
113-
backgroundColor: `${dirtiness.color}${Math.round(dirtiness.opacity * 255).toString(16).padStart(2, "0")}`,
114121
}}
115-
/>
122+
>
123+
<svg
124+
viewBox="-10 -10 120 105"
125+
preserveAspectRatio="none"
126+
className="w-full h-full overflow-visible"
127+
>
128+
{/* 外側グロー（大きく・薄く） */}
129+
<path
130+
d={CLOUD_PATHS[index % CLOUD_PATHS.length]}
131+
fill={dirtiness.cloudColor}
132+
transform="translate(50,42.5) scale(1.25) translate(-50,-42.5)"
133+
opacity={0.25}
134+
/>
135+
{/* 中間グロー */}
136+
<path
137+
d={CLOUD_PATHS[index % CLOUD_PATHS.length]}
138+
fill={dirtiness.cloudColor}
139+
transform="translate(50,42.5) scale(1.12) translate(-50,-42.5)"
140+
opacity={0.5}
141+
/>
142+
{/* メインの雲 */}
143+
<path
144+
d={CLOUD_PATHS[index % CLOUD_PATHS.length]}
145+
fill={dirtiness.cloudColor}
146+
/>
147+
</svg>
148+
</motion.div>
116149
)}
117150

118151
{/* クリック可能な領域 */}

‎front/src/lib/utils/get-dirtiness-level.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import type { HouseworkStatus } from "@/types/housework-base.types";
22

33
export interface DirtinessConfig {
44
level: number;
5-
color: string;
6-
blur: number;
7-
opacity: number;
5+
color: string; // accent color for detail panel gradient
6+
blur: number; // blur px for cloud edge softness
7+
opacity: number; // opacity for detail panel gradient
8+
cloudColor: string; // rgba color for room cloud overlay
89
}
910

10-
const LEVEL_1: DirtinessConfig = { level: 1, color: "#66E08B", blur: 0, opacity: 0 };
11-
const LEVEL_2: DirtinessConfig = { level: 2, color: "#108FFF", blur: 2, opacity: 0.15 };
12-
const LEVEL_3: DirtinessConfig = { level: 3, color: "#FFC267", blur: 4, opacity: 0.25 };
13-
const LEVEL_4: DirtinessConfig = { level: 4, color: "#FF754F", blur: 6, opacity: 0.35 };
14-
const LEVEL_5: DirtinessConfig = { level: 5, color: "#FF6453", blur: 8, opacity: 0.45 };
11+
const LEVEL_1: DirtinessConfig = { level: 1, color: "#66E08B", blur: 0, opacity: 0, cloudColor: "rgba(0,0,0,0)" };
12+
const LEVEL_2: DirtinessConfig = { level: 2, color: "#108FFF", blur: 3, opacity: 0.15, cloudColor: "rgba(140,130,100,0.4)" };
13+
const LEVEL_3: DirtinessConfig = { level: 3, color: "#FFC267", blur: 4, opacity: 0.25, cloudColor: "rgba(110,100,75,0.55)" };
14+
const LEVEL_4: DirtinessConfig = { level: 4, color: "#FF754F", blur: 5, opacity: 0.35, cloudColor: "rgba(80,70,55,0.7)" };
15+
const LEVEL_5: DirtinessConfig = { level: 5, color: "#FF6453", blur: 6, opacity: 0.45, cloudColor: "rgba(50,45,38,0.82)" };
1516

1617
const STATUS_TO_LEVEL: Record<HouseworkStatus, DirtinessConfig> = {
1718
// Normal

0 commit comments

Comments
 (0)