Skip to content

Commit

Permalink
Add multi-mission-view
Browse files Browse the repository at this point in the history
  • Loading branch information
DavidArthurCole committed Mar 12, 2024
1 parent 7f0a56f commit e819b1c
Show file tree
Hide file tree
Showing 8 changed files with 412 additions and 107 deletions.
2 changes: 1 addition & 1 deletion VERSION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
1.5.6
1.5.7
20 changes: 16 additions & 4 deletions www/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,26 @@
flex-wrap: wrap;
gap: 10px;
}

.mission-item {

.mission-row-view {
flex: 0 0 calc(5% - 10px);
}

.mission-items-view {
flex: 0 0 calc(95% - 10px);
}

.mission-items-full {
flex: 0 0 100%;
}

.mission-item-3 {
flex: 0 0 calc(33.33% - 10px);
box-sizing: border-box;
}

.overlay-mission, .overlay-drop, .overlay-target, .overlay-target-lifetime, .overlay-update, .overlay-menno {
background: rgba(0, 0, 0, 0.5);
.overlay-mission, .overlay-multi-mission, .overlay-drop, .overlay-target, .overlay-target-lifetime, .overlay-update, .overlay-menno {
background: rgba(0, 0, 0, 0.7);
}

.bg-rare-animated {
Expand Down
254 changes: 165 additions & 89 deletions www/index.html

Large diffs are not rendered by default.

12 changes: 11 additions & 1 deletion www/index.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,19 @@ hr {
}

.popup-opt {
@apply drop-opt hover:bg-darker flex relative text-center items-center rounded-md mr-05rem
@apply drop-opt hover:bg-darker flex relative text-center items-center rounded-md mr-05rem;
outline: none;
}

.selected-popup-opt:focus {
@apply border border-blue-500 bg-darker;
outline: none;
}

.filter-incomplete {
@apply whitespace-pre max-h-9 items-center justify-center text-red-700 text-xs border border-red-700 rounded-md bg-transparent py-2 px-4 mt-05rem
}

.mission-view-overlay {
@apply w-full h-full z-40 fixed top-0 left-0 right-0 bottom-0 hidden items-center justify-center
}
3 changes: 2 additions & 1 deletion www/templates/DropDisplay.vue
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
mennoMissionData: Object,
showExpectedDrops: Boolean,
showExpectedTotalDrops: Boolean,
lifetimeTotalDropsCount: Number,
},
methods: {
getRepeatClass(){
Expand Down Expand Up @@ -150,7 +151,7 @@
item.artifactConfiguration.artifactRarity.id == dropRarity
);
if(mennoItem == null) return null;
return ((mennoItem.totalDrops / this.mennoMissionData.totalDropsCount) * this.getTotalCount()).toFixed(3);
return ((mennoItem.totalDrops / this.mennoMissionData.totalDropsCount) * this.lifetimeTotalDropsCount).toFixed(3);
},
getTotalCount(){
return this.itemArray.reduce((acc, item) => acc + item.count, 0);
Expand Down
13 changes: 9 additions & 4 deletions www/templates/DropDisplayContainer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:lifetime-show-per-ship="lifetimeShowPerShip" :lifetime-mission-count="lifetimeMissionCount"
:use-gifs-for-rarity="useGifsForRarity" :af-rarity-class="afRarityClass" :af-rarity-text="afRarityText"
:menno-mission-data="mennoMissionData" :show-expected-drops="showExpectedDrops"
:show-expected-total-drops="showExpectedTotalDrops"
:show-expected-total-drops="showExpectedTotalDrops" :lifetime-total-drops-count="getLifetimeTotalCount()"
></drop-display>

<!-- Stones -->
Expand All @@ -15,7 +15,7 @@
label-display-value="Eggfinity Stones" :ledger-type="ledgerType"
:lifetime-show-per-ship="lifetimeShowPerShip" :lifetime-mission-count="lifetimeMissionCount"
:menno-mission-data="mennoMissionData" :show-expected-drops="showExpectedDrops"
:show-expected-total-drops="showExpectedTotalDrops"
:show-expected-total-drops="showExpectedTotalDrops" :lifetime-total-drops-count="getLifetimeTotalCount()"
></drop-display>

<!-- Ingredients -->
Expand All @@ -24,7 +24,7 @@
label-display-value="Ingredients" :ledger-type="ledgerType"
:lifetime-show-per-ship="lifetimeShowPerShip" :lifetime-mission-count="lifetimeMissionCount"
:menno-mission-data="mennoMissionData" :show-expected-drops="showExpectedDrops"
:show-expected-total-drops="showExpectedTotalDrops"
:show-expected-total-drops="showExpectedTotalDrops" :lifetime-total-drops-count="getLifetimeTotalCount()"
></drop-display>

<!-- Stone Fragments -->
Expand All @@ -33,7 +33,7 @@
label-display-value="Stone Fragments" :ledger-type="ledgerType"
:lifetime-show-per-ship="lifetimeShowPerShip" :lifetime-mission-count="lifetimeMissionCount"
:menno-mission-data="mennoMissionData" :show-expected-drops="showExpectedDrops"
:show-expected-total-drops="showExpectedTotalDrops"
:show-expected-total-drops="showExpectedTotalDrops" :lifetime-total-drops-count="getLifetimeTotalCount()"
></drop-display>

</template>
Expand All @@ -45,6 +45,11 @@
components: {
DropDisplay,
},
methods: {
getLifetimeTotalCount(){
return this.data.artifactCount + this.data.stoneCount + this.data.ingredientCount + this.data.stoneFragmentCount;
},
},
props: {
useGifsForRarity: Boolean,
data: Object,
Expand Down
69 changes: 62 additions & 7 deletions www/templates/SearchOverSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@
<input
:id="(ledgerType) + '-search' + (isLifetime ? '-lifetime' : '')"
class="input-search" type="text" placeholder="Search..."
v-on:focus="e => {e.preventDefault(); e.stopPropagation(); }"
v-on:focus="e => {e.preventDefault(); e.stopPropagation(); resetSelectedItem(); }"
v-on:input="e => {e.preventDefault(); $emit('input', e.target.value)}"
/>
<div class="popup-opt-container">
<div v-for="item in itemList" v-bind:key="item" class="popup-opt"
v-on:keydown="e => {if(e.keyCode === 38 || e.keyCode === 40) { e.preventDefault(); arrowKeyDown(e); }}"
/>
<div class="popup-opt-container">
<div v-for="item in itemList" v-bind:key="item" class="popup-opt" :id="item.value + '_div'"
v-on:click="e => {e.preventDefault(); $emit('select', item)}"
v-on:keydown="e => {e.preventDefault(); if(e.keyCode == '38' || e.keyCode == '40') {arrowKeyDown(e);} else if(e.keyCode == '13') {$emit('select', item); clearSearch();}}"
tabindex="0"
>
<img
class="mr-1rem max-w-7" v-if="item.imagePath != null && item.imagePath != ''"
Expand All @@ -29,11 +32,11 @@
</span>
</div>
<div v-if="itemList == [] || itemList.length == 0">
<span class="text-gray-400">
<span class="text-gray-400">
No results found.
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
Expand All @@ -46,7 +49,59 @@
ledgerType: String,
isLifetime: Boolean,
},
data() {
return {
selectedItem: null,
};
},
methods: {
arrowKeyDown(event){
if(event.keyCode == '38'){
// up arrow
if(this.selectedItem === null) return;
if(this.selectedItem == this.itemList[0]) {
this.unselectItem(this.selectedItem);
this.focusSearchBar();
} else{
const index = this.itemList.indexOf(this.selectedItem);
this.unselectItem(this.selectedItem);
this.selectItem(this.itemList[index - 1]);
}
}
else if(event.keyCode == '40'){
if(this.selectedItem === null){
this.selectItem(this.itemList[0]);
}
else{
const index = this.itemList.indexOf(this.selectedItem);
if(index == this.itemList.length - 1) return;
this.unselectItem(this.selectedItem);
this.selectItem(this.itemList[index + 1]);
}
}
},
clearSearch(){
document.getElementById(this.ledgerType + '-search' + (this.isLifetime ? '-lifetime' : '')).value = '';
},
selectItem(item){
document.getElementById(this.ledgerType + '-search' + (this.isLifetime ? '-lifetime' : ''))?.blur();
this.selectedItem = item;
document.getElementById(item.value + '_div').classList.add('selected-popup-opt');
document.getElementById(item.value + '_div').focus();
},
unselectItem(item){
this.selectedItem = null;
document.getElementById(item.value + '_div').classList.remove('selected-popup-opt');
document.getElementById(item.value + '_div').blur();
},
resetSelectedItem(){
if(this.selectedItem === null) return;
this.unselectItem(this.selectedItem);
},
focusSearchBar(){
this.selectedItem = null;
document.getElementById(this.ledgerType + '-search' + (this.isLifetime ? '-lifetime' : '')).focus();
},
getImgPath(item){
if(this.ledgerType === 'drop') return `images/${item.imagePath}`;
else if(this.ledgerType === 'target') return `images/targets/${item.imagePath}`;
Expand Down
146 changes: 146 additions & 0 deletions www/templates/ShipDisplay.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<template>
<div
v-if="topLevelBool"
class="min-w-30vw max-w-35vw max-h-70vh text-gray-300 text-center overflow-auto"
>
<!-- Header information about the mission -->
<span :class="durToTextClass(viewMissionData.shipInfo.durationType)">
{{ viewMissionData.shipInfo.shipString }}
</span><br />
<span
v-if="viewMissionData.shipInfo.level && viewMissionData.shipInfo.level > 0"
class="text-star text-goldenstar"
>
{{ "★".repeat(viewMissionData.shipInfo.level) }}
</span>
<br v-if="viewMissionData.shipInfo.level && viewMissionData.shipInfo.level > 0" />
<span>Launched: {{ viewMissionData.launchStr }}</span> <br />
<span>Returned: {{ viewMissionData.returnStr }}</span> <br />
<span>Duration: {{ viewMissionData.durationStr }}</span> <br />
<span class="flex flex-row items-center justify-center">
<span :class="(viewMissionData.shipInfo.isDubCap ? 'mr-05rem' : '')">Capacity: {{ viewMissionData.shipInfo.capacity }} </span>
<span v-if="viewMissionData.shipInfo.isDubCap"
class="max-w-28 flex py-1 double-cap-span items-center justify-center flex-1"
>
<img
alt="Artifact Crate"
src="https://eggincassets.tcl.sh/64/egginc/icon_afx_chest_2.png"
class="w-6 mr-05rem"
>
<span class="tooltip-custom text-xs font-bold">
{{viewMissionData.capacityModifier}}x Capacity
<span class="font-normal text-sm text-gray-400 tooltiptext-custom speech-bubble">
This ship was launched during a<br />
<span class="text-dubcap">
{{viewMissionData.capacityModifier}}x Capacity Event
</span>
and returned with<br />
more artifacts than normal.
</span>
</span>
</span>
<br />
</span>
<div v-if="viewMissionData.shipInfo.target != '' && viewMissionData.shipInfo.target.toUpperCase() != 'UNKNOWN'">
<div class="items-center justify-center flex">
<span>Sensor Target: </span>
<div class="ml-1 text-center text-xs rounded-full w-max px-1.5 py-0.5 text-gray-400 bg-darkerer font-semibold">
{{ properCase(viewMissionData.shipInfo.target.replaceAll("_", " ")) }}
</div>
</div>
<br/>
</div>

<!-- Previous mission -->
<button
v-if="!isMulti"
v-bind:disabled="viewMissionData.prevMission == null"
v-on:click="$emit('view', viewMissionData.prevMission)"
title="Previous mission"
class="disabled:hover:cursor-not-allowed absolute left-0 top-1/2 transform -translate-y-1/2 pl-2 rounded-md text-gray-400 focus:outline-none z-10 disabled:text-gray-500 hover:text-gray-500"
>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<!-- Next mission -->
<button
v-if="!isMulti"
v-bind:disabled="viewMissionData.nextMission == null"
v-on:click="$emit('view', viewMissionData.nextMission)"
title="Next mission"
class="disabled:hover:cursor-not-allowed absolute right-0 top-1/2 transform -translate-y-1/2 pr-2 rounded-md text-gray-400 focus:outline-none z-10 disabled:text-gray-500 hover:text-gray-500"
>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>

<drop-display-container
:use-gifs-for-rarity="useGifsForRarity" ledger-type="mission"
:af-rarity-class="afRarityClass" :af-rarity-text="afRarityText"
:data="viewMissionData"
:menno-mission-data="mennoMissionData" :show-expected-drops="showExpectedDrops"
></drop-display-container>

<!-- Shamelessly stolen straight from MK2's source code, with mobile note removed -->
<div
v-if="!isMulti"
class="mt-2 text-xs text-gray-300 text-center"
>
Hover mouse over an item to show details.<br />
Click to open the relevant <a target="_blank" v-external-link href="https://wasmegg-carpet.netlify.app/artifact-explorer/" class="ledger-underline">
artifact explorer
</a> page.
</div>
</div>
</template>

<script>
import DropDisplayContainer from './DropDisplayContainer.vue';
export default {
components: {
DropDisplayContainer,
},
emits: [
'view',
],
props: {
topLevelBool: Boolean,
viewMissionData: Object,
isMulti: Boolean,
useGifsForRarity: Boolean,
afRarityClass: Function,
afRarityText: Function,
mennoMissionData: Object,
showExpectedDrops: Boolean,
},
methods: {
durToTextClass(dur){
switch(dur){
case 0: return "text-short";
case 1: return "text-standard";
case 2: return "text-extended";
case 3: return "text-tutorial";
default: return "";
}
},
properCase(string) {
string = string.toLowerCase();
// Capitalize the first letter of each word, unless it is 'of' or 'the'
const words = string.split(" ");
for (let i = 0; i < words.length; i++) {
if (words[i] !== "of" && words[i] !== "the") {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
}
const finalString = words.join(" ");
return finalString.charAt(0).toUpperCase() + finalString.slice(1);
},
},
}
</script>

0 comments on commit e819b1c

Please sign in to comment.