Ryan/drop-app
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-app.git synced 2025-11-22 12:41:16 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: improvements to jump calculator

Browse Source
This commit is contained in:
DecDuck
2025-09-24 07:38:37 +10:00
parent dbf9c8e8e5
commit ab9e06f6c4
3 changed files with 111 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
tvmode/pages/library.vue
View File

@ -1,24 +1,52 @@
<template>
<div class="grid grid-cols-4 gap-4 p-8">
<NuxtLink
class="group transition-all duration-300 overflow-hidden bg-zinc-950 p-2 rounded-xl relative focus:scale-105"
v-for="game in newGames"
:key="game.id"
:to="`/library/${game.id}`"
>
<div class="h-full z-10 relative bg-zinc-800/40 p-4 rounded-xl">
<h1 class="text-xl text-zinc-100 font-bold">{{ game.mName }}</h1>
<p class="text-xs text-zinc-400">{{ game.mShortDescription }}</p>
<div class=" p-8">
<div class="mb-4 flex gap-x-2">
<div
class="relative transition-transform duration-300 hover:scale-105 active:scale-95"
>
<div
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
>
<MagnifyingGlassIcon
class="h-5 w-5 text-zinc-400"
aria-hidden="true"
/>
</div>
<input
type="text"
class="block w-full rounded-lg border-0 bg-zinc-800/50 py-2 pl-10 pr-3 text-zinc-100 placeholder:text-zinc-500 focus:bg-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6"
placeholder="Search library..."
/>
</div>
<img
class="transition group-focus:blur absolute inset-0 z-0"
:src="useObject(game.mBannerObjectId)"
/>
</NuxtLink>
<button
class="p-1 flex items-center justify-center transition-transform duration-300 size-10 hover:scale-110 active:scale-90 rounded-lg bg-zinc-800/50 text-zinc-100"
>
<ArrowPathIcon class="size-4" />
</button>
</div>
<div class="grid grid-cols-4 gap-4">
<NuxtLink
class="group transition-all duration-300 overflow-hidden bg-zinc-950 p-2 rounded-xl relative focus:scale-105"
v-for="game in newGames"
:key="game.id"
:to="`/library/${game.id}`"
>
<div class="h-full z-10 relative bg-zinc-800/40 p-4 rounded-xl">
<h1 class="text-xl text-zinc-100 font-bold">{{ game.mName }}</h1>
<p class="text-xs text-zinc-400">{{ game.mShortDescription }}</p>
</div>
<img
class="transition group-focus:blur absolute inset-0 z-0"
:src="useObject(game.mBannerObjectId)"
/>
</NuxtLink>
</div>
</div>
</template>
<script setup lang="ts">
import { ArrowPathIcon, MagnifyingGlassIcon } from "@heroicons/vue/16/solid";
import { invoke } from "@tauri-apps/api/core";
import type { Game } from "~/types";