Update
This commit is contained in:
Joan
@@ -1,89 +1,50 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../hooks/useAuth'
|
||||
import { GameButton } from './common/GameButton'
|
||||
import './CharacterCreation.css'
|
||||
|
||||
function CharacterCreation() {
|
||||
const { createCharacter } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [strength, setStrength] = useState(0)
|
||||
const [agility, setAgility] = useState(0)
|
||||
const [endurance, setEndurance] = useState(0)
|
||||
const [intellect, setIntellect] = useState(0)
|
||||
const [error, setError] = useState('')
|
||||
const [stats, setStats] = useState({
|
||||
strength: 10,
|
||||
agility: 10,
|
||||
endurance: 10,
|
||||
intellect: 10
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const navigate = useNavigate()
|
||||
|
||||
const TOTAL_POINTS = 20
|
||||
const usedPoints = strength + agility + endurance + intellect
|
||||
const remainingPoints = TOTAL_POINTS - usedPoints
|
||||
const totalPoints = 40
|
||||
const pointsUsed = stats.strength + stats.agility + stats.endurance + stats.intellect
|
||||
const pointsRemaining = totalPoints - pointsUsed
|
||||
|
||||
const calculateHP = (str: number) => 30 + (str * 2)
|
||||
const calculateStamina = (end: number) => 20 + (end * 1)
|
||||
const handleStatChange = (stat: keyof typeof stats, delta: number) => {
|
||||
const newValue = stats[stat] + delta
|
||||
if (newValue < 5 || newValue > 20) return
|
||||
if (delta > 0 && pointsRemaining <= 0) return
|
||||
|
||||
const handleStatChange = (
|
||||
stat: 'strength' | 'agility' | 'endurance' | 'intellect',
|
||||
value: number
|
||||
) => {
|
||||
// Prevent negative values
|
||||
if (value < 0) return
|
||||
|
||||
const currentTotal = strength + agility + endurance + intellect
|
||||
const otherStats = currentTotal - (stat === 'strength' ? strength : stat === 'agility' ? agility : stat === 'endurance' ? endurance : intellect)
|
||||
|
||||
// Prevent exceeding total points
|
||||
if (otherStats + value > TOTAL_POINTS) {
|
||||
value = TOTAL_POINTS - otherStats
|
||||
}
|
||||
|
||||
switch (stat) {
|
||||
case 'strength':
|
||||
setStrength(value)
|
||||
break
|
||||
case 'agility':
|
||||
setAgility(value)
|
||||
break
|
||||
case 'endurance':
|
||||
setEndurance(value)
|
||||
break
|
||||
case 'intellect':
|
||||
setIntellect(value)
|
||||
break
|
||||
}
|
||||
setStats({
|
||||
...stats,
|
||||
[stat]: newValue
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
|
||||
// Validation
|
||||
if (name.length < 3 || name.length > 20) {
|
||||
setError('Name must be between 3 and 20 characters')
|
||||
return
|
||||
}
|
||||
|
||||
if (usedPoints !== TOTAL_POINTS) {
|
||||
setError(`You must allocate exactly ${TOTAL_POINTS} stat points (currently: ${usedPoints})`)
|
||||
return
|
||||
}
|
||||
|
||||
if (strength < 0 || agility < 0 || endurance < 0 || intellect < 0) {
|
||||
setError('Stats cannot be negative')
|
||||
if (pointsRemaining !== 0) {
|
||||
setError('You must use all attribute points')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
try {
|
||||
await createCharacter({
|
||||
name,
|
||||
strength,
|
||||
agility,
|
||||
endurance,
|
||||
intellect,
|
||||
})
|
||||
navigate('/characters')
|
||||
await createCharacter({ ...stats, name })
|
||||
navigate('/game')
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to create character')
|
||||
} finally {
|
||||
@@ -91,175 +52,98 @@ function CharacterCreation() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate('/characters')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="character-creation-container">
|
||||
<div className="character-creation-card">
|
||||
<h1>Create Your Character</h1>
|
||||
<p className="subtitle">Choose your name and distribute your stat points</p>
|
||||
<div className="char-creation-page">
|
||||
<div className="char-creation-container">
|
||||
<div className="char-creation-card game-panel">
|
||||
<h1 className="creation-title">Character Creation</h1>
|
||||
<p className="creation-subtitle">Forge your survivor for the wasteland</p>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Name Input */}
|
||||
<div className="form-section">
|
||||
<label htmlFor="name">Character Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter character name"
|
||||
minLength={3}
|
||||
maxLength={20}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
<p className="input-hint">3-20 characters, must be unique</p>
|
||||
</div>
|
||||
|
||||
{/* Stat Allocation */}
|
||||
<div className="form-section">
|
||||
<h2>Stat Allocation</h2>
|
||||
<div className="points-remaining">
|
||||
<span className={remainingPoints === 0 ? 'points-complete' : remainingPoints < 0 ? 'points-over' : ''}>
|
||||
Points Remaining: {remainingPoints} / {TOTAL_POINTS}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="stats-grid">
|
||||
<StatInput
|
||||
label="Strength"
|
||||
icon="💪"
|
||||
value={strength}
|
||||
onChange={(v) => handleStatChange('strength', v)}
|
||||
description="Increases melee damage and carry capacity"
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<StatInput
|
||||
label="Agility"
|
||||
icon="⚡"
|
||||
value={agility}
|
||||
onChange={(v) => handleStatChange('agility', v)}
|
||||
description="Improves dodge chance and critical hits"
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<StatInput
|
||||
label="Endurance"
|
||||
icon="🛡️"
|
||||
value={endurance}
|
||||
onChange={(v) => handleStatChange('endurance', v)}
|
||||
description="Increases HP and stamina"
|
||||
disabled={loading}
|
||||
/>
|
||||
|
||||
<StatInput
|
||||
label="Intellect"
|
||||
icon="🧠"
|
||||
value={intellect}
|
||||
onChange={(v) => handleStatChange('intellect', v)}
|
||||
description="Enhances crafting and resource gathering"
|
||||
<form onSubmit={handleSubmit} className="creation-form">
|
||||
<div className="form-group-creation">
|
||||
<label htmlFor="name">Survivor Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
className="game-input"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter survivor name..."
|
||||
required
|
||||
disabled={loading}
|
||||
maxLength={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Character Preview */}
|
||||
<div className="form-section character-preview">
|
||||
<h2>Character Preview</h2>
|
||||
<div className="preview-stats">
|
||||
<div className="preview-stat">
|
||||
<span className="preview-label">HP:</span>
|
||||
<span className="preview-value">{calculateHP(strength)}</span>
|
||||
<div className="attributes-section">
|
||||
<div className="attributes-header">
|
||||
<h3>Attributes</h3>
|
||||
<div className={`points-remaining ${pointsRemaining === 0 ? 'zero' : ''}`}>
|
||||
Points Remaining: {pointsRemaining}
|
||||
</div>
|
||||
</div>
|
||||
<div className="preview-stat">
|
||||
<span className="preview-label">Stamina:</span>
|
||||
<span className="preview-value">{calculateStamina(endurance)}</span>
|
||||
</div>
|
||||
<div className="preview-stat">
|
||||
<span className="preview-label">Level:</span>
|
||||
<span className="preview-value">1</span>
|
||||
|
||||
<div className="attributes-grid-creation">
|
||||
{(Object.keys(stats) as Array<keyof typeof stats>).map((stat) => (
|
||||
<div key={stat} className="attribute-control game-panel">
|
||||
<div className="attr-info">
|
||||
<span className="attr-name">{stat}</span>
|
||||
<span className="attr-value">{stats[stat]}</span>
|
||||
</div>
|
||||
<div className="attr-buttons">
|
||||
<GameButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
handleStatChange(stat, -1)
|
||||
}}
|
||||
disabled={loading || stats[stat] <= 5}
|
||||
>
|
||||
-
|
||||
</GameButton>
|
||||
<GameButton
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
handleStatChange(stat, 1)
|
||||
}}
|
||||
disabled={loading || stats[stat] >= 20 || pointsRemaining <= 0}
|
||||
>
|
||||
+
|
||||
</GameButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
{error && <div className="error-message-creation">{error}</div>}
|
||||
|
||||
<div className="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="button-secondary"
|
||||
onClick={handleCancel}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="button-primary"
|
||||
disabled={loading || remainingPoints !== 0}
|
||||
>
|
||||
{loading ? 'Creating...' : 'Create Character'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="creation-actions">
|
||||
<GameButton
|
||||
variant="secondary"
|
||||
onClick={() => navigate('/characters')}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</GameButton>
|
||||
<GameButton
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="create-submit-btn"
|
||||
disabled={loading || pointsRemaining !== 0 || !name.trim()}
|
||||
onClick={() => { }} // Handled by form submit
|
||||
>
|
||||
{loading ? 'Forging...' : 'Create Survivor'}
|
||||
</GameButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatInput({
|
||||
label,
|
||||
icon,
|
||||
value,
|
||||
onChange,
|
||||
description,
|
||||
disabled,
|
||||
}: {
|
||||
label: string
|
||||
icon: string
|
||||
value: number
|
||||
onChange: (value: number) => void
|
||||
description: string
|
||||
disabled: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="stat-input">
|
||||
<div className="stat-header">
|
||||
<span className="stat-icon">{icon}</span>
|
||||
<label>{label}</label>
|
||||
</div>
|
||||
<div className="stat-control">
|
||||
<button
|
||||
type="button"
|
||||
className="stat-button"
|
||||
onClick={() => onChange(value - 1)}
|
||||
disabled={disabled || value <= 0}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => onChange(parseInt(e.target.value) || 0)}
|
||||
min="0"
|
||||
disabled={disabled}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="stat-button"
|
||||
onClick={() => onChange(value + 1)}
|
||||
disabled={disabled}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<p className="stat-description">{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CharacterCreation
|
||||
|
||||
Reference in New Issue
Block a user