132 lines
4.3 KiB
Svelte
132 lines
4.3 KiB
Svelte
<script>
|
|
import { base } from '$app/paths';
|
|
|
|
import {
|
|
Badge,
|
|
Button,
|
|
ButtonGroup,
|
|
Col,
|
|
Collapse,
|
|
Container,
|
|
Icon,
|
|
Navbar,
|
|
NavbarToggler,
|
|
NavbarBrand,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
Progress,
|
|
Row,
|
|
} from '@sveltestrap/sveltestrap';
|
|
|
|
import { challengeInfo } from '$lib/stores/challengeinfo.js';
|
|
import { my } from '$lib/stores/my.js';
|
|
import { teams } from '$lib/stores/teams.js';
|
|
import { settings, time } from '$lib/stores/settings.js';
|
|
|
|
import Clock from './Clock.svelte';
|
|
import HeaderClock from './HeaderClock.svelte';
|
|
import HeaderIssues from './HeaderIssues.svelte';
|
|
import HeaderPartners from './HeaderPartners.svelte';
|
|
import NavThemes from './NavThemes.svelte';
|
|
import NavTags from './NavTags.svelte';
|
|
|
|
let isOpen = false;
|
|
|
|
function handleUpdate(event) {
|
|
isOpen = event.detail.isOpen;
|
|
}
|
|
</script>
|
|
|
|
{#if !$settings.hide_header}
|
|
<div class="container-fluid bg-dark" style="max-height: 15vh;">
|
|
<div style="height: 100%; max-height: inherit; width: 98%; position: absolute">
|
|
<Container class="d-flex justify-content-center align-items-center text-light" style="height: 100%; max-height: inherit">
|
|
<HeaderClock />
|
|
</Container>
|
|
</div>
|
|
<Container class="d-flex justify-content-between p-1" style="max-height: inherit">
|
|
<a href="." style="max-width: 50%">
|
|
{#if $challengeInfo && $challengeInfo.main_logo}
|
|
{#each $challengeInfo.main_logo as logo, i}
|
|
<img src={logo.replace('$FILES$', base + '/files/')} alt={'Logo principal #' + i} class={'h-100' + (i > 0?' d-none d-md-inline ms-2':'')}>
|
|
{/each}
|
|
{/if}
|
|
</a>
|
|
<HeaderPartners />
|
|
</Container>
|
|
</div>
|
|
{/if}
|
|
<div class="sticky-top">
|
|
<Navbar color="dark" dark expand="md">
|
|
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
|
|
<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
|
|
<Nav navbar>
|
|
<NavItem>
|
|
<NavLink href=".">
|
|
<Icon name="box-seam" />
|
|
Accueil
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavThemes />
|
|
<NavTags />
|
|
{#if $settings && $settings.start >= $settings.recvTime && $teams && Object.keys($teams).length}
|
|
<NavItem>
|
|
<NavLink href="rank">
|
|
<Icon name="sort-down" />
|
|
Classement
|
|
</NavLink>
|
|
</NavItem>
|
|
{/if}
|
|
<HeaderIssues />
|
|
<NavItem>
|
|
<NavLink href="rules">
|
|
<Icon name="signpost-split" />
|
|
Aide
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
{#if $settings.hide_header && $settings.end - $settings.start > 0}
|
|
<Nav class="ms-auto text-light display-6" navbar>
|
|
<Clock />
|
|
</Nav>
|
|
{/if}
|
|
<Nav class="ms-auto text-light" navbar>
|
|
{#if $my && $my.team_id}
|
|
<NavItem>
|
|
{Math.round($my.score*100)/100} {$my.score === 1 ? 'point' : 'points'}
|
|
{#if $teams && $teams[$my.team_id] && $teams[$my.team_id].rank}
|
|
– {$teams[$my.team_id].rank}<sup>e</sup> sur {Object.keys($teams).length}
|
|
{/if}
|
|
</NavItem>
|
|
{/if}
|
|
<NavItem class="ms-2">
|
|
{#if !$my}
|
|
<Badge href="register" color="warning">
|
|
Inscription
|
|
</Badge>
|
|
{:else if $my.team_id}
|
|
{#if $teams && $teams[$my.team_id]}
|
|
<Badge href="edit" style="background-color: {$teams[$my.team_id].color} !important; color: {$teams[$my.team_id].color};">
|
|
<span class="teamname">{$my.name}</span>
|
|
</Badge>
|
|
{:else}
|
|
<Badge href="edit" color="info">
|
|
<span class="teamname">{$my.name}</span>
|
|
</Badge>
|
|
{/if}
|
|
{/if}
|
|
</NavItem>
|
|
</Nav>
|
|
</Collapse>
|
|
</Navbar>
|
|
<Progress value={$time.progression * 100} color="info" style="height: 5px; border-radius: 0;" />
|
|
</div>
|
|
|
|
<style>
|
|
.teamname {
|
|
-webkit-filter: invert(100%);
|
|
filter: invert(100%);
|
|
}
|
|
</style>
|