Skip to content

Commit

Permalink
feat: non-steam games now render
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tormak9970
Tormak9970 committed Apr 11, 2023
1 parent 3a6ac5f commit 0314a65
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 67 deletions.
9 changes: 8 additions & 1 deletion src/Stores.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,16 @@ export enum GridTypes {
ICON="Icon"
}

export enum Platforms {
STEAM="Steam",
NON_STEAM="Non Steam"
}

export const needsSGDBAPIKey = sharedStore(true, "needsSGDBAPIKey");
export const needsSteamKey = sharedStore(true, "needsSteamKey");

export const canSave = writable(false);
export const currentPlatform:Writable<Platforms> = writable(Platforms.STEAM);
export const gridType:Writable<GridTypes> = writable(GridTypes.CAPSULE);
export const showHidden = writable(false);

Expand All @@ -32,7 +38,8 @@ export const activeUserId = writable(0);
export const steamGridDBKey = sharedStore("", "steamGridDBKey");
export const steamKey = sharedStore("", "steamKey");

export const steamGames:Writable<SteamGame[]> = writable([]);
export const steamGames:Writable<GameStruct[]> = writable([]);
export const nonSteamGames:Writable<GameStruct[]> = writable([]);
export const hiddenGameIds:Writable<number[]> = writable([]);

