Skip to content
Snippets Groups Projects
Commit 2390ad19 authored by Amanda Pollyanna da Silva Rodrigues's avatar Amanda Pollyanna da Silva Rodrigues
Browse files

Merge branch 'issue-6/layout' into 'develop'

FIX scroll user route

See merge request !14
parents 386c8c72 e354b92f
Branches develop
No related tags found
1 merge request!14FIX scroll user route
<script>
</script>
<main>
<slot />
</main>
<style>
:global(html,body) {
margin: 0;
padding: 0;
}
main {
display: flex;
background-color: transparent;
color: white;
background-image: url('/background.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
font-family: 'Rajdhani', 'Courier New', sans-serif;
}
</style>
......@@ -11,22 +11,17 @@
let currentUser: { name: string; email: string; money: number; cyberpsychosis: number; cyberLimit: number } | null = null;
let allPurchases: UserPurchase[] = [];
let displayedPurchases: UserPurchase[] = [];
let loading = true;
let error = '';
let activeCategory = 'all';
let categories: string[] = [];
let currentUserId = -1;
let page = 1;
const perPage = 10;
let currentUserId = -1
function getToken(): string | null {
return localStorage.getItem('token');
}
// Carrega dados ao montar o componente
onMount(async () => {
window.addEventListener('scroll', handleScroll);
try {
const token = getToken();
if (!token) throw new Error('Usuário não autenticado');
......@@ -65,73 +60,43 @@
implant: implants.find(i => i.id === t.implant_id)!
}));
// categorias para filtro
categories = [...new Set(allPurchases.map(p => p.implant.bodyPart))];
// página inicial
displayedPurchases = allPurchases.slice(0, perPage);
} catch (err) {
error = err instanceof Error ? err.message : String(err);
} finally {
loading = false;
}
return () => window.removeEventListener('scroll', handleScroll);
});
// Carrega próxima “página” de items
function loadMore() {
const start = page * perPage;
const next = allPurchases.slice(start, start + perPage);
if (next.length > 0) {
displayedPurchases = [...displayedPurchases, ...next];
page += 1;
}
}
// Detecta fim da página e dispara loadMore
function handleScroll() {
if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100) {
loadMore();
}
}
// Categorias únicas (reativo)
$: categories = [...new Set(allPurchases.map(p => p.implant.bodyPart))];
// Filtra apenas o que vai ser mostrado
function getFiltered() {
return activeCategory === 'all'
? displayedPurchases
: displayedPurchases.filter(p => p.implant.bodyPart === activeCategory);
}
// Lista filtrada (reativo)
$: filteredImplants = activeCategory === 'all'
? allPurchases
: allPurchases.filter(p => p.implant.bodyPart === activeCategory);
</script>
<style>
:global(body) {
margin: 0;
padding: 0;
color: #00f7ff;
font-family: 'Rajdhani', 'Courier New', sans-serif;
}
.error {
color: #ff3e3e;
text-align: center;
}
/* Layout da janela principal */
.window {
display: flex;
width: 100vw;
min-height: 100vh;
width: 100%;
}
/* Estilização do menu lateral */
.navegation {
width: 17%;
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
border-right: 1px solid #00f7ff;
box-shadow: 2px 0 10px rgba(0, 247, 255, 0.2);
font-family: 'Rajdhani', 'Courier New', sans-serif;
width: 250px;
padding: 20px 0;
display: block;
}
.nav-header h2 {
......@@ -140,7 +105,7 @@
text-shadow: 0 0 10px #ff073a;
border-bottom: 1px solid #00f7ff;
padding-bottom: 15px;
margin: 0 15px 20px;
margin: 20px 15px 20px;
}
.nav-section {
......@@ -178,39 +143,37 @@
cursor: pointer;
text-align: left;
font-family: 'Rajdhani', 'Courier New', sans-serif;
font-weight: 800;
}
.filter-btn:hover {
background-color: #9a9f17;
background-color: #fee801;
}
.filter-btn.active {
background-color: #9a9f17;
background-color:#fee801;
border-left: 3px solid #ff073a;
}
.card-container {
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
padding: 1rem;
margin: 0.5rem;
}
.main-content {
flex: 1;
padding: 20px;
overflow-y: auto; /* Mantém o scroll funcionando */
background-image: url('/background.png');
padding: 2rem;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
margin: auto;
gap: 0.5rem;
}
p {
margin-left: 10px;
}
</style>
span {
color: #00d0ff;
font-family: 'Rajdhani', 'Courier New', sans-serif;
}
</style>
<div class="window">
<div class="navegation">
......@@ -226,11 +189,11 @@
<p>
{#if currentUser}
Nome: {currentUser.name}<br>
Email: {currentUser.email}<br>
Money: {currentUser.money}<br>
Cyber Limit: {currentUser.cyberLimit}<br>
Cyberpsychosis: {currentUser.cyberpsychosis}<br>
<span>Nome:</span> {currentUser.name}<br>
<span>Email:</span> {currentUser.email}<br>
<span>Money:</span> {currentUser.money}<br>
<span>CyberLimit:</span> {currentUser.cyberLimit}<br>
<span>Cyberpsychosis:</span> {currentUser.cyberpsychosis}<br>
{:else if loading}
Carregando informações do usuário...
{:else if error}
......@@ -258,7 +221,7 @@
</div>
<!-- Cards dos Implantes -->
<div class="main-content">
<div class="card-container">
{#if loading}
<p>Carregando...</p>
{:else if error}
......@@ -266,8 +229,7 @@
{:else if allPurchases.length === 0}
<p>Você ainda não possui implantes comprados.</p>
{:else}
<div class="card-container">
{#each getFiltered() as p (p.implant_id)}
{#each filteredImplants as p (p.implant_id)}
<Card
title={p.implant.name}
bodyPart={p.implant.bodyPart}
......@@ -278,7 +240,6 @@
boughtIds={[]}
/>
{/each}
</div>
{/if}
</div>
</div>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment