2021-08-30 10:46:18 +00:00
< script >
import {
Badge,
Button,
ButtonGroup,
Col,
Collapse,
Container,
Icon,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Progress,
Row,
} from 'sveltestrap';
import { my } from '../stores/my.js';
import { teams } from '../stores/teams.js';
import { settings , time } from '../stores/settings.js';
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 >
< 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" >
2022-02-02 16:31:57 +00:00
< a href = "." style = "max-width: 50%" >
< img src = "img/fic.png" alt = "Forum International de la Cybersécurité" class = "h-100" > < img src = "img/ec2.png" alt = "European Cyber Cup" class = "h-100 d-none d-md-inline ms-2" >
2021-08-30 10:46:18 +00:00
< / a >
< HeaderPartners / >
< / Container >
< / div >
2021-08-31 23:47:44 +00:00
< div class = "sticky-top" >
< Navbar color = "dark" dark expand = "md" >
2021-08-30 10:46:18 +00:00
< NavbarToggler on:click = {() => ( isOpen = ! isOpen )} / >
< Collapse { isOpen } navbar expand = "md" on:update = { handleUpdate } >
< Nav navbar >
< NavItem >
2021-09-01 09:20:41 +00:00
< NavLink href = "." >
2021-08-30 10:46:18 +00:00
< Icon name = "box-seam" / >
Accueil
< / NavLink >
< / NavItem >
< NavThemes / >
< NavTags / >
2021-10-22 08:14:39 +00:00
{ #if $settings && $settings . end - $settings . start >= 0 && $teams && Object . keys ( $teams ). length }
2021-08-30 10:46:18 +00:00
< NavItem >
2021-09-01 09:20:41 +00:00
< NavLink href = "rank" >
2021-08-30 10:46:18 +00:00
< Icon name = "sort-down" / >
Classement
< / NavLink >
< / NavItem >
{ /if }
< HeaderIssues / >
< NavItem >
2021-09-01 09:20:41 +00:00
< NavLink href = "rules" >
2021-08-30 10:46:18 +00:00
< Icon name = "signpost-split" / >
Aide
< / NavLink >
< / NavItem >
< / Nav >
< Nav class = "ms-auto text-light" navbar >
{ #if $my && $my . team_id }
< NavItem >
2021-09-02 09:15:35 +00:00
{ Math . round ( $my . score * 100 ) / 100 } { $my . score === 1 ? 'point' : 'points' }
2022-02-02 15:03:24 +00:00
{ #if $teams && $teams [ $my . team_id ] && $teams [ $my . team_id ]. rank }
2021-08-30 10:46:18 +00:00
– { $teams [ $my . team_id ]. rank } < sup > e</ sup > sur { Object . keys ( $teams ). length }
{ /if }
< / NavItem >
{ /if }
< NavItem class = "ms-2" >
{ #if ! $my }
2021-09-01 09:20:41 +00:00
< Badge href = "register" color = "warning" >
2021-08-30 10:46:18 +00:00
Inscription
< / Badge >
2022-02-02 15:03:24 +00:00
{ :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 }
2021-08-30 10:46:18 +00:00
{ /if }
< / NavItem >
< / Nav >
< / Collapse >
< / Navbar >
< Progress value = { $time . progression * 100 } color="info" style = "height: 5px; border-radius: 0;" />
2021-08-31 23:47:44 +00:00
< / div >
2021-08-30 10:46:18 +00:00
< style >
.teamname {
-webkit-filter: invert(100%);
filter: invert(100%);
}
< / style >