Started the main game display page.
This commit is contained in:
Zed A. Shaw
parent
f1038d2499
commit
dcb6376f28
3 changed files with 92 additions and 54 deletions
|
|
@ -1,27 +1,23 @@
|
|||
<script>
|
||||
let Games = new PaginateTable("/api/game");
|
||||
let Games = new PaginateTable('/api/game');
|
||||
</script>
|
||||
|
||||
<block class="bg-gray-300 dark:bg-gray-800">
|
||||
<h1 id="page-title">Zed's Trash Ass Games</h1>
|
||||
<aside>
|
||||
<h1 id="page-title">Games I've Made</h1>
|
||||
|
||||
<p>More fun than a barrel full of monkeys with syphilus.
|
||||
</p>
|
||||
</block>
|
||||
<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>
|
||||
</aside>
|
||||
|
||||
<hr class="h-10"/>
|
||||
<grid x-data="Games" class="grid-cols-2">
|
||||
<block x-data="Games">
|
||||
<template x-for="item in contents">
|
||||
<shape class="xs">
|
||||
<a data-testid="game-link" x-text="item.title" x-bind:href="`/game/${item.id}/${item.slug}/`"></a>
|
||||
<p x-text="item.description"></p>
|
||||
</shape>
|
||||
<grid class="two-panel">
|
||||
<a data-testid="game-link" x-bind:href="`/game/${item.id}/${item.slug}/`">
|
||||
<img x-bind:src="item.image" />
|
||||
</a>
|
||||
<block>
|
||||
<h3 x-text="item.title"></h3>
|
||||
<p x-text="item.description"></p>
|
||||
</block>
|
||||
</grid>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -235,6 +235,9 @@
|
|||
.left-40 {
|
||||
left: calc(var(--spacing) * 40);
|
||||
}
|
||||
.m-2 {
|
||||
margin: calc(var(--spacing) * 2);
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -269,9 +272,6 @@
|
|||
width: calc(var(--spacing) * 12);
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-15 {
|
||||
height: calc(var(--spacing) * 15);
|
||||
}
|
||||
|
|
@ -336,6 +336,9 @@
|
|||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -487,6 +490,9 @@
|
|||
.bg-green-400\! {
|
||||
background-color: var(--color-green-400) !important;
|
||||
}
|
||||
.\!p-0 {
|
||||
padding: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.\!p-1 {
|
||||
padding: calc(var(--spacing) * 1) !important;
|
||||
}
|
||||
|
|
@ -554,6 +560,10 @@
|
|||
font-size: var(--text-3xl) !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 {
|
||||
font-size: var(--text-2xl);
|
||||
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 {
|
||||
@media (width >= 40rem) {
|
||||
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 {
|
||||
@media (width >= 64rem) {
|
||||
width: var(--container-4xl);
|
||||
|
|
@ -648,6 +673,21 @@
|
|||
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 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-300);
|
||||
|
|
|
|||
|
|
@ -1,38 +1,40 @@
|
|||
<script>
|
||||
let Game = new GetJson("/api/game/1");
|
||||
</script>
|
||||
<div class="flex flex-col"
|
||||
x-data="{item: {}}"
|
||||
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"
|
||||
x-data="{item: {}}"
|
||||
x-init="item = await Game.item()">
|
||||
<h1 x-text="item.title"></h1>
|
||||
<div class="gap-3 pb-3 flex flex-col lg:flex-row-reverse">
|
||||
<div class="!text-sm !p-0 flex flex-col md:flex-row lg:flex-col">
|
||||
<shape class="video">small header</shape>
|
||||
<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">
|
||||
<shape class="xxs">Some Image</shape>
|
||||
<grid class="bg-gray-800 two-panel">
|
||||
<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>
|
||||
</block>
|
||||
<block class="bg-gray-800">
|
||||
<h2>Current Status</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>
|
||||
<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>
|
||||
<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>Current Status</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>
|
||||
<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>
|
||||
<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>
|
||||
</grid>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue