vhaudiquet/leaguerecorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix lp_change event values and display in front
All checks were successful
record-daemon / Build, check and test (push) Successful in 3m14s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-05-07 00:24:02 +02:00
parent fcfa55d0aa
commit ff4d865c2a
4 changed files with 232 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
tauri-app/src/components/GameHistory.vue
View File

@@ -30,6 +30,9 @@ import {
getFinalStats,
getSummonerSpells,
getItems,
getLpChange,
formatLpDelta,
formatRank,
} from "../types/timeline";
// Helper to get video timestamp in seconds from tuple format
@@ -123,6 +126,13 @@ onMounted(() => {
<!-- Result Banner -->
<div class="result-banner">
<span class="result-text">{{ getGameResult(game) }}</span>
<span
v-if="getLpChange(game)"
class="lp-badge"
:class="{ gain: getLpChange(game)!.leaguePointsDelta > 0, loss: getLpChange(game)!.leaguePointsDelta < 0 }"
>
{{ formatLpDelta(getLpChange(game)!.leaguePointsDelta) }} LP
</span>
</div>
<!-- Main Content -->
@@ -178,6 +188,10 @@ onMounted(() => {
<div class="game-time">
{{ formatRelativeTime(game.start_time) }}
</div>
<div v-if="getLpChange(game)" class="game-rank">
{{ formatRank(getLpChange(game)!.tier, getLpChange(game)!.division) }}
<span class="game-rank-lp">· {{ getLpChange(game)!.leaguePoints }} LP</span>
</div>
</div>
<!-- Right: KDA Score -->
@@ -288,6 +302,22 @@ onMounted(() => {
<span class="detail-label">Summoner:</span>
<span class="detail-value">{{ getSummonerName(selectedGame) }}</span>
</div>
<div class="detail-row" v-if="getLpChange(selectedGame)">
<span class="detail-label">Rank:</span>
<span class="detail-value">
{{ formatRank(getLpChange(selectedGame)!.tier, getLpChange(selectedGame)!.division) }}
· {{ getLpChange(selectedGame)!.leaguePoints }} LP
</span>
</div>
<div class="detail-row" v-if="getLpChange(selectedGame)">
<span class="detail-label">LP Change:</span>
<span
class="detail-value lp-change"
:class="{ gain: getLpChange(selectedGame)!.leaguePointsDelta > 0, loss: getLpChange(selectedGame)!.leaguePointsDelta < 0 }"
>
{{ formatLpDelta(getLpChange(selectedGame)!.leaguePointsDelta) }} LP
</span>
</div>
</div>
</div>
@@ -537,6 +567,7 @@ onMounted(() => {
padding: 0.35rem 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.result-text {
@@ -546,6 +577,33 @@ onMounted(() => {
letter-spacing: 0.05em;
}
.lp-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 3px;
margin-left: auto;
}
.lp-badge.gain {
color: #4ade80;
background: rgba(74, 222, 128, 0.15);
}
.lp-badge.loss {
color: #f87171;
background: rgba(248, 113, 113, 0.15);
}
.game-rank {
font-size: 0.7rem;
color: #c8aa6e;
}
.game-rank-lp {
color: #888;
}
/* Game Content */
.game-content {
display: flex;
@@ -908,6 +966,16 @@ onMounted(() => {
font-weight: 500;
}
.detail-value.lp-change.gain {
color: #4ade80;
font-weight: 700;
}
.detail-value.lp-change.loss {
color: #f87171;
font-weight: 700;
}
.stats-highlight {
display: flex;
justify-content: center;

49
tauri-app/src/components/GameReview.vue
View File

@@ -14,6 +14,9 @@ import {
getQueueId,
getItemImageUrl,
getResultColor,
getLpChange,
formatLpDelta,
formatRank,
} from "../types/timeline";
// Props
@@ -508,6 +511,18 @@ onUnmounted(() => {
<span class="result" :style="{ color: getResultColor(getGameResult(game)) }">
{{ getGameResult(game) }}
</span>
<span
v-if="getLpChange(game)"
class="lp-change-badge"
:class="{ gain: getLpChange(game)!.leaguePointsDelta > 0, loss: getLpChange(game)!.leaguePointsDelta < 0 }"
>
{{ formatLpDelta(getLpChange(game)!.leaguePointsDelta) }} LP
</span>
</div>
<div v-if="getLpChange(game)" class="header-rank">
{{ formatRank(getLpChange(game)!.tier, getLpChange(game)!.division) }}
· {{ getLpChange(game)!.leaguePoints }} LP
<span v-if="getLpChange(game)!.inPromos" class="promo-badge">In Promos</span>
</div>
</div>
</div>
@@ -958,6 +973,40 @@ onUnmounted(() => {
font-weight: 600;
}
.lp-change-badge {
font-size: 0.8rem;
font-weight: 700;
padding: 0.1rem 0.5rem;
border-radius: 4px;
}
.lp-change-badge.gain {
color: #4ade80;
background: rgba(74, 222, 128, 0.15);
}
.lp-change-badge.loss {
color: #f87171;
background: rgba(248, 113, 113, 0.15);
}
.header-rank {
font-size: 0.8rem;
color: #c8aa6e;
margin-top: 0.15rem;
}
.promo-badge {
font-size: 0.65rem;
font-weight: 700;
color: #fbbf24;
background: rgba(251, 191, 36, 0.15);
padding: 0.1rem 0.35rem;
border-radius: 3px;
margin-left: 0.35rem;
text-transform: uppercase;
}
.toggle-stats-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);