Redesign game loop: level-based flow with reward at end of each level

New flow per cycle:
- Pick animals + places (picker shows "Level N" for level 2+)
- Answer 5 questions correctly
- Reward screen shows AI image + "Next Level →" button
- Back to picker with fresh random emoji pre-selections for variety

Key changes:
- REWARD_EVERY=3 mid-level rewards removed; replaced with ANSWERS_PER_LEVEL=5 per-level reward
- Collection gets add-locked at level START, unlock at level END
- pregenerate_image fires once at level start (not after each reward)
- New next_level() function: increments level, resets to picker
- New next_level_btn in reward panel
- New picker_level_md shows "Level N — Difficulty" on return to picker
- Status bar shows correct count (X/5) during level
- Math difficulty caps at 4 (Mix), level display number uncapped
- State simplified: removed reward_count, correct_since_reward, level_correct, pregenerate_next

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -9,45 +9,57 @@ import random
 
 import gradio as gr
 
-from math_engine import generate_question, LEVEL_NAMES, LEVEL_THRESHOLDS, level_up_message
+from math_engine import generate_question, LEVEL_NAMES, level_up_message
 from image_generator import generate_reward_image
 
 # ---------------------------------------------------------------------------
 # Constants
 # ---------------------------------------------------------------------------
 
-REWARD_EVERY = 3
+ANSWERS_PER_LEVEL = 5   # correct answers needed to complete a level and earn a reward
 
 ANIMAL_EMOJIS = ["🐶", "🐱", "🐰", "🦊", "🐼", "🐨", "🦁", "🐯", "🐸", "🐧", "🦋", "🦄"]
 PLACE_EMOJIS  = ["🌊", "🏔️", "🌸", "🌈", "🌙", "⭐", "🌴", "🏡", "🌺", "🍄"]
 
+# Math difficulty caps at 4 (Mix), but level number shown to user keeps increasing
+MATH_LEVEL_NAMES = {1: "Additions", 2: "Subtractions", 3: "Multiplications", 4: "Mix"}
+
 # ---------------------------------------------------------------------------
 # Helpers
 # ---------------------------------------------------------------------------
 
+def _math_level(state: dict) -> int:
+    """Return math difficulty (1–4), capped, from game level."""
+    return min(state.get("level", 1), 4)
+
 def _status_text(state: dict) -> str:
     if not state:
         return ""
-    return f"👤 {state['name']}  |  ⭐ {state['score']}  |  📚 {LEVEL_NAMES.get(state['level'], '')}"
+    diff = MATH_LEVEL_NAMES.get(_math_level(state), "")
+    correct = state.get("correct_this_level", 0)
+    return (f"👤 {state['name']}  |  ⭐ {state['score']}  |  "
+            f"📚 {diff}  |  ✅ {correct}/{ANSWERS_PER_LEVEL}")
 
 def _safe_question(state: dict) -> str:
     return f"## {state.get('question', '')} = ?"
 
 def _img_to_data_url(pil_image) -> str:
-    """Convert PIL image to JPEG data URL for localStorage."""
     buf = io.BytesIO()
     pil_image.save(buf, format="JPEG", quality=80)
     return "data:image/jpeg;base64," + base64.b64encode(buf.getvalue()).decode()
 
 def _coll(*actions) -> str:
-    """Encode collection actions into the collection_trigger HTML component.
-    Each action is a (action_name, reward_id, src) tuple."""
+    """Encode collection actions into the collection_trigger HTML component."""
     payload = json.dumps({
         "ts": random.random(),
         "actions": [{"action": a, "id": str(i), "src": s} for a, i, s in actions],
     })
     return f"<div id='numzoo-coll-data' data-payload='{payload}'></div>"
 
+def _picker_level_label(level: int) -> str:
+    diff = MATH_LEVEL_NAMES.get(min(level, 4), "Mix")
+    return f"## 🌟 Level {level} — {diff}"
+
 # ---------------------------------------------------------------------------
 # Step 1 — Name entry
 # ---------------------------------------------------------------------------
