Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build Fix Attempt + Converting KillList to Grid Layout #56

Merged
merged 4 commits into from
Sep 9, 2024
Merged

Build Fix Attempt + Converting KillList to Grid Layout #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0fa8395
converting kill list to grid
Tmktahu Sep 9, 2024
5da7de9
Merge pull request #1 from Tmktahu/tk-grid-conversions
Tmktahu Sep 9, 2024
cd42ff3
tweak git ignore
Tmktahu Sep 9, 2024
f9920ca
commenting out killmail filtering for now
Tmktahu Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ vite.config.ts.timestamp-*
.vscode/settings.json
static/icons
static/sde
copyESFDataToStatic.ps1
package-lock.json

# Sentry Config File
.sentryclirc
146 changes: 67 additions & 79 deletions src/lib/components/KillList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,98 +146,86 @@
<button
on:click={() => changePage(page - 1)}
disabled={page === 1 || loading}
class="px-4 py-2 text-sm font-medium text-white bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50"
class="px-4 py-2 text-sm font-medium text-white bg-background-800 rounded-md hover:bg-background-700 disabled:opacity-50"
>
Previous
</button>
<span class="text-white">Page {page}</span>
<button
on:click={() => changePage(page + 1)}
disabled={loading}
class="px-4 py-2 text-sm font-medium text-white bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50"
class="px-4 py-2 text-sm font-medium text-white bg-background-800 rounded-md hover:bg-background-700 disabled:opacity-50"
>
Next
</button>
</div>

<div class="overflow-x-auto" role="table">
<table class="table-auto min-w-full bg-semi-transparent bg-background-800 rounded-lg shadow-lg">
<thead>
<tr class="bg-darker text-white uppercase text-xs leading-normal">
<th scope="col">Ship</th>
<th scope="col">Victim</th>
<th scope="col">Final Blow</th>
<th scope="col">Location</th>
</tr>
</thead>

