Skip to content

Commit

Permalink
Fix pr #390: Fix issue #389: Jutsu Level Transfer
Browse files Browse the repository at this point in the history
  • Loading branch information
@openhands-agent
openhands-agent committed Feb 20, 2025
1 parent ebd880d commit cb08cae
Showing 1 changed file with 114 additions and 82 deletions.
196 changes: 114 additions & 82 deletions app/src/app/jutsus/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,92 +357,124 @@ export default function MyJutsu() {

<div className="grow"></div>
{userjutsu.level <= JUTSU_TRANSFER_MAX_LEVEL && (
<Modal
title="Transfer Level"
button={
<Button id="transfer" variant="secondary">
<ArrowRightLeft className="h-6 w-6 mr-2" />
Transfer Level
</Button>
}
proceed_label={transferTarget ? "Confirm Transfer" : undefined}
onAccept={() => {
if (transferTarget) {
transferLevel({
fromJutsuId: userjutsu.jutsuId,
toJutsuId: transferTarget.jutsuId,
levels: transferLevels,
});
}
}}
setIsOpen={() => {
<Button
id="transfer"
variant="secondary"
onClick={() => {
setIsOpen(false);
setTransferTarget(undefined);
setTransferLevels(1);
const transferModal = document.createElement('div');
transferModal.innerHTML = `
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white p-6 rounded-lg max-w-lg w-full">
<h2 class="text-xl font-bold mb-4">Transfer Level</h2>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<label for="target-jutsu">Target Jutsu:</label>
<select
id="target-jutsu"
class="p-2 border rounded"
>
<option value="">Select a jutsu...</option>
${allJutsu
?.filter(
(j) =>
j.jutsuId !== userjutsu.jutsuId &&
j.jutsuType === userjutsu.jutsuType &&
j.jutsuRank === userjutsu.jutsuRank
)
.map((j) => `
<option value="${j.jutsuId}">
${j.name} (Level ${j.level})
</option>
`).join('')}
</select>
</div>
<div id="transfer-details" class="hidden">
<div class="flex flex-col gap-2">
<label for="transfer-levels">Levels to Transfer:</label>
<input
id="transfer-levels"
type="number"
class="p-2 border rounded"
min="1"
max="${Math.min(userjutsu.level - 1, JUTSU_TRANSFER_MAX_LEVEL)}"
value="1"
/>
</div>
<div id="transfer-info" class="mt-4"></div>
<p class="mt-2">
Cost: ${usedTransfers >= freeTransfers
? `${JUTSU_TRANSFER_COST} reputation points`
: "Free"}
</p>
<div class="flex justify-end gap-2 mt-4">
<button class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300" onclick="document.querySelector('.fixed').remove()">
Cancel
</button>
<button id="confirm-transfer" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Confirm Transfer
</button>
</div>
</div>
</div>
</div>
</div>
`;
document.body.appendChild(transferModal);

// Add event listeners
const targetSelect = document.getElementById('target-jutsu');
const transferDetails = document.getElementById('transfer-details');
const transferInfo = document.getElementById('transfer-info');
const transferLevelsInput = document.getElementById('transfer-levels');
const confirmButton = document.getElementById('confirm-transfer');

targetSelect?.addEventListener('change', (e) => {
const selected = allJutsu?.find(
(j) => j.jutsuId === (e.target as HTMLSelectElement).value
);
if (selected) {
transferDetails?.classList.remove('hidden');
const levels = parseInt((document.getElementById('transfer-levels') as HTMLInputElement).value);
transferInfo.innerHTML = `
<p>Transfer ${levels} level(s) from ${userjutsu.name} to ${selected.name}?</p>
<p>This will reduce ${userjutsu.name} to level ${userjutsu.level - levels} and increase ${selected.name} to level ${selected.level + levels}.</p>
`;
}
});

transferLevelsInput?.addEventListener('input', (e) => {
const selected = allJutsu?.find(
(j) => j.jutsuId === (targetSelect as HTMLSelectElement).value
);
if (selected) {
const levels = parseInt((e.target as HTMLInputElement).value);
transferInfo.innerHTML = `
<p>Transfer ${levels} level(s) from ${userjutsu.name} to ${selected.name}?</p>
<p>This will reduce ${userjutsu.name} to level ${userjutsu.level - levels} and increase ${selected.name} to level ${selected.level + levels}.</p>
`;
}
});

confirmButton?.addEventListener('click', () => {
const selectedJutsuId = (targetSelect as HTMLSelectElement).value;
const levels = parseInt((transferLevelsInput as HTMLInputElement).value);
if (selectedJutsuId && levels > 0) {
transferLevel({
fromJutsuId: userjutsu.jutsuId,
toJutsuId: selectedJutsuId,
levels: levels,
});
document.querySelector('.fixed')?.remove();
}
});
}}
>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<label htmlFor="target-jutsu">Target Jutsu:</label>
<select
id="target-jutsu"
className="p-2 border rounded"
value={transferTarget?.jutsuId || ""}
onChange={(e) => {
const selected = allJutsu?.find(
(j) => j.jutsuId === e.target.value
);
if (selected) {
setTransferTarget(selected);
}
}}
>
<option value="">Select a jutsu...</option>
{allJutsu
?.filter(
(j) =>
j.jutsuId !== userjutsu.jutsuId &&
j.jutsuType === userjutsu.jutsuType &&
j.jutsuRank === userjutsu.jutsuRank
)
.map((j) => (
<option key={j.jutsuId} value={j.jutsuId}>
{j.name} (Level {j.level})
</option>
))}
</select>
</div>
{transferTarget && (
<>
<div className="flex flex-col gap-2">
<label htmlFor="transfer-levels">Levels to Transfer:</label>
<input
id="transfer-levels"
type="number"
className="p-2 border rounded"
min={1}
max={Math.min(userjutsu.level - 1, JUTSU_TRANSFER_MAX_LEVEL)}
value={transferLevels}
onChange={(e) => setTransferLevels(parseInt(e.target.value))}
/>
</div>
<p>
Transfer {transferLevels} level(s) from {userjutsu.name} to{" "}
{transferTarget.name}?
</p>
<p>
This will reduce {userjutsu.name} to level {userjutsu.level - transferLevels} and increase{" "}
{transferTarget.name} to level {transferTarget.level + transferLevels}.
</p>
<p>
Cost:{" "}
{usedTransfers >= freeTransfers
? `${JUTSU_TRANSFER_COST} reputation points`
: "Free"}
</p>
</>
)}
</div>
</Modal>
<ArrowRightLeft className="h-6 w-6 mr-2" />
Transfer Level
</Button>
)}
<Confirm
title="Forget Jutsu"
Expand Down

0 comments on commit cb08cae

Please sign in to comment.