@@ -55,82 +67,75 @@ def _coll(*actions) -> str:
 def enter_name(player_name: str, state: dict):
     try:
         name = player_name.strip() or "Player"
-        state = {"name": name}
+        state = {"name": name, "level": 1, "score": 0, "streak": 0}
         return (
             state,
-            gr.update(visible=False),  # welcome
-            gr.update(visible=True),   # emoji picker
-            gr.update(visible=False),  # game
-            random.sample(ANIMAL_EMOJIS, 1),
-            random.sample(PLACE_EMOJIS, 1),
+            gr.update(visible=False),                   # welcome
+            gr.update(visible=True),                    # emoji picker
+            gr.update(visible=False),                   # game
+            gr.update(visible=False),                   # picker_level_md (hidden for level 1)
+            random.sample(ANIMAL_EMOJIS, 2),
+            random.sample(PLACE_EMOJIS, 2),
         )
     except Exception as e:
         print(f"enter_name error: {e}")
-        return state, gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), [], []
+        return (state, gr.update(visible=True), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=False), [], [])
 
 # ---------------------------------------------------------------------------
-# Step 2 — Emoji selection → start quiz
+# Step 2 — Emoji selection → start level
 # ---------------------------------------------------------------------------
 
-def start_game(animal_sel: list, place_sel: list, state: dict):
+def start_level(animal_sel: list, place_sel: list, state: dict):
     try:
         if not animal_sel or not place_sel:
             return (state, gr.update(visible=True), gr.update(visible=False),
                     "⚠️ Pick at least one animal and one place!", "", "", "")
 
+        level = state.get("level", 1)
         state.update({
-            "selected_animals":     animal_sel[:3],
-            "selected_places":      place_sel[:3],
-            "level":                1,
-            "score":                0,
-            "streak":               0,
-            "correct_since_reward": 0,
-            "level_correct":        0,
-            "reward_count":         0,
-            "pregenerate_next":     True,   # trigger background generation immediately
-            "generate_now":         False,
+            "selected_animals":   animal_sel[:3],
+            "selected_places":    place_sel[:3],
+            "correct_this_level": 0,
+            "generate_now":       False,
         })
+        # Preserve: name, level, score, streak
 
-        question, answer = generate_question(state["level"])
+        math_lv = _math_level(state)
+        question, answer = generate_question(math_lv)
         state["question"] = question
         state["answer"]   = answer
 
-        # Add locked placeholder for reward #1 immediately
+        # Add locked placeholder for this level's reward immediately
         return (state, gr.update(visible=False), gr.update(visible=True),
                 "", _status_text(state), _safe_question(state),
-                _coll(("add-locked", 1, "")))
+                _coll(("add-locked", level, "")))
 
     except Exception as e:
-        print(f"start_game error: {e}")
+        print(f"start_level error: {e}")
         return (state, gr.update(visible=True), gr.update(visible=False),
                 "⚠️ Something went wrong, try again.", "", "", "")
 
 # ---------------------------------------------------------------------------
-# Background pre-generation — starts right after "Let's go!" and again after
-# each reward, so the next image is ready before the user earns it.
+# Background pre-generation — fires immediately after "Let's go!" so the
+# image is ready when the user finishes the level.
 # ---------------------------------------------------------------------------
 
 def pregenerate_image(state: dict):
-    """Generate next reward image in background. No-op if pregenerate_next is False."""
-    if not state.get("pregenerate_next"):
-        return state, gr.update(), gr.update(), ""
-
-    state["pregenerate_next"] = False
-    next_id = state.get("reward_count", 0) + 1
-
+    """Pre-generate the reward image for the current level."""
+    level = state.get("level", 1)
     try:
         animals = state.get("selected_animals", [random.choice(ANIMAL_EMOJIS)])
         places  = state.get("selected_places",  [random.choice(PLACE_EMOJIS)])
         streak  = state.get("streak", 0)
 
-        print(f"[pregenerate] generating reward #{next_id}")
+        print(f"[pregenerate] level={level} | animals={animals} | places={places}")
         result, prompt = generate_reward_image(streak, animals, places)
