From e9c47f55cef820b4095c5856715414e28db9322b Mon Sep 17 00:00:00 2001 From: TimHasert <27998143+TimH96@users.noreply.github.com> Date: Sun, 20 Aug 2023 23:24:17 +0200 Subject: [PATCH] remove most references to charms, and remove it from frontend --- src/app/pages/index.html | 101 +------- src/app/pages/index.ts | 4 +- src/app/pages/styles.css | 48 ---- src/app/ui/charms.component.ts | 237 ------------------ src/app/ui/search-controls.component.ts | 7 +- src/app/ui/search-results.component.ts | 7 +- .../models/user/UserCharmList.ts | 122 --------- 7 files changed, 16 insertions(+), 510 deletions(-) delete mode 100644 src/app/ui/charms.component.ts delete mode 100644 src/data-provider/models/user/UserCharmList.ts diff --git a/src/app/pages/index.html b/src/app/pages/index.html index 44a2c6c..74b29c9 100644 --- a/src/app/pages/index.html +++ b/src/app/pages/index.html @@ -45,7 +45,6 @@ @@ -71,29 +70,21 @@
  • @@ -125,76 +116,6 @@
    - -
    - -
    -
      -
    • Add Charm
    • -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    • -
    • -
    • -
    - - -
    - - -
    - - - - - - - - - -
    SkillPointsSkillPointsSlotsDelete
    -
    -
    -
    diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts index 7cf0863..aa103fd 100644 --- a/src/app/pages/index.ts +++ b/src/app/pages/index.ts @@ -1,6 +1,5 @@ import { getArms, getChest, getDecorations, getHead, getLegs, getSkillActivationMap, getSkillCategories, getSkillNameMap, getWaist } from '../../data-provider/data-provider.module' import StaticSkillData from '../../data-provider/models/skills/StaticSkillData' -import { renderCharmPicker } from '../ui/charms.component' import { renderEqSettings } from '../ui/eq-settings.component' import { initiateNavbar } from '../ui/navbar.component' import { renderSkillPicker } from '../ui/picker.component' @@ -20,7 +19,7 @@ const main = async () => { ] const decorations = await getDecorations() - // load skill data and render skill picker and charms with it + // load skill data and render skill picker with it const skillData: StaticSkillData = { skillName: await getSkillNameMap(), skillActivation: await getSkillActivationMap(), @@ -29,7 +28,6 @@ const main = async () => { // render ui renderSkillPicker(skillData.skillActivation, skillData.skillCategories) - renderCharmPicker(skillData.skillName, skillData.skillActivation, skillData.skillCategories) renderEqSettings(armor) // initialize search controls diff --git a/src/app/pages/styles.css b/src/app/pages/styles.css index 80553eb..bf16a82 100644 --- a/src/app/pages/styles.css +++ b/src/app/pages/styles.css @@ -188,54 +188,6 @@ ul { padding: 0 0.4em; } -/* charms */ - -#charm-picker { - padding-bottom: 0.4em; - border-width: 0 0 1px 0; - border-style: solid; - border-color: var(--color-border); -} - -#charm-import { - margin-left: 2em; -} - -.charm-skill-pick { - width: 10em; -} - -.charm-points-pick { - width: 3em; -} - -#charm-table { - margin-top: 2em; -} - -#charm-table tr, -td, -th { - width: 6em; - text-align: center; - font-size: 1.1em; -} - -#charm-table tr { - border-width: 1px 0; - border-color: var(--color-border); - border-style: solid; -} - -#charm-table th { - background-color: var(--color-highlight); -} - -.charm-delete { - cursor: pointer; - user-select: none; -} - /* eq-settings */ #eq-container { diff --git a/src/app/ui/charms.component.ts b/src/app/ui/charms.component.ts deleted file mode 100644 index a8ff1ef..0000000 --- a/src/app/ui/charms.component.ts +++ /dev/null @@ -1,237 +0,0 @@ -import SkillActivationMap from '../../data-provider/models/skills/SkillActivationMap' -import SkillNameMap from '../../data-provider/models/skills/SkillNameMap' -import Charm from '../../data-provider/models/equipment/Charm' -import Skill from '../../data-provider/models/skills/Skill' -import UserCharmList from '../../data-provider/models/user/UserCharmList' -import { htmlToElement } from '../../helper/html.helper' -import Slots from '../../data-provider/models/equipment/Slots' -import EquipmentCategory from '../../data-provider/models/equipment/EquipmentCategory' -import GameID from '../../data-provider/models/GameId' -import { range } from '../../helper/range.helper' -import EquipmentSkills from '../../data-provider/models/equipment/EquipmentSkills' - -const saveToStorage = (skillNames: SkillNameMap) => { - window.localStorage.setItem('charms', UserCharmList.Instance.serialize(skillNames)) -} - -const getFromStorage = () => { - return window.localStorage.getItem('charms') -} - -const validSkill = (id: GameID, points: Skill) => { - return points !== 0 && id !== -1 -} - -const removeTableElement = (index: number) => { - const ele = document.getElementsByClassName(`charm-${index}`)[0] - ele.remove() -} - -const populateCharmsFromCSV = (csv: string, skillNames: SkillNameMap) => { - UserCharmList.Instance.deserialize(csv, skillNames) - UserCharmList.Instance.get().forEach((charm, i) => { - addTableElement(charm, i, skillNames) - }) -} - -const purgeTable = () => { - const entries = document.getElementsByClassName('charm-table-ele') - for (const entry of Array.from(entries)) { - entry.remove() - } -} - -const addTableElement = (charm: Charm, index: number, skillNames: SkillNameMap) => { - const ele = htmlToElement(``) - - // get real table elements - for (const skill of Array.from(charm.skills.keys())) { - ele.appendChild(htmlToElement(`${skillNames.get(skill)}`)) - ele.appendChild(htmlToElement(`${charm.skills.get(skill)}`)) - } - - // get placeholder table elements - const amountOfSkills = Array.from(charm.skills.keys()).length - // eslint-disable-next-line no-unused-vars - for (const _ in range(amountOfSkills, 2)) { - ele.appendChild(htmlToElement('')) - ele.appendChild(htmlToElement('')) - } - - // get slots and delete - ele.appendChild(htmlToElement(`${charm.slots}`)) - const d = htmlToElement('X') - d.addEventListener('click', () => removeCharm(index, skillNames)) - ele.appendChild(d) - - // add final element - const tbody = document.getElementById('charm-table')!.children[0] - tbody.appendChild(ele) -} - -const addCharm = (charm: Charm, skillNames: SkillNameMap) => { - const i = UserCharmList.Instance.add(charm) - addTableElement(charm, i - 1, skillNames) - saveToStorage(skillNames) -} - -const removeCharm = (index: number, skillNames: SkillNameMap) => { - UserCharmList.Instance.remove(index) - removeTableElement(index) - saveToStorage(skillNames) -} - -const onExportClick = (skillNames: SkillNameMap) => { - const str = UserCharmList.Instance.serialize(skillNames) - const blob = new Blob([str], { type: 'text/plain' }) - const a = document.getElementById('charm-download') as HTMLAnchorElement - const url = window.URL.createObjectURL(blob) - - a.href = url - a.download = 'charms.csv' - a.click() -} - -const onImportClick = (e: MouseEvent) => { - e.preventDefault() - - const inp = document.getElementById('charm-upload') as HTMLInputElement - inp.click() -} - -const onFileUploaded = (skillNames: SkillNameMap) => { - const inp = document.getElementById('charm-upload') as HTMLInputElement - - if (!inp.files) { - return - } - - const file = inp.files[0] - file.text().then((text) => { - try { - UserCharmList.Instance.deserialize(text, skillNames) - saveToStorage(skillNames) - purgeTable() - UserCharmList.Instance.get().forEach((charm, i) => { - addTableElement(charm, i, skillNames) - }) - } catch { - alert('Could not process file') - } - }) -} - -const onAddClick = (skillNames: SkillNameMap) => { - // parse data - const slots = parseInt((document.getElementById('charm-slots') as HTMLSelectElement).value) - const skills = [1, 2].map((x) => { - return { - id: parseInt((document.getElementById(`charm-skill-${x}-name`) as HTMLSelectElement).value), - points: parseInt((document.getElementById(`charm-skill-${x}-points`) as HTMLSelectElement).value), - } - }) - - // return if charm invalid - if (slots === 0 && !skills.some(s => validSkill(s.id, s.points))) { - return - } - - // map to model - const skillsMap = new EquipmentSkills(skills - .filter(s => validSkill(s.id, s.points)) - .map(s => [s.id, s.points])) - const charm: Charm = { - name: UserCharmList.getCharmName(skillsMap, slots as Slots, skillNames), - slots: slots as Slots, - category: EquipmentCategory.CHARM, - rarity: 0, - skills: skillsMap, - } - - // add - addCharm(charm, skillNames) -} - -const attachControlListeners = (skillNames: SkillNameMap) => { - document.getElementById('charm-add')!.addEventListener('click', () => onAddClick(skillNames)) - document.getElementById('charm-export')!.addEventListener('click', () => onExportClick(skillNames)) - document.getElementById('charm-import')!.addEventListener('click', (e) => onImportClick(e)) - document.getElementById('charm-upload')!.addEventListener('change', () => onFileUploaded(skillNames)) -} - -const populatePointsPickers = () => { - const pickers = document.getElementsByClassName('charm-points-pick') - for (const picker of Array.from(pickers)) { - for (const amount of range(-10, 11).reverse()) { - picker.appendChild(htmlToElement(` - - `)) - } - } -} - -const populateSkillsPickers = ( - skillNames: SkillNameMap, - skillActivation: SkillActivationMap, - skillCategories: string[], -) => { - const pickers = document.getElementsByClassName('charm-skill-pick') - for (const picker of Array.from(pickers)) { - // make optgroup for each category - const optGroups = skillCategories.map((category, i) => { - return htmlToElement(` - - `) - }) - - // append skill options to optgroup - skillActivation.forEach((activationList) => { - // continue if skill cant be activated -- Torso Up - if (activationList.length === 0) { - return - } - - const dummyActivation = activationList[0] - const category = dummyActivation.category - const skill = dummyActivation.requiredSkill - const name = skillNames.get(skill) - - const ele = htmlToElement(` - - `) - optGroups[category].appendChild(ele) - }) - - // add default - optGroups.unshift(htmlToElement(` - - `)) - - // add elements and select default - picker.append(...optGroups) - picker.getElementsByTagName('option')[0].selected = true - } -} - -const populateCharmPicker = ( - skillNames: SkillNameMap, - skillActivation: SkillActivationMap, - skillCategories: string[], -) => { - populatePointsPickers() - populateSkillsPickers(skillNames, skillActivation, skillCategories) -} - -export const renderCharmPicker = ( - skillNames: SkillNameMap, - skillActivation: SkillActivationMap, - skillCategories: string[], -) => { - populateCharmPicker(skillNames, skillActivation, skillCategories) - attachControlListeners(skillNames) - - const savedCharms = getFromStorage() - if (savedCharms) { - populateCharmsFromCSV(savedCharms, skillNames) - } -} diff --git a/src/app/ui/search-controls.component.ts b/src/app/ui/search-controls.component.ts index 26c72cb..d5e3c7e 100644 --- a/src/app/ui/search-controls.component.ts +++ b/src/app/ui/search-controls.component.ts @@ -1,4 +1,3 @@ -import UserCharmList from '../../data-provider/models/user/UserCharmList' import ArmorSet from '../../searcher/models/ArmorSet' import SearchConstraints from '../../searcher/models/SearchConstraints' import StaticEquipmentData from '../../data-provider/models/equipment/StaticEquipmentData' @@ -63,7 +62,7 @@ const searchLogic = (equData: StaticEquipmentData, skillData: StaticSkillData) = const result = search( equData.armor, equData.decorations, - UserCharmList.Instance.get(), + [], searchParams, skillData, ) @@ -80,8 +79,6 @@ const moreSkillsLogic = async (equData: StaticEquipmentData, skillData: StaticSk return } - const charms = UserCharmList.Instance.get() - const aquirableSkills: SkillActivation[] = [] const outputIterator = moreSkillsIterator(skillData.skillActivation) @@ -111,7 +108,7 @@ const moreSkillsLogic = async (equData: StaticEquipmentData, skillData: StaticSk const innerR = search( equData.armor, equData.decorations, - charms, + [], newParams, skillData, ) diff --git a/src/app/ui/search-results.component.ts b/src/app/ui/search-results.component.ts index 3e1067d..690193b 100644 --- a/src/app/ui/search-results.component.ts +++ b/src/app/ui/search-results.component.ts @@ -52,7 +52,6 @@ const getExpandedView = (set: ArmorSet, skillData: StaticSkillData, searchParams Arms Waist Legs - Charm Deco Total Active @@ -74,7 +73,6 @@ const getExpandedView = (set: ArmorSet, skillData: StaticSkillData, searchParams for (const p of set.getPieces()) { r.append(htmlToElement(`${p.skills.get(sId) ? p.skills.get(sId)! : ''}`)) } - r.append(htmlToElement(`${set.charm.skills.get(sId) ? set.charm.skills.get(sId)! : ''}`)) r.append(htmlToElement(`${computedDecoValue || ''}`)) r.append(htmlToElement(`${sVal}`)) const possibleAct = set.evaluation!.activations.find(a => a.requiredSkill === sId) @@ -85,7 +83,7 @@ const getExpandedView = (set: ArmorSet, skillData: StaticSkillData, searchParams // build slot list const slotRow = document.createElement('tr') slotRow.appendChild(htmlToElement('Slots')) - const rawSlowList = [searchParams.weaponSlots, ...set.getPieces().map(x => x.slots), set.charm.slots] + const rawSlowList = [searchParams.weaponSlots, ...set.getPieces().map(x => x.slots)] rawSlowList.forEach(s => slotRow.appendChild(htmlToElement(`${s}`))) // append elements to table @@ -187,7 +185,6 @@ const getSetElement = (set: ArmorSet, skillData: StaticSkillData, searchParams: ${set.arms.name} ${set.waist.name} ${set.legs.name} - ${set.charm.name} `) const row2 = htmlToElement(` @@ -276,7 +273,7 @@ export const renderResults = (sets: ArmorSet[], skillData: StaticSkillData, sear // build table and table header const table = htmlToElement('
    ') - const header = htmlToElement('HeadTorsoArmsWaistLegsCharm') + const header = htmlToElement('HeadTorsoArmsWaistLegs') resultContainer.appendChild(table) table.appendChild(header) diff --git a/src/data-provider/models/user/UserCharmList.ts b/src/data-provider/models/user/UserCharmList.ts deleted file mode 100644 index b0aa9fb..0000000 --- a/src/data-provider/models/user/UserCharmList.ts +++ /dev/null @@ -1,122 +0,0 @@ -import { range } from '../../../helper/range.helper' -import SkillNameMap from '../skills/SkillNameMap' -import Charm from '../equipment/Charm' -import EquipmentCategory from '../equipment/EquipmentCategory' -import EquipmentSkills from '../equipment/EquipmentSkills' -import Slots from '../equipment/Slots' - -export default class UserCharmList { - // eslint-disable-next-line no-use-before-define - private static _instance: UserCharmList - - private list: Charm[] - - private constructor () { - this.list = [] - } - - public static get Instance () { - return this._instance || (this._instance = new this()) - } - - public static getCharmName ( - skills: EquipmentSkills, - slots: Slots, - skillNames: SkillNameMap, - ): string { - const skillStrings = Array.from(skills.entries()).map( - (s) => `${skillNames.get(s[0])}:${s[1]}`, - ) - const slotString = slots !== 0 ? `${slots} Slots` : '' - - return [...skillStrings, slotString].join(' ').trim() - } - - /** get the list of charms */ - get () { - return this.list - } - - /** adds a given charm to list */ - add (charm: Charm): number { - return this.list.push(charm) - } - - /** removes charm at specified index from list */ - remove (index: number) { - this.list = this.list.filter((_, i) => i !== index) - } - - /** serializes charm list as csv */ - serialize (skillNames: SkillNameMap): string { - return this.list - .map((charm) => { - const s = [] - - const skillArray = Array.from(charm.skills.entries()) - skillArray.forEach(([sId, sVal]) => { - s.push(`${skillNames.get(sId)},${sVal},`) - }) - - const amountOfSkills = skillArray.length - // eslint-disable-next-line no-unused-vars - for (const _ in range(amountOfSkills, 2)) { - s.push(',,') - } - - s.push(`${charm.slots}`) - - return s.join('') - }) - .join('\n') - } - - /** populate charm list from csv */ - deserialize (csv: string, skillNames: SkillNameMap): Charm[] { - const newList = [] - - for (const charm of csv.split('\n')) { - const spl = charm.split(',') - - const slots = parseInt(spl[4]) - const skills = [ - [0, 1], - [2, 3], - ] - .filter(([_, j]) => !isNaN(parseInt(spl[j]))) - .map(([i, j]) => { - const name = spl[i] - - const id = Array.from(skillNames.entries()).find(([_, n]) => { - return n === name - })![0] - - // build skill model - const skill = { - name, - points: parseInt(spl[j]), - id, - } - return skill - }) - - const skillMap: EquipmentSkills = new EquipmentSkills( - skills.map((skill) => { - return [skill.id, skill.points] - }), - ) - const newCharm: Charm = { - name: UserCharmList.getCharmName(skillMap, slots as Slots, skillNames), - category: EquipmentCategory.CHARM, - slots: slots as Slots, - rarity: 0, - skills: skillMap, - } - - newList.push(newCharm) - } - - this.list = newList - return newList - } -}