Merge pull request #44 from jedmund/conflict

Conflict resolution → Characters

components/CharacterConflictModal/index.scss

@@ -0,0 +1,63 @@
+.Conflict.Dialog {
+  & > p {
+    line-height: 1.2;
+    max-width: 400px;
+  }
+  img {
+    border-radius: 1rem;
+  }
+
+  .arrow {
+    color: $grey-50;
+    font-size: 4rem;
+    text-align: center;
+  }
+
+  .character {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+    text-align: center;
+    width: 12rem;
+    font-weight: $medium;
+  }
+
+  .diagram {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      gap: $unit * 2;
+    }
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+
+    .Button {
+      font-size: $font-regular;
+      padding: ($unit * 1.5) ($unit * 2);
+      width: 100%;
+
+      &.btn-disabled {
+        background: $grey-90;
+        color: $grey-70;
+        cursor: not-allowed;
+      }
+
+      &:not(.btn-disabled) {
+        background: $grey-90;
+        color: $grey-40;
+
+        &:hover {
+          background: $grey-80;
+        }
+      }
+    }
+  }
+}

components/CharacterConflictModal/index.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react"
+import { setCookie } from "cookies-next"
+import Router, { useRouter } from "next/router"
+import { useTranslation } from "react-i18next"
+import { AxiosResponse } from "axios"
+
+import * as Dialog from "@radix-ui/react-dialog"
+
+import api from "~utils/api"
+import { appState } from "~utils/appState"
+import { accountState } from "~utils/accountState"
+
+import Button from "~components/Button"
+
+import "./index.scss"
+
+interface Props {
+  open: boolean
+  incomingCharacter?: Character
+  conflictingCharacters?: GridCharacter[]
+  desiredPosition: number
+  resolveConflict: () => void
+  resetConflict: () => void
+}
+
+const CharacterConflictModal = (props: Props) => {
+  const { t } = useTranslation("common")
+
+  // States
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(props.open)
+  }, [setOpen, props.open])
+
+  function imageUrl(character?: Character, uncap: number = 0) {
+    // Change the image based on the uncap level
+    let suffix = "01"
+    if (uncap == 6) suffix = "04"
+    else if (uncap == 5) suffix = "03"
+    else if (uncap > 2) suffix = "02"
+
+    console.log(appState.grid.weapons.mainWeapon)
+    // Special casing for Lyria (and Young Cat eventually)
+    if (character?.granblue_id === "3030182000") {
+      let element = 1
+      if (
+        appState.grid.weapons.mainWeapon &&
+        appState.grid.weapons.mainWeapon.element
+      ) {
+        element = appState.grid.weapons.mainWeapon.element
+      } else if (appState.party.element != 0) {
+        element = appState.party.element
+      }
+
+      suffix = `${suffix}_0${element}`
+    }
+
+    return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${character?.granblue_id}_${suffix}.jpg`
+  }
+
+  function openChange(open: boolean) {
+    setOpen(open)
+  }
+
+  function close() {
+    setOpen(false)
+    props.resetConflict()
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={openChange}>
+      <Dialog.Portal>
+        <Dialog.Content
+          className="Conflict Dialog"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <p>
+            Only one version of a character can be included in each party. Do
+            you want to change your party members?
+          </p>
+          <div className="diagram">
+            <ul>
+              {props.conflictingCharacters?.map((character) => (
+                <li className="character">
+                  <img
+                    alt={character.object.name.en}
+                    src={imageUrl(character.object, character.uncap_level)}
+                  />
+                  <span>{character.object.name.en}</span>
+                </li>
+              ))}
+            </ul>
+            <span className="arrow">&rarr;</span>
+            <div className="character">
+              <img
+                alt={props.incomingCharacter?.name.en}
+                src={imageUrl(props.incomingCharacter)}
+              />
+              {props.incomingCharacter?.name.en}
+            </div>
+          </div>
+          <footer>
+            <Button onClick={close}>Nevermind</Button>
+            <Button onClick={props.resolveConflict}>Confirm</Button>
+          </footer>
+        </Dialog.Content>
+        <Dialog.Overlay className="Overlay" />
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+export default CharacterConflictModal

components/CharacterGrid/index.tsx

@@ -13,6 +13,8 @@ import api from "~utils/api"
 import { appState } from "~utils/appState"
 
 import "./index.scss"
+import CharacterConflictModal from "~components/CharacterConflictModal"
+import { resolve } from "path"
 
 // Props
 interface Props {
@@ -38,6 +40,12 @@ const CharacterGrid = (props: Props) => {
   // Set up state for view management
   const { party, grid } = useSnapshot(appState)
   const [slug, setSlug] = useState()
+  const [modalOpen, setModalOpen] = useState(false)
+
+  // Set up state for conflict management
+  const [incoming, setIncoming] = useState<Character>()
+  const [conflicts, setConflicts] = useState<GridCharacter[]>([])
+  const [position, setPosition] = useState(0)
 
   // Create a temporary state to store previous character uncap values
   const [previousUncapValues, setPreviousUncapValues] = useState<{
@@ -85,11 +93,22 @@ const CharacterGrid = (props: Props) => {
     } else {
       if (party.editable)
         saveCharacter(party.id, character, position)
-          .then((response) => storeGridCharacter(response.data.grid_character))
+          .then((response) => handleCharacterResponse(response.data))
           .catch((error) => console.error(error))
     }
   }
 
+  async function handleCharacterResponse(data: any) {
+    if (data.hasOwnProperty("conflicts")) {
+      setIncoming(data.incoming)
+      setConflicts(data.conflicts)
+      setPosition(data.position)
+      setModalOpen(true)
+    } else {
+      storeGridCharacter(data.grid_character)
+    }
+  }
+
   async function saveCharacter(
     partyId: string,
     character: Character,
@@ -112,6 +131,39 @@ const CharacterGrid = (props: Props) => {
     appState.grid.characters[gridCharacter.position] = gridCharacter
   }
 
+  async function resolveConflict() {
+    if (incoming && conflicts.length > 0) {
+      await api
+        .resolveCharacterConflict({
+          incoming: incoming.id,
+          conflicting: conflicts.map((c) => c.id),
+          position: position,
+          params: headers,
+        })
+        .then((response) => {
+          // Store new character in state
+          storeGridCharacter(response.data.grid_character)
+
+          // Remove conflicting characters from state
+          conflicts.forEach(
+            (c) => (appState.grid.characters[c.position] = undefined)
+          )
+
+          // Reset conflict
+          resetConflict()
+
+          // Close modal
+          setModalOpen(false)
+        })
+    }
+  }
+
+  function resetConflict() {
+    setPosition(-1)
+    setConflicts([])
+    setIncoming(undefined)
+  }
+
   // Methods: Helpers
   function characterUncapLevel(character: Character) {
     let uncapLevel
@@ -197,6 +249,14 @@ const CharacterGrid = (props: Props) => {
     <div>
       <div id="CharacterGrid">
         <JobSection />
+        <CharacterConflictModal
+          open={modalOpen}
+          incomingCharacter={incoming}
+          conflictingCharacters={conflicts}
+          desiredPosition={position}
+          resolveConflict={resolveConflict}
+          resetConflict={resetConflict}
+        />
         <ul id="grid_characters">
           {Array.from(Array(numCharacters)).map((x, i) => {
             return (

types/Character.d.ts

@@ -1,8 +1,9 @@
 interface Character {
-    type: 'character'
+  type: "character"
 
   id: string
   granblue_id: string
+  character_id: readonly number[]
   element: number
   rarity: number
   gender: number

utils/api.tsx

@@ -4,6 +4,7 @@ interface Entity {
   name: string
 }
 
+// prettier-ignore
 type CollectionEndpoint = (params?: {}) => Promise<AxiosResponse<any>>
 type IdEndpoint = ({ id, params }: { id: string, params?: {} }) => Promise<AxiosResponse<any>>
 type IdWithObjectEndpoint = ({ id, object, params }: { id: string, object: string, params?: {} }) => Promise<AxiosResponse<any>>
@@ -75,6 +76,22 @@ class Api {
     })
   }
   
+  resolveCharacterConflict({ incoming, conflicting, position, params }: {
+    incoming: string
+    conflicting: string[]
+    position: number,
+    params?: {}
+  }) {
+    const body = {
+      resolve: {
+        incoming: incoming,
+        conflicting: conflicting,
+        position: position,
+      },
+    }
+    const resourceUrl = `${this.url}/characters/resolve`
+    return axios.post(resourceUrl, body, { headers: params })
+  }
   savedTeams(params: {}) {
     const resourceUrl = `${this.url}/parties/favorites`
     return axios.get(resourceUrl, params)

utils/appState.tsx

@@ -1,4 +1,4 @@
-import { proxy } from "valtio";
+import { proxy } from "valtio"
 
 const emptyJob: Job = {
   id: "-1",
@@ -7,51 +7,51 @@ const emptyJob: Job = {
   order: 0,
   name: {
     en: "",
-        ja: ""
+    ja: "",
   },
   proficiency: {
     proficiency1: 0,
-        proficiency2: 0
+    proficiency2: 0,
-    }
+  },
 }
 
 interface AppState {
   [key: string]: any
 
   party: {
-        id: string | undefined,
+    id: string | undefined
-        editable: boolean,
+    editable: boolean
-        detailsVisible: boolean,
+    detailsVisible: boolean
-        name: string | undefined,
+    name: string | undefined
-        description: string | undefined,
+    description: string | undefined
-        job: Job,
+    job: Job
-        raid: Raid | undefined,
+    raid: Raid | undefined
-        element: number,
+    element: number
-        extra: boolean,
+    extra: boolean
-        user: User | undefined,
+    user: User | undefined
-        favorited: boolean,
+    favorited: boolean
     created_at: string
     updated_at: string
-    },
+  }
   grid: {
     weapons: {
-            mainWeapon: GridWeapon | undefined,
+      mainWeapon: GridWeapon | undefined
       allWeapons: GridArray<GridWeapon>
-        },
+    }
     summons: {
-            mainSummon: GridSummon | undefined,
+      mainSummon: GridSummon | undefined
-            friendSummon: GridSummon | undefined,
+      friendSummon: GridSummon | undefined
       allSummons: GridArray<GridSummon>
-        },
+    }
-        characters: GridArray<GridCharacter>
+    characters: GridArray<GridCharacter | undefined>
-    },
+  }
   search: {
     recents: {
       characters: Character[]
       weapons: Weapon[]
       summons: Summon[]
     }
-    },
+  }
   raids: Raid[]
 }
 
@@ -69,28 +69,28 @@ export const initialAppState: AppState = {
     user: undefined,
     favorited: false,
     created_at: new Date().toISOString(),
-        updated_at: new Date().toISOString()
+    updated_at: new Date().toISOString(),
   },
   grid: {
     weapons: {
       mainWeapon: undefined,
-            allWeapons: {}
+      allWeapons: {},
     },
     summons: {
       mainSummon: undefined,
       friendSummon: undefined,
-            allSummons: {}
+      allSummons: {},
     },
-        characters: {}
+    characters: {},
   },
   search: {
     recents: {
       characters: [],
       weapons: [],
-            summons: []
+      summons: [],
-        }
     },
-    raids: []
+  },
+  raids: [],
 }
 
 export const appState = proxy(initialAppState)