fix country flags

This commit is contained in:
Lee 2023-10-17 23:30:12 +01:00
parent 09646acdae
commit ee299274a1
3 changed files with 16 additions and 18 deletions

@ -1,5 +1,5 @@
<script> <script>
import {createEventDispatcher} from 'svelte'; import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -8,7 +8,7 @@
</script> </script>
{#if country && country.length} {#if country && country.length}
<img src={`https://scoresaber.com/imports/images/flags/${country ? country.toLowerCase() : '' }.png`} loading="lazy" <img src={`https://flagcdn.com/16x12/${country ? country.toLowerCase() : '' }.png`} loading="lazy"
class="country" class="country"
on:click|preventDefault={() => dispatch('flag-click', {country: country.toLowerCase()})}> on:click|preventDefault={() => dispatch('flag-click', {country: country.toLowerCase()})}>
{/if} {/if}

@ -1,15 +1,14 @@
<script> <script>
import {navigate} from 'svelte-routing' import { navigate } from 'svelte-routing';
import {SS_HOST} from '../../network/queues/scoresaber/page-queue' import { convertArrayToObjectByKey, opt } from '../../utils/js';
import {PLAYERS_PER_PAGE} from '../../utils/scoresaber/consts' import { PLAYERS_PER_PAGE } from '../../utils/scoresaber/consts';
import {convertArrayToObjectByKey, opt} from '../../utils/js'
import Value from '../Common/Value.svelte' import { addToDate, DAY, formatDateRelative } from '../../utils/date';
import Status from './Status.svelte' import Badge from '../Common/Badge.svelte';
import Skeleton from '../Common/Skeleton.svelte' import Error from '../Common/Error.svelte';
import Error from '../Common/Error.svelte' import Skeleton from '../Common/Skeleton.svelte';
import Badge from '../Common/Badge.svelte' import Value from '../Common/Value.svelte';
import {addToDate, DAY, formatDateRelative} from '../../utils/date' import Status from './Status.svelte';
export let name; export let name;
export let playerInfo; export let playerInfo;
@ -97,7 +96,7 @@
<a href={getCountryRankingUrl(country)} on:click|preventDefault={() => navigateToCountryRanking(country)} <a href={getCountryRankingUrl(country)} on:click|preventDefault={() => navigateToCountryRanking(country)}
title="Go to country ranking" class="clickable"> title="Go to country ranking" class="clickable">
<img <img
src={`${SS_HOST}/imports/images/flags/${country && country.country && country.country.toLowerCase ? country.country.toLowerCase() : ''}.png`} src={`https://flagcdn.com/16x12/${country && country.country && country.country.toLowerCase ? country.country.toLowerCase() : ''}.png`}
alt={opt(country, 'country')} alt={opt(country, 'country')}
/> />

@ -1,8 +1,7 @@
<script> <script>
import {tweened} from 'svelte/motion'; import { cubicOut } from 'svelte/easing';
import {cubicOut} from 'svelte/easing'; import { tweened } from 'svelte/motion';
import Value from '../Common/Value.svelte' import Value from '../Common/Value.svelte';
import {SS_HOST} from '../../network/queues/scoresaber/page-queue'
export let rank; export let rank;
export let country; export let country;
@ -37,7 +36,7 @@
{#if country} {#if country}
<span class="val" style="display:{inline ? 'inline' : 'block'};"> <span class="val" style="display:{inline ? 'inline' : 'block'};">
<img src={`${SS_HOST}/imports/images/flags/${country}.png`} alt=""/> <img src={`https://flagcdn.com/16x12/${country}.png`} alt=""/>
<span class="value" <span class="value"
title={!showCountryTotal && country && $currentCountryRank && countryRankTotal ? `#${$currentCountryRank} / ${countryRankTotal}` : ''}> title={!showCountryTotal && country && $currentCountryRank && countryRankTotal ? `#${$currentCountryRank} / ${countryRankTotal}` : ''}>
<Value value={$currentCountryRank} prefix="#" zero="-" digits={0}/> <Value value={$currentCountryRank} prefix="#" zero="-" digits={0}/>