fix: design adjustments

Smaller name, ellipsis for long name, indicator for number of roles/sheets/layers
This commit is contained in:
Fiona Lena Urban 2025-05-09 20:09:12 +02:00
parent c5be0b6b04
commit 8ccedbed8a
5 changed files with 43 additions and 33 deletions

View file

@ -69,7 +69,7 @@ const createCard = (uuid : string) : Card => ({
ppl: 0,
})
const cards = useState('cards', () => [
const cards = useState<Card[]>('cards', () => [
createCard(crypto.randomUUID()),
])
@ -120,7 +120,10 @@ const openDeleteModal = () => {
}
const updateLocalStorage = () => {
localStorage.setItem('cards', JSON.stringify(cards.value))
localStorage.setItem('cards', JSON.stringify(cards.value.map(card => {
const { uuid, name, price, roles, sheets, layers } = card
return { uuid, name, price, roles, sheets, layers }
})))
localStorage.setItem('sort', JSON.stringify(currentSort.value))
}
@ -166,14 +169,14 @@ const sort = (index : number) => {
const calculate = (card : Card) => {
const ppr = +replaceComma(card.price) / +card.roles
const pps = (ppr / +card.sheets) * 10
const ppl = (pps / +card.layers) * 10
const pps = (ppr / +card.sheets) * 100
const ppl = (pps / +card.layers)
return { ppr, pps, ppl }
}
onMounted(() => {
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]').map((card : Card) => ({ ...card, ...calculate(card) }))
cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
sort(sortFromStorage)