-        print(f"[pregenerate] reward #{next_id} done | prompt={prompt!r}")
+        print(f"[pregenerate] level={level} done | prompt={prompt!r}")
 
         if result is not None:
             data_url = _img_to_data_url(result)
-            state["pending_reward_id"] = next_id
-            # Store in hidden components — collection stays LOCKED until user earns reward
+            state["pending_reward_id"] = level
             return state, result, data_url, ""
 
         state.pop("pending_reward_id", None)
@@ -147,11 +152,12 @@ def pregenerate_image(state: dict):
 # ---------------------------------------------------------------------------
 
 def check_answer(user_input: str, state: dict, pre_image, pre_data_url: str):
+    _empty = (state, _status_text(state), _safe_question(state), "",
+              "", gr.update(visible=False), "", gr.update(visible=False), "",
+              gr.update(), gr.update(), "")
     try:
         if not state or not state.get("question"):
-            return (state, _status_text(state), _safe_question(state), "",
-                    "", gr.update(visible=False), "", gr.update(visible=False), "",
-                    gr.update(), gr.update(), "")
+            return _empty
 
         try:
             user_answer = int(user_input.strip())
@@ -165,80 +171,70 @@ def check_answer(user_input: str, state: dict, pre_image, pre_data_url: str):
         if correct:
             state["score"]               += 1
             state["streak"]              += 1
-            state["correct_since_reward"] += 1
-            state["level_correct"]        += 1
-
-            threshold = LEVEL_THRESHOLDS.get(state["level"], 999)
-            level_msg = ""
-            if state["level_correct"] >= threshold and state["level"] < 4:
-                state["level"]        += 1
-                state["level_correct"] = 0
-                level_msg = level_up_message(state["level"])
+            state["correct_this_level"]   = state.get("correct_this_level", 0) + 1
 
-            streak_fire = "🔥" * min(state["streak"], 5)
-            feedback    = f"✅ {level_msg}" if level_msg else f"✅ Great! {streak_fire}"
+            level   = state.get("level", 1)
+            correct_count = state["correct_this_level"]
+            remaining     = ANSWERS_PER_LEVEL - correct_count
+            streak_fire   = "🔥" * min(state["streak"], 5)
 
-            if state["correct_since_reward"] >= REWARD_EVERY:
-                state["correct_since_reward"] = 0
-                state["reward_count"] = state.get("reward_count", 0) + 1
-                reward_id = state["reward_count"]
-
-                question, answer = generate_question(state["level"])
-                state["question"] = question
-                state["answer"]   = answer
-
-                # Check if a pre-generated image is ready for this exact reward
+            if correct_count >= ANSWERS_PER_LEVEL:
+                # ── Level complete! ─────────────────────────────────────────
+                state["generate_now"] = False
                 pending_id = state.get("pending_reward_id")
-                has_pre    = pre_image is not None and bool(pre_data_url) and pending_id == reward_id
+                has_pre    = pre_image is not None and bool(pre_data_url) and pending_id == level
 
                 if has_pre:
-                    # ✅ Pre-generated image ready — show immediately, unlock in collection
                     state.pop("pending_reward_id", None)
-                    state["pregenerate_next"] = True      # kick off next background gen
-                    next_id = reward_id + 1
                     return (state, _status_text(state), _safe_question(state), "",
-                            feedback,
-                            gr.update(visible=True),                      # reward_panel
-                            "",                                           # loader cleared
-                            gr.update(visible=True, value=pre_image),     # image shown
+                            f"🎉 Level {level} complete! {streak_fire}",
+                            gr.update(visible=True),                    # reward_panel
+                            "",                                         # loader cleared
+                            gr.update(visible=True, value=pre_image),   # image shown
                             "",
-                            None,                                         # clear hidden_image
-                            "",                                           # clear hidden_data_url
-                            _coll(("unlock",    reward_id, pre_data_url),
-                                  ("add-locked", next_id,   "")))
+                            None,                                       # clear hidden_image
+                            "",                                         # clear hidden_data_url
+                            _coll(("unlock", level, pre_data_url)))
                 else:
