Feat/further improve match creation ux

.github/workflows/api-staging-cd.yml

@@ -22,12 +22,17 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - id: "setup-qemu"
       - id: "setup-qemu"
         name: Set up QEMU
         uses: docker/setup-qemu-action@v3
+      - id: "docker-buildx-setup"
       - id: "docker-buildx-setup"
         name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+      - id: "auth"
+        name: "Authenticate to Google Cloud"
+        uses: "google-github-actions/auth@v2"
       - id: "auth"
         name: "Authenticate to Google Cloud"
         uses: "google-github-actions/auth@v2"
@@ -36,13 +41,18 @@ jobs:
           token_format: access_token
           workload_identity_provider: "projects/5685154754/locations/global/workloadIdentityPools/cd-beerpong/providers/github-actions"
           service_account: "cd-beerpong@beer-pong-441815.iam.gserviceaccount.com"
+      - id: "login-gar"
+          workload_identity_provider: "projects/5685154754/locations/global/workloadIdentityPools/cd-beerpong/providers/github-actions"
+          service_account: "cd-beerpong@beer-pong-441815.iam.gserviceaccount.com"
       - id: "login-gar"
         name: "Login to GAR"
         uses: docker/login-action@v3
         with:
           registry: europe-west10-docker.pkg.dev/beer-pong-441815/api-beerpong
           username: oauth2accesstoken
           password: ${{ steps.auth.outputs.access_token }}
+      - id: "build-and-push"
+        name: "Build and Push docker Image"
       - id: "build-and-push"
         name: "Build and Push docker Image"
         uses: docker/build-push-action@v6
@@ -66,6 +76,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - id: "auth"
+        name: "Authenticate to Google Cloud"
+        uses: "google-github-actions/auth@v2"
       - id: "auth"
         name: "Authenticate to Google Cloud"
         uses: "google-github-actions/auth@v2"
@@ -74,13 +87,19 @@ jobs:
           token_format: access_token
           workload_identity_provider: "projects/5685154754/locations/global/workloadIdentityPools/cd-beerpong/providers/github-actions"
           service_account: "cd-beerpong@beer-pong-441815.iam.gserviceaccount.com"
+      - id: "deploy"
+        uses: "google-github-actions/deploy-cloudrun@v2"
+          workload_identity_provider: "projects/5685154754/locations/global/workloadIdentityPools/cd-beerpong/providers/github-actions"
+          service_account: "cd-beerpong@beer-pong-441815.iam.gserviceaccount.com"
       - id: "deploy"
         uses: "google-github-actions/deploy-cloudrun@v2"
         with:
+          service: "api-springboot-staging"
+          image: "europe-west10-docker.pkg.dev/beer-pong-441815/api-beerpong/api-staging:${{ github.sha }}"
           service: "api-springboot-staging"
           image: "europe-west10-docker.pkg.dev/beer-pong-441815/api-beerpong/api-staging:${{ github.sha }}"
           region: europe-west10
-          flags: "--port=8080 --add-cloudsql-instances=beer-pong-441815:europe-west10:api-beerpong-pg --no-cpu-throttling --min-instances 0 --max-instances 1 --allow-unauthenticated"
+          flags: "--port=8080 --add-cloudsql-instances=beer-pong-441815:europe-west10:beerpong-staging-db --no-cpu-throttling --min-instances 0 --max-instances 1 --allow-unauthenticated"
           env_vars: |
             POSTGRES_USER=postgres
             POSTGRES_URL=jdbc:postgresql:///beerpong-staging?cloudSqlInstance=beer-pong-441815:europe-west10:api-beerpong-pg&socketFactory=com.google.cloud.sql.postgres.SocketFactory

mobile-app/api/calls/groupHooks.ts

