⚡ UNSW CAMPUS DROPS

LifeMaxxing

{rank} / {progress.aura} aura

); } function Lm3QuestCard({ quest, selected, completed, onSelect, children }) { return (

onSelect(quest.id)} style={{ cursor: "pointer" }}>

{quest.rarity} 🕒 {lm3TimeLabel(quest.droppedAt)}

{lm3QuestIcon(quest)} {quest.title}

{quest.prompt}

{quest.rewardAura} aura {completed ? "✅ cleared" : quest.category}

{selected ? children : null}

); } function Lm3ProofImage({ assetRef, resolveImageUrl, quest, compact }) { const [url, setUrl] = React.useState(assetRef?.publicUrl || ""); React.useEffect(() => { let alive = true; async function resolve() { if (!assetRef) { setUrl(""); return; } if (assetRef.publicUrl) { setUrl(assetRef.publicUrl); return; } if (!resolveImageUrl) { setUrl(""); return; } try { const nextUrl = await resolveImageUrl(assetRef); if (alive) setUrl(nextUrl || ""); } catch (error) { if (alive) setUrl(""); } } resolve(); return () => { alive = false; }; }, [assetRef?.assetId, assetRef?.publicUrl, resolveImageUrl]); if (url) { return ( {`${quest.title}

); } return (

{quest.category} {assetRef ? "Resolving proof" : "Caption proof"}

); } function Lm3InlineSubmitForm({ quest, progress, setProgress, appendSubmission, user, isMultiplayer, pickAndUploadPhoto, resolveImageUrl, openAuth, ai, setActiveTab, }) { const [caption, setCaption] = React.useState(""); const [faction, setFaction] = React.useState(progress.faction || LM3_FACTIONS[0]); const [manualProof, setManualProof] = React.useState(""); const [photoAsset, setPhotoAsset] = React.useState(null); const [photoPreview, setPhotoPreview] = React.useState(""); const [status, setStatus] = React.useState(""); const [isBusy, setIsBusy] = React.useState(false); React.useEffect(() => { if (progress.faction && progress.faction !== faction) { setFaction(progress.faction); } }, [progress.faction]); async function pickPhoto(source) { if (!pickAndUploadPhoto) { setStatus("Camera helper unavailable in local preview. Caption proof enabled."); return; } setStatus(source === "camera" ? "Opening camera..." : "Opening library..."); try { const result = await pickAndUploadPhoto({ source, target: isMultiplayer ? "shared" : "personal", visibility: "instance_private", }); if (!result || result.cancelled) { setStatus("Photo pick cancelled."); return; } const asset = lm3NormalizeAssetRef(result); if (!asset) { setStatus("Photo upload returned no image."); return; } setPhotoAsset(asset); if (result.publicUrl) { setPhotoPreview(result.publicUrl); } else if (resolveImageUrl) { const url = await resolveImageUrl(asset); setPhotoPreview(url || ""); } setStatus("Proof photo attached!"); } catch (error) { setStatus("Photo upload failed. Caption proof enabled."); } } async function getAiVerdict(questItem, proofCaption, asset) { const fallback = { verdict: asset ? "Looks valid enough for campus lore." : "Soft pass on caption proof.", confidence: asset ? 78 : 65, reason: asset ? "Photo proof was attached and the caption matches the quest." : "No photo helper is available in preview, so this is treated as manual proof.", }; if (!ai) return fallback; if (!user?.id || user.id === "anonymous") { openAuth?.({ mode: "signin" }); return { verdict: "AI soft-pass pending sign-in.", confidence: 65, reason: "Sign in to run the real photo judge. The submission is temporarily accepted.", }; } const content = [ { type: "text", text: [ "You are the playful, humorous, but fair LifeMaxxing campus proof judge.", "Your job is to verify if a user has completed their campus quest based on their text caption/proof and an optional photo.", "", `Quest Title: "${questItem.title}"`, `Quest Brief/Prompt: "${questItem.prompt}"`, `User's Text Proof/Caption: "${proofCaption}"`, "", "CRITERIA FOR JUDGING:", "1. Be playful and lenient. This is a lighthearted campus social game.", "2. If a photo is attached, verify if the image reasonably matches the quest (e.g. if the quest is 'Get coffee', look for a cup, coffee machine, or cafe).", "3. If the user's caption or photo is completely unrelated (e.g. blank spam, or obvious trolling), reject the proof by returning a confidence below 60.", "4. If the proof is plausible, return a confidence score between 60 and 100 (60 is the minimum passing score).", "", "RESPONSE STRUCTURE:", "Return a short funny verdict (max 120 chars), a confidence score (0 to 100), and a concise reason (max 180 chars)." ].join("\n"), }, ]; if (asset?.assetId) { content.push({ type: "image_asset", assetRef: asset, }); } try { const result = await ai({ model: "claude-opus-4-7", intent: "json", messages: [{ role: "user", content }], responseSchema: { type: "object", additionalProperties: false, properties: { verdict: { type: "string" }, confidence: { type: "number" }, reason: { type: "string" }, }, required: ["verdict", "confidence", "reason"], }, }); if (result.status !== "completed" || !result.json) { return fallback; } return { verdict: String(result.json.verdict || fallback.verdict).slice(0, 120), confidence: Math.max(0, Math.min(100, Number(result.json.confidence) || fallback.confidence)), reason: String(result.json.reason || fallback.reason).slice(0, 180), }; } catch (error) { return fallback; } } async function submitProof() { const cleanCaption = caption.trim(); const cleanManualProof = manualProof.trim(); if (!cleanCaption && !cleanManualProof) { setStatus("Add a caption or manual proof first."); return; } setIsBusy(true); setStatus("AI Judge verifying proof..."); try { const proofText = [cleanCaption, cleanManualProof].filter(Boolean).join(" / "); const verdict = await getAiVerdict(quest, proofText, photoAsset); const isAccepted = verdict.confidence >= 60; const alreadyCompleted = (progress.completedQuestIds || []).includes(quest.id); const rewardAura = isAccepted ? (alreadyCompleted ? Math.round(quest.rewardAura / 4) : quest.rewardAura) : 0; const rewardCoins = isAccepted ? (alreadyCompleted ? Math.round(quest.rewardCoins / 4) : quest.rewardCoins) : 0; const submission = { id: lm3CreateId("proof"), questId: quest.id, caption: cleanCaption || cleanManualProof, manualProof: cleanManualProof, faction, createdAt: Date.now(), votes: [], photoAsset, aiVerdict: verdict.verdict, aiConfidence: verdict.confidence, aiReason: verdict.reason, rewardAura, rewardCoins, isAccepted, _user: { id: lm3GetUserKey(user), name: lm3GetUserName(user), handle: user?.handle, avatarUrl: user?.avatarUrl, }, }; appendSubmission(submission); if (isAccepted) { setProgress({ ...progress, aura: progress.aura + rewardAura, faction, completedQuestIds: lm3UniqueList([...progress.completedQuestIds, quest.id]), equippedTitle: progress.equippedTitle || lm3GetRank(progress.aura + rewardAura), }); setStatus(`✅ Accepted! +${rewardAura} Aura. ${verdict.verdict}`); } else { setStatus(`❌ Rejected by AI Judge (Confidence: ${verdict.confidence}%): ${verdict.verdict}. 0 Aura gained.`); } setTimeout(() => { setCaption(""); setManualProof(""); setPhotoAsset(null); setPhotoPreview(""); setStatus(""); setActiveTab("feed"); }, 2200); } catch (e) { setStatus("Submission error. Try again."); } finally { setIsBusy(false); } } return (

e.stopPropagation()}>

📸 Submit Proof

Caption

setCaption(e.target.value)}
        placeholder="Drop the lore. What did you do?"
      />

<label className="fieldLabel" style={{ margin: "6px 0 2px", display: "block" }}>Manual proof (optional)</label>
      <input
        className="textInput"
        style={{ ...LM3_S.field, padding: "8px 10px" }}
        type="text"
        value={manualProof}
        onChange={(e) => setManualProof(e.target.value)}
        placeholder="e.g. location, run length, society name..."
      />

<label className="fieldLabel" style={{ margin: "6px 0 2px", display: "block" }}>Faction</label>
      <select
        className="selectField"
        style={{ ...LM3_S.field, padding: "8px 10px" }}
        value={faction}
        onChange={(e) => setFaction(e.target.value)}
      >
        {(LM3_FACTIONS || []).map((f) => (
          <option key={f} value={f}>{f}</option>
        ))}
      </select>

<div className="photoActions" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginTop: 8 }}>
        <button type="button" className="secondaryButton" style={{ ...LM3_S.secondaryButton, minHeight: 36, background: "#bfe3f7" }} onClick={() => pickPhoto("camera")}>
          📷 Camera
        </button>
        <button type="button" className="secondaryButton" style={{ ...LM3_S.secondaryButton, minHeight: 36, background: "#cdeec9" }} onClick={() => pickPhoto("library")}>
          🖼️ Library
        </button>
      </div>

