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,39 +1,40 @@
 interface Character {
-    type: 'character'
+  type: "character"
 
-    id: string
+  id: string
-    granblue_id: string
+  granblue_id: string
-    element: number
+  character_id: readonly number[]
-    rarity: number
+  element: number
-    gender: number
+  rarity: number
-    max_level: number
+  gender: number
-    name: { 
+  max_level: number
-        [key: string]: string
+  name: {
-        en: string
+    [key: string]: string
-        ja: string
+    en: string
-    }
+    ja: string
-    hp: {
+  }
-        min_hp: number
+  hp: {
-        max_hp: number
+    min_hp: number
-        max_hp_flb: number
+    max_hp: number
-    }
+    max_hp_flb: number
-    atk: {
+  }
-        min_atk: number
+  atk: {
-        max_atk: number
+    min_atk: number
-        max_atk_flb: number
+    max_atk: number
-    }
+    max_atk_flb: number
-    uncap: {
+  }
-        flb: boolean
+  uncap: {
-        ulb: boolean
+    flb: boolean
-    }
+    ulb: boolean
-    race: {
+  }
-        race1: number
+  race: {
-        race2: number
+    race1: number
-    }
+    race2: number
-    proficiency: {
+  }
-        proficiency1: number
+  proficiency: {
-        proficiency2: number
+    proficiency1: number
-    }
+    proficiency2: number
-    position?: number
+  }
-    special: boolean
+  position?: number
+  special: boolean
 }

utils/api.tsx

