Android build v1.0.36

src/components/TalentScreen.tsx

@@ -16,6 +16,18 @@ type Props = {
 
 const EFFECT_SLOT_LEVELS = [5, 10, 15, 20] as const
 const EFFECT_CLASS_ID = 1
+const EFFECT_SOURCE_LABELS: Record<string, string> = {
+  mend: 'Mend',
+  radiance: 'Radiance',
+  shield: 'Shield',
+}
+
+function effectSource(effectType: string) {
+  if (effectType.startsWith('mend_')) return 'mend'
+  if (effectType.startsWith('radiance_')) return 'radiance'
+  if (effectType.startsWith('shield_') || effectType.startsWith('shielded_')) return 'shield'
+  return effectType
+}
 
 function effectCapacity(level: number) {
   return EFFECT_SLOT_LEVELS.filter((slotLevel) => level >= slotLevel).length
@@ -59,6 +71,9 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
   function lockReason(talent: Talent) {
     if (!isEffectClass) return 'Coming soon'
     if (talent.rank > 0) return ''
+    const source = effectSource(talent.effectType)
+    const sourceConflict = selectedEffects.find((effect) => effectSource(effect.effectType) === source)
+    if (sourceConflict) return `${EFFECT_SOURCE_LABELS[source] ?? source} already selected`
     if (capacity <= 0) return 'Unlocks at level 5'
     if (selectedEffects.length >= capacity) {
       return `Active slots full (${capacity}/${capacity})`
@@ -182,6 +197,33 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
               </div>
               <span>{selectedEffects.length}/{capacity} active</span>
             </div>
+            <div className="selected-effect-strip">
+              <div>
+                <p className="eyebrow">Selected Effect</p>
+                {selectedTalent ? (
+                  <>
+                    <strong>{selectedTalent.name}</strong>
+                    <small>{selectedTalent.description}</small>
+                  </>
+                ) : (
+                  <small>No effect selected.</small>
+                )}
+              </div>
+              {selectedTalent && (
+                <button
+                  className="primary-button"
+                  disabled={Boolean(lockReason(selectedTalent)) || busyTalentId === selectedTalent.id}
+                  onClick={() => toggleEffect(selectedTalent)}
+                  type="button"
+                >
+                  {busyTalentId === selectedTalent.id
+                    ? 'Saving...'
+                    : selectedTalent.rank > 0
+                      ? 'Remove'
+                      : 'Activate'}
+                </button>
+              )}
+            </div>
             <div className="effect-pool">
               {gameClass.talents.map((talent) => {
                 const reason = lockReason(talent)
@@ -210,30 +252,6 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
               })}
             </div>
           </section>
-
-          <aside className="effect-detail-panel">
-            <p className="eyebrow">Selected Effect</p>
-            {selectedTalent ? (
-              <>
-                <h2>{selectedTalent.name}</h2>
-                <p>{selectedTalent.description}</p>
-                <button
-                  className="primary-button"
-                  disabled={Boolean(lockReason(selectedTalent)) || busyTalentId === selectedTalent.id}
-                  onClick={() => toggleEffect(selectedTalent)}
-                  type="button"
-                >
-                  {busyTalentId === selectedTalent.id
-                    ? 'Saving...'
-                    : selectedTalent.rank > 0
-                      ? 'Remove Effect'
-                      : 'Activate Effect'}
-                </button>
-              </>
-            ) : (
-              <p>No effect selected.</p>
-            )}
-          </aside>
         </div>
       )}