서사형 덱빌딩 게임 프로토 타입
This commit is contained in:
Kyoung5seo
166
client/src/components/GameScreen.jsx
Normal file
166
client/src/components/GameScreen.jsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Papa from 'papaparse';
|
||||
import cardsCsvRaw from '../data/cards.csv?raw';
|
||||
import { BookOpen, HandCoins, Droplet, Eye, Shield, Building2, EyeOff } from 'lucide-react';
|
||||
import SwipeCard from './SwipeCard';
|
||||
import './GameScreen.css';
|
||||
|
||||
export function GameScreen() {
|
||||
const [params, setParams] = useState({ resistance: 0, entropy: 0, risk: 0 });
|
||||
const [tokens, setTokens] = useState({ budget: 50, personnel: 50, info: 50 });
|
||||
const [tags, setTags] = useState({ wealth: 0, force: 0, surveillance: 0 });
|
||||
const [narrativeTags, setNarrativeTags] = useState(0);
|
||||
const [phase, setPhase] = useState(1);
|
||||
const [gameOver, setGameOver] = useState(false);
|
||||
const [cards, setCards] = useState([]);
|
||||
const [currentCardIndex, setCurrentCardIndex] = useState(0);
|
||||
|
||||
// CSV Load Effect
|
||||
useEffect(() => {
|
||||
const parsed = Papa.parse(cardsCsvRaw, { header: true, dynamicTyping: true, skipEmptyLines: true });
|
||||
|
||||
const formattedCards = parsed.data.map(row => ({
|
||||
id: row.id,
|
||||
type: row.type,
|
||||
text: row.text,
|
||||
left: {
|
||||
text: row.left_text,
|
||||
effect: () => {
|
||||
setParams(p => ({
|
||||
resistance: Math.max(0, p.resistance + (row.left_res || 0)),
|
||||
entropy: Math.max(0, p.entropy + (row.left_ent || 0)),
|
||||
risk: Math.max(0, p.risk + (row.left_rsk || 0)),
|
||||
}));
|
||||
setTokens(t => ({
|
||||
budget: t.budget + (row.left_bud || 0),
|
||||
personnel: t.personnel + (row.left_per || 0),
|
||||
info: t.info + (row.left_inf || 0),
|
||||
}));
|
||||
setTags(tg => ({
|
||||
wealth: tg.wealth + (row.left_wea || 0),
|
||||
force: tg.force + (row.left_for || 0),
|
||||
surveillance: tg.surveillance + (row.left_sur || 0),
|
||||
}));
|
||||
}
|
||||
},
|
||||
right: {
|
||||
text: row.right_text,
|
||||
effect: () => {
|
||||
setParams(p => ({
|
||||
resistance: Math.max(0, p.resistance + (row.right_res || 0)),
|
||||
entropy: Math.max(0, p.entropy + (row.right_ent || 0)),
|
||||
risk: Math.max(0, p.risk + (row.right_rsk || 0)),
|
||||
}));
|
||||
setTokens(t => ({
|
||||
budget: t.budget + (row.right_bud || 0),
|
||||
personnel: t.personnel + (row.right_per || 0),
|
||||
info: t.info + (row.right_inf || 0),
|
||||
}));
|
||||
setTags(tg => ({
|
||||
wealth: tg.wealth + (row.right_wea || 0),
|
||||
force: tg.force + (row.right_for || 0),
|
||||
surveillance: tg.surveillance + (row.right_sur || 0),
|
||||
}));
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
setCards(formattedCards.sort(() => Math.random() - 0.5));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (params.resistance >= 5 || params.entropy >= 5 || params.risk >= 5) {
|
||||
setGameOver(true);
|
||||
}
|
||||
if (narrativeTags >= 4 && narrativeTags < 8) setPhase(2);
|
||||
else if (narrativeTags >= 8) setPhase(3);
|
||||
}, [params, narrativeTags]);
|
||||
|
||||
const handleSwipe = (direction) => {
|
||||
if (cards.length === 0) return;
|
||||
const card = cards[currentCardIndex % cards.length];
|
||||
if (direction === 'left' && card.left) {
|
||||
card.left.effect();
|
||||
} else if (direction === 'right' && card.right) {
|
||||
card.right.effect();
|
||||
}
|
||||
setNarrativeTags(n => n + 1);
|
||||
setCurrentCardIndex(idx => idx + 1);
|
||||
};
|
||||
|
||||
const renderDots = (value, max = 5) => {
|
||||
return Array.from({ length: max }).map((_, i) => (
|
||||
<div key={i} className={`dot ${i < value ? 'filled' : 'empty'}`}></div>
|
||||
));
|
||||
};
|
||||
|
||||
if (gameOver) {
|
||||
return (
|
||||
<div className="game-over">
|
||||
<h1 className="glitch" data-text="시스템 붕괴">시스템 붕괴</h1>
|
||||
<p>프로젝트가 파멸을 맞이했습니다. 임무 실패.</p>
|
||||
<button className="restart-btn" onClick={() => window.location.reload()}>다음 회차 시작</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (cards.length === 0) {
|
||||
return <div className="game-screen">데이터를 불러오는 중...</div>;
|
||||
}
|
||||
|
||||
const phaseClass = phase === 1 ? 'phase-1' : phase === 2 ? 'phase-2' : 'phase-3';
|
||||
|
||||
return (
|
||||
<div className={`game-screen ${phaseClass}`}>
|
||||
{/* Top Bar */}
|
||||
<div className="top-bar">
|
||||
<div className="narrative-badge">
|
||||
<BookOpen size={16} /> <span>{narrativeTags}/8</span>
|
||||
</div>
|
||||
<div className="parameters">
|
||||
<div className={`param ${params.resistance >= 4 ? 'critical' : ''}`} style={{'--param-color': 'var(--color-resistance-critical)'}}>
|
||||
<span className="icon">✊</span>
|
||||
<div className="dots">{renderDots(params.resistance)}</div>
|
||||
</div>
|
||||
<div className={`param ${params.entropy >= 4 ? 'critical' : ''}`} style={{'--param-color': 'var(--color-entropy-critical)'}}>
|
||||
<span className="icon">🌀</span>
|
||||
<div className="dots">{renderDots(params.entropy)}</div>
|
||||
</div>
|
||||
<div className={`param ${params.risk >= 4 ? 'critical' : ''}`} style={{'--param-color': 'var(--color-risk-critical)'}}>
|
||||
<span className="icon">⚠️</span>
|
||||
<div className="dots">{renderDots(params.risk)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Area */}
|
||||
<div className="card-area">
|
||||
<SwipeCard
|
||||
card={cards[currentCardIndex % cards.length]}
|
||||
onSwipe={handleSwipe}
|
||||
phase={phase}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom Inventory */}
|
||||
<div className="bottom-bar">
|
||||
<div className="tokens-row">
|
||||
<div className="token"><HandCoins size={16} color="var(--color-token-budget)" /> <span>{tokens.budget}</span></div>
|
||||
<div className="token"><Droplet size={16} color="var(--color-token-personnel)" /> <span>{tokens.personnel}</span></div>
|
||||
<div className="token"><Eye size={16} color="var(--color-token-info)" /> <span>{tokens.info}</span></div>
|
||||
</div>
|
||||
<div className="tags-row">
|
||||
<div className="tag"><Building2 size={14} /> <span>{tags.wealth}</span></div>
|
||||
<div className="tag"><Shield size={14} /> <span>{tags.force}</span></div>
|
||||
<div className="tag"><EyeOff size={14} /> <span>{tags.surveillance}</span></div>
|
||||
</div>
|
||||
<div className="asset-slots">
|
||||
<div className="asset-slot"></div>
|
||||
<div className="asset-slot"></div>
|
||||
<div className="asset-slot"></div>
|
||||
<div className="asset-slot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user