Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final POC

Browse Source
This commit is contained in:
magdo
2025-11-24 23:28:57 +01:00
parent ce02f55a99
commit 6b3446e9b6
49 changed files with 4634 additions and 4620 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/pages/Game/StepPredictionModal.jsx
+53 -31
View File
@@ -42,7 +42,9 @@ const StepPredictionModal = ({
useEffect(() => {
if (!isOpen) return
// Reset time when modal opens
setTimeLeft(timeLimit)
const timer = setInterval(() => {
setTimeLeft(prev => {
if (prev <= 1) {
@@ -55,10 +57,10 @@ const StepPredictionModal = ({
}, 1000)
return () => clearInterval(timer)
}, [isOpen, timeLimit])
}, [isOpen]) // Remove timeLimit from dependencies to prevent timer reset
const handleTimeout = () => {
if (onSubmitPrediction) {
if (onSubmitPrediction && !isProcessing) {
onSubmitPrediction(null) // null = timeout
}
}
@@ -89,7 +91,9 @@ const StepPredictionModal = ({
}, [isOpen])
// Számított végső pozíció (helyes válasz)
const calculatedPosition = currentPosition + diceRoll + fieldStepValue + patternModifier
// Backend formula: currentPosition + (stepValue × dice) + patternModifier
const movement = fieldStepValue * diceRoll
const calculatedPosition = currentPosition + movement + patternModifier
const formatTime = (seconds) => {
return `0:${seconds.toString().padStart(2, '0')}`
@@ -158,40 +162,58 @@ const StepPredictionModal = ({
</div>
</div>
{/* Calculation Info */}
<div className="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-xl p-3 border border-blue-500/30">
<h3 className="text-blue-300 font-semibold mb-2 text-center text-sm">📊 Számítási Adatok</h3>
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="bg-black/30 rounded-lg p-2">
<p className="text-gray-400 text-xs mb-1">Jelenlegi pozíció</p>
<p className="text-white font-bold text-lg">{currentPosition}</p>
{/* Step-by-Step Calculation Helper */}
<div className="bg-gradient-to-br from-blue-900/30 to-purple-900/30 rounded-xl p-4 border border-blue-500/30">
<h3 className="text-blue-300 font-semibold mb-3 text-center">🧮 Számítási Adatok</h3>
{/* Visual calculation steps */}
<div className="space-y-2 mb-3">
<div className="flex items-center justify-between bg-black/40 rounded-lg p-3">
<span className="text-gray-300">Kezdő pozíció:</span>
<span className="text-white font-bold text-xl">{currentPosition}</span>
</div>
<div className="bg-black/30 rounded-lg p-2">
<p className="text-gray-400 text-xs mb-1">Dobás (kocka)</p>
<p className="text-white font-bold text-lg">+{diceRoll}</p>
<div className="flex items-center justify-between bg-black/40 rounded-lg p-3">
<span className="text-gray-300">Mező érték:</span>
<span className="text-yellow-400 font-bold text-xl">{fieldStepValue}</span>
</div>
<div className="bg-black/30 rounded-lg p-2">
<p className="text-gray-400 text-xs mb-1">Mező lépés</p>
<p className="text-white font-bold text-lg">+{fieldStepValue}</p>
</div>
<div className="bg-black/30 rounded-lg p-2">
<p className="text-gray-400 text-xs mb-1">Zóna módosító</p>
<p className={`font-bold text-lg ${patternModifier >= 0 ? 'text-green-400' : 'text-red-400'}`}>
{patternModifier >= 0 ? '+' : ''}{patternModifier}
</p>
<div className="flex items-center justify-between bg-black/40 rounded-lg p-3">
<span className="text-gray-300">Dobás:</span>
<span className="text-blue-400 font-bold text-xl">{diceRoll}</span>
</div>
</div>
<div className="mt-2 bg-yellow-900/30 rounded-lg p-2 border border-yellow-500/30">
<p className="text-yellow-300 text-center text-xs">
<span className="font-semibold">Számítsd ki:</span> {currentPosition} + {diceRoll} + {fieldStepValue} {patternModifier >= 0 ? '+' : ''} {patternModifier} = ?
{/* Pattern Modifier Info Box */}
<div className="bg-indigo-900/30 rounded-lg p-4 border border-indigo-500/30">
<div className="flex items-start gap-2 mb-2">
<span className="text-2xl">ℹ️</span>
<div className="flex-1">
<h4 className="text-indigo-300 font-semibold mb-1">Zóna módosító szabályok:</h4>
<ul className="text-gray-300 text-sm space-y-1">
<li>• <strong>0-ra végződik</strong> (10, 20...): nincs módosító</li>
<li>• <strong>5-re végződik</strong> (15, 25...): ±3 módosító</li>
<li>• <strong>3-mal osztható</strong> (9, 12, 21...): ±2 módosító</li>
<li>• <strong>Páratlan</strong> (1, 7, 11...): ±1 módosító</li>
<li>• <strong>Egyéb páros</strong>: nincs módosító</li>
</ul>
<p className="text-indigo-200 text-xs mt-2">A módosító előjele a mező típusától függ (+ pozitív, - negatív mező)</p>
</div>
</div>
</div>
{/* Formula hint without answer */}
<div className="bg-yellow-900/20 rounded-lg p-3 border border-yellow-500/30 mt-3">
<p className="text-yellow-200 text-xs text-center">
💡 <strong>Képlet:</strong> Kezdő + (Mező × Dobás) + Zóna módosító
</p>
</div>
</div>
{/* Position Input */}
<div className="space-y-2">
<h3 className="text-yellow-300 font-semibold text-center text-sm">
Írd be a tippelt pozíciót:
<h3 className="text-yellow-300 font-semibold text-center">
✍️ Írd be a tippelt pozíciót:
</h3>
<input
type="number"
@@ -199,19 +221,19 @@ const StepPredictionModal = ({
onChange={(e) => setPrediction(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleSubmit()}
disabled={isProcessing}
placeholder="Pl: 28"
placeholder={`Pl.: ${Math.floor(currentPosition + diceRoll * 1.5)}`}
className="w-full bg-gray-800 border-2 border-yellow-600 rounded-xl px-4 py-3 text-white text-center text-2xl font-bold focus:border-yellow-400 focus:outline-none disabled:opacity-50"
min={currentPosition}
min={0}
max={100}
/>
</div>
{/* Prediction Info */}
{/* Show entered prediction */}
{prediction && prediction !== "" && (
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
className="bg-yellow-900/20 rounded-xl p-2 border border-yellow-500/30 text-center"
className="bg-yellow-900/20 rounded-xl p-3 border border-yellow-500/30 text-center"
>
<p className="text-yellow-300 text-sm">
A tipped: <span className="font-bold text-xl text-white">{prediction}</span> pozíció