Skip to content

Commit

Permalink
Updated combat log and added fleet logs (minmatarfleet#938)
Browse files Browse the repository at this point in the history
* Added stored combat logs

* Remove categories on the log listing

* Updated combat log and added fleet logs
  • Loading branch information
beautifulmim authored Dec 5, 2024
1 parent 8f36796 commit 50eed00
Show file tree
Hide file tree
Showing 24 changed files with 846 additions and 67 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 55 additions & 10 deletions frontend/app/src/components/blocks/CombatLogAnalysisComponent.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const damage_out = combat_log_analysis?.damage_out
const timeline_time = timeline.map(datetime => datetime.split(' ')[1])
import { format_date_time } from '@helpers/date'
import { get_item_icon } from '@helpers/eve_image_server'
import Flexblock from '@components/compositions/Flexblock.astro'
import Grid from '@components/compositions/Grid.astro'
Expand All @@ -26,19 +27,63 @@ import TextGroup from '@components/blocks/TextGroup.astro'
import ComponentBlock from '@components/blocks/ComponentBlock.astro'
import DamageBadge from '@components/blocks/DamageBadge.astro';
import CombatLogChart from '@components/blocks/CombatLogChart.astro';
import Badge from '@components/blocks/Badge.astro';
---

<Flexblock gap='var(--space-xl)'>
<Grid
class="[ component w-full grid-fill ]"
row_gap="var(--space-3xs)"
column_gap="var(--space-3xs)"
min_item_width="300px"
>
<TextGroup title={t('log_start')}>{format_date_time(lang, combat_log_analysis?.start)}</TextGroup>
<TextGroup title={t('log_end')}>{format_date_time(lang, combat_log_analysis?.end)}</TextGroup>
<TextGroup title={t('logged_events')}>{combat_log_analysis?.logged_events.toLocaleString()}</TextGroup>
</Grid>
<Flexblock gap='var(--space-m)'>
<Grid
class="[ component w-full grid-fill ]"
row_gap="var(--space-m)"
column_gap="var(--space-3xs)"
min_item_width="300px"
>
<TextGroup title={t('log_start')}>{format_date_time(lang, combat_log_analysis?.start)}</TextGroup>
<TextGroup title={t('log_end')}>{format_date_time(lang, combat_log_analysis?.end)}</TextGroup>
<TextGroup title={t('logged_events')}>{combat_log_analysis?.logged_events.toLocaleString()}</TextGroup>
<TextGroup title={t('character_name')}>{combat_log_analysis?.character_name}</TextGroup>
{combat_log_analysis?.fitting &&
<TextGroup title={t('fitting')}>
<Badge
gap='var(--space-3xs)'
title={combat_log_analysis.fitting.name}
image={get_item_icon(combat_log_analysis.fitting.ship_id, 32)}
size={16}
highlight={false}
/>
</TextGroup>
}
{(combat_log_analysis?.fleet_id ?? 0 > 0) &&
<TextGroup title={t('fleet')}>{combat_log_analysis.fleet_id}</TextGroup>
}
</Grid>

{(combat_log_analysis?.max_to || combat_log_analysis?.max_from) &&
<Grid
class="[ component w-full grid-fill ]"
row_gap="var(--space-m)"
column_gap="var(--space-3xs)"
min_item_width="300px"
>
{combat_log_analysis?.max_to &&
<TextGroup title={t('max_damage_inflicted')}>
<Flexblock gap='0'>
<span><b class="[ text-green ]">{combat_log_analysis?.max_to.damage}</b> - <small>{combat_log_analysis?.max_to.weapon} - {combat_log_analysis?.max_to.outcome}</small></span>
<small>To {combat_log_analysis?.max_to.entity}</small>
</Flexblock>
</TextGroup>
}
{combat_log_analysis?.max_from &&
<TextGroup title={t('max_damage_received')}>
<Flexblock gap='0'>
<span><b class="[ text-red ]">{combat_log_analysis?.max_from.damage}</b> - <small>{combat_log_analysis?.max_from.weapon} - {combat_log_analysis?.max_from.outcome}</small></span>
<small>From {combat_log_analysis?.max_from.entity}</small>
</Flexblock>
</TextGroup>
}
</Grid>
}
</Flexblock>

<Flexblock>
{(combat_log_analysis?.weapons?.length ?? 0) > 0 &&
Expand Down
10 changes: 5 additions & 5 deletions frontend/app/src/components/blocks/CombatLogChart.astro
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ import MultiRangeInput from '@components/blocks/MultiRangeInput.astro';
min: 0,
max: 0,
timeline_time: ${JSON.stringify(timeline_time)},
damage_in: ${JSON.stringify(damage_in)},
damage_out: ${JSON.stringify(damage_out)},
damage_in: ${JSON.stringify(damage_in.map(damage => damage/10))},
damage_out: ${JSON.stringify(damage_out.map(damage => damage/10))},
init() {
const ctx = document.getElementById("damage-log-chart").getContext("2d")
Expand All @@ -41,7 +41,7 @@ import MultiRangeInput from '@components/blocks/MultiRangeInput.astro';
labels: this.timeline_time,
datasets: [
{
label: "${t('damage_taken')}",
label: "${t('dps_taken')}",
data: this.damage_in,
pointStyle: 'rect',
backgroundColor: '#b53620',
Expand All @@ -53,7 +53,7 @@ import MultiRangeInput from '@components/blocks/MultiRangeInput.astro';
}
},
{
label: "${t('damage_done')}",
label: "${t('dps_done')}",
data: this.damage_out,
pointStyle: 'rect',
backgroundColor: '#198754',
Expand Down Expand Up @@ -86,7 +86,7 @@ import MultiRangeInput from '@components/blocks/MultiRangeInput.astro';
beginAtZero: true,
title: {
display: true,
text: "${t('damage')}"
text: "${t('damage_per_second')}"
},
grid: {
display: false
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/src/components/blocks/DamageBadge.astro
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import Square from '@components/blocks/Square.astro'
x-init="tippy($el, tippy_options)"
data-tippy-content={t('damage_to_enemy')}
/>
<small>{damage.total_to.toLocaleString()} ({damage.dps_to.toLocaleString()} dps) - {damage.volleys_to.toLocaleString()} {t('volleys')}</small>
<small>{damage.total_to.toLocaleString()} ({damage.dps_to.toLocaleString()} {t('per_volley')}) - {damage.volleys_to.toLocaleString()} {t('volleys')}</small>
</FlexInline>
}
{damage.volleys_from > 0 &&
Expand All @@ -41,7 +41,7 @@ import Square from '@components/blocks/Square.astro'
x-init="tippy($el, tippy_options)"
data-tippy-content={t('damage_from_enemy')}
/>
<small>{damage.total_from.toLocaleString()} ({damage.dps_from.toLocaleString()} dps) - {damage.volleys_from.toLocaleString()} {t('volleys')}</small>
<small>{damage.total_from.toLocaleString()} ({damage.dps_from.toLocaleString()} {t('per_volley')}) - {damage.volleys_from.toLocaleString()} {t('volleys')}</small>
</FlexInline>
}
</Flexblock>
Expand Down
83 changes: 83 additions & 0 deletions frontend/app/src/components/blocks/FittingCombatLogItem.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
---
import { i18n } from '@helpers/i18n'
const { t, lang, translatePath } = i18n(Astro.url)
import type { SavedCombatLog, Fitting } from '@dtypes/api.minmatar.org'
interface Props {
log: SavedCombatLog;
fitting: Fitting | undefined;
}
const {
log,
fitting,
} = Astro.props
const CAPSULE_TYPE_ID = 670
import { format_date_short } from '@helpers/date'
import Flexblock from "@components/compositions/Flexblock.astro";
import Wrapper from "@components/compositions/Wrapper.astro";
import ComponentBlock from '@components/blocks/ComponentBlock.astro';
import ItemPicture from "@components/blocks/ItemPicture.astro";
import ClipboardButton from "@components/blocks/ClipboardButton.astro";
---

<ComponentBlock class="[ fitting-combatlog-card card-animated ]" padding_block='0' padding_inline='0'>
<Flexblock gap="0">
<ItemPicture
item_id={fitting?.ship_id ? fitting?.ship_id : CAPSULE_TYPE_ID}
size={256}
icon_quality={512}
mask={true}
/>
<Wrapper class="[ fitting-combatlog-card-body ]" padding_block="var(--space-2xs)" padding_inline="var(--space-2xs)">
<Flexblock gap='0'>
<h4>{fitting?.name ?? t('unknown_fitting_name')}</h4>
<small>{format_date_short(lang, log.uploaded_at)}</small>
</Flexblock>
</Wrapper>
{fitting &&
<Wrapper class="[ fitting-combatlog-card-actions ]" padding_block="var(--space-2xs)" padding_inline="var(--space-2xs)">
<ClipboardButton text={t('share')} narrow={true} id={fitting.id.toString()}>{translatePath(`${Astro.url}/${log.id}`)}</ClipboardButton>
</Wrapper>
}
</Flexblock>
</ComponentBlock>

<style lang="scss">
.fitting-combatlog-card {
position: relative;

&:hover {
.fitting-combatlog-card-actions {
opacity: 1;
}
}

.fitting-combatlog-card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

.fitting-combatlog-card-actions {
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
}

h4 {
font-weight: 400;
}

small {
color: var(--fleet-yellow);
}
</style>
98 changes: 98 additions & 0 deletions frontend/app/src/components/blocks/FleetCombatLogItem.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
import { i18n } from '@helpers/i18n'
const { t, lang, translatePath } = i18n(Astro.url)
import type { SavedCombatLog } from '@dtypes/api.minmatar.org'
interface Props {
log: SavedCombatLog;
}
const {
log,
} = Astro.props
import { format_date_short } from '@helpers/date'
import Flexblock from "@components/compositions/Flexblock.astro";
import Wrapper from "@components/compositions/Wrapper.astro";
import ComponentBlock from '@components/blocks/ComponentBlock.astro';
import ClipboardButton from "@components/blocks/ClipboardButton.astro";
import FleetEvEIcon from '@components/icons/FleetEvEIcon.astro';
---

<ComponentBlock class="[ fleet-combatlog-card card-animated ]" padding_block='0' padding_inline='0'>
<Flexblock gap="0">
<picture class="animated">
<img
class="[ mask ]"
loading="lazy"
height="256"
width="256"
src="/images/combatlog-fleet-card.jpg"
/>
</picture>
<div class="[ fleet-icon ]"><FleetEvEIcon /></div>
<Wrapper class="[ fleet-combatlog-card-body ]" padding_block="var(--space-2xs)" padding_inline="var(--space-2xs)">
<Flexblock gap='0'>
<h4>{t('fleet')} {log.fleet_id}</h4>
<small>{format_date_short(lang, log.uploaded_at)}</small>
</Flexblock>
</Wrapper>
<Wrapper class="[ fleet-combatlog-card-actions ]" padding_block="var(--space-2xs)" padding_inline="var(--space-2xs)">
<ClipboardButton text={t('share')} narrow={true} id={log.fleet_id.toString()}>{translatePath(`${Astro.url}/${log.id}`)}</ClipboardButton>
</Wrapper>
</Flexblock>
</ComponentBlock>

<style lang="scss">
.fleet-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.fleet-combatlog-card {
position: relative;

&:hover {
.fleet-combatlog-card-actions {
opacity: 1;
}
}

.fleet-combatlog-card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

.fleet-combatlog-card-actions {
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
}

h4 {
font-weight: 400;
}

small {
color: var(--fleet-yellow);
}

img {
object-fit: cover;
width: 100%;
}

.mask {
-webkit-mask-image: linear-gradient(to bottom,rgb(0,0,0) 0%,rgba(0,0,0,.7) 50%,transparent 100%);
mask-image: linear-gradient(to bottom,rgb(0,0,0) 0%,rgba(0,0,0,.7) 50%,transparent 100%);
}
</style>
34 changes: 34 additions & 0 deletions frontend/app/src/components/blocks/FleetCombatLogListItem.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
import { i18n } from '@helpers/i18n'
const { lang, t, translatePath } = i18n(Astro.url)
import type { FleetCombatLog } from '@dtypes/layout_components'
import { format_date_time } from '@helpers/date'
interface Props {
log: FleetCombatLog;
}
const {
log,
} = Astro.props
import PilotBadge from '@components/blocks/PilotBadge.astro';
import StylessButton from './StylessButton.astro';
---

<StylessButton class="[ w-full ]" href={translatePath(`/intel/combatlog/${log.id}`)}>
<PilotBadge
class="[ w-full ]"
character_id={log.logger.character_id}
character_name={log.logger.character_name}
>
<small>{format_date_time(lang, log.uploaded_at)}</small>
</PilotBadge>
</StylessButton>

<style lang="scss">
small {
color: var(--foreground);
}
</style>
Loading

0 comments on commit 50eed00

Please sign in to comment.