-                    # ⏳ On-demand generation (image not ready yet)
-                    state["generate_now"]     = True
-                    state["pregenerate_next"] = False
+                    state["generate_now"] = True
                     return (state, _status_text(state), _safe_question(state), "",
-                            feedback,
+                            f"🎉 Level {level} complete! {streak_fire}",
                             gr.update(visible=True),    # reward_panel
                             LOADER_HTML,                # show loader
                             gr.update(visible=False),   # image hidden
                             "",
-                            gr.update(),               # keep hidden_image
-                            gr.update(),               # keep hidden_data_url
-                            "")                         # collection stays locked
+                            gr.update(),
+                            gr.update(),
+                            "")
+            else:
+                # ── Keep going ───────────────────────────────────────────────
+                feedback = f"✅ {remaining} to go! {streak_fire}"
+                math_lv  = _math_level(state)
+                question, answer = generate_question(math_lv)
+                state["question"] = question
+                state["answer"]   = answer
+                return (state, _status_text(state), _safe_question(state), "",
+                        feedback,
+                        gr.update(visible=False), "", gr.update(visible=False), "",
+                        gr.update(), gr.update(), "")
 
         else:
             state["streak"] = 0
-            feedback = f"❌ Answer: **{state['answer']}**"
-
-        state["generate_now"] = False
-        question, answer = generate_question(state["level"])
-        state["question"] = question
-        state["answer"]   = answer
-
-        return (state, _status_text(state), _safe_question(state), "",
-                feedback,
-                gr.update(visible=False), "", gr.update(visible=False), "",
-                gr.update(), gr.update(), "")
+            math_lv  = _math_level(state)
+            question, answer = generate_question(math_lv)
+            state["question"] = question
+            state["answer"]   = answer
+            return (state, _status_text(state), _safe_question(state), "",
+                    f"❌ Answer: **{state['answer']}**",
+                    gr.update(visible=False), "", gr.update(visible=False), "",
+                    gr.update(), gr.update(), "")
 
     except Exception as e:
         import traceback
         print(f"check_answer error: {e}\n{traceback.format_exc()}")
         state["generate_now"] = False
-        question, answer = generate_question(state.get("level", 1))
+        math_lv = _math_level(state)
+        question, answer = generate_question(math_lv)
         state["question"] = question
         state["answer"]   = answer
         return (state, _status_text(state), _safe_question(state), "",
@@ -247,35 +243,32 @@ def check_answer(user_input: str, state: dict, pre_image, pre_data_url: str):
                 gr.update(), gr.update(), "")
 
 # ---------------------------------------------------------------------------
-# On-demand generation — fallback when pre-image wasn't ready
+# On-demand generation — fallback when pre-image wasn't ready at level end
 # ---------------------------------------------------------------------------
 
 def generate_on_demand(state: dict):
-    """Generate image on demand. No-op if generate_now is False."""
+    """Generate reward image on demand. No-op if generate_now is False."""
     if not state.get("generate_now"):
         return state, "", gr.update(), "", ""
 
-    state["generate_now"]     = False
-    state["pregenerate_next"] = True   # kick off next background gen after this
-    reward_id = state.get("reward_count", 1)
+    state["generate_now"] = False
+    level = state.get("level", 1)
 
     try:
         animals = state.get("selected_animals", [random.choice(ANIMAL_EMOJIS)])
         places  = state.get("selected_places",  [random.choice(PLACE_EMOJIS)])
         streak  = state.get("streak", 0)
 
-        print(f"[on_demand] generating reward #{reward_id}")
+        print(f"[on_demand] level={level}")
         result, prompt = generate_reward_image(streak, animals, places)
-        print(f"[on_demand] done | reward #{reward_id}")
+        print(f"[on_demand] level={level} done")
 
         if result is not None:
             data_url = _img_to_data_url(result)
-            next_id  = reward_id + 1
             return (state, "",
                     gr.update(visible=True, value=result),
                     "",
-                    _coll(("unlock",    reward_id, data_url),
-                          ("add-locked", next_id,   "")))
+                    _coll(("unlock", level, data_url)))
 
         return state, "", gr.update(visible=False), "⚠️ Could not generate image — try again later!", ""
 
