slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
140 lines (139 loc) • 7.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from 'react';
import { Typography, Paper, Stack, Button } from '@mui/material';
import { CardBasic } from '../components/CardBasic';
const gameOptions = {
isCloningFree: true,
cardCapacity: 2,
};
const dateOptions = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
export const IdleTimeBoard = ({ cards = [], timeTargets = [] }) => {
const [localCards, setLocalCards] = useState(cards);
const [localTimeTargets, setLocalTimeTargets] = useState(timeTargets);
const [completedCardIndexes, setCompletedCardIndexes] = useState(new Set());
useEffect(() => {
const interval = setInterval(() => {
//Process Targets
localTimeTargets.forEach((timeTarget, i) => {
//get out if target already completed
if (completedCardIndexes.has(i))
return;
const { targetTime, name: targetName, dateTargetCreated } = timeTarget;
console.log('Wait for ', targetName);
localCards.forEach((card, cardIndex) => {
const { timeRate, name } = card;
const isTravelForward = timeRate > 0;
const nowDate = new Date();
const msPassed = nowDate.getTime();
const totalAccumulatedInt = msPassed * card.timeRate;
const futureDate = new Date(nowDate.getTime() + totalAccumulatedInt - msPassed);
const pastDate = new Date(nowDate.getTime() - msPassed + totalAccumulatedInt);
console.log('isTravelForward', isTravelForward);
const isTravelToPast = card.timeRate < 0;
const isTargetInPast = targetTime < Date.now();
// if (isTargetInPast && isTravelForward) {
// console.log('xxx');
// return;
// }
// if (!isTargetInPast && !isTravelForward) {
// console.log('yyy');
// return;
// }
const travelerCurrentTime = isTravelToPast ? pastDate.getTime() : futureDate.getTime();
if (!isTravelForward && !isTargetInPast) {
console.log('hit past target', targetName);
setCompletedCardIndexes((p) => new Set([...p, i]));
}
if (isTravelForward && isTargetInPast) {
console.log('hit future target', targetName);
setCompletedCardIndexes((p) => new Set([...p, i]));
}
});
return;
});
}, 200);
return function cleanup() {
clearInterval(interval);
};
}, [localCards, localTimeTargets, completedCardIndexes]);
useEffect(() => {
console.log('completedCardIndexes', completedCardIndexes);
}, [completedCardIndexes]);
const spawnCards = (cards) => {
setLocalCards((prev) => [...prev, ...cards]);
};
const spawnTarget = () => {
const futureTarget = {
name: 'Hop to the future',
targetTime: Date.now() + 5000,
dateTargetCreated: Date.now(),
};
const dayFutureTarget = {
name: 'Hop to the future',
targetTime: Date.now() + 10000,
dateTargetCreated: Date.now(),
};
// const pastTarget = {
// name: 'Hop to the Past',
// targetTime: Date.now() - 529000,
// dateTargetCreated: Date.now(),
// };
setLocalTimeTargets((prev) => [...prev, futureTarget, dayFutureTarget]);
};
const start = () => {
const scientist = {
name: 'You',
description: 'Passes through time at a normal rate.',
dateCreated: new Date(),
timeRate: 1,
counterSpeedMs: 100,
};
spawnTarget();
spawnCards([scientist]);
};
if (!completedCardIndexes)
return null;
return (_jsx(Paper, { sx: {
p: 1,
borderRadius: '5px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}, children: _jsxs(Stack, { spacing: 1, direction: "column", children: [localTimeTargets.map((target, i) => {
const isComplete = completedCardIndexes.has(i);
return (_jsx(TimeTarget, { timeTargetCard: target, isComplete: isComplete }, target.name + i));
}), _jsxs(Stack, { spacing: 1, direction: "row", justifyContent: 'center', children: [localCards.length === 0 && _jsx(Button, { onClick: start, children: "Start" }), localCards.map((card, i) => {
const { name, description, lifeDuration, dateCreated, timeRate, creates, counterSpeedMs, minTimeRate, maxTimeRate, rateSliderStep, rateReturn, completed, } = card;
return (_jsx(CardBasic, { gameOptions: gameOptions, name: name, description: description, lifeDuration: lifeDuration, dateCreated: dateCreated, timeRate: timeRate, creates: creates, counterSpeedMs: counterSpeedMs, minTimeRate: minTimeRate, maxTimeRate: maxTimeRate, rateSliderStep: rateSliderStep, rateReturn: rateReturn }, name + i));
})] })] }) }));
};
const TimeTarget = ({ timeTargetCard, isComplete }) => {
const { name, targetTime, dateTargetCreated } = timeTargetCard;
const dateTargetTime = new Date(targetTime);
const dateCreatedTime = new Date(dateTargetCreated);
const isInPast = dateTargetTime < new Date();
const targetTimeMemo = useMemo(() => {
return dateTargetTime.toLocaleDateString('en-US', dateOptions);
}, [dateTargetTime]);
const createdTimeMemo = useMemo(() => {
return dateCreatedTime.toLocaleDateString('en-US', dateOptions);
}, [dateCreatedTime]);
return (_jsxs(Paper, { sx: {
minWidth: '150px',
p: 1,
borderRadius: '5px',
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}, children: [_jsx(Typography, { variant: "body1", children: name }), !isComplete && (_jsx(Typography, { variant: "caption", children: isInPast ? 'back in time to' : 'forward in time to' })), _jsx(Typography, { variant: "caption", children: targetTimeMemo }), _jsxs(Typography, { variant: "caption", children: ["created: ", createdTimeMemo] }), isComplete && (_jsx(Typography, { sx: { color: isComplete ? 'green' : 'red' }, variant: "body2", children: isComplete ? 'complete' : `in progress` }))] }));
};