mirror of
https://forgejo.merr.is/annika/isl-vue3.git
synced 2025-12-13 18:20:05 -05:00
Lots of CSS fixing and added new items
This commit is contained in:
parent
0f37f195a9
commit
599d44a86b
27 changed files with 1211 additions and 389 deletions
|
|
@ -3,66 +3,77 @@
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Flower Necklace",
|
"itemName": "Flower Necklace",
|
||||||
"minItemPower": 1,
|
"minItemPower": 1,
|
||||||
"maxItemPower": 1
|
"maxItemPower": 1,
|
||||||
|
"rarity": 2
|
||||||
},
|
},
|
||||||
"facb5102-34d8-4813-ab06-ac2b8e9f3ed9": {
|
"facb5102-34d8-4813-ab06-ac2b8e9f3ed9": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Jewel Necklace",
|
"itemName": "Jewel Necklace",
|
||||||
"minItemPower": 2,
|
"minItemPower": 2,
|
||||||
"maxItemPower": 2
|
"maxItemPower": 2,
|
||||||
|
"rarity": 3
|
||||||
},
|
},
|
||||||
"ddd29671-ca7f-4132-8784-80346e154059": {
|
"ddd29671-ca7f-4132-8784-80346e154059": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Blessing Power Gachapon",
|
"itemName": "Blessing Power Gachapon",
|
||||||
"minItemPower": 10,
|
"minItemPower": 10,
|
||||||
"maxItemPower": 30
|
"maxItemPower": 30,
|
||||||
|
"rarity": 4
|
||||||
},
|
},
|
||||||
"c1e029ff-b82c-48bd-a1f1-ea6291fad948": {
|
"c1e029ff-b82c-48bd-a1f1-ea6291fad948": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Mandrake",
|
"itemName": "Mandrake",
|
||||||
"minItemPower": 1,
|
"minItemPower": 1,
|
||||||
"maxItemPower": 3
|
"maxItemPower": 3,
|
||||||
|
"rarity": 1
|
||||||
},
|
},
|
||||||
"52cd4a48-ff8a-4493-8030-b4e7754cd227": {
|
"52cd4a48-ff8a-4493-8030-b4e7754cd227": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Muddled Mushroom",
|
"itemName": "Muddled Mushroom",
|
||||||
"minItemPower": 2,
|
"minItemPower": 2,
|
||||||
"maxItemPower": 5
|
"maxItemPower": 5,
|
||||||
|
"rarity": 1
|
||||||
},
|
},
|
||||||
"636b7384-1389-4012-933c-9063baa7a38d": {
|
"636b7384-1389-4012-933c-9063baa7a38d": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Grassy Bunny",
|
"itemName": "Grassy Bunny",
|
||||||
"minItemPower": 3,
|
"minItemPower": 3,
|
||||||
"maxItemPower": 6
|
"maxItemPower": 6,
|
||||||
|
"rarity": 2
|
||||||
},
|
},
|
||||||
"2563b5f8-8fd5-4795-af86-33200605cf3e": {
|
"2563b5f8-8fd5-4795-af86-33200605cf3e": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Chirping Chick",
|
"itemName": "Chirping Chick",
|
||||||
"minItemPower": 4,
|
"minItemPower": 4,
|
||||||
"maxItemPower": 10
|
"maxItemPower": 10,
|
||||||
|
"rarity": 2
|
||||||
},
|
},
|
||||||
"54e9bcf5-f1a5-4350-a75d-88af02b4fc13": {
|
"54e9bcf5-f1a5-4350-a75d-88af02b4fc13": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Gorgeous Horse",
|
"itemName": "Gorgeous Horse",
|
||||||
"minItemPower": 5,
|
"minItemPower": 5,
|
||||||
"maxItemPower": 16
|
"maxItemPower": 16,
|
||||||
|
"rarity": 3
|
||||||
},
|
},
|
||||||
"e736d2b9-a8ec-4a4e-a721-24880c8a6038": {
|
"e736d2b9-a8ec-4a4e-a721-24880c8a6038": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Blooming Fox",
|
"itemName": "Blooming Fox",
|
||||||
"minItemPower": 7,
|
"minItemPower": 7,
|
||||||
"maxItemPower": 24
|
"maxItemPower": 24,
|
||||||
|
"rarity": 3
|
||||||
},
|
},
|
||||||
"9fb7f9ba-e7ed-4e99-b161-386f48299443": {
|
"9fb7f9ba-e7ed-4e99-b161-386f48299443": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Frozen Dragon",
|
"itemName": "Frozen Dragon",
|
||||||
"minItemPower": 10,
|
"minItemPower": 10,
|
||||||
"maxItemPower": 32
|
"maxItemPower": 32,
|
||||||
|
"rarity": 4
|
||||||
},
|
},
|
||||||
"e2472929-1218-4cd6-a73b-b783c17bbc31": {
|
"e2472929-1218-4cd6-a73b-b783c17bbc31": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Flaming Lion",
|
"itemName": "Flaming Lion",
|
||||||
"minItemPower": 14,
|
"minItemPower": 14,
|
||||||
"maxItemPower": 48
|
"maxItemPower": 48,
|
||||||
|
"rarity": 4
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,92 +1,163 @@
|
||||||
{
|
{
|
||||||
"1f7aff96-030d-4007-9a70-82db7a8be3e3": {
|
"1f7aff96-030d-4007-9a70-82db7a8be3e3": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Contestant Portrait",
|
"itemName": "Contestant Portrait (Wolf)",
|
||||||
"minItemPower": 15000,
|
"minItemPower": 15000,
|
||||||
"maxItemPower": 40000
|
"maxItemPower": 40000,
|
||||||
},
|
"rarity": 3
|
||||||
"2006c92e-8e32-4c9f-a913-3b2d1ed8dea0": {
|
},
|
||||||
"iconURL": "",
|
"2006c92e-8e32-4c9f-a913-3b2d1ed8dea0": {
|
||||||
"itemName": "Potion of Bravery",
|
"iconURL": "",
|
||||||
"minItemPower": 800,
|
"itemName": "Potion of Bravery",
|
||||||
"maxItemPower": 800
|
"minItemPower": 800,
|
||||||
},
|
"maxItemPower": 800,
|
||||||
"30d05d98-a615-4e3a-94da-8aa6e4ad03a9": {
|
"rarity": 3
|
||||||
"iconURL": "",
|
},
|
||||||
"itemName": "Basic Elixir",
|
"30d05d98-a615-4e3a-94da-8aa6e4ad03a9": {
|
||||||
"minItemPower": 3000,
|
"iconURL": "",
|
||||||
"maxItemPower": 3000
|
"itemName": "Basic Elixir",
|
||||||
},
|
"minItemPower": 3000,
|
||||||
"3eccaaac-5afe-415a-ac8f-55df213cf015": {
|
"maxItemPower": 3000,
|
||||||
"iconURL": "",
|
"rarity": 3
|
||||||
"itemName": "Potion of Freedom",
|
},
|
||||||
"minItemPower": 800,
|
"3eccaaac-5afe-415a-ac8f-55df213cf015": {
|
||||||
"maxItemPower": 800
|
"iconURL": "",
|
||||||
},
|
"itemName": "Potion of Freedom",
|
||||||
"68a7a68a-2123-4a8e-b64d-9dbdf0637521": {
|
"minItemPower": 800,
|
||||||
"iconURL": "",
|
"maxItemPower": 800,
|
||||||
"itemName": "Potion of Erudition",
|
"rarity": 3
|
||||||
"minItemPower": 800,
|
},
|
||||||
"maxItemPower": 800
|
"68a7a68a-2123-4a8e-b64d-9dbdf0637521": {
|
||||||
},
|
"iconURL": "",
|
||||||
"7075da2f-a617-42a1-b142-fe2401ad87ec": {
|
"itemName": "Potion of Erudition",
|
||||||
"iconURL": "",
|
"minItemPower": 800,
|
||||||
"itemName": "Potion of Inspiration",
|
"maxItemPower": 800,
|
||||||
"minItemPower": 800,
|
"rarity": 3
|
||||||
"maxItemPower": 800
|
},
|
||||||
},
|
"7075da2f-a617-42a1-b142-fe2401ad87ec": {
|
||||||
"762a2775-ca50-4c13-8797-2f03b045ed10": {
|
"iconURL": "",
|
||||||
"iconURL": "",
|
"itemName": "Potion of Inspiration",
|
||||||
"itemName": "Red Contestant Portrait",
|
"minItemPower": 800,
|
||||||
"minItemPower": 10000,
|
"maxItemPower": 800,
|
||||||
"maxItemPower": 25000
|
"rarity": 3
|
||||||
},
|
},
|
||||||
"9c95396d-e5d8-4f7d-9d37-1469e7dc0ee1": {
|
"762a2775-ca50-4c13-8797-2f03b045ed10": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Yellow Signed Towel",
|
"itemName": "Contestant Portrait (Lion)",
|
||||||
"minItemPower": 4500,
|
"minItemPower": 10000,
|
||||||
"maxItemPower": 10000
|
"maxItemPower": 25000,
|
||||||
},
|
"rarity": 3
|
||||||
"a351a27b-765b-46b5-95fc-99c47e63176d": {
|
},
|
||||||
"iconURL": "",
|
"9c95396d-e5d8-4f7d-9d37-1469e7dc0ee1": {
|
||||||
"itemName": "Potion of Diligence",
|
"iconURL": "",
|
||||||
"minItemPower": 800,
|
"itemName": "Signed Towel (Yellow)",
|
||||||
"maxItemPower": 800
|
"minItemPower": 4500,
|
||||||
},
|
"maxItemPower": 10000,
|
||||||
"a44b763b-833b-49d0-91d6-e5fcb8c6ce7c": {
|
"rarity": 2
|
||||||
"iconURL": "",
|
},
|
||||||
"itemName": "Yellow Signed Handkerchief",
|
"a351a27b-765b-46b5-95fc-99c47e63176d": {
|
||||||
"minItemPower": 2000,
|
"iconURL": "",
|
||||||
"maxItemPower": 5000
|
"itemName": "Potion of Diligence",
|
||||||
},
|
"minItemPower": 800,
|
||||||
"bc5fc5c6-65e1-41c8-822d-d6e06ec0894e": {
|
"maxItemPower": 800,
|
||||||
"iconURL": "",
|
"rarity": 3
|
||||||
"itemName": "Advanced Elixir",
|
},
|
||||||
"minItemPower": 30000,
|
"a44b763b-833b-49d0-91d6-e5fcb8c6ce7c": {
|
||||||
"maxItemPower": 30000
|
"iconURL": "",
|
||||||
},
|
"itemName": "Signed Handkerchief (Yellow)",
|
||||||
"cd50f711-36a4-4b3b-b4ef-84b52c8a18e2": {
|
"minItemPower": 2000,
|
||||||
"iconURL": "",
|
"maxItemPower": 5000,
|
||||||
"itemName": "Champion's Statue",
|
"rarity": 1
|
||||||
"minItemPower": 30000,
|
},
|
||||||
"maxItemPower": 80000
|
"bc5fc5c6-65e1-41c8-822d-d6e06ec0894e": {
|
||||||
},
|
"iconURL": "",
|
||||||
"ce522371-80bd-4266-b473-8f5ace7099c7": {
|
"itemName": "Advanced Elixir",
|
||||||
"iconURL": "",
|
"minItemPower": 30000,
|
||||||
"itemName": "Red Signed Handkerchief",
|
"maxItemPower": 30000,
|
||||||
"minItemPower": 3000,
|
"rarity": 4
|
||||||
"maxItemPower": 8000
|
},
|
||||||
},
|
"cd50f711-36a4-4b3b-b4ef-84b52c8a18e2": {
|
||||||
"d7d705d3-9562-4f03-98d8-3b0da81fcf47": {
|
"iconURL": "",
|
||||||
"iconURL": "",
|
"itemName": "Champion's Statue",
|
||||||
"itemName": "Champion's Belt",
|
"minItemPower": 30000,
|
||||||
"minItemPower": 20000,
|
"maxItemPower": 80000,
|
||||||
"maxItemPower": 50000
|
"rarity": 4
|
||||||
},
|
},
|
||||||
"ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
|
"ce522371-80bd-4266-b473-8f5ace7099c7": {
|
||||||
"iconURL": "",
|
"iconURL": "",
|
||||||
"itemName": "Red Signed Towel",
|
"itemName": "Signed Handkerchief (Red)",
|
||||||
"minItemPower": 6000,
|
"minItemPower": 3000,
|
||||||
"maxItemPower": 15000
|
"maxItemPower": 8000,
|
||||||
}
|
"rarity": 1
|
||||||
}
|
},
|
||||||
|
"d7d705d3-9562-4f03-98d8-3b0da81fcf47": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Champion's Belt",
|
||||||
|
"minItemPower": 20000,
|
||||||
|
"maxItemPower": 50000,
|
||||||
|
"rarity": 4
|
||||||
|
},
|
||||||
|
"ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Signed Towel (Red)",
|
||||||
|
"minItemPower": 6000,
|
||||||
|
"maxItemPower": 15000,
|
||||||
|
"rarity": 2
|
||||||
|
},
|
||||||
|
"472d229e-3541-4115-8104-53af579f24a4": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Demonic Exercise Bike",
|
||||||
|
"minItemPower": 20000,
|
||||||
|
"maxItemPower": 50000,
|
||||||
|
"rarity": 4
|
||||||
|
},
|
||||||
|
"6214eeeb-c77b-415c-a055-6d15b04ca026": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Steel Barbell",
|
||||||
|
"minItemPower": 15000,
|
||||||
|
"maxItemPower": 40000,
|
||||||
|
"rarity": 3
|
||||||
|
},
|
||||||
|
"732f16e3-6de7-4bc7-af77-9cdbaf68b695": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Pac-Ball",
|
||||||
|
"minItemPower": 4500,
|
||||||
|
"maxItemPower": 10000,
|
||||||
|
"rarity": 2
|
||||||
|
},
|
||||||
|
"a64b4819-5b32-41c5-8fe0-293ea8695a0c": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Stone Dumbbell",
|
||||||
|
"minItemPower": 3000,
|
||||||
|
"maxItemPower": 8000,
|
||||||
|
"rarity": 1
|
||||||
|
},
|
||||||
|
"b282b9cb-1802-4563-88a1-e7e267a0bcd4": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Rock Kettlebell",
|
||||||
|
"minItemPower": 6000,
|
||||||
|
"maxItemPower": 15000,
|
||||||
|
"rarity": 2
|
||||||
|
},
|
||||||
|
"bf1611c0-ddec-4ad8-8299-a2e19818186f": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Screaming Punching Bag",
|
||||||
|
"minItemPower": 30000,
|
||||||
|
"maxItemPower": 80000,
|
||||||
|
"rarity": 4
|
||||||
|
},
|
||||||
|
"daca4964-69c4-4167-b7bf-2e8eb49a8f1b": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Ivy Jump Rope",
|
||||||
|
"minItemPower": 2000,
|
||||||
|
"maxItemPower": 5000,
|
||||||
|
"rarity": 1
|
||||||
|
},
|
||||||
|
"fff5a89a-1691-47ea-af30-c811f1c1dbfc": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Fairy Shuttlecock",
|
||||||
|
"minItemPower": 10000,
|
||||||
|
"maxItemPower": 25000,
|
||||||
|
"rarity": 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
86
public/items/intimacyPowerItems.json
Normal file
86
public/items/intimacyPowerItems.json
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
{
|
||||||
|
"09b1fff4-c1a3-49d5-acf1-b996d93a7217": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Unhappy Elder\"",
|
||||||
|
"minItemPower": 2,
|
||||||
|
"maxItemPower": 5,
|
||||||
|
"rarity": 1
|
||||||
|
},
|
||||||
|
"0dbbda4c-0e4c-4cc2-b204-0301178ae667": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Gold Ring",
|
||||||
|
"minItemPower": 1,
|
||||||
|
"maxItemPower": 1,
|
||||||
|
"rarity": 2
|
||||||
|
},
|
||||||
|
"590ebe99-0fdd-4216-bb51-88d48f07d518": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Forbidden Love\"",
|
||||||
|
"minItemPower": 10,
|
||||||
|
"maxItemPower": 32,
|
||||||
|
"rarity": 4
|
||||||
|
},
|
||||||
|
"62c5fe6d-92d2-458d-8ce4-c206eeb6245a": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Prince's Wish\"",
|
||||||
|
"minItemPower": 4,
|
||||||
|
"maxItemPower": 10,
|
||||||
|
"rarity": 2
|
||||||
|
},
|
||||||
|
"67e7598f-f687-4ea0-b9f5-f89aaa965d44": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Otherworld Stars\"",
|
||||||
|
"minItemPower": 7,
|
||||||
|
"maxItemPower": 24,
|
||||||
|
"rarity": 3
|
||||||
|
},
|
||||||
|
"71c7537b-ef33-4f64-91d4-e7e9c3915cad": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Diamond Ring",
|
||||||
|
"minItemPower": 5,
|
||||||
|
"maxItemPower": 5,
|
||||||
|
"rarity": 4
|
||||||
|
},
|
||||||
|
"73ddfbbf-3071-4103-9893-b9b77af05ce9": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Single Golden Mushroom\"",
|
||||||
|
"minItemPower": 5,
|
||||||
|
"maxItemPower": 16,
|
||||||
|
"rarity": 3
|
||||||
|
},
|
||||||
|
"910cfd8f-9e75-4ca1-b776-e6b4df78e80b": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Starry Love\"",
|
||||||
|
"minItemPower": 1,
|
||||||
|
"maxItemPower": 3,
|
||||||
|
"rarity": 1
|
||||||
|
},
|
||||||
|
"b2536feb-7dcb-4cec-93e5-581bc64e693b": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Princess's Wish\"",
|
||||||
|
"minItemPower": 3,
|
||||||
|
"maxItemPower": 6,
|
||||||
|
"rarity": 2
|
||||||
|
},
|
||||||
|
"b2ebc786-79c3-47df-b0d9-330bb8e85a5f": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Song: \"Unlucky Succubus\"",
|
||||||
|
"minItemPower": 14,
|
||||||
|
"maxItemPower": 48,
|
||||||
|
"rarity": 4
|
||||||
|
},
|
||||||
|
"d5eb513d-68e0-4cd3-bb44-e3e8d36cfecd": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Gemstone Ring",
|
||||||
|
"minItemPower": 2,
|
||||||
|
"maxItemPower": 2,
|
||||||
|
"rarity": 3
|
||||||
|
},
|
||||||
|
"bcd9068a-c3b1-4914-ac50-af3369a7a8e5": {
|
||||||
|
"iconURL": "",
|
||||||
|
"itemName": "Intamacy Gachapon",
|
||||||
|
"minItemPower": 10,
|
||||||
|
"maxItemPower": 30,
|
||||||
|
"rarity": 4
|
||||||
|
}
|
||||||
|
}
|
||||||
16
src/App.vue
16
src/App.vue
|
|
@ -6,21 +6,11 @@ import GlobalHeader from '@/components/GlobalHeader.vue'
|
||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<GlobalHeader />
|
<GlobalHeader />
|
||||||
<v-navigation-drawer permanent absolute>
|
<v-main class="d-flex">
|
||||||
<v-list nav dense>
|
|
||||||
<v-list-item :to="{ name: 'blessing-power' }">
|
|
||||||
<v-list-item-title>Blessing Power</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item :to="{ name: 'fellow-power' }">
|
|
||||||
<v-list-item-title>Fellow Power</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-navigation-drawer>
|
|
||||||
<v-main>
|
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</v-main>
|
</v-main>
|
||||||
<v-footer>
|
<v-footer app>
|
||||||
<div>The footer goes here</div>
|
<div>Copyright Annika Merris 2024</div>
|
||||||
</v-footer>
|
</v-footer>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
/* min-height: 100vh; */
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
|
||||||
BIN
src/assets/images/isl_logo.png
Normal file
BIN
src/assets/images/isl_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 276 B |
|
|
@ -1,6 +1,6 @@
|
||||||
@import './base.css';
|
@import './base.css';
|
||||||
|
|
||||||
#app {
|
/* #app {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
@ -28,4 +28,4 @@ a,
|
||||||
#app {
|
#app {
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
}
|
} */
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,77 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { usePowerItems } from '@/stores/powerItems'
|
import { usePowerItems } from '@/stores/powerItems'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import SpecialItem from '@/components/SpecialItem.vue'
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
const { specialBlessingItems, specialBlessingItemsMinTotal, specialBlessingItemsMaxTotal, specialBlessingItemsAveTotal } =
|
const {
|
||||||
storeToRefs(usePowerItems())
|
specialBlessingItems,
|
||||||
|
specialBlessingItemsMinTotal,
|
||||||
|
specialBlessingItemsMaxTotal,
|
||||||
|
specialBlessingItemsAveTotal
|
||||||
|
} = storeToRefs(usePowerItems())
|
||||||
|
|
||||||
|
const headers = ref([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: 'start',
|
||||||
|
sortable: true,
|
||||||
|
value: '1.itemName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Min.',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.minItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max.',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.maxItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Owned',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: `1.owned`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Min. Total',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.minTotalPower`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max. Total',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.maxTotalPower`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Mean Total Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.aveTotalPower`
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const sortBy = ref([
|
||||||
|
{
|
||||||
|
key: '1.minItemPower',
|
||||||
|
order: 'asc'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const getColor = computed(() => (rarity: number): string => {
|
||||||
|
if (rarity === 4) {
|
||||||
|
return 'amber'
|
||||||
|
} else if (rarity === 3) {
|
||||||
|
return 'purple'
|
||||||
|
} else if (rarity === 2) {
|
||||||
|
return 'blue'
|
||||||
|
} else {
|
||||||
|
return 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -12,44 +79,52 @@ const { specialBlessingItems, specialBlessingItemsMinTotal, specialBlessingItems
|
||||||
<v-card-title>Special Items</v-card-title>
|
<v-card-title>Special Items</v-card-title>
|
||||||
<v-card-subtitle>Items from events</v-card-subtitle>
|
<v-card-subtitle>Items from events</v-card-subtitle>
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-table density="compact">
|
<v-data-table
|
||||||
<thead>
|
density="compact"
|
||||||
<tr>
|
v-model:sort-by="sortBy"
|
||||||
<!-- <th></th> -->
|
:items="[...specialBlessingItems.entries()]"
|
||||||
<th class="text-left font-weight-bold">Name</th>
|
:headers="headers"
|
||||||
<th class="text-left font-weight-bold">Min. Power</th>
|
>
|
||||||
<th class="text-left font-weight-bold">Max. Power</th>
|
<template v-slot:item.1.itemName="{ item }">
|
||||||
<th class="text-left font-weight-bold">Owned</th>
|
<v-chip :color="`${getColor(item[1].rarity)}`">
|
||||||
<th class="text-right font-weight-bold">Min. Total</th>
|
{{ item[1].itemName }}
|
||||||
<th class="text-right font-weight-bold">Max. Total</th>
|
</v-chip>
|
||||||
<th class="text-right font-weight-bold">Ave. Total</th>
|
</template>
|
||||||
</tr>
|
<template v-slot:item.1.owned="{ item }">
|
||||||
</thead>
|
<v-text-field
|
||||||
<tbody>
|
density="compact"
|
||||||
<SpecialItem
|
hide-details="auto"
|
||||||
v-for="[key, item] in specialBlessingItems"
|
v-model.number="item[1].owned"
|
||||||
:key="key"
|
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
|
||||||
:itemID="key"
|
></v-text-field>
|
||||||
:itemName="item.itemName"
|
</template>
|
||||||
:itemIcon="'none'"
|
<template v-slot:item.1.minTotalPower="{ item }">
|
||||||
:owned="item.owned"
|
{{ item[1].minItemPower * item[1].owned }}
|
||||||
:minPower="item.minItemPower"
|
</template>
|
||||||
:maxPower="item.maxItemPower"
|
<template v-slot:item.1.maxTotalPower="{ item }">
|
||||||
/>
|
{{ item[1].maxItemPower * item[1].owned }}
|
||||||
</tbody>
|
</template>
|
||||||
<tfoot>
|
<template v-slot:item.1.aveTotalPower="{ item }">
|
||||||
<tr>
|
{{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
|
||||||
<!-- <td></td> -->
|
</template>
|
||||||
<td></td>
|
<template v-slot:tfoot>
|
||||||
<td></td>
|
<tfoot>
|
||||||
<td></td>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsMinTotal }}</td>
|
<td class="d-none d-lg-table-cell"></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsMaxTotal }}</td>
|
<td class="d-none d-lg-table-cell"></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
|
<td></td>
|
||||||
</tr>
|
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
|
||||||
</tfoot>
|
{{ specialBlessingItemsMinTotal }}
|
||||||
</v-table>
|
</td>
|
||||||
|
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
|
||||||
|
{{ specialBlessingItemsMaxTotal }}
|
||||||
|
</td>
|
||||||
|
<td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,54 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { usePowerItems } from '@/stores/powerItems'
|
import { usePowerItems } from '@/stores/powerItems'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import StandardItem from '@/components/StandardItem.vue'
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
|
const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
|
||||||
|
const headers = ref([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: 'start',
|
||||||
|
sortable: true,
|
||||||
|
value: '1.itemName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.minItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Owned',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: `1.owned`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.totalPower`
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const sortBy = ref([
|
||||||
|
{
|
||||||
|
key: '1.minItemPower',
|
||||||
|
order: 'asc'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const getColor = computed(() => (rarity: number): string => {
|
||||||
|
console.log('getting rarity')
|
||||||
|
if (rarity === 4) {
|
||||||
|
return 'amber'
|
||||||
|
} else if (rarity === 3) {
|
||||||
|
return 'purple'
|
||||||
|
} else if (rarity === 2) {
|
||||||
|
return 'blue'
|
||||||
|
} else {
|
||||||
|
return 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -11,38 +56,39 @@ const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowe
|
||||||
<v-card-title>Standard Items</v-card-title>
|
<v-card-title>Standard Items</v-card-title>
|
||||||
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-table density="compact">
|
<v-data-table
|
||||||
<thead>
|
density="compact"
|
||||||
<tr>
|
v-model:sort-by="sortBy"
|
||||||
<!-- <th></th> -->
|
:items="[...standardBlessingItems.entries()]"
|
||||||
<th class="text-left font-weight-bold">Name</th>
|
:headers="headers"
|
||||||
<th class="text-left font-weight-bold">Power</th>
|
>
|
||||||
<th class="text-left font-weight-bold">Owned</th>
|
<template v-slot:item.1.itemName="{ item }">
|
||||||
<th class="text-right font-weight-bold">Total</th>
|
<v-chip :color="`${getColor(item[1].rarity)}`">
|
||||||
</tr>
|
{{ item[1].itemName }}
|
||||||
</thead>
|
</v-chip>
|
||||||
<tbody>
|
</template>
|
||||||
<StandardItem
|
<template v-slot:item.1.owned="{ item }">
|
||||||
v-for="[key, item] in standardBlessingItems"
|
<v-text-field
|
||||||
:key="key"
|
density="compact"
|
||||||
:itemID="key"
|
hide-details="auto"
|
||||||
:itemName="item.itemName"
|
v-model.number="item[1].owned"
|
||||||
:itemIcon="'none'"
|
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
|
||||||
:owned="item.owned"
|
></v-text-field>
|
||||||
:minPower="item.minItemPower"
|
</template>
|
||||||
:maxPower="item.maxItemPower"
|
<template v-slot:item.1.totalPower="{ item }">
|
||||||
/>
|
{{ item[1].minItemPower * item[1].owned }}
|
||||||
</tbody>
|
</template>
|
||||||
<tfoot>
|
<template v-slot:tfoot>
|
||||||
<tr>
|
<tfoot>
|
||||||
<!-- <td></td> -->
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
|
<td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</v-table>
|
</template>
|
||||||
|
</v-data-table>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,77 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { usePowerItems } from '@/stores/powerItems'
|
import { usePowerItems } from '@/stores/powerItems'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import SpecialItem from '@/components/SpecialItem.vue'
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
const { specialFellowItems, specialFellowItemsMinTotal, specialFellowItemsMaxTotal, specialFellowItemsAveTotal } =
|
const {
|
||||||
storeToRefs(usePowerItems())
|
specialFellowItems,
|
||||||
|
specialFellowItemsMinTotal,
|
||||||
|
specialFellowItemsMaxTotal,
|
||||||
|
specialFellowItemsAveTotal
|
||||||
|
} = storeToRefs(usePowerItems())
|
||||||
|
|
||||||
|
const headers = ref([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: 'start',
|
||||||
|
sortable: true,
|
||||||
|
value: '1.itemName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Min.',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.minItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max.',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.maxItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Owned',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: `1.owned`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Min. Total',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.minTotalPower`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max. Total',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.maxTotalPower`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Mean Total',
|
||||||
|
align: 'end',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.aveTotalPower`
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const sortBy = ref([
|
||||||
|
{
|
||||||
|
key: '1.minItemPower',
|
||||||
|
order: 'asc'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const getColor = computed(() => (rarity: number): string => {
|
||||||
|
if (rarity === 4) {
|
||||||
|
return 'amber'
|
||||||
|
} else if (rarity === 3) {
|
||||||
|
return 'purple'
|
||||||
|
} else if (rarity === 2) {
|
||||||
|
return 'blue'
|
||||||
|
} else {
|
||||||
|
return 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -12,44 +79,52 @@ const { specialFellowItems, specialFellowItemsMinTotal, specialFellowItemsMaxTot
|
||||||
<v-card-title>Special Items</v-card-title>
|
<v-card-title>Special Items</v-card-title>
|
||||||
<v-card-subtitle>Items from events</v-card-subtitle>
|
<v-card-subtitle>Items from events</v-card-subtitle>
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-table density="compact">
|
<v-data-table
|
||||||
<thead>
|
density="compact"
|
||||||
<tr>
|
v-model:sort-by="sortBy"
|
||||||
<!-- <th></th> -->
|
:items="[...specialFellowItems.entries()]"
|
||||||
<th class="text-left font-weight-bold">Name</th>
|
:headers="headers"
|
||||||
<th class="text-left font-weight-bold">Min. Power</th>
|
>
|
||||||
<th class="text-left font-weight-bold">Max. Power</th>
|
<template v-slot:item.1.itemName="{ item }">
|
||||||
<th class="text-left font-weight-bold">Owned</th>
|
<v-chip :color="`${getColor(item[1].rarity)}`">
|
||||||
<th class="text-right font-weight-bold">Min. Total</th>
|
{{ item[1].itemName }}
|
||||||
<th class="text-right font-weight-bold">Max. Total</th>
|
</v-chip>
|
||||||
<th class="text-right font-weight-bold">Ave. Total</th>
|
</template>
|
||||||
</tr>
|
<template v-slot:item.1.owned="{ item }">
|
||||||
</thead>
|
<v-text-field
|
||||||
<tbody>
|
density="compact"
|
||||||
<SpecialItem
|
hide-details="auto"
|
||||||
v-for="[key, item] in specialFellowItems"
|
v-model.number="item[1].owned"
|
||||||
:key="key"
|
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
|
||||||
:itemID="key"
|
></v-text-field>
|
||||||
:itemName="item.itemName"
|
</template>
|
||||||
:itemIcon="'none'"
|
<template v-slot:item.1.minTotalPower="{ item }">
|
||||||
:owned="item.owned"
|
{{ item[1].minItemPower * item[1].owned }}
|
||||||
:minPower="item.minItemPower"
|
</template>
|
||||||
:maxPower="item.maxItemPower"
|
<template v-slot:item.1.maxTotalPower="{ item }">
|
||||||
/>
|
{{ item[1].maxItemPower * item[1].owned }}
|
||||||
</tbody>
|
</template>
|
||||||
<tfoot>
|
<template v-slot:item.1.aveTotalPower="{ item }">
|
||||||
<tr>
|
{{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
|
||||||
<!-- <td></td> -->
|
</template>
|
||||||
<td></td>
|
<template v-slot:tfoot>
|
||||||
<td></td>
|
<tfoot>
|
||||||
<td></td>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsMinTotal }}</td>
|
<td class="d-none d-lg-table-cell"></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsMaxTotal }}</td>
|
<td class="d-none d-lg-table-cell"></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
|
<td></td>
|
||||||
</tr>
|
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
|
||||||
</tfoot>
|
{{ specialFellowItemsMinTotal }}
|
||||||
</v-table>
|
</td>
|
||||||
|
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
|
||||||
|
{{ specialFellowItemsMaxTotal }}
|
||||||
|
</td>
|
||||||
|
<td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,54 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { usePowerItems } from '@/stores/powerItems'
|
import { usePowerItems } from '@/stores/powerItems'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import StandardItem from '@/components/StandardItem.vue'
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
|
const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
|
||||||
|
const headers = ref([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: 'start',
|
||||||
|
sortable: true,
|
||||||
|
value: '1.itemName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.minItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Owned',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: `1.owned`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.totalPower`
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const sortBy = ref([
|
||||||
|
{
|
||||||
|
key: '1.minItemPower',
|
||||||
|
order: 'asc'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const getColor = computed(() => (rarity: number): string => {
|
||||||
|
console.log('getting rarity')
|
||||||
|
if (rarity === 4) {
|
||||||
|
return 'amber'
|
||||||
|
} else if (rarity === 3) {
|
||||||
|
return 'purple'
|
||||||
|
} else if (rarity === 2) {
|
||||||
|
return 'blue'
|
||||||
|
} else {
|
||||||
|
return 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -11,38 +56,39 @@ const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerIte
|
||||||
<v-card-title>Standard Items</v-card-title>
|
<v-card-title>Standard Items</v-card-title>
|
||||||
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
||||||
<v-card-item>
|
<v-card-item>
|
||||||
<v-table density="compact">
|
<v-data-table
|
||||||
<thead>
|
density="compact"
|
||||||
<tr>
|
v-model:sort-by="sortBy"
|
||||||
<!-- <th></th> -->
|
:items="[...standardFellowItems.entries()]"
|
||||||
<th class="text-left font-weight-bold">Name</th>
|
:headers="headers"
|
||||||
<th class="text-left font-weight-bold">Power</th>
|
>
|
||||||
<th class="text-left font-weight-bold">Owned</th>
|
<template v-slot:item.1.itemName="{ item }">
|
||||||
<th class="text-right font-weight-bold">Total</th>
|
<v-chip :color="`${getColor(item[1].rarity)}`">
|
||||||
</tr>
|
{{ item[1].itemName }}
|
||||||
</thead>
|
</v-chip>
|
||||||
<tbody>
|
</template>
|
||||||
<StandardItem
|
<template v-slot:item.1.owned="{ item }">
|
||||||
v-for="[key, item] in standardFellowItems"
|
<v-text-field
|
||||||
:key="key"
|
density="compact"
|
||||||
:itemID="key"
|
hide-details="auto"
|
||||||
:itemName="item.itemName"
|
v-model.number="item[1].owned"
|
||||||
:itemIcon="'none'"
|
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
|
||||||
:owned="item.owned"
|
></v-text-field>
|
||||||
:minPower="item.minItemPower"
|
</template>
|
||||||
:maxPower="item.maxItemPower"
|
<template v-slot:item.1.totalPower="{ item }">
|
||||||
/>
|
{{ item[1].minItemPower * item[1].owned }}
|
||||||
</tbody>
|
</template>
|
||||||
<tfoot>
|
<template v-slot:tfoot>
|
||||||
<tr>
|
<tfoot>
|
||||||
<!-- <td></td> -->
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
|
<td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</v-table>
|
</template>
|
||||||
|
</v-data-table>
|
||||||
</v-card-item>
|
</v-card-item>
|
||||||
</v-card>
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,29 @@
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const drawer = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<v-app-bar color="pink-lighten-3" scroll-behavior="elevate">
|
<v-app-bar color="pink-lighten-3" scroll-behavior="elevate">
|
||||||
|
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||||
<v-app-bar-title>Isekai Slow Life Calculator</v-app-bar-title>
|
<v-app-bar-title>Isekai Slow Life Calculator</v-app-bar-title>
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
|
<v-navigation-drawer v-model="drawer" app bottom>
|
||||||
|
<v-list nav>
|
||||||
|
<v-list-item :to="{ name: 'home' }">
|
||||||
|
<v-list-item-title>Isekai: Slow Life Calc</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
<v-list-item :to="{ name: 'blessing-power' }">
|
||||||
|
<v-list-item-title>Blessing Power</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item :to="{ name: 'fellow-power' }">
|
||||||
|
<v-list-item-title>Fellow Power</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item :to="{ name: 'intimacy-power' }">
|
||||||
|
<v-list-item-title>Intimacy Power</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-navigation-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
143
src/components/IntimacyPower/SpecialItemsCard.vue
Normal file
143
src/components/IntimacyPower/SpecialItemsCard.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { usePowerItems } from '@/stores/powerItems'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
const {
|
||||||
|
specialIntimacyItems,
|
||||||
|
specialIntimacyItemsMinTotal,
|
||||||
|
specialIntimacyItemsMaxTotal,
|
||||||
|
specialIntimacyItemsAveTotal
|
||||||
|
} = storeToRefs(usePowerItems())
|
||||||
|
|
||||||
|
const headers = ref([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: 'start',
|
||||||
|
sortable: true,
|
||||||
|
value: '1.itemName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Min.',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.minItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max.',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.maxItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Owned',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: `1.owned`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Min. Total',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.minTotalPower`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Max. Total',
|
||||||
|
align: ' d-none d-lg-table-cell',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.maxTotalPower`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Mean Total',
|
||||||
|
align: 'end',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.aveTotalPower`
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const sortBy = ref([
|
||||||
|
{
|
||||||
|
key: '1.minItemPower',
|
||||||
|
order: 'asc'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const getColor = computed(() => (rarity: number): string => {
|
||||||
|
if (rarity === 4) {
|
||||||
|
return 'amber'
|
||||||
|
} else if (rarity === 3) {
|
||||||
|
return 'purple'
|
||||||
|
} else if (rarity === 2) {
|
||||||
|
return 'blue'
|
||||||
|
} else {
|
||||||
|
return 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-card fluid>
|
||||||
|
<v-card-title>Special Items</v-card-title>
|
||||||
|
<v-card-subtitle>Items from events</v-card-subtitle>
|
||||||
|
<v-card-item>
|
||||||
|
<v-data-table
|
||||||
|
density="compact"
|
||||||
|
v-model:sort-by="sortBy"
|
||||||
|
:items="[...specialIntimacyItems.entries()]"
|
||||||
|
:headers="headers"
|
||||||
|
>
|
||||||
|
<template v-slot:item.1.itemName="{ item }">
|
||||||
|
<v-chip :color="`${getColor(item[1].rarity)}`">
|
||||||
|
{{ item[1].itemName }}
|
||||||
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.1.owned="{ item }">
|
||||||
|
<v-text-field
|
||||||
|
reverse
|
||||||
|
density="compact"
|
||||||
|
hide-details="auto"
|
||||||
|
v-model.number="item[1].owned"
|
||||||
|
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
|
||||||
|
></v-text-field>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.1.minTotalPower="{ item }">
|
||||||
|
{{ item[1].minItemPower * item[1].owned }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.1.maxTotalPower="{ item }">
|
||||||
|
{{ item[1].maxItemPower * item[1].owned }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.1.aveTotalPower="{ item }">
|
||||||
|
{{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:tfoot>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td class="d-none d-lg-table-cell"></td>
|
||||||
|
<td class="d-none d-lg-table-cell"></td>
|
||||||
|
<td></td>
|
||||||
|
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMinTotal }}</td>
|
||||||
|
<td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMaxTotal }}</td>
|
||||||
|
<td class="px-0 text-right font-weight-bold">{{ specialIntimacyItemsAveTotal }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-card-item>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@use '@/styles/settings.scss';
|
||||||
|
.common {
|
||||||
|
background-color: map-get(settings.$green, 'lighten-4');
|
||||||
|
}
|
||||||
|
.rare {
|
||||||
|
background-color: map-get(settings.$blue, 'lighten-4');
|
||||||
|
}
|
||||||
|
.epic {
|
||||||
|
background-color: map-get(settings.$purple, 'lighten-4');
|
||||||
|
}
|
||||||
|
.legendary {
|
||||||
|
background-color: map-get(settings.$amber, 'lighten-4');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
93
src/components/IntimacyPower/StandardItemsCard.vue
Normal file
93
src/components/IntimacyPower/StandardItemsCard.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { usePowerItems } from '@/stores/powerItems'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
|
const { standardIntimacyItems, standardIntimacyItemTotal } = storeToRefs(usePowerItems())
|
||||||
|
const headers = ref([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
align: 'start',
|
||||||
|
sortable: true,
|
||||||
|
value: '1.itemName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: '1.minItemPower'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Owned',
|
||||||
|
align: 'end',
|
||||||
|
sortable: true,
|
||||||
|
key: `1.owned`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Total Power',
|
||||||
|
align: 'end',
|
||||||
|
sortable: false,
|
||||||
|
key: `1.totalPower`
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const sortBy = ref([
|
||||||
|
{
|
||||||
|
key: '1.minItemPower',
|
||||||
|
order: 'asc'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const getColor = computed(() => (rarity: number): string => {
|
||||||
|
if (rarity === 4) {
|
||||||
|
return 'amber'
|
||||||
|
} else if (rarity === 3) {
|
||||||
|
return 'purple'
|
||||||
|
} else if (rarity === 2) {
|
||||||
|
return 'blue'
|
||||||
|
} else {
|
||||||
|
return 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>Standard Items</v-card-title>
|
||||||
|
<v-card-subtitle>Items that exist all the time</v-card-subtitle>
|
||||||
|
<v-card-item>
|
||||||
|
<v-data-table
|
||||||
|
density="compact"
|
||||||
|
v-model:sort-by="sortBy"
|
||||||
|
:items="[...standardIntimacyItems.entries()]"
|
||||||
|
:headers="headers"
|
||||||
|
>
|
||||||
|
<template v-slot:item.1.itemName="{ item }">
|
||||||
|
<v-chip :color="`${getColor(item[1].rarity)}`">
|
||||||
|
{{ item[1].itemName }}
|
||||||
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.1.owned="{ item }">
|
||||||
|
<v-text-field
|
||||||
|
density="compact"
|
||||||
|
hide-details="auto"
|
||||||
|
v-model.number="item[1].owned"
|
||||||
|
@update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
|
||||||
|
></v-text-field>
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.1.totalPower="{ item }">
|
||||||
|
{{ item[1].minItemPower * item[1].owned }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:tfoot>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td class="px-0 text-right font-weight-bold">{{ standardIntimacyItemTotal }}</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-card-item>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
30
src/components/IntimacyPower/SummaryCard.vue
Normal file
30
src/components/IntimacyPower/SummaryCard.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { usePowerItems } from '@/stores/powerItems';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const { standardIntimacyItemTotal, specialIntimacyItemsMinTotal, specialIntimacyItemsMaxTotal, specialIntimacyItemsAveTotal} = storeToRefs(usePowerItems())
|
||||||
|
|
||||||
|
const minIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMinTotal.value)
|
||||||
|
const maxIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMaxTotal.value)
|
||||||
|
const aveIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsAveTotal.value)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>Overall Intimacy Power Increase</v-card-title>
|
||||||
|
<v-card-item>
|
||||||
|
<v-list density="compact">
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-card-item>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { computed } from 'vue';
|
|
||||||
import { usePowerItems } from '@/stores/powerItems'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
itemID: string
|
|
||||||
itemName: string
|
|
||||||
itemIcon: string
|
|
||||||
owned: number
|
|
||||||
minPower: number
|
|
||||||
maxPower: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>()
|
|
||||||
const itemsOwned = ref(props.owned)
|
|
||||||
const { updateOwned } = usePowerItems()
|
|
||||||
|
|
||||||
const minTotalValue = computed(() => itemsOwned.value * props.minPower)
|
|
||||||
const maxTotalValue = computed(() => itemsOwned.value * props.maxPower)
|
|
||||||
const aveTotalValue = computed(() => itemsOwned.value * ((props.minPower + props.maxPower) / 2))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<tr>
|
|
||||||
<!-- <td>ICON</td> -->
|
|
||||||
<td class="text-left">{{ props.itemName }}</td>
|
|
||||||
<td class="text-right">{{ props.minPower }}</td>
|
|
||||||
<td class="text-right">{{ props.maxPower }}</td>
|
|
||||||
<td>
|
|
||||||
<v-text-field density="compact" hide-details="auto" v-model.number="itemsOwned" @update:model-value="updateOwned(props.itemID, itemsOwned)"></v-text-field>
|
|
||||||
</td>
|
|
||||||
<td class="text-right">{{ minTotalValue }}</td>
|
|
||||||
<td class="text-right">{{ maxTotalValue }}</td>
|
|
||||||
<td class="text-right">{{ aveTotalValue }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { computed } from 'vue';
|
|
||||||
import { usePowerItems } from '@/stores/powerItems'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
itemID: string
|
|
||||||
itemName: string
|
|
||||||
itemIcon: string
|
|
||||||
owned: number
|
|
||||||
minPower: number
|
|
||||||
maxPower: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>()
|
|
||||||
const itemsOwned = ref(props.owned)
|
|
||||||
const { updateOwned } = usePowerItems()
|
|
||||||
|
|
||||||
const totalValue = computed(() => itemsOwned.value * props.maxPower)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<tr>
|
|
||||||
<!-- <td>ICON</td> -->
|
|
||||||
<td class="text-left">{{ props.itemName }}</td>
|
|
||||||
<td class="text-right">{{ props.maxPower }}</td>
|
|
||||||
<td>
|
|
||||||
<v-text-field density="compact" hide-details="auto" v-model.number="itemsOwned" @update:model-value="updateOwned(props.itemID, itemsOwned)"></v-text-field>
|
|
||||||
</td>
|
|
||||||
<td class="text-right">{{ totalValue }}</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
|
|
@ -18,6 +18,9 @@ const vuetify = createVuetify({
|
||||||
directives,
|
directives,
|
||||||
icons: {
|
icons: {
|
||||||
defaultSet: 'mdi',
|
defaultSet: 'mdi',
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
defaultTheme: 'dark'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,11 @@ const router = createRouter({
|
||||||
path: "/fellow-power",
|
path: "/fellow-power",
|
||||||
name: "fellow-power",
|
name: "fellow-power",
|
||||||
component: () => import('@/views/FellowPowerView.vue')
|
component: () => import('@/views/FellowPowerView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/intimacy-power",
|
||||||
|
name: "intimacy-power",
|
||||||
|
component: () => import('@/views/IntimacyPowerView.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
export const useCounterStore = defineStore('counter', () => {
|
|
||||||
const count = ref(0)
|
|
||||||
const doubleCount = computed(() => count.value * 2)
|
|
||||||
function increment() {
|
|
||||||
count.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
return { count, doubleCount, increment }
|
|
||||||
})
|
|
||||||
|
|
@ -6,12 +6,20 @@ import { computed, ref, toRaw } from 'vue'
|
||||||
export const usePowerItems = defineStore('powerItems', () => {
|
export const usePowerItems = defineStore('powerItems', () => {
|
||||||
const BLESSING_POWER_ITEM_STORAGE = 'BLESSING_POWER_ITEM_STORAGE'
|
const BLESSING_POWER_ITEM_STORAGE = 'BLESSING_POWER_ITEM_STORAGE'
|
||||||
const FELLOW_POWER_ITEM_STORAGE = 'FELLOW_POWER_ITEM_STORAGE'
|
const FELLOW_POWER_ITEM_STORAGE = 'FELLOW_POWER_ITEM_STORAGE'
|
||||||
|
const INTIMACY_POWER_ITEM_STORAGE = 'INTIMACY_POWER_ITEM_STORAGE'
|
||||||
const blessingPowerItems = ref(new Map<string, PowerItem>())
|
const blessingPowerItems = ref(new Map<string, PowerItem>())
|
||||||
const fellowPowerItems = ref(new Map<string, PowerItem>())
|
const fellowPowerItems = ref(new Map<string, PowerItem>())
|
||||||
|
const intimacyPowerItems = ref(new Map<string, PowerItem>())
|
||||||
|
|
||||||
async function fetchPowerItems() {
|
async function fetchPowerItems() {
|
||||||
axios
|
axios
|
||||||
.get('/items/blessingPowerItems.json')
|
.get('/items/blessingPowerItems.json', {
|
||||||
|
headers: {
|
||||||
|
'Cache-Control': 'no-cache',
|
||||||
|
Pragma: 'no-cache',
|
||||||
|
Expires: '0'
|
||||||
|
}
|
||||||
|
})
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
const plainMap = new Map<string, PowerItem>(
|
const plainMap = new Map<string, PowerItem>(
|
||||||
Object.entries(JSON.parse(localStorage.getItem(BLESSING_POWER_ITEM_STORAGE) || '{}'))
|
Object.entries(JSON.parse(localStorage.getItem(BLESSING_POWER_ITEM_STORAGE) || '{}'))
|
||||||
|
|
@ -27,7 +35,13 @@ export const usePowerItems = defineStore('powerItems', () => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
})
|
})
|
||||||
axios
|
axios
|
||||||
.get('/items/fellowPowerItems.json')
|
.get('/items/fellowPowerItems.json', {
|
||||||
|
headers: {
|
||||||
|
'Cache-Control': 'no-cache',
|
||||||
|
Pragma: 'no-cache',
|
||||||
|
Expires: '0'
|
||||||
|
}
|
||||||
|
})
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
const plainMap = new Map<string, PowerItem>(
|
const plainMap = new Map<string, PowerItem>(
|
||||||
Object.entries(JSON.parse(localStorage.getItem(FELLOW_POWER_ITEM_STORAGE) || '{}'))
|
Object.entries(JSON.parse(localStorage.getItem(FELLOW_POWER_ITEM_STORAGE) || '{}'))
|
||||||
|
|
@ -42,6 +56,28 @@ export const usePowerItems = defineStore('powerItems', () => {
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
})
|
})
|
||||||
|
axios
|
||||||
|
.get('/items/intimacyPowerItems.json', {
|
||||||
|
headers: {
|
||||||
|
'Cache-Control': 'no-cache',
|
||||||
|
Pragma: 'no-cache',
|
||||||
|
Expires: '0'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((resp) => {
|
||||||
|
const plainMap = new Map<string, PowerItem>(
|
||||||
|
Object.entries(JSON.parse(localStorage.getItem(INTIMACY_POWER_ITEM_STORAGE) || '{}'))
|
||||||
|
)
|
||||||
|
Object.keys(resp.data).map((key) => {
|
||||||
|
const cur = resp.data[key]
|
||||||
|
if (cur['owned'] === undefined) cur['owned'] = 0
|
||||||
|
cur['owned'] = plainMap.get(key) !== undefined ? plainMap.get(key)?.owned : 0
|
||||||
|
intimacyPowerItems.value.set(key, resp.data[key])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateOwned(key: string, newOwned: number) {
|
function updateOwned(key: string, newOwned: number) {
|
||||||
|
|
@ -64,6 +100,15 @@ export const usePowerItems = defineStore('powerItems', () => {
|
||||||
JSON.stringify(mapToObj(toRaw(fellowPowerItems.value)))
|
JSON.stringify(mapToObj(toRaw(fellowPowerItems.value)))
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
cur = intimacyPowerItems.value.get(key)
|
||||||
|
if (cur !== undefined) {
|
||||||
|
cur.owned = newOwned
|
||||||
|
intimacyPowerItems.value.set(key, cur)
|
||||||
|
localStorage.setItem(
|
||||||
|
INTIMACY_POWER_ITEM_STORAGE,
|
||||||
|
JSON.stringify(mapToObj(toRaw(intimacyPowerItems.value)))
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapToObj(map: Map<string, PowerItem>) {
|
function mapToObj(map: Map<string, PowerItem>) {
|
||||||
|
|
@ -217,6 +262,78 @@ export const usePowerItems = defineStore('powerItems', () => {
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const totalIntimacyPower = computed(() =>
|
||||||
|
[...intimacyPowerItems.value.values()].reduce(
|
||||||
|
(accumulator: number, currentValue: PowerItem) => {
|
||||||
|
return currentValue !== undefined
|
||||||
|
? accumulator +
|
||||||
|
((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
|
||||||
|
: 0
|
||||||
|
},
|
||||||
|
0
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
const standardIntimacyItems = computed(
|
||||||
|
() =>
|
||||||
|
new Map(
|
||||||
|
[...intimacyPowerItems.value.entries()].filter(
|
||||||
|
(cur) => cur[1].maxItemPower === cur[1].minItemPower
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
const standardIntimacyItemTotal = computed(() =>
|
||||||
|
[...standardIntimacyItems.value.values()].reduce(
|
||||||
|
(accumulator: number, currentValue: PowerItem) =>
|
||||||
|
currentValue !== undefined
|
||||||
|
? accumulator +
|
||||||
|
((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
|
||||||
|
: 0,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
const specialIntimacyItems = computed(
|
||||||
|
() =>
|
||||||
|
new Map(
|
||||||
|
[...intimacyPowerItems.value.entries()].filter(
|
||||||
|
(cur) => cur[1].maxItemPower !== cur[1].minItemPower
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
const specialIntimacyItemsMinTotal = computed(() =>
|
||||||
|
[...specialIntimacyItems.value.values()].reduce(
|
||||||
|
(accumulator: number, currentValue: PowerItem) =>
|
||||||
|
currentValue !== undefined
|
||||||
|
? accumulator + currentValue.minItemPower * currentValue.owned
|
||||||
|
: 0,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
const specialIntimacyItemsMaxTotal = computed(() =>
|
||||||
|
[...specialIntimacyItems.value.values()].reduce(
|
||||||
|
(accumulator: number, currentValue: PowerItem) =>
|
||||||
|
currentValue !== undefined
|
||||||
|
? accumulator + currentValue.maxItemPower * currentValue.owned
|
||||||
|
: 0,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
const specialIntimacyItemsAveTotal = computed(() =>
|
||||||
|
[...specialIntimacyItems.value.values()].reduce(
|
||||||
|
(accumulator: number, currentValue: PowerItem) =>
|
||||||
|
currentValue !== undefined
|
||||||
|
? accumulator +
|
||||||
|
((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
|
||||||
|
: 0,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
fetchPowerItems()
|
fetchPowerItems()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -236,6 +353,13 @@ export const usePowerItems = defineStore('powerItems', () => {
|
||||||
specialFellowItems,
|
specialFellowItems,
|
||||||
specialFellowItemsMinTotal,
|
specialFellowItemsMinTotal,
|
||||||
specialFellowItemsMaxTotal,
|
specialFellowItemsMaxTotal,
|
||||||
specialFellowItemsAveTotal
|
specialFellowItemsAveTotal,
|
||||||
|
totalIntimacyPower,
|
||||||
|
standardIntimacyItems,
|
||||||
|
standardIntimacyItemTotal,
|
||||||
|
specialIntimacyItems,
|
||||||
|
specialIntimacyItemsMinTotal,
|
||||||
|
specialIntimacyItemsMaxTotal,
|
||||||
|
specialIntimacyItemsAveTotal
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,5 @@ export type PowerItem = {
|
||||||
minItemPower: number
|
minItemPower: number
|
||||||
maxItemPower: number
|
maxItemPower: number
|
||||||
owned: number
|
owned: number
|
||||||
|
rarity: number
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,22 +5,16 @@ import SummaryCard from '@/components/BlessingPower/SummaryCard.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid>
|
<v-sheet class="d-flex flex-wrap flex-fill">
|
||||||
<v-row justify="center">
|
<StandardItemsCard class="ma-2 align-self-start" />
|
||||||
<v-col><StandardItemsCard /></v-col>
|
<SpecialItemsCard class="ma-2 align-self-start" />
|
||||||
<v-col><SpecialItemsCard /></v-col>
|
<SummaryCard class="ma-2 align-self-start" />
|
||||||
</v-row>
|
</v-sheet>
|
||||||
<v-row justify="center">
|
|
||||||
<v-col cols="6">
|
|
||||||
<SummaryCard />
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use "@/styles/settings.scss";
|
@use '@/styles/settings.scss';
|
||||||
:deep(tbody) tr:nth-of-type(even) {
|
:deep(tbody) tr:nth-of-type(even) {
|
||||||
background-color: map-get(settings.$purple, "lighten-5");
|
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,22 +5,16 @@ import SummaryCard from '@/components/FellowPower/SummaryCard.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<v-container fluid>
|
<v-sheet class="d-flex flex-wrap flex-fill">
|
||||||
<v-row justify="center">
|
<StandardItemsCard class="ma-2 align-self-start"/>
|
||||||
<v-col><StandardItemsCard /></v-col>
|
<SpecialItemsCard class="ma-2 align-self-start"/>
|
||||||
<v-col><SpecialItemsCard /></v-col>
|
<SummaryCard class="ma-2 align-self-start" />
|
||||||
</v-row>
|
</v-sheet>
|
||||||
<v-row justify="center">
|
|
||||||
<v-col cols="6">
|
|
||||||
<SummaryCard />
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use "@/styles/settings.scss";
|
@use "@/styles/settings.scss";
|
||||||
:deep(tbody) tr:nth-of-type(even) {
|
:deep(tbody) tr:nth-of-type(even) {
|
||||||
background-color: map-get(settings.$purple, "lighten-5");
|
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,91 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<v-sheet class="flex-fill pa-2">
|
||||||
<v-sheet>
|
<h1 class="pa-2">ISL Item Value Calculator</h1>
|
||||||
Click one of the links to the left.
|
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||||
|
<h2>How to Use</h2>
|
||||||
|
<p>
|
||||||
|
Select the type of items you want to add up from the menu, then add how many of each item
|
||||||
|
you have under the "owned" column. Totals will automatically be calculated for you as you
|
||||||
|
update. This also attempts to save your values in your browser automatically.
|
||||||
|
</p>
|
||||||
</v-sheet>
|
</v-sheet>
|
||||||
</main>
|
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||||
|
<h2>Missing Features</h2>
|
||||||
|
<v-list>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Syncing</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Currently all data is stored in your browser and cannot be moved to another device
|
||||||
|
easily.
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Refreshing Data</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
The list of available items is only loaded when you first access the page. If they are
|
||||||
|
updated, you will need to manually refresh in order to fetch new items.
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Missing Data</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
Some items may be missing! I'll figure out what to put to contact me with fixes soon!
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Missing Icons</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
I'd love to add icons for everything
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>Sorting and Grouping</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
More grouping and sorting options will be added as I figure out how.
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||||
|
<h2>Changelog</h2>
|
||||||
|
<v-list lines="two">
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>2024-01-16</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<p>The inital build, looked like hell, but mostly worked</p>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>2024-01-17</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<p>Cleaned up my build process a bit, and fixed a few bugs</p>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>2024-01-20</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<p>First pass that I'm comfortable letting other people see</p>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title>2024-01-21</v-list-item-title>
|
||||||
|
<v-list-item-subtitle>
|
||||||
|
<p>Added text to the landing page</p>
|
||||||
|
<p>Cleaned up some styling across the site</p>
|
||||||
|
<p>Added a default sort to all of the tables</p>
|
||||||
|
</v-list-item-subtitle>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet :elevation="1" class="ma-2 my-4">
|
||||||
|
<h2>Thanks</h2>
|
||||||
|
<p>
|
||||||
|
Special thanks to <span class="font-weight-bold">@marstache</span> from
|
||||||
|
<span class="font-weight-bold">S-183</span> for sharing his version of this in Google Sheets
|
||||||
|
and inspiring me to create this.
|
||||||
|
</p>
|
||||||
|
</v-sheet>
|
||||||
|
</v-sheet>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
20
src/views/IntimacyPowerView.vue
Normal file
20
src/views/IntimacyPowerView.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import SpecialItemsCard from '@/components/IntimacyPower/SpecialItemsCard.vue'
|
||||||
|
import StandardItemsCard from '@/components/IntimacyPower/StandardItemsCard.vue'
|
||||||
|
import SummaryCard from '@/components/IntimacyPower/SummaryCard.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-sheet class="d-flex flex-wrap flex-fill">
|
||||||
|
<StandardItemsCard class="ma-2 align-self-start"/>
|
||||||
|
<SpecialItemsCard class="ma-2 align-self-start"/>
|
||||||
|
<SummaryCard class="ma-2 align-self-start" />
|
||||||
|
</v-sheet>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@use "@/styles/settings.scss";
|
||||||
|
:deep(tbody) tr:nth-of-type(even) {
|
||||||
|
background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue