feat: add relic run depth and vercel web config

Author: tobiasmullett-svg

app/game.tsx

@@ -8,7 +8,7 @@ import { Vec2 } from '../engine/math';
 import {
   initGameState, updateGame, extractHudData,
   activateAbility, pauseGame, resumeGame,
-  applyLevelUpChoice, startNextWave,
+  applyLevelUpChoice, applyRelicChoice, startNextWave,
 } from '../engine/GameEngine';
 import { saveHighScore } from '../services/storage';
 import { CHARACTERS, WEAPONS, EVOLVED_WEAPONS, ITEM_DEFS } from '../engine/data';
@@ -26,6 +26,7 @@ import HUD from '../components/game/HUD';
 import AbilityButton from '../components/game/AbilityButton';
 import PauseOverlay from '../components/game/PauseOverlay';
 import LevelUpModal from '../components/game/LevelUpModal';
+import RelicModal from '../components/game/RelicModal';
 import ShopOverlay from '../components/game/ShopOverlay';
 import GameOverOverlay from '../components/game/GameOverOverlay';
 import Minimap from '../components/game/Minimap';
@@ -37,7 +38,7 @@ const defaultHud: HudData = {
   hp: 100, maxHp: 100, armor: 0, waveNum: 1, waveTimer: 25, waveMaxTime: 25,
   materials: 0, level: 1, xp: 0, xpToNext: 10,
   abilityCd: 0, abilityMaxCd: 30, abilityEmoji: '\u2B50', phase: 'waveAnnounce',
-  comboCount: 0, comboTimer: 0, bestCombo: 0,
+  comboCount: 0, comboTimer: 0, comboMaxTime: 3.2, bestCombo: 0,
   petCount: 0, resourceCount: 0,
   equippedWeapons: [],
 };
@@ -385,6 +386,15 @@ export default function GameScreen() {
     }
   }, [currentRunKey]);
 
