site/zedshaw.games
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Started the main game display page.

Browse source
This commit is contained in:
Zed A. Shaw 2025-09-17 13:18:13 -04:00
parent f1038d2499
commit dcb6376f28
3 changed files with 92 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

34
pages/game/index.html
View file

@ -1,27 +1,23 @@
<script> <script>
let Games = new PaginateTable("/api/game"); let Games = new PaginateTable('/api/game');
</script> </script>
<block class="bg-gray-300 dark:bg-gray-800"> <aside>
<h1 id="page-title">Zed's Trash Ass Games</h1> <h1 id="page-title">Games I've Made</h1>
<p>More fun than a barrel full of monkeys with syphilus. <p>I only started making games in 2025, and in that time I've made these. All games are hand coded in C++ or another language and feature all hand crafted art by me unless stated otherwise. You can find the code to all games in my <a href="https://git.zedshaw.games/games/">git repo</a>.</p>
</p> </aside>
</block>
<hr class="h-10"/> <block x-data="Games">
<grid x-data="Games" class="grid-cols-2">
<template x-for="item in contents"> <template x-for="item in contents">
<shape class="xs"> <grid class="two-panel">
<a data-testid="game-link" x-text="item.title" x-bind:href="`/game/${item.id}/${item.slug}/`"></a> <a data-testid="game-link" x-bind:href="`/game/${item.id}/${item.slug}/`">
<p x-text="item.description"></p> <img x-bind:src="item.image" />
</shape> </a>
<block>
<h3 x-text="item.title"></h3>
<p x-text="item.description"></p>
</block>
</grid>
</template> </template>
</grid>
<block class="bg-gray-300 dark:bg-gray-800">
<h2>Read The Code</h2>
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
<button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
</block> </block>

46
static/style.css
View file

@ -235,6 +235,9 @@
.left-40 { .left-40 {
left: calc(var(--spacing) * 40); left: calc(var(--spacing) * 40);
} }
.m-2 {
margin: calc(var(--spacing) * 2);
}
.block { .block {
display: block; display: block;
} }
@ -269,9 +272,6 @@
width: calc(var(--spacing) * 12); width: calc(var(--spacing) * 12);
height: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12);
} }
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-15 { .h-15 {
height: calc(var(--spacing) * 15); height: calc(var(--spacing) * 15);
} }
@ -336,6 +336,9 @@
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.flex-row {
flex-direction: row;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
@ -487,6 +490,9 @@
.bg-green-400\! { .bg-green-400\! {
background-color: var(--color-green-400) !important; background-color: var(--color-green-400) !important;
} }
.\!p-0 {
padding: calc(var(--spacing) * 0) !important;
}
.\!p-1 { .\!p-1 {
padding: calc(var(--spacing) * 1) !important; padding: calc(var(--spacing) * 1) !important;
} }
@ -554,6 +560,10 @@
font-size: var(--text-3xl) !important; font-size: var(--text-3xl) !important;
line-height: var(--tw-leading, var(--text-3xl--line-height)) !important; line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
} }
.\!text-sm {
font-size: var(--text-sm) !important;
line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
}
.text-2xl { .text-2xl {
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height)); line-height: var(--tw-leading, var(--text-2xl--line-height));
@ -633,11 +643,26 @@
} }
} }
} }
.sm\:flex-col {
@media (width >= 40rem) {
flex-direction: column;
}
}
.sm\:p-0 { .sm\:p-0 {
@media (width >= 40rem) { @media (width >= 40rem) {
padding: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0);
} }
} }
.md\:flex-col {
@media (width >= 48rem) {
flex-direction: column;
}
}
.md\:flex-row {
@media (width >= 48rem) {
flex-direction: row;
}
}
.lg\:w-4xl { .lg\:w-4xl {
@media (width >= 64rem) { @media (width >= 64rem) {
width: var(--container-4xl); width: var(--container-4xl);
@ -648,6 +673,21 @@
max-width: var(--container-4xl); max-width: var(--container-4xl);
} }
} }
.lg\:flex-col {
@media (width >= 64rem) {
flex-direction: column;
}
}
.lg\:flex-row {
@media (width >= 64rem) {
flex-direction: row;
}
}
.lg\:flex-row-reverse {
@media (width >= 64rem) {
flex-direction: row-reverse;
}
}
.dark\:bg-gray-300 { .dark\:bg-gray-300 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: var(--color-gray-300); background-color: var(--color-gray-300);

66
views/game.html
View file

@ -1,38 +1,40 @@
<script> <div class="flex flex-col"
let Game = new GetJson("/api/game/1"); x-data="{item: {}}"
</script> x-init="item = await GetJson('/api/game/1')">
<shape class="video">Gameplay Demo Video</shape> <h3 x-text="item.title"></h3>
<block class="bg-gray-800" <div class="gap-3 pb-3 flex flex-col lg:flex-row-reverse">
x-data="{item: {}}" <div class="!text-sm !p-0 flex flex-col md:flex-row lg:flex-col">
x-init="item = await Game.item()"> <shape class="video">small header</shape>
<h1 x-text="item.title"></h1> <p class="m-2" x-text="item.description"></p>
</div>
<video controls width="600">
<template x-if="item.video">
<source :src="item.video" type="video/mp4" />
</template>
</video>
</div>
<block class="horizontal"> <grid class="bg-gray-800 two-panel">
<shape class="xxs">Some Image</shape> <block>
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
</block>
<p x-text="item.description"></p> <block class="bg-gray-800">
</block> <h2>Current Status</h2>
</block> <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
</block>
<block>
<h2>Planned Work</h2>
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
</block>
<block> <block class="bg-gray-800">
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p> <h2>Read The Code</h2>
</block> <p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
<button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
<block class="bg-gray-800"> </block>
<h2>Current Status</h2> </grid>
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p> </div>
</block>
<block>
<h2>Planned Work</h2>
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
</block>
<block class="bg-gray-800">
<h2>Read The Code</h2>
<p>Polaroid retro pork belly yes plz bitters, viral chicharrones typewriter chartreuse vice Brooklyn. Adaptogen pour-over vibecession viral. Tote bag tonx DIY microdosing. Pickled selvage bespoke small batch, blue bottle twee tacos jean shorts before they sold out chicharrones solarpunk. Hoodie taiyaki poutine jianbing chambray.</p>
<button><a href="https://git.learnjsthehardway.com/learn-code-the-hard-way/turings-tarpit">View the Git</a></button>
</block>