Updated Logo :')

android/.idea/.name

@@ -0,0 +1 @@
+MagicCounter

android/.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">

android/.idea/vcs.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
   </component>
 </project>

android/app/build.gradle.kts

@@ -1,3 +1,5 @@
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
@@ -13,8 +15,8 @@ android {
         applicationId = "com.atridad.magiccounter"
         minSdk = 31
         targetSdk = 36
-        versionCode = 2
-        versionName = "1.2.0"
+        versionCode = 5
+        versionName = "1.4.1"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
@@ -34,9 +36,7 @@ android {
         targetCompatibility = JavaVersion.VERSION_17
     }
 
-    kotlinOptions {
-        jvmTarget = "17"
-    }
+    kotlin { compilerOptions { jvmTarget.set(JvmTarget.JVM_17) } }
 
     java {
         toolchain {

android/app/src/main/java/com/atridad/magiccounter/ui/MagicCounterApp.kt

@@ -175,6 +175,8 @@ fun MagicCounterApp() {
                             .padding(paddingValues)
                             .fillMaxSize(),
                         state = stateForGame,
+                        matchName = record?.name ?: "Game",
+                        startedAtEpochMs = record?.startedAtEpochMs ?: System.currentTimeMillis(),
                         onProgress = { updated ->
                             val current = historyState.value
                             val idx = current.indexOfFirst { it.id == id }
@@ -392,13 +394,19 @@ private fun HomeScreen(
                                 style = MaterialTheme.typography.bodyLarge,
                                 color = MaterialTheme.colorScheme.onSurfaceVariant
                             )
-                            val status = if (rec.state.stopped) "Stopped" else "Finished"
-                            val winner = rec.winnerPlayerId?.let { " • Winner: Player ${it + 1}" } ?: ""
-                            val statusText = if (winner.isNotEmpty()) "$status$winner" else status
+                            val winnerId = rec.winnerPlayerId ?: rec.state.winnerPlayerId
+                            val winnerName = winnerId?.let { wId ->
+                                rec.state.players.find { it.id == wId }?.name
+                            }
+                            val statusText = when {
+                                winnerName != null -> "Winner: $winnerName"
+                                rec.state.stopped -> "Stopped"
+                                else -> "Finished"
+                            }
                             Text(
                                 statusText,
                                 style = MaterialTheme.typography.bodyMedium,
-                                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f)
+                                color = if (winnerName != null) Color(0xFF2E7D32) else MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f)
                             )
                         }
                         Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
@@ -483,5 +491,3 @@ private fun GameDuration(
         color = color.copy(alpha = 0.8f)
     )
 }
-
-

android/app/src/main/java/com/atridad/magiccounter/ui/state/GameState.kt

@@ -21,9 +21,8 @@ data class GameState(
     val startingLife: Int,
     val trackPoison: Boolean,
     val trackCommanderDamage: Boolean,
-    val stopped: Boolean = false
+    val stopped: Boolean = false,
+    val winnerPlayerId: Int? = null
 )
 
 fun defaultPlayerName(index: Int): String = "Player ${index + 1}"
-
-

android/app/src/main/java/com/atridad/magiccounter/ui/theme/CustomIcons.kt

@@ -201,6 +201,25 @@ object CustomIcons {
         close()
     }.build()
 
+    fun Droplet(color: Color = Color.Black): ImageVector = ImageVector.Builder(
+        name = "Droplet",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ).path(
+        fill = SolidColor(color)
+    ) {
+        moveTo(12f, 2.69f)
+        lineTo(17.66f, 8.35f)
+        curveTo(19.1f, 9.79f, 20f, 11.79f, 20f, 14f)
+        curveTo(20f, 18.42f, 16.42f, 22f, 12f, 22f)
+        curveTo(7.58f, 22f, 4f, 18.42f, 4f, 14f)
+        curveTo(4f, 11.79f, 4.9f, 9.79f, 6.34f, 8.35f)
+        lineTo(12f, 2.69f)
+        close()
+    }.build()
+
     fun Sword(color: Color = Color.Black): ImageVector = ImageVector.Builder(
         name = "Sword",
         defaultWidth = 24.dp,

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector
+    android:height="108dp"
+    android:width="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#3DDC84"
+          android:pathData="M0,0h108v108h-108z"/>
+    <path android:fillColor="#00000000" android:pathData="M9,0L9,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,0L19,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,0L29,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,0L39,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,0L49,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,0L59,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,0L69,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,0L79,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M89,0L89,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M99,0L99,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,9L108,9"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,19L108,19"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,29L108,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,39L108,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,49L108,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,59L108,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,69L108,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,79L108,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,89L108,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,99L108,99"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,29L89,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,39L89,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,49L89,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,59L89,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,69L89,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,79L89,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,19L29,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,19L39,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,19L49,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,19L59,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,19L69,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,19L79,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+</vector>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@android:color/transparent" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground" />
-    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@android:color/transparent" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground" />
-    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#000000</color>
+</resources>

android/gradle/libs.versions.toml

@@ -1,23 +1,23 @@
 [versions]
-agp = "8.12.1"
-kotlin = "2.0.21"
-coreKtx = "1.10.1"
+agp = "8.12.3"
+kotlin = "2.3.0"
+coreKtx = "1.17.0"
 junit = "4.13.2"
-junitVersion = "1.1.5"
-espressoCore = "3.5.1"
-appcompat = "1.6.1"
-material = "1.10.0"
-constraintlayout = "2.1.4"
-lifecycleLivedataKtx = "2.6.1"
-lifecycleViewmodelKtx = "2.6.1"
-navigationFragmentKtx = "2.6.0"
-navigationUiKtx = "2.6.0"
-composeBom = "2024.10.01"
-activityCompose = "1.9.2"
-lifecycleRuntimeCompose = "2.8.6"
-lifecycleViewmodelCompose = "2.8.6"
-datastore = "1.1.1"
-serialization = "1.7.3"
+junitVersion = "1.3.0"
+espressoCore = "3.7.0"
+appcompat = "1.7.1"
+material = "1.13.0"
+constraintlayout = "2.2.1"
+lifecycleLivedataKtx = "2.10.0"
+lifecycleViewmodelKtx = "2.10.0"
+navigationFragmentKtx = "2.9.6"
+navigationUiKtx = "2.9.6"
+composeBom = "2025.12.01"
+activityCompose = "1.12.2"
+lifecycleRuntimeCompose = "2.10.0"
+lifecycleViewmodelCompose = "2.10.0"
+datastore = "1.2.0"
+serialization = "1.9.0"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }

ios/MagicCounter.xcodeproj/project.pbxproj

@@ -411,22 +411,22 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2;
+				CURRENT_PROJECT_VERSION = 6;
 				DEVELOPMENT_TEAM = 4BC9Y2LL4B;
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_KEY_CFBundleDisplayName = MagicCounter;
+				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.games";
 				INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
 				INFOPLIST_KEY_UILaunchScreen_Generation = YES;
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
+				INFOPLIST_KEY_UISupportedInterfaceOrientations = "UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown";
 				IPHONEOS_DEPLOYMENT_TARGET = 17.6;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.1.0;
+				MARKETING_VERSION = 1.2.1;
 				PRODUCT_BUNDLE_IDENTIFIER = com.atridad.MagicCounter;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				STRING_CATALOG_GENERATE_SYMBOLS = YES;
@@ -446,22 +446,22 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2;
+				CURRENT_PROJECT_VERSION = 6;
 				DEVELOPMENT_TEAM = 4BC9Y2LL4B;
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_KEY_CFBundleDisplayName = MagicCounter;
+				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.games";
 				INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
 				INFOPLIST_KEY_UILaunchScreen_Generation = YES;
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
+				INFOPLIST_KEY_UISupportedInterfaceOrientations = "UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown";
 				IPHONEOS_DEPLOYMENT_TARGET = 17.6;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.1.0;
+				MARKETING_VERSION = 1.2.1;
 				PRODUCT_BUNDLE_IDENTIFIER = com.atridad.MagicCounter;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				STRING_CATALOG_GENERATE_SYMBOLS = YES;

ios/MagicCounter/Components.swift

@@ -6,46 +6,126 @@
 //
 
 import SwiftUI
+import Combine
 
 /**
  * A circular button with an icon, used for game controls.
+ * Supports optional long press to trigger a custom delta prompt.
  */
 struct CircleButton: View {
     let icon: String
     let color: Color
     let size: CGFloat
     let action: () -> Void
+    var onLongPress: (() -> Void)? = nil
 
-    init(icon: String, color: Color, size: CGFloat = 44, action: @escaping () -> Void) {
+    init(icon: String, color: Color, size: CGFloat = 44, action: @escaping () -> Void, onLongPress: (() -> Void)? = nil) {
         self.icon = icon
         self.color = color
         self.size = size
         self.action = action
+        self.onLongPress = onLongPress
     }
 
     var body: some View {
-        Button(action: action) {
-            Image(systemName: icon)
-                .font(size < 40 ? .caption : .title3)
-                .frame(width: size, height: size)
-                .background(color.opacity(0.2))
-                .clipShape(Circle())
-                .foregroundStyle(color)
+        Image(systemName: icon)
+            .font(size < 40 ? .caption : .title3)
+            .frame(width: size, height: size)
+            .background(color.opacity(0.2))
+            .clipShape(Circle())
+            .foregroundStyle(color)
+            .contentShape(Circle())
+            .onTapGesture {
+                action()
+            }
+            .onLongPressGesture(minimumDuration: 0.5) {
+                onLongPress?()
+            }
+    }
+}
+
+/**
+ * A view that shows the accumulated delta change near a counter button.
+ * Automatically fades out after a delay.
+ */
+struct DeltaIndicator: View {
+    let delta: Int
+    let alignment: HorizontalAlignment
+
+    var body: some View {
+        if delta != 0 {
+            Text(delta > 0 ? "+\(delta)" : "\(delta)")
+                .font(.system(size: 16, weight: .bold, design: .rounded))
+                .foregroundStyle(delta > 0 ? .green : .red)
+                .opacity(0.8)
+                .transition(.opacity.combined(with: .scale))
         }
     }
 }
 
+/**
+ * Observable class to manage delta accumulation and fade-out timing.
+ */
+class DeltaTracker: ObservableObject {
+    @Published var delta: Int = 0
+    private var resetTimer: Timer?
+
+    func addDelta(_ amount: Int) {
+        delta += amount
+        resetTimer?.invalidate()
+        resetTimer = Timer.scheduledTimer(withTimeInterval: 2.0, repeats: false) { [weak self] _ in
+            withAnimation(.easeOut(duration: 0.3)) {
+                self?.delta = 0
+            }
+        }
+    }
+
+    func reset() {
+        resetTimer?.invalidate()
+        delta = 0
+    }
+}
+
 /**
  * A control for adjusting a large numerical value (like Life).
+ * Shows delta indicators and supports long-press for custom delta input.
  */
 struct LifeCounterControl: View {
     let value: Int
     let onDecrease: () -> Void
     let onIncrease: () -> Void
+    var onCustomDelta: ((Int) -> Void)? = nil
+
+    @StateObject private var deltaTracker = DeltaTracker()
+    @State private var showingCustomDeltaAlert = false
+    @State private var customDeltaText = ""
+    @State private var isIncreasing = true
 
     var body: some View {
         HStack(spacing: 16) {
-            CircleButton(icon: "minus", color: .red, action: onDecrease)
+            ZStack {
+                CircleButton(
+                    icon: "minus",
+                    color: .red,
+                    action: {
+                        onDecrease()
+                        withAnimation(.easeOut(duration: 0.15)) {
+                            deltaTracker.addDelta(-1)
+                        }
+                    },
+                    onLongPress: {
+                        isIncreasing = false
+                        customDeltaText = ""
+                        showingCustomDeltaAlert = true
+                        Haptics.play(.medium)
+                    }
+                )
+
+                if deltaTracker.delta < 0 {
+                    DeltaIndicator(delta: deltaTracker.delta, alignment: .trailing)
+                        .offset(y: -35)
+                }
+            }
 
             Text("\(value)")
                 .font(.system(size: 56, weight: .bold, design: .rounded))
@@ -53,14 +133,53 @@ struct LifeCounterControl: View {
                 .lineLimit(1)
                 .foregroundStyle(.primary)
 
-            CircleButton(icon: "plus", color: .green, action: onIncrease)
+            ZStack {
+                CircleButton(
+                    icon: "plus",
+                    color: .green,
+                    action: {
+                        onIncrease()
+                        withAnimation(.easeOut(duration: 0.15)) {
+                            deltaTracker.addDelta(1)
+                        }
+                    },
+                    onLongPress: {
+                        isIncreasing = true
+                        customDeltaText = ""
+                        showingCustomDeltaAlert = true
+                        Haptics.play(.medium)
+                    }
+                )
+
+                if deltaTracker.delta > 0 {
+                    DeltaIndicator(delta: deltaTracker.delta, alignment: .leading)
+                        .offset(y: -35)
+                }
+            }
         }
         .padding(.horizontal, 16)
+        .alert("Enter Amount", isPresented: $showingCustomDeltaAlert) {
+            TextField("Amount", text: $customDeltaText)
+                .keyboardType(.numberPad)
+            Button("Cancel", role: .cancel) { }
+            Button(isIncreasing ? "Add" : "Subtract") {
+                if let amount = Int(customDeltaText), amount > 0 {
+                    let delta = isIncreasing ? amount : -amount
+                    onCustomDelta?(delta)
+                    withAnimation(.easeOut(duration: 0.15)) {
+                        deltaTracker.addDelta(delta)
+                    }
+                }
+            }
+        } message: {
+            Text(isIncreasing ? "Enter the amount to add" : "Enter the amount to subtract")
+        }
     }
 }
 
 /**
  * A smaller control for adjusting secondary values (like Poison).
+ * Shows delta indicators and supports long-press for custom delta input.
  */
 struct SmallCounterControl: View {
     let value: Int
@@ -68,10 +187,40 @@ struct SmallCounterControl: View {
     let color: Color
     let onDecrease: () -> Void
     let onIncrease: () -> Void
+    var onCustomDelta: ((Int) -> Void)? = nil
+
+    @StateObject private var deltaTracker = DeltaTracker()
+    @State private var showingCustomDeltaAlert = false
+    @State private var customDeltaText = ""
+    @State private var isIncreasing = true
 
     var body: some View {
         HStack(spacing: 4) {
-            CircleButton(icon: "minus", color: .gray, size: 24, action: onDecrease)
+            ZStack {
+                CircleButton(
+                    icon: "minus",
+                    color: .gray,
+                    size: 24,
+                    action: {
+                        onDecrease()
+                        withAnimation(.easeOut(duration: 0.15)) {
+                            deltaTracker.addDelta(-1)
+                        }
+                    },
+                    onLongPress: {
+                        isIncreasing = false
+                        customDeltaText = ""
+                        showingCustomDeltaAlert = true
+                        Haptics.play(.medium)
+                    }
+                )
+
+                if deltaTracker.delta < 0 {
+                    DeltaIndicator(delta: deltaTracker.delta, alignment: .trailing)
+                        .font(.system(size: 12, weight: .bold))
+                        .offset(y: -22)
+                }
+            }
 
             VStack(spacing: 0) {
                 Image(systemName: icon)
@@ -83,11 +232,51 @@ struct SmallCounterControl: View {
             }
             .frame(minWidth: 30)
 
-            CircleButton(icon: "plus", color: .gray, size: 24, action: onIncrease)
+            ZStack {
+                CircleButton(
+                    icon: "plus",
+                    color: .gray,
+                    size: 24,
+                    action: {
+                        onIncrease()
+                        withAnimation(.easeOut(duration: 0.15)) {
+                            deltaTracker.addDelta(1)
+                        }
+                    },
+                    onLongPress: {
+                        isIncreasing = true
+                        customDeltaText = ""
+                        showingCustomDeltaAlert = true
+                        Haptics.play(.medium)
+                    }
+                )
+
+                if deltaTracker.delta > 0 {
+                    DeltaIndicator(delta: deltaTracker.delta, alignment: .leading)
+                        .font(.system(size: 12, weight: .bold))
+                        .offset(y: -22)
+                }
+            }
         }
         .padding(6)
         .background(color.opacity(0.1))
         .cornerRadius(12)
+        .alert("Enter Amount", isPresented: $showingCustomDeltaAlert) {
+            TextField("Amount", text: $customDeltaText)
+                .keyboardType(.numberPad)
+            Button("Cancel", role: .cancel) { }
+            Button(isIncreasing ? "Add" : "Subtract") {
+                if let amount = Int(customDeltaText), amount > 0 {
+                    let delta = isIncreasing ? amount : -amount
+                    onCustomDelta?(delta)
+                    withAnimation(.easeOut(duration: 0.15)) {
+                        deltaTracker.addDelta(delta)
+                    }
+                }
+            }
+        } message: {
+            Text(isIncreasing ? "Enter the amount to add" : "Enter the amount to subtract")
+        }
     }
 }
 

ios/MagicCounter/GameView.swift

@@ -7,6 +7,7 @@
 
 import SwiftUI
 import UniformTypeIdentifiers
+import Combine
 
 /**
  * Main game screen displaying the grid of players.
@@ -19,75 +20,65 @@ struct GameView: View {
     @State private var showingStopConfirmation = false
     @State private var selectedPlayerForCommander: PlayerState?
     @State private var draggedPlayer: PlayerState?
+    @State private var elapsedTime: TimeInterval = 0
+    let match: MatchRecord
 
     init(match: MatchRecord) {
+        self.match = match
         self._gameState = State(initialValue: match.state)
     }
 
     var body: some View {
-        ZStack {
-            // Background
-            LinearGradient(colors: [Color.black, Color.indigo.opacity(0.5)], startPoint: .top, endPoint: .bottom)
-                .ignoresSafeArea()
+        NavigationStack {
+            GeometryReader { geometry in
+                let columns = [GridItem(.adaptive(minimum: 320), spacing: 24)]
+                ScrollView {
+                    VStack(alignment: .leading, spacing: 24) {
+                        // Custom Header
+                        HStack(alignment: .center, spacing: 12) {
+                            Text(match.name)
+                                .font(.largeTitle.bold())
+                                .lineLimit(1)
+                                .truncationMode(.tail)
+                                .foregroundStyle(.white)
 
-            VStack(spacing: 0) {
-                // Custom Toolbar
-                HStack {
-                    Button(action: { gameManager.activeMatch = nil }) {
-                        Image(systemName: "xmark")
-                            .font(.system(size: 16, weight: .bold))
-                            .foregroundColor(.white)
-                            .padding(10)
-                            .background(.ultraThinMaterial)
-                            .clipShape(Circle())
-                    }
+                            if !gameState.stopped && gameState.winner == nil {
+                                Text(timeString(from: elapsedTime))
+                                    .font(.subheadline.bold())
+                                    .monospacedDigit()
+                                    .foregroundStyle(.green)
+                                    .padding(.horizontal, 8)
+                                    .padding(.vertical, 4)
+                                    .background(.green.opacity(0.2))
+                                    .clipShape(Capsule())
+                            } else {
+                                Text(timeString(from: match.lastUpdated.timeIntervalSince(match.startedAt)))
+                                    .font(.subheadline.bold())
+                                    .monospacedDigit()
+                                    .foregroundStyle(.secondary)
+                                    .padding(.horizontal, 8)
+                                    .padding(.vertical, 4)
+                                    .background(.secondary.opacity(0.2))
+                                    .clipShape(Capsule())
+                            }
 
-                    Spacer()
-                    
-                    if gameState.stopped {
-                        Text("Game Stopped")
-                            .font(.headline)
-                            .foregroundStyle(.red)
-                            .padding(.horizontal, 12)
-                            .padding(.vertical, 6)
-                            .background(.ultraThinMaterial)
-                            .cornerRadius(8)
-                    } else if let winner = gameState.winner {
-                        Text("Winner: \(winner.name)")
-                            .font(.headline)
-                            .foregroundStyle(.green)
-                            .padding(.horizontal, 12)
-                            .padding(.vertical, 6)
-                            .background(.ultraThinMaterial)
-                            .cornerRadius(8)
-                    } else {
-                        Text("Magic Counter")
-                            .font(.headline)
-                            .foregroundStyle(.white)
-                    }
-                    
-                    Spacer()
-                    
-                    if !gameState.stopped && gameState.winner == nil {
-                        Button(action: { showingStopConfirmation = true }) {
-                            Image(systemName: "stop.fill")
-                                .font(.system(size: 16, weight: .bold))
-                                .foregroundColor(.white)
-                                .padding(10)
-                                .background(.ultraThinMaterial)
-                                .clipShape(Circle())
+                            Spacer()
+                        }
+                        .padding(.horizontal, 24)
+                        .padding(.top, 16)
+
+                        if gameState.stopped {
+                            Text("Game Stopped")
+                                .font(.headline)
+                                .foregroundStyle(.red)
+                                .padding(.horizontal, 24)
+                        } else if let winner = gameState.winner {
+                            Text("Winner: \(winner.name)")
+                                .font(.headline)
+                                .foregroundStyle(.green)
+                                .padding(.horizontal, 24)
                         }
-                    } else {
-                        Color.clear.frame(width: 40, height: 40)
-                    }
-                }
-                .padding()
-                .background(.ultraThinMaterial)
 
-                // Players Grid
-                GeometryReader { geometry in
-                    let columns = [GridItem(.adaptive(minimum: 320), spacing: 24)]
-                    ScrollView {
                         LazyVGrid(columns: columns, spacing: 24) {
                             ForEach(gameState.players) { player in
                                 PlayerCell(
@@ -96,20 +87,42 @@ struct GameView: View {
                                     isWinner: gameState.winner?.id == player.id,
                                     onUpdate: updatePlayer,
                                     onCommanderTap: { selectedPlayerForCommander = player },
-                                    onScoop: { scoopPlayer(player) }
+                                    onScoop: { scoopPlayer(player) },
+                                    onDragStart: {
+                                        self.draggedPlayer = player
+                                    }
                                 )
                                 .frame(height: 260)
-                                .onDrag {
-                                    self.draggedPlayer = player
-                                    return NSItemProvider(object: String(player.id) as NSString)
-                                }
                                 .onDrop(of: [.text], delegate: PlayerDropDelegate(item: player, items: $gameState.players, draggedItem: $draggedPlayer))
                             }
                         }
-                        .padding(24)
+                        .padding(.horizontal, 24)
+                        .padding(.bottom, 24)
                     }
                 }
             }
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .topBarLeading) {
+                    Button(action: { gameManager.activeMatch = nil }) {
+                        Image(systemName: "xmark")
+                    }
+                }
+
+                ToolbarItem(placement: .topBarTrailing) {
+                    if !gameState.stopped && gameState.winner == nil {
+                        Button(action: { showingStopConfirmation = true }) {
+                            Image(systemName: "stop.fill")
+                        }
+                    }
+                }
+            }
+        }
+        .onAppear {
+            updateElapsedTime()
+        }
+        .onReceive(Timer.publish(every: 1, on: .main, in: .common).autoconnect()) { _ in
+            updateElapsedTime()
         }
         .alert("Stop Game?", isPresented: $showingStopConfirmation) {
             Button("Cancel", role: .cancel) { }
@@ -138,6 +151,25 @@ struct GameView: View {
         }
     }
 
+    private func updateElapsedTime() {
+        if !gameState.stopped && gameState.winner == nil {
+            elapsedTime = Date().timeIntervalSince(match.startedAt)
+        } else {
+            elapsedTime = match.lastUpdated.timeIntervalSince(match.startedAt)
+        }
+    }
+
+    private func timeString(from timeInterval: TimeInterval) -> String {
+        let hours = Int(timeInterval) / 3600
+        let minutes = Int(timeInterval) / 60 % 60
+        let seconds = Int(timeInterval) % 60
+        if hours > 0 {
+            return String(format: "%02i:%02i:%02i", hours, minutes, seconds)
+        } else {
+            return String(format: "%02i:%02i", minutes, seconds)
+        }
+    }
+
     private func updatePlayer(player: PlayerState) {
         if gameState.stopped || gameState.winner != nil { return }
 
@@ -177,6 +209,7 @@ struct PlayerCell: View {
     let onUpdate: (PlayerState) -> Void
     let onCommanderTap: () -> Void
     let onScoop: () -> Void
+    var onDragStart: (() -> Void)? = nil
 
     @State private var showScoopConfirmation = false
 
@@ -191,19 +224,25 @@ struct PlayerCell: View {
                 )
 
             VStack(spacing: 12) {
-                // Header
+                // Header - drag handle area
                 HStack {
                     Text(player.name)
-                        .font(.headline)
+                        .font(.system(size: 22, weight: .semibold, design: .rounded))
                         .lineLimit(1)
-                        .minimumScaleFactor(0.8)
+                        .minimumScaleFactor(0.7)
                         .foregroundStyle(.primary)
+                        .onDrag {
+                            onDragStart?()
+                            return NSItemProvider(object: String(player.id) as NSString)
+                        }
+
                     Spacer()
 
                     Button(action: { showScoopConfirmation = true }) {
                         Image(systemName: "flag.fill")
+                            .font(.system(size: 18))
                             .foregroundStyle(.secondary)
-                            .padding(4)
+                            .padding(8)
                     }
                 }
                 .padding(.horizontal)
@@ -213,7 +252,8 @@ struct PlayerCell: View {
                 LifeCounterControl(
                     value: player.life,
                     onDecrease: { adjustLife(by: -1) },
-                    onIncrease: { adjustLife(by: 1) }
+                    onIncrease: { adjustLife(by: 1) },
+                    onCustomDelta: { adjustLife(by: $0) }
                 )
 
                 Spacer()
@@ -226,7 +266,8 @@ struct PlayerCell: View {
                             icon: "drop.fill",
                             color: .purple,
                             onDecrease: { adjustPoison(by: -1) },
-                            onIncrease: { adjustPoison(by: 1) }
+                            onIncrease: { adjustPoison(by: 1) },
+                            onCustomDelta: { adjustPoison(by: $0) }
                         )
                     }
 
@@ -297,6 +338,103 @@ struct PlayerCell: View {
     }
 }
 
+/**
+ * A row for managing commander damage from a single attacker.
+ * Shows delta indicators and supports long-press for custom delta input.
+ */
+struct CommanderDamageRow: View {
+    let attackerName: String
+    let attackerId: Int
+    let currentDamage: Int
+    let onAdjust: (Int) -> Void
+
+    @StateObject private var deltaTracker = DeltaTracker()
+    @State private var showingCustomDeltaAlert = false
+    @State private var customDeltaText = ""
+    @State private var isIncreasing = true
+
+    var body: some View {
+        HStack {
+            Text(attackerName)
+                .font(.headline)
+            Spacer()
+            HStack(spacing: 16) {
+                ZStack {
+                    CircleButton(
+                        icon: "minus",
+                        color: .secondary,
+                        action: {
+                            onAdjust(-1)
+                            withAnimation(.easeOut(duration: 0.15)) {
+                                deltaTracker.addDelta(-1)
+                            }
+                        },
+                        onLongPress: {
+                            isIncreasing = false
+                            customDeltaText = ""
+                            showingCustomDeltaAlert = true
+                            Haptics.play(.medium)
+                        }
+                    )
+                    .buttonStyle(.borderless)
+
+                    if deltaTracker.delta < 0 {
+                        DeltaIndicator(delta: deltaTracker.delta, alignment: .trailing)
+                            .offset(y: -30)
+                    }
+                }
+
+                Text("\(currentDamage)")
+                    .font(.title.bold())
+                    .frame(minWidth: 40)
+                    .multilineTextAlignment(.center)
+
+                ZStack {
+                    CircleButton(
+                        icon: "plus",
+                        color: .primary,
+                        action: {
+                            onAdjust(1)
+                            withAnimation(.easeOut(duration: 0.15)) {
+                                deltaTracker.addDelta(1)
+                            }
+                        },
+                        onLongPress: {
+                            isIncreasing = true
+                            customDeltaText = ""
+                            showingCustomDeltaAlert = true
+                            Haptics.play(.medium)
+                        }
+                    )
+                    .buttonStyle(.borderless)
+
+                    if deltaTracker.delta > 0 {
+                        DeltaIndicator(delta: deltaTracker.delta, alignment: .leading)
+                            .offset(y: -30)
+                    }
+                }
+            }
+        }
+        .padding(.vertical, 8)
+        .alert("Enter Amount", isPresented: $showingCustomDeltaAlert) {
+            TextField("Amount", text: $customDeltaText)
+                .keyboardType(.numberPad)
+            Button("Cancel", role: .cancel) { }
+            Button(isIncreasing ? "Add" : "Subtract") {
+                if let amount = Int(customDeltaText), amount > 0 {
+                    let delta = isIncreasing ? amount : -amount
+                    onAdjust(delta)
+                    withAnimation(.easeOut(duration: 0.15)) {
+                        deltaTracker.addDelta(delta)
+                    }
+                }
+            }
+        } message: {
+            Text(isIncreasing ? "Enter the amount to add" : "Enter the amount to subtract")
+        }
+    }
+}
+
 /**
  * Sheet for managing commander damage received by a player.
  *
@@ -310,34 +448,24 @@ struct CommanderDamageView: View {
     let gameState: GameState
     let onUpdate: (PlayerState) -> Void
 
+    init(targetPlayer: PlayerState, gameState: GameState, onUpdate: @escaping (PlayerState) -> Void) {
+        self.targetPlayer = targetPlayer
+        self.gameState = gameState
+        self.onUpdate = onUpdate
+    }
+
     var body: some View {
         NavigationStack {
             List {
                 ForEach(gameState.players.filter { $0.id != targetPlayer.id }) { attacker in
-                    HStack {
-                        Text(attacker.name)
-                            .font(.headline)
-                        Spacer()
-                        HStack(spacing: 16) {
-                            CircleButton(
-                                icon: "minus",
-                                color: .secondary,
-                                action: { adjustCommanderDamage(attackerId: attacker.id, by: -1) }
-                            )
-                            
-                            Text("\(targetPlayer.commanderDamages[attacker.id] ?? 0)")
-                                .font(.title.bold())
-                                .frame(minWidth: 40)
-                                .multilineTextAlignment(.center)
-                            
-                            CircleButton(
-                                icon: "plus",
-                                color: .primary,
-                                action: { adjustCommanderDamage(attackerId: attacker.id, by: 1) }
-                            )
+                    CommanderDamageRow(
+                        attackerName: attacker.name,
+                        attackerId: attacker.id,
+                        currentDamage: targetPlayer.commanderDamages[attacker.id] ?? 0,
+                        onAdjust: { amount in
+                            adjustCommanderDamage(attackerId: attacker.id, by: amount)
                         }
-                    }
-                    .padding(.vertical, 8)
+                    )
                 }
             }
             .navigationTitle("Commander Damage to \(targetPlayer.name)")
@@ -352,14 +480,28 @@ struct CommanderDamageView: View {
 
     private func adjustCommanderDamage(attackerId: Int, by amount: Int) {
         Haptics.play(.light)
-        var newPlayer = targetPlayer
-        var damages = newPlayer.commanderDamages
-        let current = damages[attackerId] ?? 0
-        damages[attackerId] = max(0, current + amount)
-        newPlayer.commanderDamages = damages
-        onUpdate(newPlayer)
+        let wasEliminated = targetPlayer.isEliminated
 
-        if newPlayer.isEliminated && !targetPlayer.isEliminated {
+        // Get current damage value
+        let current = targetPlayer.commanderDamages[attackerId] ?? 0
+        let newDamage = max(0, current + amount)
+
+        // Only proceed if there's an actual change
+        guard newDamage != current else { return }
+
+        // Update commander damages
+        var updatedPlayer = targetPlayer
+        var damages = updatedPlayer.commanderDamages
+        damages[attackerId] = newDamage
+        updatedPlayer.commanderDamages = damages
+
+        // Adjust life total by the damage change
+        updatedPlayer.life -= amount
+
+        // Notify parent to update
+        onUpdate(updatedPlayer)
+
+        if updatedPlayer.isEliminated && !wasEliminated {
             Haptics.notification(.error)
         }
     }

ios/MagicCounter/Logo.icon/icon.json

@@ -7,15 +7,63 @@
     {
       "layers" : [
         {
-          "image-name" : "logo 2.png",
-          "name" : "logo",
+          "image-name" : "MagicCounter4.png",
+          "name" : "MagicCounter4",
           "position" : {
-            "scale" : 0.85,
+            "scale" : 0.2,
+            "translation-in-points" : [
+              -280,
+              280
+            ]
+          }
+        },
+        {
+          "image-name" : "MagicCounter5.png",
+          "name" : "MagicCounter5",
+          "position" : {
+            "scale" : 0.2,
+            "translation-in-points" : [
+              280,
+              280
+            ]
+          }
+        },
+        {
+          "image-name" : "MagicCounter6.png",
+          "name" : "MagicCounter6",
+          "position" : {
+            "scale" : 0.2,
+            "translation-in-points" : [
+              -280,
+              -280
+            ]
+          }
+        },
+        {
+          "image-name" : "MagicCounter3.png",
+          "name" : "MagicCounter3",
+          "position" : {
+            "scale" : 0.2,
             "translation-in-points" : [
               0,
               0
             ]
           }
+        },
+        {
+          "image-name" : "MagicCounter2.png",
+          "name" : "MagicCounter2",
+          "position" : {
+            "scale" : 0.2,
+            "translation-in-points" : [
+              280,
+              -280
+            ]
+          }
+        },
+        {
+          "image-name" : "MagicCounter.png",
+          "name" : "MagicCounter"
         }
       ],
       "shadow" : {