@@ -1,9 +1,10 @@
 import axios, { Axios, AxiosRequestConfig, AxiosResponse } from "axios"
 
 interface Entity {
-    name: string
+  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>>
@@ -12,101 +13,117 @@ type PutEndpoint  = (id: string, object: {}, headers?: {}) => Promise<AxiosRespo
 type DestroyEndpoint = ({ id, params }: { id: string, params?: {} }) => Promise<AxiosResponse<any>>
 
 interface EndpointMap {
-    getAll: CollectionEndpoint
+  getAll: CollectionEndpoint
-    getOne: IdEndpoint
+  getOne: IdEndpoint
-    getOneWithObject: IdWithObjectEndpoint
+  getOneWithObject: IdWithObjectEndpoint
-    create: PostEndpoint
+  create: PostEndpoint
-    update: PutEndpoint
+  update: PutEndpoint
-    destroy: DestroyEndpoint
+  destroy: DestroyEndpoint
 }
 
 class Api {
-    url: string
+  url: string
-    endpoints: { [key: string]: EndpointMap }
+  endpoints: { [key: string]: EndpointMap }
   
-    constructor({url}: {url: string}) {
+  constructor({url}: {url: string}) {
-        this.url = url
+    this.url = url
-        this.endpoints = {}
+    this.endpoints = {}
+  }
+  
+  createEntity(entity: Entity) {
+    this.endpoints[entity.name] = this.createEndpoints(entity)
+  }
+  
+  createEntities(entities: Entity[]) {
+    entities.forEach(this.createEntity.bind(this))
+  }
+  
+  createEndpoints({name}: {name: string}) {
+    const resourceUrl = `${this.url}/${name}`
+    
+    return {
+      getAll:  (params?: {}) => axios.get(resourceUrl, params),
+      getOne:  ({ id, params }: { id: string, params?: {} }) => axios.get(`${resourceUrl}/${id}/`, params),
+      getOneWithObject:  ({ id, object, params }: { id: string, object: string, params?: {} }) => axios.get(`${resourceUrl}/${id}/${object}`, params),
+      create:  (object: {}, headers?: {}) => axios.post(resourceUrl, object, headers),
+      update:  (id: string, object: {}, headers?: {}) => axios.put(`${resourceUrl}/${id}`, object, headers),
+      destroy: ({ id, params }: { id: string, params?: {} }) => axios.delete(`${resourceUrl}/${id}`, params)
+    } as EndpointMap
+  }
+  
+  login(object: {}) {
+    const oauthUrl = process.env.NEXT_PUBLIC_SIERO_OAUTH_URL || 'https://localhost:3000/oauth'
+    return axios.post(`${ oauthUrl }/token`, object)
+  }
+  
+  search({ object, query, filters, locale = "en", page = 0 }: 
+  { object: string, query: string, filters?: { [key: string]: number[] }, locale?: string,  page?: number }) {
+    const resourceUrl = `${this.url}/${name}`
+    return axios.post(`${resourceUrl}search/${object}`, {
+      search: {
+        query: query,
+        filters: filters,
+        locale: locale,
+        page: page
+      }
+    })
+  }
+  
+  check(resource: string, value: string) {
+    const resourceUrl = `${this.url}/check/${resource}`
+    return axios.post(resourceUrl, {
+      [resource]: value
+    })
+  }
+  
+  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)
+  }
   
-    createEntity(entity: Entity) {
+  saveTeam({ id, params }: { id: string, params?: {} }) {
-        this.endpoints[entity.name] = this.createEndpoints(entity)
+    const body = { favorite: { party_id: id } }
-    }
+    const resourceUrl = `${this.url}/favorites`
+    return axios.post(resourceUrl, body, { headers: params })
+  }
   
-    createEntities(entities: Entity[]) {
+  unsaveTeam({ id, params }: { id: string, params?: {} }) {
-        entities.forEach(this.createEntity.bind(this))
+    const body = { favorite: { party_id: id } }
-    }
+    const resourceUrl = `${this.url}/favorites`
+    return axios.delete(resourceUrl, { data: body, headers: params })
+  }
   
-    createEndpoints({name}: {name: string}) {
+  updateUncap(resource: 'character'|'weapon'|'summon', id: string, value: number) {
-        const resourceUrl = `${this.url}/${name}`
+    const pluralized = resource + 's'
+    const resourceUrl = `${this.url}/${pluralized}/update_uncap`
+    return axios.post(resourceUrl, {
+      [resource]: {
+        id: id,
+        uncap_level: value
+      }
+    })
+  }
   
-        return {
+  userInfo(id: string) {
-            getAll:  (params?: {}) => axios.get(resourceUrl, params),
+    const resourceUrl = `${this.url}/users/info/${id}`
-            getOne:  ({ id, params }: { id: string, params?: {} }) => axios.get(`${resourceUrl}/${id}/`, params),
+    return axios.get(resourceUrl)
-            getOneWithObject:  ({ id, object, params }: { id: string, object: string, params?: {} }) => axios.get(`${resourceUrl}/${id}/${object}`, params),
+  }
-            create:  (object: {}, headers?: {}) => axios.post(resourceUrl, object, headers),
-            update:  (id: string, object: {}, headers?: {}) => axios.put(`${resourceUrl}/${id}`, object, headers),
-            destroy: ({ id, params }: { id: string, params?: {} }) => axios.delete(`${resourceUrl}/${id}`, params)
-        } as EndpointMap
-    }
-
-    login(object: {}) {
-        const oauthUrl = process.env.NEXT_PUBLIC_SIERO_OAUTH_URL || 'https://localhost:3000/oauth'
-        return axios.post(`${ oauthUrl }/token`, object)
-    }
-
-    search({ object, query, filters, locale = "en", page = 0 }: 
-           { object: string, query: string, filters?: { [key: string]: number[] }, locale?: string,  page?: number }) {
-        const resourceUrl = `${this.url}/${name}`
-        return axios.post(`${resourceUrl}search/${object}`, {
-            search: {
-                query: query,
-                filters: filters,
-                locale: locale,
-                page: page
-            }
-        })
-    }
-
-    check(resource: string, value: string) {
-        const resourceUrl = `${this.url}/check/${resource}`
-        return axios.post(resourceUrl, {
-            [resource]: value
-        })
-    }
-
-    savedTeams(params: {}) {
-        const resourceUrl = `${this.url}/parties/favorites`
-        return axios.get(resourceUrl, params)
-    }
-
-    saveTeam({ id, params }: { id: string, params?: {} }) {
-        const body = { favorite: { party_id: id } }
-        const resourceUrl = `${this.url}/favorites`
-        return axios.post(resourceUrl, body, { headers: params })
-    }
-
-    unsaveTeam({ id, params }: { id: string, params?: {} }) {
-        const body = { favorite: { party_id: id } }
-        const resourceUrl = `${this.url}/favorites`
-        return axios.delete(resourceUrl, { data: body, headers: params })
-    }
-
-    updateUncap(resource: 'character'|'weapon'|'summon', id: string, value: number) {
-        const pluralized = resource + 's'
-        const resourceUrl = `${this.url}/${pluralized}/update_uncap`
-        return axios.post(resourceUrl, {
-            [resource]: {
-                id: id,
-                uncap_level: value
-            }
-        })
-    }
-
-    userInfo(id: string) {
-        const resourceUrl = `${this.url}/users/info/${id}`
-        return axios.get(resourceUrl)
-    }
 }
 
 const api: Api = new Api({ url: process.env.NEXT_PUBLIC_SIERO_API_URL || 'https://localhost:3000/api/v1'})

utils/appState.tsx

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