import React, { useState } from 'react';
export const MaydayMatch = () => {
const [selectedMember, setSelectedMember] = useState(null);
const [selectedRole, setSelectedRole] = useState(null);
const [matchedPairs, setMatchedPairs] = useState({});
const [statusMessage, setStatusMessage] = useState('先點選一位團員，再點選對應的職稱！');
const members = ['阿信', '怪獸', '石頭', '瑪莎', '冠佑'];
const roles = ['鼓手', '吉他手/團長', '主唱', '貝斯手', '吉他手'];
const correctPairs = {
'阿信': '主唱',
'怪獸': '吉他手/團長',
'石頭': '吉他手',
'瑪莎': '貝斯手',
'冠佑': '鼓手'
};
const handleSelectMember = (name) => {
if (matchedPairs[name]) return;
setSelectedMember(name);
if (selectedRole) {
checkPair(name, selectedRole);
} else {
setStatusMessage(`已選擇【${name}】，請選擇對應的職稱...`);
}
};
const handleSelectRole = (role) => {
const isRoleMatched = Object.values(matchedPairs).includes(role);
if (isRoleMatched) return;
setSelectedRole(role);
if (selectedMember) {
checkPair(selectedMember, role);
} else {
setStatusMessage(`已選擇【${role}】，請選擇對應的團員...`);
}
};
const checkPair = (member, role) => {
if (correctPairs[member] === role) {
setMatchedPairs(prev => ({ ...prev, [member]: role }));
setStatusMessage(`🤓讚喔`);
} else {
setStatusMessage(`🫠答錯了！這麼簡單欸`);
}
setSelectedMember(null);
setSelectedRole(null);
};
const isCompleted = Object.keys(matchedPairs).length === members.length;
return (
<div style={{
padding: '20px',
borderRadius: '12px',
border: '1px solid var(--ifm-color-emphasis-300)',
backgroundColor: 'var(--ifm-card-background-color)',
margin: '24px 0',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)'
}}>
<h3 style={{ marginTop: 0, marginBottom: '8px' }}>五月天團員職稱配對</h3>
<p style={{ margin: '0 0 16px 0', color: 'var(--ifm-color-emphasis-700)', fontSize: '0.95rem' }}>
{isCompleted ? '讚讚 已完成所有配對！' : statusMessage}
</p>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<span style={{ fontWeight: 'bold', fontSize: '0.85rem', color: 'var(--ifm-color-emphasis-600)' }}>團員</span>
{members.map(m => {
const isMatched = !!matchedPairs[m];
const isSelected = selectedMember === m;
return (
<button
key={m}
onClick={() => handleSelectMember(m)}
disabled={isMatched}
style={{
padding: '10px 14px',
borderRadius: '8px',
textAlign: 'left',
border: isSelected ? '2px solid var(--ifm-color-primary)' : '1px solid var(--ifm-color-emphasis-300)',
backgroundColor: isMatched ? 'var(--ifm-color-success-lightest)' : isSelected ? 'var(--ifm-color-primary-lightest)' : 'transparent',
color: isMatched ? 'var(--ifm-color-success-darkest)' : 'inherit',
cursor: isMatched ? 'not-allowed' : 'pointer',
fontWeight: isSelected || isMatched ? 'bold' : 'normal',
transition: 'all 0.2s ease'
}}
>
{m} {isMatched && '✓'}
</button>
);
})}
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<span style={{ fontWeight: 'bold', fontSize: '0.85rem', color: 'var(--ifm-color-emphasis-600)' }}>職稱 / 樂器</span>
{roles.map((r, idx) => {
const isMatched = Object.values(matchedPairs).includes(r);
const isSelected = selectedRole === r;
return (
<button
key={idx}
onClick={() => handleSelectRole(r)}
disabled={isMatched}
style={{
padding: '10px 14px',
borderRadius: '8px',
textAlign: 'left',
border: isSelected ? '2px solid var(--ifm-color-primary)' : '1px solid var(--ifm-color-emphasis-300)',
backgroundColor: isMatched ? 'var(--ifm-color-success-lightest)' : isSelected ? 'var(--ifm-color-primary-lightest)' : 'transparent',
color: isMatched ? 'var(--ifm-color-success-darkest)' : 'inherit',
cursor: isMatched ? 'not-allowed' : 'pointer',
fontWeight: isSelected || isMatched ? 'bold' : 'normal',
transition: 'all 0.2s ease'
}}
>
{r} {isMatched && '✓'}
</button>
);
})}
</div>
</div>
</div>
);
};
<MaydayMatch />