<tbody class="text-background-300 text-sm">
{#each kills as kill (kill.killmail_id)}
<tr
class="border-b border-background-700 hover:bg-background-600 transition-colors duration-300 cursor-pointer {isCombinedLoss(kill)
? 'bg-darkred'
: ''}"
on:click={(event) => handleClick(event, kill.killmail_id)}
on:mouseover={pauseAddingKills}
on:focus={pauseAddingKills}
>
<td>
<div class="flex items-center mx-2 py-1 w-fit">
<img src="{kill.victim.ship_image_url}?size=64" alt="Ship: {kill.victim.ship_name}" class="rounded w-10" />
<div class="flex flex-col ml-1 whitespace-nowrap">
<span>{truncateString(kill.victim.ship_name, 20)}</span>
{#if kill.total_value > 50}
<span class="text-background-400 text-xs">
{formatNumber(kill.total_value)} ISK
</span>
{/if}
</div>
</div>
</td>

<td>
<div class="flex items-center px-2 py-1">
<img src="{kill.victim.character_image_url}?size=64" alt="Character: {kill.victim.character_name}" class="rounded w-10" />
<div class="flex flex-col ml-1">
<span>{kill.victim.character_name}</span>
<span class="text-background-400 text-xs whitespace-nowrap">
{truncateString(kill.victim.corporation_name, 22)}
</span>
</div>
</div>
</td>

<td>
<div class="flex flex-col px-2 py-1 whitespace-nowrap">
{#if Array.isArray(kill.attackers)}
{@const finalBlowAttacker = getFinalBlowAttacker(kill)}

<span>
{kill.is_npc ? finalBlowAttacker.faction_name : finalBlowAttacker.character_name}
</span>
<span class="text-background-400">
{truncateString(finalBlowAttacker.ship_group_name, 22)}
</span>
{/if}
</div>
</td>

<td>
<div class="flex flex-col items-end px-2 py-1 whitespace-nowrap">
<span>{kill.region_name} / {kill.system_name}</span>
<div class="text-background-500">{kill.kill_time}</div>
<div class="flex gap-1 items-center">
<span class="text-background-400">{kill.attackers.length}</span>
<img src="/images/involved.png" alt="{kill.attackers.length} Involved" />
<span class="text-background-400">{kill.comment_count || 0}</span>
<img src="/images/comment.gif" alt="{kill.attackers.length} Involved" />
</div>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
<div class="grid grid-cols-4 bg-background-800 text-white uppercase text-xs py-1">
<div class="text-center">Ship</div>
<div class="text-center">Victim</div>
<div class="text-center">Final Blow</div>
<div class="text-center">Location</div>
</div>

{#each kills as kill (kill.killmail_id)}
<button
class="grid grid-cols-4 items-center border-b bg-semi-transparent border-background-700 hover:bg-background-800 transition-colors duration-300 cursor-pointer w-full {isCombinedLoss(
kill
)
? 'bg-red-800'
: ''}"
on:click={(event) => handleClick(event, kill.killmail_id)}
on:mouseover={pauseAddingKills}
on:focus={pauseAddingKills}
>
<div class="flex items-center mx-2 py-1 w-fit">
<img src="{kill.victim.ship_image_url}?size=64" alt="Ship: {kill.victim.ship_name}" class="rounded w-10" />
<div class="flex flex-col items-start ml-1 whitespace-nowrap">
<span class="text-sm">{truncateString(kill.victim.ship_name, 20)}</span>
{#if kill.total_value > 50}
<span class="text-background-400 text-xs">
{formatNumber(kill.total_value)} ISK
</span>
{/if}
</div>
</div>

<div class="flex items center px-2 py-1">
<img src="{kill.victim.character_image_url}?size=64" alt="Character: {kill.victim.character_name}" class="rounded w-10" />
<div class="flex flex-col items-start ml-1">
<span class="text-sm">{kill.victim.character_name}</span>
<span class="text-background-400 text-xs whitespace-nowrap">
{truncateString(kill.victim.corporation_name, 22)}
</span>
</div>
</div>

<div class="flex flex-col items-start px-2 py-1 whitespace-nowrap">
{#if Array.isArray(kill.attackers)}
{@const finalBlowAttacker = getFinalBlowAttacker(kill)}

<span class="text-sm">
{kill.is_npc ? finalBlowAttacker.faction_name : finalBlowAttacker.character_name}
</span>
<span class="text-background-400 text-xs">
{truncateString(finalBlowAttacker.ship_group_name, 22)}
</span>
{/if}
</div>

<div class="flex flex-col items-end px-2 py-1 text-sm whitespace-nowrap">
<span>{kill.region_name} / {kill.system_name}</span>
<div class="text-background-500">{kill.kill_time}</div>
<div class="flex gap-1 items-center">
<span class="text-background-400">{kill.attackers.length}</span>
<img src="/images/involved.png" alt="{kill.attackers.length} Involved" />
<span class="text-background-400">{kill.comment_count || 0}</span>
<img src="/images/comment.gif" alt="{kill.attackers.length} Involved" />
</div>
</div>
</button>
{/each}
</div>

<!-- Pagination Control at the Bottom -->
Expand Down
6 changes: 3 additions & 3 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
import '@fortawesome/fontawesome-free/css/all.min.css';
import Navbar from '$lib/components/Navbar.svelte';

import { useKillmails } from '$lib/models/useKillmails';
const { setup: setupKillmails } = useKillmails();
// import { useKillmails } from '$lib/models/useKillmails';
// const { setup: setupKillmails } = useKillmails();

setupKillmails();
// setupKillmails();

let defaultKeywords = 'eve-online, eve, ccp, ccp games, kills, killmail, killmails, killboard, eve kill, eve-kill, eve-kill.net, eve-kill.com';
let combinedKeywords = $page.data.meta?.keywords ? `${defaultKeywords}, ${$page.data.meta.keywords}` : defaultKeywords;
Expand Down