- 단일 "게임 시작" 버튼으로 통합 - 런처 설치 시 게임 실행, 미설치 시 자동 다운로드 (blur 감지) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,45 +19,29 @@
|
|||||||
margin: 0 0 28px;
|
margin: 0 0 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-download {
|
.btn-play {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 16px 48px;
|
padding: 18px 64px;
|
||||||
background: #BACDB0;
|
background: #BACDB0;
|
||||||
color: #2E2C2F;
|
color: #2E2C2F;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 1.1rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: opacity 0.2s, transform 0.15s;
|
transition: opacity 0.2s, transform 0.15s;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-download:hover {
|
.btn-play:hover {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-launch {
|
.btn-play:disabled {
|
||||||
display: inline-block;
|
opacity: 0.6;
|
||||||
padding: 16px 48px;
|
cursor: not-allowed;
|
||||||
background: transparent;
|
transform: none;
|
||||||
color: #BACDB0;
|
|
||||||
border: 2px solid #BACDB0;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s, color 0.2s, transform 0.15s;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-launch:hover {
|
|
||||||
background: #BACDB0;
|
|
||||||
color: #2E2C2F;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.launch-hint {
|
.launch-hint {
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import './DownloadSection.css';
|
|||||||
export default function DownloadSection() {
|
export default function DownloadSection() {
|
||||||
const [info, setInfo] = useState(null);
|
const [info, setInfo] = useState(null);
|
||||||
const [ready, setReady] = useState(false);
|
const [ready, setReady] = useState(false);
|
||||||
|
const [launching, setLaunching] = useState(false);
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
@@ -16,19 +17,30 @@ export default function DownloadSection() {
|
|||||||
.catch(() => setReady(true));
|
.catch(() => setReady(true));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleDownload = (e) => {
|
const handlePlay = () => {
|
||||||
if (!user) {
|
|
||||||
e.preventDefault();
|
|
||||||
navigate('/login');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleLaunch = () => {
|
|
||||||
if (!user) {
|
if (!user) {
|
||||||
navigate('/login');
|
navigate('/login');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setLaunching(true);
|
||||||
|
|
||||||
|
let launched = false;
|
||||||
|
const onBlur = () => { launched = true; };
|
||||||
|
window.addEventListener('blur', onBlur);
|
||||||
window.location.href = 'a301://launch?token=' + user.token;
|
window.location.href = 'a301://launch?token=' + user.token;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
window.removeEventListener('blur', onBlur);
|
||||||
|
setLaunching(false);
|
||||||
|
if (!launched && info?.url) {
|
||||||
|
// 런처 미설치 → 자동 다운로드
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = info.url;
|
||||||
|
a.download = '';
|
||||||
|
a.click();
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!ready) return null;
|
if (!ready) return null;
|
||||||
@@ -36,20 +48,17 @@ export default function DownloadSection() {
|
|||||||
return (
|
return (
|
||||||
<section className="download-section">
|
<section className="download-section">
|
||||||
<div className="download-content">
|
<div className="download-content">
|
||||||
<h2 className="download-title">게임 런처 다운로드</h2>
|
<h2 className="download-title">A301</h2>
|
||||||
{info ? (
|
{info ? (
|
||||||
<>
|
<>
|
||||||
<p className="download-meta">
|
<p className="download-meta">
|
||||||
{info.fileName} · {info.fileSize} · {info.version}
|
{info.version} · {info.fileSize}
|
||||||
</p>
|
</p>
|
||||||
<a href={info.url} download onClick={handleDownload} className="btn-download">
|
<button onClick={handlePlay} className="btn-play" disabled={launching}>
|
||||||
{user ? '다운로드' : '로그인 후 다운로드'}
|
{launching ? '실행 중...' : '게임 시작'}
|
||||||
</a>
|
|
||||||
<button onClick={handleLaunch} className="btn-launch">
|
|
||||||
게임 시작
|
|
||||||
</button>
|
</button>
|
||||||
<p className="launch-hint">
|
<p className="launch-hint">
|
||||||
게임 시작이 안 되나요? 먼저 다운로드 후 launcher.exe install을 실행해주세요.
|
처음 설치하는 경우 자동으로 다운로드됩니다
|
||||||
</p>
|
</p>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
Reference in New Issue
Block a user