From 94e9b8f0ba4560210159dbda6d0a197a4c93b294 Mon Sep 17 00:00:00 2001 From: Neshura Date: Mon, 21 Aug 2023 03:45:26 +0200 Subject: [PATCH] Page Loading Spinner added and Animations removal --- src/lib/components/LoadingSpinner.svelte | 78 +++++++++ src/lib/types/spinner.ts | 17 ++ src/routes/graphs/excel-style/+page.svelte | 176 ++++++++++++--------- src/routes/legacy-graphs/+page.svelte | 37 +++-- src/routes/legacy-graphs/EthicsBar.svelte | 3 + src/routes/legacy-graphs/EthicsWeb.svelte | 3 + src/routes/legacy-graphs/PopsPie.svelte | 3 + 7 files changed, 227 insertions(+), 90 deletions(-) create mode 100644 src/lib/components/LoadingSpinner.svelte create mode 100644 src/lib/types/spinner.ts diff --git a/src/lib/components/LoadingSpinner.svelte b/src/lib/components/LoadingSpinner.svelte new file mode 100644 index 0000000..9a20317 --- /dev/null +++ b/src/lib/components/LoadingSpinner.svelte @@ -0,0 +1,78 @@ + + +
+ + diff --git a/src/lib/types/spinner.ts b/src/lib/types/spinner.ts new file mode 100644 index 0000000..9d97dd2 --- /dev/null +++ b/src/lib/types/spinner.ts @@ -0,0 +1,17 @@ +export type SpinnerTypes = { + size: string | number; + color: string; + unit: string; + duration: string; + pause: boolean; +}; + +export type Circle2Types = { + colorOuter: string; + colorCenter: string; + colorInner: string; + durationMultiplier: number; + durationOuter: string; + durationInner: string; + durationCenter: string; +} & SpinnerTypes; \ No newline at end of file diff --git a/src/routes/graphs/excel-style/+page.svelte b/src/routes/graphs/excel-style/+page.svelte index 500aa1d..9e585aa 100644 --- a/src/routes/graphs/excel-style/+page.svelte +++ b/src/routes/graphs/excel-style/+page.svelte @@ -14,6 +14,7 @@ import type { LayoutData } from '../$types'; import type { Ethic } from '$lib/types/stellaris'; import { page } from '$app/stores'; + import LoadingSpinner from '$lib/components/LoadingSpinner.svelte'; export let data: LayoutData; let selectedGameGroups: Array = []; @@ -23,6 +24,7 @@ let selectedGameIdx: number; let selectedGame: ChellarisGame = createChellarisGame(); let pageData: { + init: boolean; empireCount: number; gestaltCount: { total: number; machines: number }; ethicsData: Map< @@ -36,10 +38,11 @@ >; takenPortraits: Map>; } = { + init: false, empireCount: 0, gestaltCount: { total: 0, machines: 0 }, ethicsData: new Map(), - takenPortraits: new Map(), + takenPortraits: new Map() }; // Save Tab to Store @@ -135,20 +138,20 @@ pageData.ethicsData.set(id, newEthicsData); } }); - + if (!pageData.takenPortraits.has(empire.empire_portrait_group)) { pageData.takenPortraits.set(empire.empire_portrait_group, new Map()); } const portraitGroupData = pageData.takenPortraits.get(empire.empire_portrait_group); - if (typeof portraitGroupData !== "undefined") { + if (typeof portraitGroupData !== 'undefined') { if (!portraitGroupData.has(empire.empire_portrait)) { portraitGroupData.set(empire.empire_portrait, 0); } let portraitData = portraitGroupData.get(empire.empire_portrait); - if (typeof portraitData !== "undefined") { + if (typeof portraitData !== 'undefined') { portraitData = portraitData + 1; portraitGroupData.set(empire.empire_portrait, portraitData); pageData.takenPortraits.set(empire.empire_portrait_group, portraitGroupData); @@ -157,6 +160,7 @@ } }); pageData.empireCount = groupEmpires.size; + pageData.init = true; } }; @@ -204,80 +208,103 @@ -

- {selectedGame.name} Sign-Up Info for {groupNoun} - {selectedGameGroups.map((selection) => gameGroups.get(selection)?.name).join(groupJoiner)} -

+{#if pageData.init} +

+ {selectedGame.name} Sign-Up Info for {groupNoun} + {selectedGameGroups.map((selection) => gameGroups.get(selection)?.name).join(groupJoiner)} +

-
-

- Empires signed up: {pageData.empireCount} -

-
-
- - - - - - - {#each pageData.ethicsData as ethicData} - {#if !ethicData[1].machine} - - - - - - {/if} - {/each} -
Ethic# Regular# Fanatic
{ethicData[1].displayName}{ethicData[1].regular}{ethicData[1].fanatic}
-
-
-

Total Gestalts: {pageData.gestaltCount.total}

-

> Hive Minds: {pageData.gestaltCount.total - pageData.gestaltCount.machines}

-

> Machines: {pageData.gestaltCount.machines}

- - - - - - {#each pageData.ethicsData as ethicData} - {#if ethicData[1].machine} - - - - - {/if} - {/each} -
Machine Ethic#
{ethicData[1].displayName}{ethicData[1].regular}
-
-
-
-
- - - - {#each Array(18) as _, index (index)} - - {/each} - - {#each chellarisData.species as portraitGroup} +
+

+ Empires signed up: {pageData.empireCount} +

+
+
+
Species{index + 1}
- - {#each portraitGroup[1].portraits as portrait} - + + + + + {#each pageData.ethicsData as ethicData} + {#if !ethicData[1].machine} + + + + + + {/if} + {/each} +
{portraitGroup[1].displayName} - - - Ethic# Regular# Fanatic
{ethicData[1].displayName}{ethicData[1].regular}{ethicData[1].fanatic}
+
+
+

Total Gestalts: {pageData.gestaltCount.total}

+

> Hive Minds: {pageData.gestaltCount.total - pageData.gestaltCount.machines}

+

> Machines: {pageData.gestaltCount.machines}

+ + + + + + {#each pageData.ethicsData as ethicData} + {#if ethicData[1].machine} + + + + + {/if} + {/each} +
Machine Ethic#
{ethicData[1].displayName}{ethicData[1].regular}
+
+
+
+
+ + + + {#each Array(18) as _, index (index)} + {/each} - {/each} -
Species{index + 1}
-
-
-
+ {#each chellarisData.species as portraitGroup} + + {portraitGroup[1].displayName} + {#each portraitGroup[1].portraits as portrait} + + + + + {/each} + + {/each} + +
+ + +{:else} + +{/if} diff --git a/src/routes/legacy-graphs/+page.svelte b/src/routes/legacy-graphs/+page.svelte index 5dd1e38..a042dbd 100644 --- a/src/routes/legacy-graphs/+page.svelte +++ b/src/routes/legacy-graphs/+page.svelte @@ -3,6 +3,9 @@ import EthicsBar from './EthicsBar.svelte'; import PopsPie from './PopsPie.svelte'; import EmpireStats from './EmpireStats.svelte'; + import LoadingSpinner from '$lib/components/LoadingSpinner.svelte'; + import { navigating } from '$app/stores'; + import { fade } from 'svelte/transition'; export let data: { popsData: Array; @@ -16,24 +19,28 @@ -
-
-
- +{#if $navigating} + +{:else} +
+
+
+ +
+
+ +
-
- +
+
+ +
+
+ +
-
-
- -
-
- -
-
-
+{/if}