From b0b6e7084e2a4dffdb2f2ca535a40e7cbc97ac66 Mon Sep 17 00:00:00 2001 From: Djeeberjr Date: Mon, 15 Nov 2021 23:31:09 +0100 Subject: [PATCH] eslint cleanup --- src/ItemToDisplay.ts | 114 ++++++++++++++++---------------- src/components/AddItem.tsx | 36 +++++----- src/components/AllDecks.tsx | 64 +++++++++--------- src/components/App.tsx | 42 ++++++------ src/components/Card.tsx | 54 +++++++-------- src/components/Deck.tsx | 84 +++++++++++------------ src/components/MenuBar.tsx | 24 +++---- src/components/NumEdit.tsx | 26 ++++---- src/components/SwitchButton.tsx | 6 +- src/components/TextEdit.tsx | 56 ++++++++-------- src/index.tsx | 18 ++--- src/types/Card.ts | 30 ++++----- src/types/CardGroup.ts | 18 ++--- src/types/Deck.ts | 18 ++--- src/types/RetakesConfig.ts | 74 ++++++++++----------- 15 files changed, 333 insertions(+), 331 deletions(-) diff --git a/src/ItemToDisplay.ts b/src/ItemToDisplay.ts index e2728c2..064afb7 100644 --- a/src/ItemToDisplay.ts +++ b/src/ItemToDisplay.ts @@ -6,63 +6,63 @@ import Side from "./types/Side" * @param item what item * @param side CT or T */ - function ItemToDisplay(item:Item, side: Side ):string { - switch (item) { - case Item.DEFAULT_PISTOL: - return side === Side.CT ? "USP-S / P2000":"Glock-18" - case Item.DUAL_BERETTAS: - return "Dual Berettas" - case Item.P250: - return "P250" - case Item.TEC_9_FIVE_SEVEN: - return side === Side.CT ? "Five-Seven / CZ75-Auto":"Tec-9 / CZ75-Auto" - case Item.DESERT_EAGLE: - return "Desert Eagle / R8 Revolver" - case Item.NOVA: - return "Nova" - case Item.XM1014: - return "XM1014" - case Item.MAG_7: - return side === Side.CT ? "MAG-7":"Sawed-Off" - case Item.M249: - return "M249" - case Item.NEGEV: - return "Negev" - case Item.MAC_10_MP9: - return side === Side.CT ? "MP9":"MAC-10" - case Item.MP7: - return "MP7 / MP5-SD" - case Item.UMP_45: - return "UMP-45" - case Item.P90: - return "P90" - case Item.PP_BIZON: - return "PP-Bizon" - case Item.FAMAS_GALIL: - return side === Side.CT ? "FAMAS":"Galil AR" - case Item.AK_47_M4: - return side === Side.CT ? "M4A4 / M4A1-S":"AK-47" - case Item.SSG_08: - return "SSG 08" - case Item.SG_554_AUG: - return side === Side.CT ? "AUG":"SG 553" - case Item.AWP: - return "AWP" - case Item.G3_SCAR: - return side === Side.CT ? "SCAR-20":"G3SG1" - case Item.MOLOTOV: - return side === Side.CT ? "Incendiary Grenade":"Molotov" - case Item.DECOY: - return "Decoy" - case Item.FLASHBANG: - return "Flashbang" - case Item.HE: - return "HE Grenade" - case Item.SMOKE: - return "Smoke" - default: - throw new Error("Item not translatable") - } +function ItemToDisplay(item:Item, side: Side ):string { + switch (item) { + case Item.DEFAULT_PISTOL: + return side === Side.CT ? "USP-S / P2000":"Glock-18" + case Item.DUAL_BERETTAS: + return "Dual Berettas" + case Item.P250: + return "P250" + case Item.TEC_9_FIVE_SEVEN: + return side === Side.CT ? "Five-Seven / CZ75-Auto":"Tec-9 / CZ75-Auto" + case Item.DESERT_EAGLE: + return "Desert Eagle / R8 Revolver" + case Item.NOVA: + return "Nova" + case Item.XM1014: + return "XM1014" + case Item.MAG_7: + return side === Side.CT ? "MAG-7":"Sawed-Off" + case Item.M249: + return "M249" + case Item.NEGEV: + return "Negev" + case Item.MAC_10_MP9: + return side === Side.CT ? "MP9":"MAC-10" + case Item.MP7: + return "MP7 / MP5-SD" + case Item.UMP_45: + return "UMP-45" + case Item.P90: + return "P90" + case Item.PP_BIZON: + return "PP-Bizon" + case Item.FAMAS_GALIL: + return side === Side.CT ? "FAMAS":"Galil AR" + case Item.AK_47_M4: + return side === Side.CT ? "M4A4 / M4A1-S":"AK-47" + case Item.SSG_08: + return "SSG 08" + case Item.SG_554_AUG: + return side === Side.CT ? "AUG":"SG 553" + case Item.AWP: + return "AWP" + case Item.G3_SCAR: + return side === Side.CT ? "SCAR-20":"G3SG1" + case Item.MOLOTOV: + return side === Side.CT ? "Incendiary Grenade":"Molotov" + case Item.DECOY: + return "Decoy" + case Item.FLASHBANG: + return "Flashbang" + case Item.HE: + return "HE Grenade" + case Item.SMOKE: + return "Smoke" + default: + throw new Error("Item not translatable") + } } export default ItemToDisplay diff --git a/src/components/AddItem.tsx b/src/components/AddItem.tsx index 5a11f85..227090f 100644 --- a/src/components/AddItem.tsx +++ b/src/components/AddItem.tsx @@ -9,26 +9,26 @@ interface Props { } const AddItem: React.FC = ({side,onChange}) => { - const [selected,setSelected] = useState(Item.DEFAULT_PISTOL) + const [selected,setSelected] = useState(Item.DEFAULT_PISTOL) - return ( -
- - onChange?.(selected)} - className="cursor-pointer float-right" - > + return ( +
+ + onChange?.(selected)} + className="cursor-pointer float-right" + > Add - -
- ) + +
+ ) } export default AddItem diff --git a/src/components/AllDecks.tsx b/src/components/AllDecks.tsx index 47946cc..529ae6b 100644 --- a/src/components/AllDecks.tsx +++ b/src/components/AllDecks.tsx @@ -10,43 +10,43 @@ interface Props { } const AllDecks: React.FC = ({retakesConfig,onChange}) => { - return ( -
- onChange?.(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} /> + return ( +
+ onChange?.(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} /> -
- onChange?.(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} /> -
+
+ onChange?.(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} /> +
-
- onChange?.(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} /> - onChange?.(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} /> -
-
- ) +
+ onChange?.(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} /> + onChange?.(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} /> +
+
+ ) } export default AllDecks \ No newline at end of file diff --git a/src/components/App.tsx b/src/components/App.tsx index affb249..965560a 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,27 +1,27 @@ -import React, { useState } from 'react'; -import RetakesConfig from '../types/RetakesConfig'; -import AllDecks from './AllDecks'; -import MenuBar from './MenuBar'; +import React, { useState } from "react" +import RetakesConfig from "../types/RetakesConfig" +import AllDecks from "./AllDecks" +import MenuBar from "./MenuBar" function App() { - const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig()) + const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig()) - return ( -
- { - const exportString = retakesConfig.toCvar() - console.log(exportString) - }} - onExportJson={()=>{ - const jsonString = JSON.stringify(retakesConfig) - console.log(jsonString) - }} - /> - setRetakesConfig(newConfig)} /> -
- ); + return ( +
+ { + const exportString = retakesConfig.toCvar() + console.log(exportString) + }} + onExportJson={()=>{ + const jsonString = JSON.stringify(retakesConfig) + console.log(jsonString) + }} + /> + setRetakesConfig(newConfig)} /> +
+ ) } -export default App; +export default App diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 8429523..6a8041f 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -14,35 +14,35 @@ interface Props { } const CardComp: React.FC = ({card,side,onChange,onRemove}) => { - return ( -
- {onRemove?.()}}>X - onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))} - /> -
- + return ( +
+ {onRemove?.()}}>X + onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))} + /> +
+ Helmet: onChange?.(new Card(card.title,card.armor,to,...card.items))} /> - - + + Armor: onChange?.(new Card(card.title,to,card.helmet,...card.items))} /> - -
-
- {card.items.map((item,i)=> -
- {ItemToDisplay(item,side)} { - onChange?.(new Card(card.title,card.armor,card.helmet,...card.items.filter((_,fi)=>i!==fi))) - }} className="float-right cursor-pointer" >X -
- )} - onChange?.(new Card(card.title,card.armor,card.helmet,...card.items,newItem))} /> -
-
- ) + +
+
+ {card.items.map((item,i)=> +
+ {ItemToDisplay(item,side)} { + onChange?.(new Card(card.title,card.armor,card.helmet,...card.items.filter((_,fi)=>i!==fi))) + }} className="float-right cursor-pointer" >X +
+ )} + onChange?.(new Card(card.title,card.armor,card.helmet,...card.items,newItem))} /> +
+
+ ) } export default CardComp diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx index 24a0766..893f7bf 100644 --- a/src/components/Deck.tsx +++ b/src/components/Deck.tsx @@ -14,50 +14,50 @@ interface Props { } const DeckComp: React.FC = ({deck,side,title,onChange}) => { - return ( -
- {title} - { side === Side.CT && + return ( +
+ {title} + { side === Side.CT && Defuser: onChange?.(new Deck(Math.max(newNum,0),...deck.cardGroups))} - /> } -
- {deck.cardGroups.map((group,index) => - { - onChange?.(new Deck( - deck.numDefusers, - ...deck.cardGroups.map((e,i)=>i===index?newGroup:e) - )) - }} - onRemove={()=>{ - onChange?.(new Deck( - deck.numDefusers, - ...deck.cardGroups.filter((e,i)=>i!==index) - )) - }} - /> - )} -
onChange?.( - new Deck( - deck.numDefusers, - ...deck.cardGroups, - new CardGroup(1,new Card("New card",false,false)) - ) - )} - > -
+ value={deck.numDefusers} + onChange={newNum => onChange?.(new Deck(Math.max(newNum,0),...deck.cardGroups))} + /> } +
+ {deck.cardGroups.map((group,index) => + { + onChange?.(new Deck( + deck.numDefusers, + ...deck.cardGroups.map((e,i)=>i===index?newGroup:e) + )) + }} + onRemove={()=>{ + onChange?.(new Deck( + deck.numDefusers, + ...deck.cardGroups.filter((e,i)=>i!==index) + )) + }} + /> + )} +
onChange?.( + new Deck( + deck.numDefusers, + ...deck.cardGroups, + new CardGroup(1,new Card("New card",false,false)) + ) + )} + > +
Add Group -
-
-
-
- ) +
+
+
+
+ ) } export default DeckComp diff --git a/src/components/MenuBar.tsx b/src/components/MenuBar.tsx index f6314a8..e961767 100644 --- a/src/components/MenuBar.tsx +++ b/src/components/MenuBar.tsx @@ -6,21 +6,21 @@ interface Props { } const MenuBar: React.FC = ({onExport,onExportJson}) => { - return ( -
-
+ return ( +
+
Export -
-
+
+
Export to JSON -
- -
+
+ +
Help -
- -
- ) +
+ +
+ ) } export default MenuBar diff --git a/src/components/NumEdit.tsx b/src/components/NumEdit.tsx index e082d60..7183648 100644 --- a/src/components/NumEdit.tsx +++ b/src/components/NumEdit.tsx @@ -6,19 +6,19 @@ interface Props { } const NumEdit: React.FC = ({value,onChange}) => { - return ( - <> - onChange?.(value - 1)} - >- - {value} - onChange?.(value + 1)} - >+ - - ) + return ( + <> + onChange?.(value - 1)} + >- + {value} + onChange?.(value + 1)} + >+ + + ) } export default NumEdit diff --git a/src/components/SwitchButton.tsx b/src/components/SwitchButton.tsx index 4cefc73..fb75f2c 100644 --- a/src/components/SwitchButton.tsx +++ b/src/components/SwitchButton.tsx @@ -6,9 +6,9 @@ interface Props { } const SwitchButton: React.FC = ({active,onChange}) => { - return ( - - ) + return ( + + ) } export default SwitchButton diff --git a/src/components/TextEdit.tsx b/src/components/TextEdit.tsx index 255007f..32f6093 100644 --- a/src/components/TextEdit.tsx +++ b/src/components/TextEdit.tsx @@ -6,41 +6,43 @@ interface Props { } const TextEdit: React.FC = ({text,onChange}) => { - const [edit,setEdit] = useState(false) - const [inputValue,setinputValue] = useState(text) - const inputRef = useRef(null) + const [edit,setEdit] = useState(false) + const [inputValue,setinputValue] = useState(text) + const inputRef = useRef(null) useEffect(()=>{ if (edit){ inputRef.current?.select() }else{ - if (text !== inputValue){ - onChange?.(inputValue) - } - } + if (text !== inputValue){ + onChange?.(inputValue) + } + } },[edit]) - return ( - <> - {!edit && setEdit(true)} >{inputValue}} - {edit && -
{ - e.preventDefault() - setEdit(false) - }} > - setinputValue(e.target.value)} - onBlur={()=>setEdit(false)} - ref={inputRef} - > -
- } - - ) + return ( + <> + {!edit && setEdit(true)} >{inputValue}} + {edit && +
{ + e.preventDefault() + setEdit(false) + }} + > + setinputValue(e.target.value)} + onBlur={()=>setEdit(false)} + ref={inputRef} + > +
+ } + + ) } export default TextEdit diff --git a/src/index.tsx b/src/index.tsx index 3ebc97b..11cb0d4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './components/App'; -import './index.css'; +import React from "react" +import ReactDOM from "react-dom" +import App from "./components/App" +import "./index.css" ReactDOM.render( - - - , - document.getElementById('root') -); + + + , + document.getElementById("root") +) diff --git a/src/types/Card.ts b/src/types/Card.ts index 8871ba5..07aac5e 100644 --- a/src/types/Card.ts +++ b/src/types/Card.ts @@ -1,28 +1,28 @@ import Item from "./Item" class Card { - readonly title: string - readonly armor: boolean - readonly helmet: boolean - readonly items: Item[] + readonly title: string + readonly armor: boolean + readonly helmet: boolean + readonly items: Item[] - constructor(title: string,armor: boolean,helmet: boolean,...items:Item[]){ - this.title = title - this.armor = armor - this.helmet = helmet - this.items = items - } + constructor(title: string,armor: boolean,helmet: boolean,...items:Item[]){ + this.title = title + this.armor = armor + this.helmet = helmet + this.items = items + } - public toCvar(): string { - return `${this.title},${bToS(this.armor)},${bToS(this.helmet)},${this.items.join(",")}` - } + public toCvar(): string { + return `${this.title},${bToS(this.armor)},${bToS(this.helmet)},${this.items.join(",")}` + } } /** * Converts a boolean to 1 for true and 0 for false */ - function bToS(bool: boolean): string{ - return bool?"1":"0" +function bToS(bool: boolean): string{ + return bool?"1":"0" } export default Card diff --git a/src/types/CardGroup.ts b/src/types/CardGroup.ts index 70cb226..6fc80f4 100644 --- a/src/types/CardGroup.ts +++ b/src/types/CardGroup.ts @@ -1,17 +1,17 @@ import Card from "./Card" class CardGroup { - readonly numInDeck: number - readonly cards: Card[] + readonly numInDeck: number + readonly cards: Card[] - constructor(numInDeck: number, ...cards: Card[]) { - this.numInDeck = numInDeck - this.cards = cards - } + constructor(numInDeck: number, ...cards: Card[]) { + this.numInDeck = numInDeck + this.cards = cards + } - public toCvar(): string { - return `${this.numInDeck};${this.cards.map(e => e.toCvar()).join(";")}` - } + public toCvar(): string { + return `${this.numInDeck};${this.cards.map(e => e.toCvar()).join(";")}` + } } export default CardGroup diff --git a/src/types/Deck.ts b/src/types/Deck.ts index 2ddf2e6..538b967 100644 --- a/src/types/Deck.ts +++ b/src/types/Deck.ts @@ -1,17 +1,17 @@ import CardGroup from "./CardGroup" class Deck { - readonly numDefusers: number - readonly cardGroups: CardGroup[] + readonly numDefusers: number + readonly cardGroups: CardGroup[] - constructor(numDefusers: number,...cardGroups: CardGroup[]){ - this.numDefusers = numDefusers - this.cardGroups = cardGroups - } + constructor(numDefusers: number,...cardGroups: CardGroup[]){ + this.numDefusers = numDefusers + this.cardGroups = cardGroups + } - public toCvar(): string { - return `${this.numDefusers}|${this.cardGroups.map(e => e.toCvar()).join("|")}` - } + public toCvar(): string { + return `${this.numDefusers}|${this.cardGroups.map(e => e.toCvar()).join("|")}` + } } export default Deck diff --git a/src/types/RetakesConfig.ts b/src/types/RetakesConfig.ts index d684a54..9b3a929 100644 --- a/src/types/RetakesConfig.ts +++ b/src/types/RetakesConfig.ts @@ -2,30 +2,30 @@ import Card from "./Card" import Deck from "./Deck" class RetakesConfig { - readonly ctPistol: Deck = new Deck(0) - readonly tPistol: Deck = new Deck(0) + readonly ctPistol: Deck = new Deck(0) + readonly tPistol: Deck = new Deck(0) - readonly ctUpgradedPistol: Deck = new Deck(0) - readonly tUpgradedPistol: Deck = new Deck(0) + readonly ctUpgradedPistol: Deck = new Deck(0) + readonly tUpgradedPistol: Deck = new Deck(0) - readonly ctLight: Deck = new Deck(0) - readonly tLight: Deck = new Deck(0) + readonly ctLight: Deck = new Deck(0) + readonly tLight: Deck = new Deck(0) - readonly ctFull: Deck = new Deck(0) - readonly tFull: Deck = new Deck(0) + readonly ctFull: Deck = new Deck(0) + readonly tFull: Deck = new Deck(0) - readonly ctEnemy: Card = new Card("CT Enemy card",false,false) - readonly tEnemy: Card = new Card("T Enemy card",false,false) + readonly ctEnemy: Card = new Card("CT Enemy card",false,false) + readonly tEnemy: Card = new Card("T Enemy card",false,false) - readonly ctBonus: Card = new Card("CT Bonus card",false,false) - readonly tBonus: Card = new Card("T Bonus card",false,false) + readonly ctBonus: Card = new Card("CT Bonus card",false,false) + readonly tBonus: Card = new Card("T Bonus card",false,false) - // If not set to [1] or a valid value the game will crash - readonly ctBonusAvailability: number[] = [1] - readonly tBonusAvailability: number[] = [1] + // If not set to [1] or a valid value the game will crash + readonly ctBonusAvailability: number[] = [1] + readonly tBonusAvailability: number[] = [1] - // TODO: there must be some smarter way to do this - constructor(args? :{ + // TODO: there must be some smarter way to do this + constructor(args? :{ ctPistol?: Deck, tPistol?: Deck, ctUpgradedPistol?: Deck, @@ -41,26 +41,26 @@ class RetakesConfig { ctBonusAvailability?: number[], tBonusAvailability?: number[], }){ - if (args){ - args.ctPistol && (this.ctPistol = args.ctPistol) - args.tPistol && (this.tPistol = args.tPistol) - args.ctUpgradedPistol && (this.ctUpgradedPistol = args.ctUpgradedPistol) - args.tUpgradedPistol && (this.tUpgradedPistol = args.tUpgradedPistol) - args.ctLight && (this.ctLight = args.ctLight) - args.tLight && (this.tLight = args.tLight) - args.ctFull && (this.ctFull = args.ctFull) - args.tFull && (this.tFull = args.tFull) - args.ctEnemy && (this.ctEnemy = args.ctEnemy) - args.tEnemy && (this.tEnemy = args.tEnemy) - args.ctBonus && (this.ctBonus = args.ctBonus) - args.tBonus && (this.tBonus = args.tBonus) - args.ctBonusAvailability && (this.ctBonusAvailability = args.ctBonusAvailability) - args.tBonusAvailability && (this.tBonusAvailability = args.tBonusAvailability) - } - } + if (args){ + args.ctPistol && (this.ctPistol = args.ctPistol) + args.tPistol && (this.tPistol = args.tPistol) + args.ctUpgradedPistol && (this.ctUpgradedPistol = args.ctUpgradedPistol) + args.tUpgradedPistol && (this.tUpgradedPistol = args.tUpgradedPistol) + args.ctLight && (this.ctLight = args.ctLight) + args.tLight && (this.tLight = args.tLight) + args.ctFull && (this.ctFull = args.ctFull) + args.tFull && (this.tFull = args.tFull) + args.ctEnemy && (this.ctEnemy = args.ctEnemy) + args.tEnemy && (this.tEnemy = args.tEnemy) + args.ctBonus && (this.ctBonus = args.ctBonus) + args.tBonus && (this.tBonus = args.tBonus) + args.ctBonusAvailability && (this.ctBonusAvailability = args.ctBonusAvailability) + args.tBonusAvailability && (this.tBonusAvailability = args.tBonusAvailability) + } + } - public toCvar(): string{ - return `mp_retake_ct_loadout_default_pistol_round "${this.ctPistol.toCvar()}" + public toCvar(): string{ + return `mp_retake_ct_loadout_default_pistol_round "${this.ctPistol.toCvar()}" mp_retake_t_loadout_default_pistol_round "${this.tPistol.toCvar()}" mp_retake_ct_loadout_upgraded_pistol_round "${this.ctUpgradedPistol.toCvar()}" mp_retake_t_loadout_upgraded_pistol_round "${this.tUpgradedPistol.toCvar()}" @@ -73,7 +73,7 @@ mp_retake_t_loadout_bonus_card "${this.tBonus.toCvar()}" mp_retake_ct_loadout_bonus_card_availability "${this.ctBonusAvailability.join(",")}" mp_retake_t_loadout_bonus_card_availability "${this.tBonusAvailability.join(",")}" ` - } + } }