Skip to content

Commit

Permalink
chore: even more compact
Browse files Browse the repository at this point in the history
  • Loading branch information
Mees committed Nov 3, 2024
1 parent 9f356da commit 007d441
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 77 deletions.
15 changes: 7 additions & 8 deletions src/views/Training/TrainingCrafting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@
:xp="craftingXp"
:xp-to-next-level="craftingXpToNextLevel"
:milestones="trainingStore.craftingMilestones"
class="mb-8"
/>

<p class="text-lg font-semibold mb-2 text-gray-800">
Active Crafting Recipes: {{ trainingStore.activeCraftingRecipes.length }} / {{ trainingStore.maxActiveCraftingRecipes }}
</p>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-6">
<div class="bg-white rounded-lg shadow-md p-4 border border-gray-200 mb-2">
<p class="text-lg font-semibold mb-2 text-gray-800">
Active Crafting Recipes: {{ trainingStore.activeCraftingRecipes.length }} / {{ trainingStore.maxActiveCraftingRecipes }}
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-2">
<div
v-for="recipe in craftingRecipes"
:key="recipe.name"
Expand All @@ -26,7 +25,7 @@
{{ recipe.description }}
</p>

<div class="grid grid-cols-2 gap-2 mb-2 text-sm">
<div class="grid grid-cols-2 gap-1 mb-2 text-sm">
<div>
<p class="font-semibold text-gray-700">
Level Required
Expand Down
142 changes: 73 additions & 69 deletions src/views/Training/TrainingMining.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@
</div>
</div>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-6">
<div class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-2">
<div
v-for="(resource, index) in miningResources"
:key="resource.name"
class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow duration-200"
class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow duration-200 flex flex-col"
>
<SkillDisplay
:with-styling="false"
Expand All @@ -44,7 +44,7 @@
class="mb-2"
/>

<div class="grid grid-cols-2 gap-4 mb-2">
<div class="grid grid-cols-2 gap-1 mb-2">
<div class="text-sm">
<p class="font-semibold text-gray-700">
Level Required
Expand Down Expand Up @@ -83,76 +83,50 @@
</div>
</div>

<!-- Mining Progress Bar -->
<div
v-if="!resource.isDepleted"
class="mb-2"
>
<p class="text-sm font-semibold text-gray-700 mb-1">
Mining Progress
</p>
<div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
<div
class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
:style="{ width: `${(resource.timePerAction / (resource.initialTimePerAction - resource.timeReduction)) * 100}%` }"
/>
<p class="absolute inset-0 text-center text-xs text-white font-semibold leading-4">
{{ resource.timePerAction.toFixed(1) }}s
<div v-if="isMiningResource(resource) || resource.isDepleted">
<!-- Mining Progress Bar -->
<div
v-if="!resource.isDepleted"
class="mb-2"
>
<p class="text-sm font-semibold text-gray-700 mb-1">
Mining Progress
</p>
<div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
<div
class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
:style="{ width: `${(resource.timePerAction / (resource.initialTimePerAction - resource.timeReduction)) * 100}%` }"
/>
<p class="absolute inset-0 text-center text-xs text-white font-semibold leading-4">
{{ resource.timePerAction.toFixed(1) }}s
</p>
</div>
</div>
</div>

<!-- Respawn Progress Bar -->
<div
v-else
class="mb-2"
>
<p class="text-sm font-semibold text-gray-700 mb-1">
Respawn Progress
</p>
<div class="relative w-full h-4 bg-red-200 rounded-full overflow-hidden">
<div
class="absolute top-0 left-0 h-full bg-red-500 rounded-full"
:style="{ width: `${(resource.respawnTime / (resource.initialRespawnTime - resource.respawnReduction)) * 100}%` }"
/>
<p class="absolute inset-0 text-center text-xs text-white font-semibold leading-4">
{{ resource.respawnTime.toFixed(1) }}s
<!-- Respawn Progress Bar -->
<div
v-else
class="mb-2"
>
<p class="text-sm font-semibold text-gray-700 mb-1">
Respawn Progress
</p>
<div class="relative w-full h-4 bg-red-200 rounded-full overflow-hidden">
<div
class="absolute top-0 left-0 h-full bg-red-500 rounded-full"
:style="{ width: `${(resource.respawnTime / (resource.initialRespawnTime - resource.respawnReduction)) * 100}%` }"
/>
<p class="absolute inset-0 text-center text-xs text-white font-semibold leading-4">
{{ resource.respawnTime.toFixed(1) }}s
</p>
</div>
</div>
</div>

