diff --git a/src/main.js b/src/main.js
index 53f40b5..a48bde2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -112,6 +112,7 @@ function checkEnd() {
function bindEvents() {
document.getElementById("hand").addEventListener("click", (e) => {
const cardEl = e.target.closest(".card");
+ if (!state) return;
if (!cardEl || state.combat.phase !== "player_turn") return;
const index = Number(cardEl.dataset.index);
@@ -142,6 +143,7 @@ function bindEvents() {
});
document.getElementById("enemy-zone").addEventListener("click", () => {
+ if (!state) return;
if (state.combat.selectedCard === null) return;
if (state.combat.phase !== "player_turn") return;
@@ -159,6 +161,7 @@ function bindEvents() {
document
.getElementById("end-turn-btn")
.addEventListener("click", async () => {
+ if (!state) return;
if (state.combat.phase !== "player_turn") return;
state = endTurn(state);
diff --git a/src/render.js b/src/render.js
index 00675ea..6a1ebaa 100644
--- a/src/render.js
+++ b/src/render.js
@@ -52,6 +52,7 @@ function formatIntent(action, enemy) {
if (e.type === "strength") return `str +${e.value}`;
return e.type;
});
+ if (parts.length === 0) return "zzz";
return parts.join(", ");
}
diff --git a/style.css b/style.css
index 03b7fd5..fdb2142 100644
--- a/style.css
+++ b/style.css
@@ -12,6 +12,10 @@
margin: 0 auto;
}
+#game[hidden] {
+ display: none;
+}
+
#enemy-zone {
flex: 4;
display: flex;
@@ -56,8 +60,10 @@
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 16px;
color: white;
font-size: 2rem;
}
@@ -65,3 +71,19 @@
#overlay[hidden] {
display: none;
}
+
+#reward-cards {
+ display: flex;
+ gap: 12px;
+ justify-content: center;
+}
+
+#reward-cards .reward-card {
+ width: 120px;
+ cursor: pointer;
+ transition: transform 0.15s;
+}
+
+#reward-cards .reward-card:hover {
+ transform: scale(1.1);
+}