@@ -82,8 +82,6 @@ export const useUpdateGroupWallpaperMutation = () => {
         mutationFn: async (body) => {
             const { byteArray, mimeType, ...rest } = body;
 
-            (await api).fetchData({ id: '' });
-
             const res = await (
                 await api
             )

mobile-app/api/calls/playerHooks.ts

@@ -84,8 +84,6 @@ export const useUpdatePlayerAvatarMutation = () => {
         mutationFn: async (body) => {
             const { byteArray, mimeType, ...rest } = body;
 
-            (await api).fetchData({ id: '' });
-
             const res = await (
                 await api
             )

mobile-app/app/(tabs)/_layout.tsx

@@ -87,22 +87,18 @@ export default function TabLayout() {
                     ...groupHeader,
                 }}
             />
-            {env.isDev && (
-                <Tabs.Screen
-                    name="rules"
-                    options={{
-                        title: 'Rules',
-                        tabBarIcon: ({ color }) => (
-                            <Icon
-                                color={color}
-                                size={32}
-                                name="format-section"
-                            />
-                        ),
-                        ...groupHeader,
-                    }}
-                />
-            )}
+            <Tabs.Screen
+                name="rules"
+                options={{
+                    title: 'Rules',
+                    tabBarIcon: ({ color }) => (
+                        <Icon color={color} size={32} name="format-section" />
+                    ),
+                    ...groupHeader,
+                    // hide tab in production
+                    href: env.isDev ? undefined : null,
+                }}
+            />
             <Tabs.Screen
                 name="settings"
                 options={{

mobile-app/app/(tabs)/newMatch.tsx

@@ -31,6 +31,7 @@ export default function Screen() {
 
     async function onSubmit() {
         nav.navigate('newMatchPoints');
+        nav.navigate('assignPointsToPlayerModal', { pageIdx: 0 });
     }
 
     return (

mobile-app/app/_layout.tsx

@@ -47,6 +47,11 @@ function Everything() {
             <Stack.Screen name="createNewPlayer" options={modalStyles} />
 
             <Stack.Screen name="editRankPlayersBy" options={modalStyles} />
+
+            <Stack.Screen
+                name="assignPointsToPlayerModal"
+                options={modalStyles}
+            />
         </Stack>
     );
 }

mobile-app/app/assignPointsToPlayerModal.tsx

@@ -0,0 +1,95 @@
+import { useLocalSearchParams } from 'expo-router';
+import React, { useState } from 'react';
+
+import { usePlayersQuery } from '@/api/calls/playerHooks';
+import { useMoves } from '@/api/calls/ruleHooks';
+import { useGroup } from '@/api/calls/seasonHooks';
+import { TeamMember } from '@/api/utils/matchDtoToMatch';
+import AssignPointsToPlayerModal from '@/components/AssignPointsToPlayerModal';
+import { useMatchDraftStore } from '@/zustand/matchDraftStore';
+
+import { useNavigation } from './navigation/useNavigation';
+
+export default function Page() {
+    const { pageIdx: initialPageIdx } = useLocalSearchParams<{
+        pageIdx: string;
+    }>();
+
+    const nav = useNavigation();
+
+    const [pageIdx, setPageIdx] = useState(parseInt(initialPageIdx));
+
+    const matchDraft = useMatchDraftStore();
+
+    const { groupId, seasonId } = useGroup();
+
+    const movesQuery = useMoves(groupId, seasonId);
+
+    const allowedMoves = movesQuery.data?.data ?? [];
+
+    const playersQuery = usePlayersQuery(groupId, seasonId);
+
+    const profiles = playersQuery.data?.data ?? [];
+
+    const players = matchDraft.actions.getPlayers();
+
+    const teamMembers = players.map<TeamMember>((i) => {
+        const profile = profiles.find((j) => i.playerId === j.id);
+
+        if (!profile?.profile?.name) {
+            throw new Error('failed to get profile for team member');
+        }
+
+        return {
+            id: i.playerId,
+            team: i.team,
+            avatarUrl: profile.profile.avatarAsset?.url,
+            name: profile.profile.name || 'Unknown',
+            points: i.moves.reduce(
+                (sum, j) =>
+                    sum +
+                    j.count *
+                        (allowedMoves.find((k) => k.id === j.moveId)
+                            ?.pointsForScorer ?? 0),
+                0
+            ),
+            change: 0.12,
+            moves: allowedMoves.map((j) => {
+                return {
+                    id: j.id!,
+                    count: i.moves.find((k) => k.moveId === j.id)?.count ?? 0,
+                    title: j.name || 'Unknown',
+                    points: j.pointsForScorer!,
+                    pointsForTeam: j.pointsForTeam!,
+                    isFinish: j.finishingMove!,
+                };
+            }),
+        };
+    });
+
+    const match = {
+        blueCups: players
+            .filter((i) => i.team === 'blue')
+            .map((i) => i.moves)
+            .flat()
+            .reduce((sum, i) => sum + i.count, 0),
+        redCups: players
+            .filter((i) => i.team === 'red')
+            .map((i) => i.moves)
+            .flat()
+            .reduce((sum, i) => sum + i.count, 0),
+        redTeam: teamMembers.filter((i) => i.team === 'red'),
+        blueTeam: teamMembers.filter((i) => i.team === 'blue'),
+    };
+
+    return (
+        <AssignPointsToPlayerModal
+            onClose={nav.goBack}
+            pageIdx={pageIdx}
+            setPageIdx={setPageIdx}
+            match={match}
+            isVisible={pageIdx != null}
+            setMoveCount={matchDraft.actions.setMoveCount}
+        />
+    );
+}

mobile-app/app/navigation/useNavigation.ts

@@ -30,6 +30,8 @@ export type RootStackParamList = {
     'static/aboutPremium': undefined;
     'static/aboutUs': undefined;
     debugLog: undefined;
+
+    assignPointsToPlayerModal: { pageIdx: number };
 };
 export type StackNavigation = NavigationProp<RootStackParamList>;
 

mobile-app/app/newMatchPoints.tsx

@@ -6,10 +6,10 @@
 import { useGroup } from '@/api/calls/seasonHooks';
 import { TeamMember } from '@/api/utils/matchDtoToMatch';
 import { useNavigation } from '@/app/navigation/useNavigation';
 import AssignFinishModeModal from '@/components/AssignFinishMoveModal';
 import AssignPointsToPlayerModal from '@/components/AssignPointsToPlayerModal';
 import CreateMatchAssignPoints from '@/components/screens/CreateMatchAssignPoints';
 import { Feature } from '@/constants/Features';
 import { showErrorToast } from '@/toast';
 import { ConsoleLogger } from '@/utils/logging';
 import { useMatchDraftStore } from '@/zustand/matchDraftStore';
@@ -84,8 +84,10 @@
     async function onSubmit() {
         if (!groupId || !seasonId) return;
 
-        if (Feature.POINTS_ASSIGNMENT_MODAL.isEnabled && !isValidGame) {
-            setShowFinishMoveModal(true);
+        if (!isValidGame) {
+            nav.navigate('assignPointsToPlayerModal', {
+                pageIdx: teamMembers.length,
+            });
 
             return;
         }
@@ -105,62 +107,20 @@
     }
 
     return (
-        <>
-            {Feature.POINTS_ASSIGNMENT_MODAL.isEnabled && (
-                <AssignPointsToPlayerModal
-                    onClose={() => setPlayerIdx(null)}
-                    playerIdx={playerIdx}
-                    setPlayerIdx={setPlayerIdx}
-                    match={{
-                        blueCups: players
-                            .filter((i) => i.team === 'blue')
-                            .map((i) => i.moves)
-                            .flat()
-                            .reduce((sum, i) => sum + i.count, 0),
-                        redCups: players
-                            .filter((i) => i.team === 'red')
-                            .map((i) => i.moves)
-                            .flat()
-                            .reduce((sum, i) => sum + i.count, 0),
-                        redTeam: teamMembers.filter((i) => i.team === 'red'),
-                        blueTeam: teamMembers.filter((i) => i.team === 'blue'),
-                    }}
-                    editable
-                    isVisible={playerIdx != null}
-                    setMoveCount={matchDraft.actions.setMoveCount}
-                />
-            )}
-            <AssignFinishModeModal
-                onSubmit={(playerId, moveId) =>
-                    matchDraft.actions.setMoveCount(playerId, moveId, 1)
-                }
-                onClose={() => setShowFinishMoveModal(false)}
-                isVisible={showFinishMoveModal}
-                match={{
-                    blueCups: players
-                        .filter((i) => i.team === 'blue')
-                        .map((i) => i.moves)
-                        .flat()
-                        .reduce((sum, i) => sum + i.count, 0),
-                    redCups: players
-                        .filter((i) => i.team === 'red')
-                        .map((i) => i.moves)
-                        .flat()
-                        .reduce((sum, i) => sum + i.count, 0),
-                    redTeam: teamMembers.filter((i) => i.team === 'red'),
-                    blueTeam: teamMembers.filter((i) => i.team === 'blue'),
-                }}
-            />
-            <CreateMatchAssignPoints
-                players={teamMembers}
-                setMoveCount={matchDraft.actions.setMoveCount}
-                onSubmit={onSubmit}
-                onPlayerPress={(player) =>
-                    setPlayerIdx(
-                        teamMembers.findIndex((i) => i.id === player.id)
-                    )
-                }
-            />
-        </>
+        <CreateMatchAssignPoints
+            players={teamMembers}
+            setMoveCount={matchDraft.actions.setMoveCount}
+            onSubmit={onSubmit}
+            onCancel={() => {
+                matchDraft.actions.clear();
+                nav.goBack();
+            }}
+            onPlayerPress={(player) =>
+                // setPageIdx(teamMembers.findIndex((i) => i.id === player.id))
+                nav.navigate('assignPointsToPlayerModal', {
+                    pageIdx: teamMembers.findIndex((i) => i.id === player.id),
+                })
+            }
+        />
     );
 }

mobile-app/components/AssignPointsToPlayerModal/FinishMovePage.tsx

@@ -0,0 +1,61 @@
+import { ScrollView, View } from 'react-native';
+
+import { PerformedMove, TeamMember } from '@/api/utils/matchDtoToMatch';
+
+import Select from '../Select';
+import Text from '../Text';
+
+export default function FinishMovePage({
+    finisher,
+    onSetFinishMove,
+}: {
+    finisher?: TeamMember | null;
+    onSetFinishMove: (move: PerformedMove) => void;
+}) {
+    return (
+        <View style={{ flex: 1, width: '100%' }}>
+            <View
+                style={{
+                    alignItems: 'center',
+
+                    flex: 1,
+                }}
+            >
+                <Text color="primary" variant="h3">
+                    {finisher
+                        ? `How did ${finisher.name} score the final cup?`
+                        : 'Error'}
+                </Text>
+                <ScrollView
+                    style={{
+                        width: '100%',
+                    }}
+                    contentContainerStyle={{
+                        paddingHorizontal: 16,
+                        paddingTop: 96,
+                        paddingBottom: 32,
+                    }}
+                >
+                    <Select
+                        items={(finisher?.moves ?? [])
+                            .filter((i) => i.isFinish)
+                            .map((i) => ({
+                                value: i.id,
+                                title: i.title,
+                            }))}
+                        value={
+                            finisher?.moves.find(
+                                (i) => i.isFinish && i.count > 0
+                            )?.id
+                        }
+                        onChange={(move) =>
+                            onSetFinishMove(
+                                finisher?.moves.find((i) => i.id === move)!
+                            )
+                        }
+                    />
+                </ScrollView>
+            </View>
+        </View>
+    );
+}