tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

re-did 404 images and added mapping, re-did menu/search components for auth, removed unneeded files and cleaned up css

Browse Source
This commit is contained in:
zach
2026-02-26 18:08:08 -05:00
parent 187da306f0
commit d149312f3d
1046 changed files with 4594 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardGrid.astro
View File

@@ -2,7 +2,7 @@
---
<div class="row pokedex-page my-5">
<div class="row mb-4">
<div class="col-md-3 display-sm-none">
<div class="h5 d-none">Inventory management placeholder</div>
<div id="facetContainer"></div>

31
src/components/EnergyWheel.astro
View File

@@ -3,16 +3,21 @@ import Image from "astro/components/Image.astro"
import '/src/assets/css/main.scss';
---
<div class="circle float-start ms-5">
<Image class="circle-item rounded-shadow" style="--i: 0" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 1" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 2" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 4" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 6" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 7" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 8" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 9" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 10" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
</div>
<div class="energy-wheel">
<Image class="energy-wheel-item rounded-shadow" style="--i: 0" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 1" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 2" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 4" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 6" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 7" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 8" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 9" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
<Image class="energy-wheel-item rounded-shadow" style="--i: 10" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
</div>
<script>
document.querySelectorAll(".energy-wheel-item").forEach((el, i, arr) => {
el.style.zIndex = arr.length - i;
});
</script>

16
src/components/Footer.astro Normal file
View File

@@ -0,0 +1,16 @@
---
import EnergyWheel from './EnergyWheel.astro';
import '/src/assets/css/main.scss';
---
<footer class="bd-footer py-4 py-md-5 mt-0 bottom-0 bg-body-tertiary">
<div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
<div class="row">
<div class="col-3 mb-3">
</div>
<div class="col mb-3 align-items-end">
<a class="btn btn-outline-success rounded p-2 float-end" href="/contact">Contact Us <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".25" d="M112 176L404 176C411.9 206.7 431 233 456.6 250.2L320 353.9L112 196.1L112 176zM112 256.3L305.5 403.1L320 414.1L334.5 403.1L509.2 270.6C515.3 271.5 521.6 272 528 272L528 464L112 464L112 256.3z"/><path d="M528 64C572.2 64 608 99.8 608 144C608 188.2 572.2 224 528 224C483.8 224 448 188.2 448 144C448 99.8 483.8 64 528 64zM88 128L401 128C400.3 133.2 400 138.6 400 144C400 155 401.4 165.8 404 176L112 176L112 196.1L320 353.9L456.6 250.3C472.1 260.7 489.9 267.8 509.2 270.7L334.5 403.2L320 414.2L305.5 403.2L112 256.4L112 464.1L528 464.1L528 272.1C545 272.1 561.2 268.8 576 262.8L576 512.1L64 512.1L64 128.1L88 128.1z"/></svg></a>
</div>
</div>
</div>
</footer>

34
src/components/NavBar.astro Normal file
View File

@@ -0,0 +1,34 @@
---
import '/src/assets/css/main.scss';
export const prerender = false;
---
<script is:inline>
const afterUpdate = (e) => {
const start = document.querySelector('#start');
if (start) {
const val = Number(start.value) || 0;
start.value = (val + 20).toString();
}
// delete the triggering element
if (e && e.detail && e.detail.elt) {
e.detail.elt.remove();
}
};
const beforeSearch = (e) => {
const start = document.querySelector('#start');
if (start) {
start.value = '0';
document.querySelector('#cardGrid').innerHTML = '';
window.scrollTo({ top: 0, behavior: 'instant' });
}
};
</script>
<nav class="navbar navbar-expand sticky-top bg-dark" data-bs-theme="dark">
<div class="container container-fluid">
<a class="navbar-brand d-flex" href="/">
<span class="h3 d-none d-md-flex">Rigid's App Thing</span><span class="h3 d-md-none d-flex m-auto">RAT</span>
</a>
<slot name="navItems"/>
<slot name="searchInput"/>
</div>
</nav>

10
src/components/NavItems.astro Normal file
View File

@@ -0,0 +1,10 @@
---
import '/src/assets/css/main.scss';
---
<div class="navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item d-flex">
<a class="nav-link btn btn-warning rounded p-2" href="/pokemon"><span class="d-inline-block d-md-none">Cards</span> <svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path opacity=".4" d="M256 519.9L256 576L576 576L576 128L378.8 128C408.7 239.7 438.6 351.3 468.5 463C397.7 482 326.8 501 256 519.9z"/><path d="M43.5 113L352.6 30.2L468.6 462.9L159.5 545.7z"/></svg></a>
</li>
</ul>
</div>

33
src/components/Search.astro Normal file
View File

@@ -0,0 +1,33 @@
---
import { SignedIn } from "@clerk/astro/components";
---
<script is:inline>
const afterUpdate = (e) => {
const start = document.querySelector('#start');
if (start) {
const val = Number(start.value) || 0;
start.value = (val + 20).toString();
}
// delete the triggering element
if (e && e.detail && e.detail.elt) {
e.detail.elt.remove();
}
};
const beforeSearch = (e) => {
const start = document.querySelector('#start');
if (start) {
start.value = '0';
document.querySelector('#cardGrid').innerHTML = '';
window.scrollTo({ top: 0, behavior: 'instant' });
}
};
</script>
<SignedIn>
<form class="d-flex ms-2" role="search" id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
<input type="hidden" name="start" id="start" value="0" />
<input type="search" name="q" class="form-control form-control-lg me-2" placeholder="Search cards..." />
<input type="submit" class="btn btn-outline-light" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
</form>
</SignedIn>

41
src/components/StickyFilter.astro
View File

@@ -1,41 +0,0 @@
---
---
<script is:inline>
const afterUpdate = (e) => {
const start = document.querySelector('#start');
if (start) {
const val = Number(start.value) || 0;
start.value = (val + 20).toString();
}
// delete the triggering element
if (e && e.detail && e.detail.elt) {
e.detail.elt.remove();
}
};
const beforeSearch = (e) => {
const start = document.querySelector('#start');
if (start) {
start.value = '0';
document.querySelector('#cardGrid').innerHTML = '';
window.scrollTo({ top: 0, behavior: 'instant' });
}
};
</script>
<div class="search-bar w-100 me-md-3">
<div class="container mt-3 mt-md-0">
<form id="searchform" hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit" hx-vals='{"start":"0"}' hx-on--after-request="afterUpdate()" hx-on--before-request="beforeSearch()">
<div class="bottom-0 row row-cols-2 g-0 me-md-2">
<div class="col-10">
<input type="hidden" name="start" id="start" value="0" />
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
</div>
<div class="col-2 p-0">
<input type="submit" class="w-100 btn btn-secondary search-button" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
</div>
</div>
</form>
</div>
</div>