{photoPreview ? (
        <img src={photoPreview} alt="Proof preview" style={{ width: "100%", borderRadius: 2, border: "3px solid #2e2842", marginTop: 8, maxHeight: 120, objectFit: "cover" }} />
      ) : null}

{status ? <p style={{ margin: "8px 0 0", fontSize: 13, color: "var(--muted)", fontWeight: "800" }}>{status}</p> : null}

<button
        className="primaryButton"
        style={{ ...LM3_S.primaryButton, marginTop: 10, minHeight: 38, opacity: isBusy ? 0.58 : 1 }}
        type="button"
        disabled={isBusy}
        onClick={submitProof}
      >
        {isBusy ? "⚡ verifying..." : "🔥 Post proof to feed"}
      </button>
    </div>
  );
}

function Lm3QuestsScreen({
  activeDrops,
  selectedQuestId,
  setSelectedQuestId,
  isTriggering,
  triggerNewDrop,
  toastMessage,
  progress,
  setProgress,
  appendSubmission,
  user,
  isMultiplayer,
  pickAndUploadPhoto,
  resolveImageUrl,
  openAuth,
  ai,
  setActiveTab,
}) {
  return (
    <main className="screen" style={LM3_S.screen}>
      {toastMessage ? (
        <div className="newDropToast">
          {toastMessage}
        </div>
      ) : null}

<button
        className={`primaryButton triggerButton ${isTriggering ? "scanningAnimation" : ""}`}
        type="button"
        disabled={isTriggering}
        onClick={triggerNewDrop}
      >
        {isTriggering ? "📡 SCANNING UNSW CAMPUS..." : "🎲 TRIGGER CAMPUS DROP"}
      </button>

<section className="contentBlock" style={LM3_S.panel}>
        <div className="sectionHeader" style={LM3_S.sectionHeader}>
          <div>
            <p className="sectionKicker" style={LM3_S.eyebrow}>⚡ Live Drops</p>
            <h2 style={LM3_S.h2}>Active Sidequests</h2>
          </div>
          <span className="subtleCount" style={LM3_S.countPill}>{(activeDrops || []).length} drops active</span>
        </div>

<div className="questList" style={LM3_S.listGrid}>
          {(activeDrops || []).map((quest) => (
            <Lm3QuestCard
              key={quest.instanceId || quest.id}
              quest={quest}
              selected={quest.id === selectedQuestId}
              completed={(progress.completedQuestIds || []).includes(quest.id)}
              onSelect={setSelectedQuestId}
            >
              <Lm3InlineSubmitForm
                quest={quest}
                progress={progress}
                setProgress={setProgress}
                appendSubmission={appendSubmission}
                user={user}
                isMultiplayer={isMultiplayer}
                pickAndUploadPhoto={pickAndUploadPhoto}
                resolveImageUrl={resolveImageUrl}
                openAuth={openAuth}
                ai={ai}
                setActiveTab={setActiveTab}
              />
            </Lm3QuestCard>
          ))}
        </div>
      </section>
    </main>
  );
}