@@ -284,6 +277,31 @@ def generate_on_demand(state: dict):
         print(f"[on_demand] ❌ {e}\n{traceback.format_exc()}")
         return state, "", gr.update(visible=False), f"⚠️ Error: {e}", ""
 
+# ---------------------------------------------------------------------------
+# Next level — back to picker with incremented level
+# ---------------------------------------------------------------------------
+
+def next_level(state: dict):
+    try:
+        new_level = state.get("level", 1) + 1
+        state["level"] = new_level
+        state["correct_this_level"] = 0
+        state.pop("pending_reward_id", None)
+
+        label = _picker_level_label(new_level)
+        return (state,
+                gr.update(visible=False),                                # game_panel
+                gr.update(visible=True),                                 # emoji_panel
+                gr.update(value=label, visible=True),                    # picker_level_md
+                random.sample(ANIMAL_EMOJIS, 2),                         # reset animal picker
+                random.sample(PLACE_EMOJIS, 2),                          # reset place picker
+                None,                                                    # clear hidden_image
+                "")                                                      # clear hidden_data_url
+    except Exception as e:
+        print(f"next_level error: {e}")
+        return (state, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
+                None, "")
+
 # ---------------------------------------------------------------------------
 # Restart
 # ---------------------------------------------------------------------------
@@ -306,13 +324,12 @@ CSS = """
 #feedback-box { text-align: center; font-size: 1.3em; min-height: 2em; }
 #status-box   { text-align: center; padding: 0.4em; border-radius: 8px; }
 #reward-img   { border-radius: 16px; }
+#picker-level { text-align: center; padding: 0.3em 0 0.6em; }
 .answer-input input { font-size: 2em !important; text-align: center !important; }
-/* Emoji picker grid — animals: 6 cols × 2 rows, places: 5 cols × 2 rows */
+/* Emoji picker grid */
 .emoji-group .wrap {
-  display: grid !important;
-  gap: 8px !important;
-  justify-content: center !important;
-  justify-items: center !important;
+  display: grid !important; gap: 8px !important;
+  justify-content: center !important; justify-items: center !important;
 }
 #animal-picker .wrap { grid-template-columns: repeat(6, 52px) !important; }
 #place-picker  .wrap { grid-template-columns: repeat(5, 52px) !important; }
@@ -327,12 +344,6 @@ CSS = """
   background: #e9d5ff !important; border-color: #7c3aed !important;
 }
 .emoji-group input[type="checkbox"] { display: none !important; }