export const originalAppLibraryCache:Writable<{ [appid: string]: LibraryCacheEntry }> = writable({});
Expand Down
42 changes: 23 additions & 19 deletions src/components/core/games/Game.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { SettingsManager } from "../../../lib/utils/SettingsManager";
import { appLibraryCache, gridType, GridTypes, hiddenGameIds, selectedGameAppId, selectedGameName } from "../../../Stores";
export let game: SteamGame;
export let game: GameStruct;
export let widths: any;
export let heights: any;
Expand Down Expand Up @@ -44,25 +44,29 @@
onMount(() => {
gridTypeUnsub = gridType.subscribe((type) => {
if ($appLibraryCache[game.appid][type]) {
showImage = true;
imagePath = tauri.convertFileSrc($appLibraryCache[game.appid][type]);
} else if (type == GridTypes.WIDE_CAPSULE) {
showImage = true;
imagePath = tauri.convertFileSrc($appLibraryCache[game.appid][GridTypes.CAPSULE]);
} else {
showImage = false;
if ($appLibraryCache[game.appid]) {
if ($appLibraryCache[game.appid][type]) {
showImage = true;
imagePath = tauri.convertFileSrc($appLibraryCache[game.appid][type]);
} else if (type == GridTypes.WIDE_CAPSULE) {
showImage = true;
imagePath = tauri.convertFileSrc($appLibraryCache[game.appid][GridTypes.CAPSULE]);
} else {
showImage = false;
}
}
});
libraryCacheUnsub = appLibraryCache.subscribe((cache) => {
if (cache[game.appid][$gridType]) {
showImage = true;
imagePath = tauri.convertFileSrc(cache[game.appid][$gridType]);
} else if ($gridType == GridTypes.WIDE_CAPSULE) {
showImage = true;
imagePath = tauri.convertFileSrc(cache[game.appid][GridTypes.CAPSULE]);
} else {
showImage = false;
if (cache[game.appid]) {
if (cache[game.appid][$gridType]) {
showImage = true;
imagePath = tauri.convertFileSrc(cache[game.appid][$gridType]);
} else if ($gridType == GridTypes.WIDE_CAPSULE) {
showImage = true;
imagePath = tauri.convertFileSrc(cache[game.appid][GridTypes.CAPSULE]);
} else {
showImage = false;
}
}
});
});
Expand Down Expand Up @@ -104,7 +108,7 @@
@import "/theme.css";
.game {
background-color: var(--foreground);
background-color: var(--foreground-hover);
padding: 10px;
padding-bottom: 5px;
border-radius: 4px;
Expand All @@ -124,7 +128,7 @@
transition: transform 0.2s ease-in-out, background-color 0.15s ease-in-out;
}
.game:hover {
background-color: var(--foreground-hover);
background-color: var(--foreground-light);
transform: scale(1.1);
}
Expand Down
98 changes: 73 additions & 25 deletions src/components/core/games/Games.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,20 @@
import { onDestroy, onMount } from "svelte";
import { Pane } from "svelte-splitpanes";
import type { Unsubscriber } from "svelte/store";
import { gridType, hiddenGameIds, showHidden, steamGames } from "../../../Stores";
import { Platforms, appLibraryCache, currentPlatform, gridType, hiddenGameIds, nonSteamGames, showHidden, steamGames } from "../../../Stores";
import LoadingSpinner from "../../info/LoadingSpinner.svelte";
import SearchBar from "../../interactables/SearchBar.svelte";
import Toggle from "../../interactables/Toggle.svelte";
import VerticalSpacer from "../../spacers/VerticalSpacer.svelte";
import SectionTitle from "../SectionTitle.svelte";
import Game from "./Game.svelte";
import ListTabs from "../../layout/tabs/ListTabs.svelte";
let steamGamesUnsub: Unsubscriber;
let nonSteamGamesUnsub: Unsubscriber;
let hiddenGameIdsUnsub: Unsubscriber;
let showHiddenUnsub: Unsubscriber
let selectedPlatformUnsub: Unsubscriber;
const padding = 20;
Expand All @@ -33,31 +36,59 @@
};
let searchQuery = "";
let games: SteamGame[] = [];
let games: GameStruct[] = [];
function getGamesForPlatform(platform: Platforms): GameStruct[] {
switch (platform) {
case Platforms.STEAM:
return $steamGames;
case Platforms.NON_STEAM:
return $nonSteamGames;
}
}
const filterSteamGames = (platform: Platforms, hiddenIds: number[], showHidden: boolean) => {
let allGames = getGamesForPlatform(platform);
let selectedGames: GameStruct[] = [];
if (showHidden) {
selectedGames = allGames;
} else {
selectedGames = allGames.filter((game) => !hiddenIds.includes(game.appid));
}
const filterSteamGames = (allGames: SteamGame[], hiddenIds: number[], hidden: boolean) => (hidden ? allGames : allGames.filter((game) => !hiddenIds.includes(game.appid))).filter((game) => game.name.toLowerCase().includes(searchQuery));
return selectedGames.filter((game) => game.name.toLowerCase().includes(searchQuery));
}
function onSearchChange(query: string) {
searchQuery = query.toLowerCase();
games = filterSteamGames($steamGames, $hiddenGameIds, $showHidden);
games = filterSteamGames($currentPlatform, $hiddenGameIds, $showHidden);
}
onMount(() => {
steamGamesUnsub = steamGames.subscribe((stGames) => {
games = filterSteamGames(stGames, $hiddenGameIds, $showHidden);
steamGamesUnsub = steamGames.subscribe(() => {
if ($currentPlatform == Platforms.STEAM) games = filterSteamGames($currentPlatform, $hiddenGameIds, $showHidden);
});
nonSteamGamesUnsub = nonSteamGames.subscribe(() => {
if ($currentPlatform == Platforms.NON_STEAM) games = filterSteamGames($currentPlatform, $hiddenGameIds, $showHidden);
});
hiddenGameIdsUnsub = hiddenGameIds.subscribe((ids) => {
games = filterSteamGames($steamGames, ids, $showHidden);
games = filterSteamGames($currentPlatform, ids, $showHidden);
});
showHiddenUnsub = showHidden.subscribe((show) => {
games = filterSteamGames($steamGames, $hiddenGameIds, show);
games = filterSteamGames($currentPlatform, $hiddenGameIds, show);
});
selectedPlatformUnsub = currentPlatform.subscribe((platform) => {
games = filterSteamGames(platform, $hiddenGameIds, $showHidden);
});
});
onDestroy(() => {
if (steamGamesUnsub) steamGamesUnsub();
if (nonSteamGamesUnsub) nonSteamGamesUnsub();
if (hiddenGameIdsUnsub) hiddenGameIdsUnsub();
if (showHiddenUnsub) showHiddenUnsub();
if (selectedPlatformUnsub) selectedPlatformUnsub();
});
</script>

Expand All @@ -74,24 +105,28 @@
<VerticalSpacer />
</div>

<div class="content">
<VerticalSpacer />
<VerticalSpacer />

{#if $steamGames.length == 0}
<div class="loader-container">
<LoadingSpinner />
</div>
{:else}
<div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
{#each games as game (`${game.appid}`)}
<Game game={game} widths={widths} heights={heights} />
{/each}
<div class="content" style="height: calc(100% - 85px);">
<ListTabs tabs={Object.values(Platforms)} height="calc(100% - 45px)" bind:selected={$currentPlatform}>
<div class="grids-cont">
<VerticalSpacer />
<VerticalSpacer />

{#if games.length > 0}
<div class="game-grid" style="--img-width: {widths[$gridType] + padding}px; --img-height: {heights[$gridType] + padding + 18}px;">
{#each games as game (`${$currentPlatform}|${game.appid}|${game.name}`)}
<Game game={game} widths={widths} heights={heights} />
{/each}
</div>
{:else}
<div class="message">
No {$currentPlatform} games found.
</div>
{/if}

<VerticalSpacer />
<VerticalSpacer />
</div>
{/if}

<VerticalSpacer />
<VerticalSpacer />
</ListTabs>
</div>
</Pane>

Expand All @@ -107,6 +142,12 @@
max-height: calc(100% - 65px)
}
.grids-cont {
height: 100%;
width: 100%;
overflow: auto;
}
.game-grid {
width: 100%;
display: grid;
Expand All @@ -125,6 +166,13 @@
border-bottom: 1px solid var(--foreground);
}
.message {
width: 100%;
text-align: center;
opacity: 0.1;
padding-top: 40px;
}
.loader-container {
width: 100%;
padding-top: 14px;
Expand Down
Loading

0 comments on commit 0314a65

Please sign in to comment.