function Lm3FeedScreen({
  submissions,
  resolveImageUrl,
  onVote,
  progress,
  user,
  openProfile,
}) {
  const feedItems = (submissions || []).length ? submissions : LM3_SAMPLE_SUBMISSIONS;
  const userKey = lm3GetUserKey(user);

return (
    <main className="screen" style={LM3_S.screen}>
      <section className="contentBlock" style={LM3_S.panel}>
        <div className="sectionHeader" style={LM3_S.sectionHeader}>
          <div>
            <p className="sectionKicker" style={LM3_S.eyebrow}>🔥 Campus feed</p>
            <h2 style={LM3_S.h2}>Performative maxxing</h2>
          </div>
          <span className="subtleCount" style={LM3_S.countPill}>❤️ {(feedItems || []).length} posts</span>
        </div>

<div className="feedList" style={LM3_S.listGrid}>
          {(feedItems || []).map((item) => {
            const quest = lm3GetQuest(item.questId);
            const voted = item.votes?.includes(userKey);
            const voteCount = item.votes?.length || 0;

return (
              <article key={item.id} className={`feedCard ${item.isSample ? "sampleCard" : ""}`} style={{ ...LM3_S.feedCard, borderStyle: item.isSample ? "dashed" : "solid" }}>
                <Lm3ProofImage assetRef={item.photoAsset} resolveImageUrl={resolveImageUrl} quest={quest} />
                <div className="feedBody" style={LM3_S.feedBody}>
                  <div className="authorRow" style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                    <button
                      type="button"
                      className="avatarButton"
                      style={LM3_S.avatar}
                      onClick={() => item._user?.handle && openProfile?.(item._user.handle)}
                    >
                      <span>{(item._user?.name || "U").slice(0, 1).toUpperCase()}</span>
                    </button>
                    <div>
                      <strong>{item._user?.name || "Campus student"}</strong>
                      <small style={{ ...LM3_S.smallMuted, display: "block" }}>{lm3QuestIcon(quest)} {quest.title} / {item.faction || "Unaffiliated"}</small>
                      <small style={{ ...LM3_S.smallMuted, display: "block" }}>🕒 {lm3TimeLabel(item.createdAt)} · +{item.rewardAura || 0} aura</small>
                    </div>
                  </div>
                  <p style={{ margin: 0, lineHeight: 1.35 }}>{item.caption}</p>
                  {item.manualProof ? <p className="manualProof" style={LM3_S.muted}>{item.manualProof}</p> : null}
                  
                  <div className="aiBox" style={{ ...LM3_S.aiBox, background: item.isAccepted === false ? "#ffe3da" : "#fff3c4" }}>
                    <span style={{ color: item.isAccepted === false ? "#c0432e" : "#b97f14", fontFamily: LM3_PIXEL_FONT, fontSize: 8, fontWeight: 400, textTransform: "uppercase" }}>
                      🤖 {item.isAccepted === false ? "AI Judge: REJECTED" : `🤖 ${Math.round(item.aiConfidence || 0)}% AI judge`}
                    </span>
                    <p style={{ margin: "4px 0", fontWeight: 850 }}>{item.aiVerdict || "Soft judge pending."}</p>
                    <small style={LM3_S.smallMuted}>{item.aiReason || "Community votes decide the real winner."}</small>
                  </div>

<button
                    type="button"
                    className={`voteButton ${voted ? "isSelected" : ""}`}
                    style={{ ...LM3_S.secondaryButton, width: "100%", background: voted ? "#dcefcf" : "#fff8e7", boxShadow: `3px 3px 0 ${voted ? "#3da45e" : "#3f6ed8"}` }}
                    onClick={() => onVote(item)}
                    disabled={item.isSample}
                  >
                    {item.isSample ? "👀 Sample post" : voted ? "❤️ Voted" : "♡ Vote best proof"} / {voteCount}
                  </button>
                </div>
              </article>
            );
          })}
        </div>
      </section>

<section className="contentBlock miniExplainer" style={{ ...LM3_S.panel, background: "#e8eefb" }}>
        <h2 style={LM3_S.h2}>🏅 Weekly champion rule</h2>
        <p>
          Base quest rewards build personal aura. Community votes decide the weekly title flex.
        </p>
        <div className="questMeta" style={LM3_S.rowWrap}>
          <span style={LM3_S.chip}>{(progress.votedSubmissionIds || []).length} votes cast</span>
          <span style={LM3_S.chip}>{(progress.completedQuestIds || []).length} quests cleared</span>
        </div>
      </section>
    </main>
  );
}