+  const handleRelicChoice = useCallback((idx: number) => {
+    const state = gameRef.current;
+    if (state && applyRelicChoice(state, idx)) {
+      phaseRef.current = state.phase;
+      setPhaseState({ runKey: currentRunKey, phase: state.phase });
+      setHudData(extractHudData(state));
+    }
+  }, [currentRunKey]);
+
   const handleNextWave = useCallback(() => {
     const state = gameRef.current;
     if (state) {
@@ -523,6 +533,12 @@ export default function GameScreen() {
           onChoose={handleLevelUp}
         />
       )}
+      {activePhase === 'relic' && (
+        <RelicModal
+          options={state?.relicChoices ?? []}
+          onChoose={handleRelicChoice}
+        />
+      )}
       {activePhase === 'shopping' && (
         <ShopOverlay gameState={gameRef} onNextWave={handleNextWave} />
       )}
@@ -563,6 +579,10 @@ export default function GameScreen() {
           items={(state?.player?.items ?? []).map(it => ({
             emoji: ITEM_DEFS.find(d => d.id === it?.id)?.emoji ?? '?',
           }))}
+          relics={(state?.relics ?? []).map(relic => ({
+            emoji: relic.emoji,
+            name: relic.name,
+          }))}
           achievements={runAchievements}
           onRetry={handleRetry}
           onMenu={handleMenu}

components/game/GameCanvas.tsx

@@ -44,6 +44,8 @@ export default function GameCanvas({ gameState, frame }: Props) {
   const visibleEffects = (effects ?? []).filter(fx => vis(fx.x, fx.y));
   const visibleDeathParticles = (deathParticles ?? []).filter(dp => vis(dp.x, dp.y));
   const visibleDmgNums = (dmgNums ?? []).filter(d => vis(d.x, d.y));
+  const relicIds = new Set((state.relics ?? []).map(relic => relic.id));
+  const effectivePickupRange = p.pickupRange * (relicIds.has('abyssalMagnet') ? 1.9 : 1) * (1 + p.luck * 0.01);
   const crowded = state.wave.number >= 5 || visibleEnemies.length + visibleProjectiles.length > 45 || visibleEffects.length + visibleDmgNums.length > 35;
   const displayProjectiles = crowded ? visibleProjectiles.slice(0, 48) : visibleProjectiles;
   const displayEffects = crowded ? visibleEffects.filter(fx => fx.kind !== 'muzzle' && fx.kind !== 'spark').slice(-14) : visibleEffects;
@@ -105,7 +107,7 @@ export default function GameCanvas({ gameState, frame }: Props) {
           const dx = pk.x - p.x;
           const dy = pk.y - p.y;
           const dist = Math.sqrt(dx * dx + dy * dy);
-          const inMagnet = dist < p.pickupRange && dist > 12;
+          const inMagnet = dist < effectivePickupRange && dist > 12;
           const trailColor = pk.type === 'egg' ? 'rgba(251,191,36,0.5)' : pk.type === 'heal' ? 'rgba(34,197,94,0.5)' : 'rgba(45,212,191,0.4)';
           return (
             <React.Fragment key={pk.id}>
@@ -185,8 +187,9 @@ export default function GameCanvas({ gameState, frame }: Props) {
         })}
         {/* Enemies */}
         {visibleEnemies.map(e => {
-          const showTelegraph = e.telegraphTimer > 0 && e.telegraphType === 'attack';
+          const showTelegraph = e.telegraphTimer > 0 && (e.telegraphType === 'attack' || e.telegraphType === 'charge');
           const telegraphProg = showTelegraph ? 1 - (e.telegraphTimer / e.telegraphMax) : 0;
+          const chargeTelegraph = e.telegraphType === 'charge';
           const isElite = e.elite !== 'none';
           const visualFontSize = e.fontSize + (e.isBoss ? 0 : 2);
           return (
@@ -220,10 +223,22 @@ export default function GameCanvas({ gameState, frame }: Props) {
                 }]} />
               )}
               {showTelegraph && (
-                <View style={s.telegraphBarBg}>
-                  <View style={[s.telegraphBar, { width: `${Math.min(100, Math.max(8, telegraphProg * 100))}%` }]} />
+                <View style={[s.telegraphBarBg, chargeTelegraph && s.chargeTelegraphBarBg]}>
+                  <View style={[s.telegraphBar, chargeTelegraph && s.chargeTelegraphBar, { width: `${Math.min(100, Math.max(8, telegraphProg * 100))}%` }]} />
                 </View>
               )}
+              {chargeTelegraph && (
+                <View style={[
+                  s.chargeWarn,
+                  {
+                    width: e.radius * 4.8,
+                    left: e.radius - e.radius * 2.4,
+                    top: e.radius + 8,
+                    opacity: 0.3 + telegraphProg * 0.45,
+                    transform: [{ rotate: `${Math.atan2(e.chargeVy, e.chargeVx)}rad` }],
+                  },
+                ]} />
+              )}
               <Text style={[s.entity, s.enemyEmoji, e.flashTimer > 0 && s.enemyEmojiHit, { fontSize: visualFontSize, opacity: e.flashTimer > 0 ? 0.45 : 1 }]}>
                 {e.isBoss ? '👑' : ''}{e.emoji}
               </Text>
@@ -469,6 +484,26 @@ export default function GameCanvas({ gameState, frame }: Props) {
               </React.Fragment>
             );
           }
+          if (fx.kind === 'smoke') {
+            return (
+              <View
+                key={fx.id}
+                style={[
+                  s.smokeFx,
+                  {
+                    left: fx.x - fx.radius * (0.4 + prog * 0.3),
+                    top: fx.y - fx.radius * (0.4 + prog * 0.3),
+                    width: fx.radius * (0.8 + prog * 0.6),
+                    height: fx.radius * (0.45 + prog * 0.45),
+                    borderRadius: fx.radius,
+                    backgroundColor: fx.color,
+                    opacity: (1 - prog) * 0.18,
+                    transform: [{ rotate: `${fx.angle}rad` }, { scale: 0.9 + prog * 0.8 }],
+                  },
+                ]}
+              />
+            );
+          }
           if (fx.kind === 'burst') {
             return (
               <React.Fragment key={fx.id}>
@@ -767,6 +802,9 @@ const s = StyleSheet.create({
   eliteAura: { position: 'absolute', borderWidth: 2, backgroundColor: 'transparent' },
   telegraphBarBg: { position: 'absolute', top: -8, width: 24, height: 3, borderRadius: 2, backgroundColor: 'rgba(239,68,68,0.18)', overflow: 'hidden' },
   telegraphBar: { height: 3, borderRadius: 2, backgroundColor: '#EF4444' },
+  chargeTelegraphBarBg: { backgroundColor: 'rgba(56,189,248,0.18)' },
+  chargeTelegraphBar: { backgroundColor: '#38BDF8' },
+  chargeWarn: { position: 'absolute', height: 4, borderRadius: 3, backgroundColor: '#38BDF8', shadowColor: '#38BDF8', shadowOpacity: 0.6, shadowRadius: 8, shadowOffset: { width: 0, height: 0 } },
   hpBarBg: { width: 30, height: 3, backgroundColor: 'rgba(255,255,255,0.15)', borderRadius: 2, marginTop: 2 },
   hpBar: { height: 3, backgroundColor: '#EF4444', borderRadius: 2 },
   playerWrap: { position: 'absolute', alignItems: 'center', width: 48 },
@@ -801,6 +839,7 @@ const s = StyleSheet.create({
   shieldBar: { height: 2, backgroundColor: '#2DD4BF', borderRadius: 1 },
   sparkFx: { position: 'absolute' },
   sparkRay: { position: 'absolute', height: 2, borderRadius: 1 },
+  smokeFx: { position: 'absolute' },
   burstFx: { position: 'absolute', borderWidth: 3, backgroundColor: 'transparent' },
   burstInner: { position: 'absolute' },
   deathParticle: { position: 'absolute', textAlign: 'center', fontWeight: '800' },

components/game/GameOverOverlay.tsx

@@ -13,12 +13,13 @@ interface Props {
   victory: boolean;
   weapons: { id?: string; emoji: string; evolved?: boolean }[];
   items?: { emoji: string }[];
+  relics?: { emoji: string; name: string }[];
   achievements?: { name: string; emoji: string; description: string }[];
   onRetry: () => void;
   onMenu: () => void;
 }
 
-export default function GameOverOverlay({ stats, waveNum, materials, playerEmoji, victory, weapons, items = [], achievements = [], onRetry, onMenu }: Props) {
+export default function GameOverOverlay({ stats, waveNum, materials, playerEmoji, victory, weapons, items = [], relics = [], achievements = [], onRetry, onMenu }: Props) {
   const endedAtRef = React.useRef(Date.now());
   const elapsed = stats ? Math.round((endedAtRef.current - (stats.startTime ?? endedAtRef.current)) / 1000) : 0;
   const score = calculateRunScore({ wave: waveNum, kills: stats?.enemiesKilled ?? 0, time: elapsed });
@@ -69,6 +70,16 @@ export default function GameOverOverlay({ stats, waveNum, materials, playerEmoji
               </View>
             </View>
           )}
+          {relics.length > 0 && (
+            <View style={s.section}>
+              <Text style={s.sectionLabel}>Relics</Text>
+              <View style={s.relicRow}>
+                {relics.map((relic, i) => (
+                  <Text key={i} style={s.relicPill}>{relic.emoji} {relic.name}</Text>
+                ))}
+              </View>
+            </View>
+          )}
           {modifiers.length > 0 && (
             <View style={s.section}>
               <Text style={s.sectionLabel}>Modifiers Faced</Text>
@@ -117,6 +128,8 @@ const s = StyleSheet.create({
   itemEmoji: { fontSize: 20 },
   modRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
   modPill: { color: '#F59E0B', fontSize: 11, fontWeight: '700', backgroundColor: 'rgba(245,158,11,0.15)', borderRadius: 8, paddingHorizontal: 8, paddingVertical: 3, borderWidth: 1, borderColor: 'rgba(245,158,11,0.3)' },
+  relicRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  relicPill: { color: '#EDE9FE', fontSize: 11, fontWeight: '800', backgroundColor: 'rgba(168,85,247,0.14)', borderRadius: 8, paddingHorizontal: 8, paddingVertical: 4, borderWidth: 1, borderColor: 'rgba(168,85,247,0.3)' },
   achievementsBox: { backgroundColor: 'rgba(245,158,11,0.1)', borderRadius: 10, padding: 10, marginBottom: 12, width: '100%', borderWidth: 1, borderColor: 'rgba(245,158,11,0.25)' },
   achievementsTitle: { color: '#F59E0B', fontSize: 12, fontWeight: '800', marginBottom: 6 },
   achievementRow: { color: '#FFF', fontSize: 13, marginBottom: 3 },

components/game/HUD.tsx

@@ -99,10 +99,17 @@ export default function HUD({ data, onPause }: Props) {
           <View style={s.comboPill}>
             <Text style={s.comboText}>{data.comboCount}x</Text>
             <View style={s.comboTimerBg}>
-              <View style={[s.comboTimerFill, { width: `${Math.max(0, Math.min(100, (data.comboTimer / 3.2) * 100))}%` }]} />
+              <View style={[s.comboTimerFill, { width: `${Math.max(0, Math.min(100, (data.comboTimer / Math.max(0.1, data.comboMaxTime ?? 3.2)) * 100))}%` }]} />
             </View>
           </View>
         )}
+        {(data?.relics?.length ?? 0) > 0 && (
+          <View style={s.relicPill}>
+            {data.relics!.slice(0, 4).map(relic => (
+              <Text key={relic.id} style={s.relicText}>{relic.emoji}</Text>
+            ))}
+          </View>
+        )}
         {showModifier && data?.waveModifier && data.waveModifier !== 'none' && (
           <View style={s.modifierBanner}>
             <Text style={s.modifierText}>{MODIFIER_NAMES[data.waveModifier] ?? data.waveModifier}</Text>
@@ -165,6 +172,8 @@ const s = StyleSheet.create({
   comboText: { color: '#CCFBF1', fontSize: 15, fontWeight: '900', textShadowColor: 'rgba(0,0,0,0.6)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
   comboTimerBg: { width: 54, height: 3, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.16)', marginTop: 3, overflow: 'hidden' },
   comboTimerFill: { height: 3, borderRadius: 2, backgroundColor: '#2DD4BF' },
+  relicPill: { flexDirection: 'row', gap: 5, paddingHorizontal: 9, paddingVertical: 5, borderRadius: 10, backgroundColor: 'rgba(168,85,247,0.14)', borderWidth: 1, borderColor: 'rgba(168,85,247,0.3)' },
+  relicText: { fontSize: 13 },
   objectivePill: { paddingHorizontal: 9, paddingVertical: 5, borderRadius: 10, backgroundColor: 'rgba(15,23,42,0.72)', borderWidth: 1, borderColor: 'rgba(125,211,252,0.22)' },
   objectiveText: { color: '#BAE6FD', fontSize: 11, fontWeight: '800' },
   modifierBanner: { paddingHorizontal: 16, paddingVertical: 6, borderRadius: 12, backgroundColor: 'rgba(245,158,11,0.2)', borderWidth: 1, borderColor: 'rgba(245,158,11,0.5)' },

components/game/Minimap.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 export default function Minimap({ gameState, size = 120 }: Props) {
   const state = gameState.current;
-  if (!state || state.phase === 'gameover' || state.phase === 'paused' || state.phase === 'levelup' || state.phase === 'shopping') {
+  if (!state || state.phase === 'gameover' || state.phase === 'paused' || state.phase === 'levelup' || state.phase === 'relic' || state.phase === 'shopping') {
     return null; // Don't render during menus
   }
 

components/game/RelicModal.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import type { RelicChoice } from '../../engine/types';
+import { RARITY_COLORS } from '../../engine/constants';
+
+interface Props {
+  options: RelicChoice[];
+  onChoose: (index: number) => void;
+}
+
+export default function RelicModal({ options, onChoose }: Props) {
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(18)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacityAnim, { toValue: 1, duration: 180, useNativeDriver: true }),
+      Animated.spring(slideAnim, { toValue: 0, friction: 7, tension: 120, useNativeDriver: true }),
+    ]).start();
+  }, [opacityAnim, slideAnim]);
+
+  return (
+    <Animated.View style={[s.overlay, { opacity: opacityAnim }]}>
+      <Animated.View style={[s.panel, { transform: [{ translateY: slideAnim }] }]}>
+        <Text style={s.kicker}>BOSS RELIC</Text>
+        <Text style={s.title}>Choose a Tide Relic</Text>
+        <ScrollView contentContainerStyle={s.optionRow} showsVerticalScrollIndicator={false}>
+          {(options ?? []).map((opt, i) => {
+            const color = RARITY_COLORS[opt.rarity] ?? '#9CA3AF';
+            return (
+              <Pressable
+                key={opt.id}
+                onPress={() => onChoose(i)}
+                style={({ pressed }) => [
+                  s.option,
+                  { borderColor: color },
+                  pressed && s.optionPressed,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel={`${opt.name}. ${opt.desc} ${opt.drawback}`}
+              >
+                <Text style={s.emoji}>{opt.emoji}</Text>
+                <Text style={s.name}>{opt.name}</Text>
+                <Text style={s.desc}>{opt.desc}</Text>
+                <View style={s.tradeoff}>
+                  <Text style={s.tradeoffText}>{opt.drawback}</Text>
+                </View>
+                <Text style={[s.rarity, { color }]}>{opt.rarity.toUpperCase()}</Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+const s = StyleSheet.create({
+  overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(2,6,23,0.82)', justifyContent: 'center', alignItems: 'center', zIndex: 50, paddingHorizontal: 16 },
+  panel: { width: '100%', maxWidth: 740, maxHeight: '88%', borderRadius: 18, borderWidth: 1, borderColor: 'rgba(168,85,247,0.35)', backgroundColor: 'rgba(15,25,60,0.97)', padding: 20, shadowColor: '#A855F7', shadowOpacity: 0.28, shadowRadius: 18, shadowOffset: { width: 0, height: 0 } },
+  kicker: { color: '#A78BFA', fontSize: 11, fontWeight: '900', letterSpacing: 2, textAlign: 'center' },
+  title: { color: '#FFF', fontSize: 25, fontWeight: '900', textAlign: 'center', marginTop: 4, marginBottom: 16 },
+  optionRow: { flexDirection: 'row', gap: 10, flexWrap: 'wrap', justifyContent: 'center' },
+  option: { width: 220, minHeight: 232, borderRadius: 12, borderWidth: 2, backgroundColor: 'rgba(255,255,255,0.06)', padding: 14, alignItems: 'center' },
+  optionPressed: { transform: [{ scale: 0.98 }], backgroundColor: 'rgba(255,255,255,0.1)' },
+  emoji: { fontSize: 38, marginBottom: 8 },
+  name: { color: '#FFF', fontSize: 16, fontWeight: '900', textAlign: 'center' },
+  desc: { color: '#DDEAFE', fontSize: 12, fontWeight: '700', lineHeight: 17, textAlign: 'center', marginTop: 8 },
+  tradeoff: { marginTop: 'auto', paddingHorizontal: 9, paddingVertical: 7, borderRadius: 9, backgroundColor: 'rgba(239,68,68,0.1)', borderWidth: 1, borderColor: 'rgba(248,113,113,0.18)' },
+  tradeoffText: { color: '#FCA5A5', fontSize: 11, fontWeight: '800', lineHeight: 15, textAlign: 'center' },
+  rarity: { marginTop: 8, fontSize: 10, fontWeight: '900', letterSpacing: 1 },
+});