<!-- Start/Stop Mining Buttons -->
<div class="flex justify-between mb-2">
<button
v-if="!isMiningResource(resource) && !resource.isDepleted"
:disabled="training.mining.level < resource.levelRequired"
class="bg-blue-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors duration-200"
@click="startMining(resource)"
>
Start Mining
</button>

<button
v-if="isMiningResource(resource) || resource.isDepleted"
class="bg-red-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-red-600 transition-colors duration-200"
@click="stopMining(resource)"
>
Stop Mining
</button>
</div>

<!-- Milestones Toggle Button -->
<button
class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg font-bold w-full hover:bg-gray-300 transition-colors duration-200"
@click="toggleMilestones(index)"
>
{{ showMilestones[index] ? 'Hide' : 'Show' }} Milestones
</button>

<!-- Milestones Section -->
<div
v-if="showMilestones[index]"
class="mt-4 border-t border-gray-200 pt-4"
class="border-t border-gray-200 pt-4"
>
<h4 class="text-lg font-semibold text-gray-800 mb-2">
Milestones
Expand All @@ -162,13 +136,14 @@
v-for="milestone in resource.milestones"
:key="milestone.level"
class="flex justify-between items-center text-sm py-2 border-b border-gray-200 last:border-b-0"
:class="{'text-green-600 font-semibold': resource.level >= milestone.level, 'text-gray-600': resource.level < milestone.level}"
:class="{ 'text-green-600 font-semibold': resource.level >= milestone.level, 'text-gray-600': resource.level < milestone.level }"
>
<div class="flex-1">
<strong>Level {{ milestone.level }}</strong>:
Collect x{{ milestone.collectionMultiplierBonus + 1 }}
{{ milestone.timeReductionBonus > 0 ? `and reduce time by ${milestone.timeReductionBonus}s` : '' }}
{{ milestone.respawnReductionBonus > 0 ? `and reduce respawn time by ${milestone.respawnReductionBonus}s` : '' }}
{{ milestone.respawnReductionBonus > 0 ? `and reduce respawn time by
${milestone.respawnReductionBonus}s` : '' }}
</div>
<div class="flex-shrink-0 ml-2">
<span
Expand All @@ -181,17 +156,47 @@
</li>
</ul>
</div>

<div class="mt-auto space-y-2">
<!-- Start/Stop Mining Buttons -->
<div class="flex justify-between">
<button
v-if="!isMiningResource(resource) && !resource.isDepleted"
:disabled="training.mining.level < resource.levelRequired"
class="small w-full bg-blue-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors duration-200"
@click="startMining(resource)"
>
Start Mining
</button>

<button
v-if="isMiningResource(resource) || resource.isDepleted"
class="small w-full bg-red-500 text-white px-4 py-2 rounded-lg font-bold hover:bg-red-600 transition-colors duration-200"
@click="stopMining(resource)"
>
Stop Mining
</button>
</div>

<!-- Milestones Toggle Button -->
<button
class="small bg-gray-200 text-gray-800 px-4 py-2 rounded-lg font-bold w-full hover:bg-gray-300 transition-colors duration-200"
@click="toggleMilestones(index)"
>
{{ showMilestones[index] ? 'Hide' : 'Show' }} Milestones
</button>
</div>
</div>
</div>
</div>
</template>


<script setup lang="ts">
import {useTrainingStore} from '@/stores/trainingStore'
import {computed, ref} from 'vue'
import { useTrainingStore } from '@/stores/trainingStore'
import { computed, ref } from 'vue'
import SkillDisplay from '@/components/SkillDisplay.vue'
import {MiningResource} from '@/types/trainingTypes'
import { MiningResource } from '@/types/trainingTypes'
import { toPercentageFormatted, formatNumber } from '@/utils'
const trainingStore = useTrainingStore()
Expand Down Expand Up @@ -227,4 +232,3 @@ function toggleMilestones(index: number) {
showMilestones.value[index] = !showMilestones.value[index]
}
</script>

0 comments on commit 007d441

Please sign in to comment.