function Lm3RankScreen({ submissions, progress, user }) {
  const leaderboard = lm3BuildLeaderboard(submissions, progress, user);

return (
    <main className="screen" style={LM3_S.screen}>
      <section className="contentBlock" style={LM3_S.panel}>
        <div className="sectionHeader" style={LM3_S.sectionHeader}>
          <div>
            <p className="sectionKicker" style={LM3_S.eyebrow}>🏆 Leaderboard</p>
            <h2 style={LM3_S.h2}>Aura rankings</h2>
          </div>
          <span className="subtleCount" style={LM3_S.countPill}>{(leaderboard || []).length} players</span>
        </div>

<div className="leaderList" style={{ display: "grid", gap: 10 }}>
          {(leaderboard || []).map((row, index) => (
            <div className="leaderRow" style={LM3_S.leaderRow} key={row.id}>
              <span className="placement" style={LM3_S.placement}>{index + 1}</span>
              <div>
                <strong>{index === 0 ? "👑 " : ""}{row.name}</strong>
                <small style={{ ...LM3_S.smallMuted, display: "block" }}>{row.title}</small>
              </div>
              <b>{row.aura}</b>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function lm3BuildLeaderboard(submissions, progress, user) {
  const rows = {};
  const currentUserKey = lm3GetUserKey(user);

rows.current = {
    id: "current",
    name: "You",
    aura: progress.aura,
    title: progress.equippedTitle || lm3GetRank(progress.aura),
  };

(LM3_SAMPLE_SUBMISSIONS || []).forEach((item) => {
    const key = item._user?.id || item._user?.name;
    const current = rows[key] || {
      id: key,
      name: item._user?.name || "Campus student",
      aura: 0,
      title: "Certified Sidequester",
    };

current.aura += 40 + (item.votes?.length || 0) * 6;
    rows[key] = current;
  });

(submissions || []).forEach((item) => {
    const key = item._user?.id || item._user?.name || item.id;
    if (key === currentUserKey) return;
    const current = rows[key] || {
      id: key,
      name: item._user?.name || "Campus student",
      aura: 0,
      title: "Sidequest Champion",
    };

current.aura += (item.rewardAura ?? 20) + (item.votes?.length || 0) * 5;
    current.title = lm3GetRank(current.aura);
    rows[key] = current;
  });

return Object.keys(rows || {})
    .map((key) => rows[key])
    .sort((a, b) => b.aura - a.aura)
    .slice(0, 8);
}

function Lm3BottomNav({ activeTab, setActiveTab }) {
  return (
    <nav className="bottomNav" style={LM3_S.bottomNav} aria-label="LifeMaxxing tabs">
      {(LM3_TABS || []).map((tab) => (
        <button
          type="button"
          key={tab.id}
          className={activeTab === tab.id ? "isActive" : ""}
          style={{ ...LM3_S.navButton, ...(activeTab === tab.id ? LM3_S.navActive : {}) }}
          onClick={() => setActiveTab(tab.id)}
        >
          <span style={{ display: "block", fontSize: 16, lineHeight: 1 }}>{tab.icon}</span>
          <span>{tab.label}</span>
        </button>
      ))}
    </nav>
  );
}

function Lm3RuntimeApp({
  user,
  data,
  setData,
  isMultiplayer,
  sharedData,
  setSharedData,
  patchSharedData,
  pushToSharedArray,
  pickAndUploadPhoto,
  resolveImageUrl,
  openAuth,
  openProfile,
  ai,
}) {
  const [activeTab, setActiveTab] = React.useState("feed");
  const [selectedQuestId, setSelectedQuestId] = React.useState(LM3_QUESTS[0].id);
  const rootRef = React.useRef(null);
  const dataRef = React.useRef(data);
  const sharedDataRef = React.useRef(sharedData);

// Production strips <style> tags from mini-app JSX, so the stylesheet (incl. the
  // pixel-font @import) must be injected into the document head via ownerDocument.
  React.useEffect(() => {
    const doc = rootRef.current && rootRef.current.ownerDocument;
    if (!doc || !doc.head) return;
    let styleEl = doc.getElementById("lm3-retro-css");
    if (!styleEl) {
      styleEl = doc.createElement("style");
      styleEl.id = "lm3-retro-css";
      doc.head.appendChild(styleEl);
    }
    styleEl.textContent = LM3_CSS;
  }, []);

React.useEffect(() => {
    if (data !== null && data !== undefined) {
      dataRef.current = data;
    }
  }, [data]);

React.useEffect(() => {
    if (sharedData !== null && sharedData !== undefined) {
      sharedDataRef.current = sharedData;
    }
  }, [sharedData]);

// Initialize drops in state from data or randomly
  const initialDrops = React.useMemo(() => {
    const shuffled = [...LM3_QUESTS].sort(() => 0.5 - Math.random());
    const now = Date.now();
    return (shuffled || []).slice(0, 4).map((q, idx) => ({
      ...q,
      instanceId: `drop_${q.id}_${now}_${idx}`,
      droppedAt: now - (idx * 45 + Math.floor(Math.random() * 30)) * 60 * 1000,
    }));
  }, []);

const [activeDrops, setActiveDrops] = React.useState(() => {
    if (latestData && Array.isArray(latestData.activeDrops)) {
      return latestData.activeDrops;
    }
    return initialDrops;
  });

React.useEffect(() => {
    if (data && Array.isArray(data.activeDrops)) {
      setActiveDrops(data.activeDrops);
    }
  }, [data]);

const [isTriggering, setIsTriggering] = React.useState(false);
  const [toastMessage, setToastMessage] = React.useState("");

function triggerNewDrop() {
    if (isTriggering) return;
    setIsTriggering(true);
    setToastMessage("");

setTimeout(() => {
      const activeIds = (activeDrops || []).map((d) => d.id);
      const candidates = (LM3_QUESTS || []).filter((q) => !(activeIds || []).includes(q.id));
      const pool = (candidates || []).length ? candidates : LM3_QUESTS;
      const randomQuest = pool[Math.floor(Math.random() * (pool || []).length)];

const now = Date.now();
      const newDrop = {
        ...randomQuest,
        instanceId: `drop_${randomQuest.id}_${now}_${activeDrops.length}`,
        droppedAt: now,
      };

setTimeout(() => {
        setToastMessage("");
      }, 4000);
    }, 1200);
  }

function saveDataPatch(patch) {
    const nextData = {
      ...(dataRef.current || {}),
      ...patch,
    };

dataRef.current = nextData;
    setData?.(nextData);
  }

function setProgress(nextProgress) {
    const safeProgress = lm3NormalizeProgress(nextProgress);
    saveDataPatch({ progress: safeProgress });
  }

const nextSharedData = {
      ...(sharedDataRef.current || {}),
      ...patch,
    };

sharedDataRef.current = nextSharedData;
    setSharedData?.(nextSharedData);
  }

function appendSubmission(submission) {
    // 1. Always save to local data feed so the user never loses their post
    const localLatest = dataRef.current || {};
    const localCurrent = Array.isArray(localLatest.submissions) ? localLatest.submissions : [];
    const nextLocal = [submission, ...(localCurrent || []).filter((item) => item.id !== submission.id)];
    saveDataPatch({ submissions: nextLocal });

// 2. Save to shared feed if multiplayer session is active
    if (usesSharedFeed) {
      const sharedLatest = sharedDataRef.current || {};
      const sharedCurrent = Array.isArray(sharedLatest.submissions) ? sharedLatest.submissions : [];
      const nextShared = [submission, ...(sharedCurrent || []).filter((item) => item.id !== submission.id)];
      sharedDataRef.current = {
        ...sharedLatest,
        submissions: nextShared,
      };

if (pushToSharedArray) {
        pushToSharedArray("submissions", submission);
      } else {
        saveSharedPatch({ submissions: nextShared });
      }
    }
  }

function voteSubmission(item) {
    if (item.isSample) return;

const updateVotes = (currentItems) =>
      (currentItems || []).map((entry) => {
        if (entry.id !== item.id) return entry;

const votes = Array.isArray(entry.votes) ? entry.votes : [];
        const nextVotes = (votes || []).includes(userKey)
          ? (votes || []).filter((vote) => vote !== userKey)
          : [...votes, userKey];

return {
          ...entry,
          votes: nextVotes,
        };
      });

if (usesSharedFeed) {
      const latest = sharedDataRef.current || {};
      const current = lm3MergeSubmissions(latest.submissions, latestShared.submissions, [item]);
      saveSharedPatch({ submissions: updateVotes(current) });
    } else {
      const latest = dataRef.current || {};
      const current = Array.isArray(latest.submissions) ? latest.submissions : [];
      saveDataPatch({ submissions: updateVotes(current) });
    }

const alreadyVoted = (progress.votedSubmissionIds || []).includes(item.id);
    setProgress({
      ...progress,
      aura: progress.aura + (alreadyVoted ? -2 : 2),
      votedSubmissionIds: alreadyVoted
        ? (progress.votedSubmissionIds || []).filter((id) => id !== item.id)
        : lm3UniqueList([...progress.votedSubmissionIds, item.id]),
    });
  }

const sortedSubmissions = React.useMemo(
    () => [...submissions].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)),
    [submissions]
  );

return (
    <div className="lifeApp" style={LM3_S.app} ref={rootRef}>
      <Lm3AppHeader progress={progress} activeTab={activeTab} setActiveTab={setActiveTab} />

{activeTab === "quests" ? (
        <Lm3QuestsScreen
          activeDrops={activeDrops}
          selectedQuestId={selectedQuestId}
          setSelectedQuestId={setSelectedQuestId}
          isTriggering={isTriggering}
          triggerNewDrop={triggerNewDrop}
          toastMessage={toastMessage}
          progress={progress}
          setProgress={setProgress}
          appendSubmission={appendSubmission}
          user={user}
          isMultiplayer={isMultiplayer}
          pickAndUploadPhoto={pickAndUploadPhoto}
          resolveImageUrl={resolveImageUrl}
          openAuth={openAuth}
          ai={ai}
          setActiveTab={setActiveTab}
        />
      ) : null}

{activeTab === "feed" ? (
        <Lm3FeedScreen
          submissions={sortedSubmissions}
          resolveImageUrl={resolveImageUrl}
          onVote={voteSubmission}
          progress={progress}
          user={user}
          openProfile={openProfile}
        />
      ) : null}

{activeTab === "rank" ? (
        <Lm3RankScreen
          submissions={sortedSubmissions}
          progress={progress}
          setProgress={setProgress}
          user={user}
        />
      ) : null}

<Lm3BottomNav activeTab={activeTab} setActiveTab={setActiveTab} />
    </div>
  );
}

return Lm3RuntimeApp;
})();</article></body></html>