Moe/ogame-vue-ts
1
0
Fork 0
mirror of https://github.com/setube/ogame-vue-ts.git synced 2026-05-12 07:55:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 同步 gameSpeed 倍率展示并修复移动端资源栏遮挡

Browse Source 
- 顶部资源栏/概览页：产量、能耗、明细按 gameSpeed 统一缩放，避免显示与实际产出不一致
- 支持 gameSpeed=0：避免 “|| 1” 抹掉 0，并在循环间隔计算中规避除 0
- 修复移动端资源横向滚动时被菜单按钮遮挡（min-w-0/overflow-hidden + 对齐规则）
This commit is contained in:
lpj
2025-12-17 22:15:58 +08:00
parent cfcde0b024
commit 690e6cbbf5
6 changed files with 129 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@@ -201,11 +201,17 @@
</div>
<!-- 资源显示 - PC端居中，移动端可折叠 -->
<!-- 关键：min-w-0 + overflow-hidden，避免横向滚动内容溢出覆盖左侧菜单按钮 -->
<div class="min-w-0 overflow-hidden">
<div
class="resource-bar flex items-center gap-3 sm:gap-6 justify-center"
class="resource-bar flex items-center gap-3 sm:gap-6 justify-start sm:justify-center"
:class="resourceBarExpanded ? 'hidden' : 'overflow-x-auto'"
>
<div v-for="resourceType in resourceTypes" :key="resourceType.key" class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
<div
v-for="resourceType in resourceTypes"
:key="resourceType.key"
class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0"
>
<ResourceIcon :type="resourceType.key" size="md" />
<div class="min-w-0">
<!-- 电力显示净产量和效率 -->
@@ -226,7 +232,8 @@
class="text-xs sm:text-sm font-medium truncate"
:class="getResourceColor(planet.resources[resourceType.key], capacity?.[resourceType.key] || Infinity)"
>
{{ formatNumber(planet.resources[resourceType.key]) }} / {{ formatNumber(capacity?.[resourceType.key] || 0) }}
{{ formatNumber(planet.resources[resourceType.key]) }} /
{{ formatNumber(capacity?.[resourceType.key] || 0) }}
</p>
<p class="text-[10px] sm:text-xs text-muted-foreground truncate">
+{{ formatNumber(Math.round((production?.[resourceType.key] || 0) / 60)) }}/{{ t('resources.perMinute') }}
@@ -235,6 +242,7 @@
</div>
</div>
</div>
</div>
<!-- 右侧：展开按钮（仅移动端） + 状态 -->
<div class="flex items-center gap-2 sm:gap-3 flex-shrink-0 justify-end">
@@ -407,6 +415,7 @@
import { DIPLOMATIC_CONFIG } from '@/config/gameConfig'
import type { VersionInfo } from '@/utils/versionCheck'
import { formatNumber, getResourceColor } from '@/utils/format'
import { getGameLoopIntervalMs, scaleNumber, scaleResources } from '@/utils/speed'
import {
Moon,
Sun,
@@ -1209,7 +1218,7 @@
clearInterval(gameLoop)
}
// 根据游戏速度计算间隔时间
const interval = 1000 / (gameStore.gameSpeed || 1)
const interval = getGameLoopIntervalMs(gameStore.gameSpeed)
// 启动新的游戏循环
gameLoop = setInterval(() => {
updateGame()
@@ -1410,11 +1419,12 @@
if (!planet.value) return null
const now = Date.now()
const bonuses = officerLogic.calculateActiveBonuses(gameStore.player.officers, now)
return resourceLogic.calculateResourceProduction(planet.value, {
const base = resourceLogic.calculateResourceProduction(planet.value, {
resourceProductionBonus: bonuses.resourceProductionBonus,
darkMatterProductionBonus: bonuses.darkMatterProductionBonus,
energyProductionBonus: bonuses.energyProductionBonus
})
return scaleResources(base, gameStore.gameSpeed)
})
const capacity = computed(() => {
@@ -1427,7 +1437,7 @@
// 电力消耗
const energyConsumption = computed(() => {
if (!planet.value) return 0
return resourceLogic.calculateEnergyConsumption(planet.value)
return scaleNumber(resourceLogic.calculateEnergyConsumption(planet.value), gameStore.gameSpeed)
})
// 净电力（产量 - 消耗）

6
src/logic/publicLogic.ts
View File

@@ -8,6 +8,7 @@ import type { Planet, Resources, Officer, BuildingConfig, TechnologyConfig } fro
import { OfficerType } from '@/types/game'
import * as officerLogic from '@/logic/officerLogic'
import * as resourceLogic from '@/logic/resourceLogic'
import { scaleResources } from '@/utils/speed'
/**
* 获取特定等级的升级条件
@@ -93,11 +94,12 @@ export const checkRequirements = (
* @param officers 玩家的军官对象
* @returns 每小时各类资源的产量
*/
export const getResourceProduction = (planet: Planet, officers: Record<OfficerType, Officer>): Resources => {
export const getResourceProduction = (planet: Planet, officers: Record<OfficerType, Officer>, resourceSpeed: number = 1): Resources => {
// 计算当前激活的军官加成
const bonuses = officerLogic.calculateActiveBonuses(officers, Date.now())
// 根据建筑等级和军官加成计算资源产量
return resourceLogic.calculateResourceProduction(planet, bonuses)
const base = resourceLogic.calculateResourceProduction(planet, bonuses)
return scaleResources(base, resourceSpeed)
}
/**

61
src/logic/resourceLogic.ts
View File

@@ -249,7 +249,8 @@ export interface ConsumptionDetail {
export const calculateProductionBreakdown = (
planet: Planet,
officers: Record<OfficerType, Officer>,
currentTime: number
currentTime: number,
resourceSpeed: number = 1
): ProductionBreakdown => {
const metalMineLevel = planet.buildings[BuildingType.MetalMine] || 0
const crystalMineLevel = planet.buildings[BuildingType.CrystalMine] || 0
@@ -435,42 +436,56 @@ export const calculateProductionBreakdown = (
const energyFinal = energyBase * (1 + totalEnergyBonus / 100)
const speed = resourceSpeed
const scaleBonuses = (bonuses: ProductionBonus[]) =>
bonuses.map(bonus => ({
...bonus,
value: bonus.value * speed
}))
const scaleSources = (sources?: ProductionSource[]) =>
sources?.map(source => ({
...source,
production: source.production * speed
}))
return {
metal: {
baseProduction: metalBase,
baseProduction: metalBase * speed,
buildingLevel: metalMineLevel,
buildingName: 'buildings.metalMine',
bonuses: metalBonuses,
finalProduction: metalFinal
bonuses: scaleBonuses(metalBonuses),
finalProduction: metalFinal * speed
},
crystal: {
baseProduction: crystalBase,
baseProduction: crystalBase * speed,
buildingLevel: crystalMineLevel,
buildingName: 'buildings.crystalMine',
bonuses: crystalBonuses,
finalProduction: crystalFinal
bonuses: scaleBonuses(crystalBonuses),
finalProduction: crystalFinal * speed
},
deuterium: {
baseProduction: deuteriumBase,
baseProduction: deuteriumBase * speed,
buildingLevel: deuteriumSynthesizerLevel,
buildingName: 'buildings.deuteriumSynthesizer',
bonuses: deuteriumBonuses,
finalProduction: deuteriumFinal
bonuses: scaleBonuses(deuteriumBonuses),
finalProduction: deuteriumFinal * speed
},
darkMatter: {
baseProduction: darkMatterBase,
baseProduction: darkMatterBase * speed,
buildingLevel: darkMatterCollectorLevel,
buildingName: 'buildings.darkMatterCollector',
bonuses: darkMatterBonuses,
finalProduction: darkMatterFinal
bonuses: scaleBonuses(darkMatterBonuses),
finalProduction: darkMatterFinal * speed
},
energy: {
baseProduction: energyBase,
baseProduction: energyBase * speed,
buildingLevel: solarPlantLevel,
buildingName: 'buildings.solarPlant',
bonuses: energyBonuses,
finalProduction: energyFinal,
sources: energySources
bonuses: scaleBonuses(energyBonuses),
finalProduction: energyFinal * speed,
sources: scaleSources(energySources)
}
}
}
@@ -478,7 +493,7 @@ export const calculateProductionBreakdown = (
/**
* 计算能量消耗详细breakdown
*/
export const calculateConsumptionBreakdown = (planet: Planet): ConsumptionBreakdown => {
export const calculateConsumptionBreakdown = (planet: Planet, resourceSpeed: number = 1): ConsumptionBreakdown => {
const metalMineLevel = planet.buildings[BuildingType.MetalMine] || 0
const crystalMineLevel = planet.buildings[BuildingType.CrystalMine] || 0
const deuteriumSynthesizerLevel = planet.buildings[BuildingType.DeuteriumSynthesizer] || 0
@@ -487,22 +502,24 @@ export const calculateConsumptionBreakdown = (planet: Planet): ConsumptionBreakd
const crystalConsumption = crystalMineLevel * 10 * Math.pow(1.1, crystalMineLevel)
const deuteriumConsumption = deuteriumSynthesizerLevel * 15 * Math.pow(1.1, deuteriumSynthesizerLevel)
const speed = resourceSpeed
return {
metalMine: {
buildingLevel: metalMineLevel,
buildingName: 'buildings.metalMine',
consumption: metalConsumption
consumption: metalConsumption * speed
},
crystalMine: {
buildingLevel: crystalMineLevel,
buildingName: 'buildings.crystalMine',
consumption: crystalConsumption
consumption: crystalConsumption * speed
},
deuteriumSynthesizer: {
buildingLevel: deuteriumSynthesizerLevel,
buildingName: 'buildings.deuteriumSynthesizer',
consumption: deuteriumConsumption
consumption: deuteriumConsumption * speed
},
total: metalConsumption + crystalConsumption + deuteriumConsumption
total: (metalConsumption + crystalConsumption + deuteriumConsumption) * speed
}
}

28
src/utils/speed.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { Resources } from '@/types/game'
/**
* 按倍率缩放一个数值
* - 支持合法的 0（例如用于“暂停”）
*/
export const scaleNumber = (value: number, multiplier: number): number => value * multiplier
/**
* 按倍率缩放 Resources（常用于“每小时产量/消耗”等展示）
* - 支持合法的 0（例如用于“暂停”）
*/
export const scaleResources = (resources: Resources, multiplier: number): Resources => ({
metal: resources.metal * multiplier,
crystal: resources.crystal * multiplier,
deuterium: resources.deuterium * multiplier,
darkMatter: resources.darkMatter * multiplier,
energy: resources.energy * multiplier
})
/**
* 计算游戏循环的间隔（毫秒）
* - multiplier <= 0 或非有限值时，回退到 baseMs，避免除 0
*/
export const getGameLoopIntervalMs = (multiplier: number, baseMs: number = 1000): number => {
if (!Number.isFinite(multiplier) || multiplier <= 0) return baseMs
return baseMs / multiplier
}

11
src/views/OverviewView.vue
View File

@@ -201,6 +201,7 @@
import { Badge } from '@/components/ui/badge'
import ResourceIcon from '@/components/ResourceIcon.vue'
import { formatNumber, getResourceColor } from '@/utils/format'
import { scaleNumber } from '@/utils/speed'
import type { Planet } from '@/types/game'
import * as publicLogic from '@/logic/publicLogic'
import * as resourceLogic from '@/logic/resourceLogic'
@@ -209,25 +210,27 @@
const { t } = useI18n()
const { SHIPS } = useGameConfig()
const planet = computed(() => gameStore.currentPlanet)
const production = computed(() => (planet.value ? publicLogic.getResourceProduction(planet.value, gameStore.player.officers) : null))
const production = computed(() =>
planet.value ? publicLogic.getResourceProduction(planet.value, gameStore.player.officers, gameStore.gameSpeed) : null
)
const capacity = computed(() => (planet.value ? publicLogic.getResourceCapacity(planet.value, gameStore.player.officers) : null))
// 能量消耗
const energyConsumption = computed(() => {
if (!planet.value) return 0
return resourceLogic.calculateEnergyConsumption(planet.value)
return scaleNumber(resourceLogic.calculateEnergyConsumption(planet.value), gameStore.gameSpeed)
})
// 资源产量详细breakdown
const productionBreakdown = computed(() => {
if (!planet.value) return null
return resourceLogic.calculateProductionBreakdown(planet.value, gameStore.player.officers, Date.now())
return resourceLogic.calculateProductionBreakdown(planet.value, gameStore.player.officers, Date.now(), gameStore.gameSpeed)
})
// 资源消耗详细breakdown
const consumptionBreakdown = computed(() => {
if (!planet.value) return null
return resourceLogic.calculateConsumptionBreakdown(planet.value)
return resourceLogic.calculateConsumptionBreakdown(planet.value, gameStore.gameSpeed)
})
// 资源类型配置

2
src/views/SettingsView.vue
View File

@@ -68,7 +68,7 @@
<div class="flex items-center gap-2 sm:gap-4 w-full sm:w-auto">
<div class="flex items-center gap-2 flex-1 sm:flex-initial">
<Button @click="decreaseSpeed" variant="outline" size="sm" :disabled="gameStore.gameSpeed <= 0.5">-</Button>
<span class="min-w-[60px] text-center font-medium">{{ gameStore.gameSpeed || 1 }}x</span>
<span class="min-w-[60px] text-center font-medium">{{ gameStore.gameSpeed }}x</span>
<Button @click="increaseSpeed" variant="outline" size="sm" :disabled="gameStore.gameSpeed >= 10">+</Button>
</div>
<Button @click="resetSpeed" variant="ghost" size="sm">{{ t('settings.reset') }}</Button>