-/* Unlock reveal animation */
-@keyframes numzoo-unblur {
-  from { filter: blur(16px) brightness(0.4); transform: scale(0.95); }
-  to   { filter: blur(0)    brightness(1);   transform: scale(1); }
-}
-.numzoo-unlock { animation: numzoo-unblur 0.7s ease-out forwards; }
 /* Collection locked pulse */
 @keyframes numzoo-pulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } }
 """
@@ -395,7 +406,7 @@ COLLECTION_HTML = """
 
   function renderCollection() {
     var col = getCol(), wrap = document.getElementById('numzoo-collection'),
-        hdr = document.getElementById('numzoo-collection-header');
+        hdr  = document.getElementById('numzoo-collection-header');
     if (!wrap) return;
     wrap.innerHTML = '';
     if (!col.length) { hdr.style.display='none'; return; }
@@ -484,16 +495,17 @@ with gr.Blocks(title="🦁 NumZoo") as demo:
 
     # ── Emoji picker ───────────────────────────────────────────────────────
     with gr.Group(visible=False) as emoji_panel:
+        picker_level_md = gr.Markdown("", visible=False, elem_id="picker-level")
         gr.Markdown("### Pick your animals 🐾")
-        animal_picker = gr.CheckboxGroup(choices=ANIMAL_EMOJIS, label="",
-                                         show_label=False, elem_classes=["emoji-group"],
-                                         elem_id="animal-picker")
+        animal_picker   = gr.CheckboxGroup(choices=ANIMAL_EMOJIS, label="",
+                                           show_label=False, elem_classes=["emoji-group"],
+                                           elem_id="animal-picker")
         gr.Markdown("### Pick your places 🌍")
-        place_picker  = gr.CheckboxGroup(choices=PLACE_EMOJIS,  label="",
-                                         show_label=False, elem_classes=["emoji-group"],
-                                         elem_id="place-picker")
-        picker_error  = gr.Markdown("")
-        go_btn        = gr.Button("Let's go! 🚀", variant="primary", size="lg")
+        place_picker    = gr.CheckboxGroup(choices=PLACE_EMOJIS, label="",
+                                           show_label=False, elem_classes=["emoji-group"],
+                                           elem_id="place-picker")
+        picker_error    = gr.Markdown("")
+        go_btn          = gr.Button("Let's go! 🚀", variant="primary", size="lg")
 
     # ── Game ───────────────────────────────────────────────────────────────
     with gr.Group(visible=False) as game_panel:
@@ -506,29 +518,28 @@ with gr.Blocks(title="🦁 NumZoo") as demo:
 
         with gr.Group(visible=False) as reward_panel:
             gr.Markdown("### 🎁 Your reward!")
-            loader_html  = gr.HTML("")                            # empty = hidden; content = shown
+            loader_html  = gr.HTML("")
             reward_image = gr.Image(label="", show_label=False,
                                     elem_id="reward-img", height=400, visible=False)
             reward_error = gr.Markdown("")
+            next_level_btn = gr.Button("Next Level ➡️", variant="primary", size="lg")
 
     # ── Collection ─────────────────────────────────────────────────────────
-    collection_trigger = gr.HTML("")   # receives JSON-encoded collection action payloads
+    collection_trigger = gr.HTML("")
     gr.HTML(COLLECTION_HTML)
 
     restart_btn = gr.Button("🔄 Restart", variant="secondary", size="sm")
 
     # ── Wiring ─────────────────────────────────────────────────────────────
 
-    next_btn.click(enter_name, [player_name, state],
-                   [state, welcome_panel, emoji_panel, game_panel,
-                    animal_picker, place_picker])
-    player_name.submit(enter_name, [player_name, state],
-                       [state, welcome_panel, emoji_panel, game_panel,
-                        animal_picker, place_picker])
+    enter_name_outputs = [state, welcome_panel, emoji_panel, game_panel,
+                          picker_level_md, animal_picker, place_picker]
+    next_btn.click(enter_name, [player_name, state], enter_name_outputs)
+    player_name.submit(enter_name, [player_name, state], enter_name_outputs)
 
-    # "Let's go!" → start game → immediately pre-generate first reward image
+    # "Let's go!" → start level → immediately pre-generate reward image
     go_btn.click(
-        start_game, [animal_picker, place_picker, state],
+        start_level, [animal_picker, place_picker, state],
         [state, emoji_panel, game_panel, picker_error, status_md, question_md, collection_trigger]
     ).then(
         pregenerate_image, [state],
@@ -541,7 +552,6 @@ with gr.Blocks(title="🦁 NumZoo") as demo:
         hidden_image, hidden_data_url, collection_trigger,
     ]
     ondemand_outputs = [state, loader_html, reward_image, reward_error, collection_trigger]
-    pre_outputs      = [state, hidden_image, hidden_data_url, collection_trigger]
 
     for trigger in [check_btn.click, answer_input.submit]:
         trigger(
@@ -550,10 +560,13 @@ with gr.Blocks(title="🦁 NumZoo") as demo:
             check_outputs,
         ).then(
             generate_on_demand, [state], ondemand_outputs
-        ).then(
-            pregenerate_image,  [state], pre_outputs
         )
 
+    # "Next Level" → increment level → back to picker with fresh picks
+    next_level_outputs = [state, game_panel, emoji_panel, picker_level_md,
+                          animal_picker, place_picker, hidden_image, hidden_data_url]
+    next_level_btn.click(next_level, [state], next_level_outputs)
+
     restart_btn.click(restart, [state],
                       [state, welcome_panel, emoji_panel, game_panel,
                        player_name, picker_error, hidden_image, hidden_data_url])