Basic API kind of worked out and solved a bunch of things with alpine.js

This commit is contained in:
Zed A. Shaw 2025-05-28 16:40:54 -04:00
parent f49608d74c
commit 07fa59c8e7
12 changed files with 149 additions and 61 deletions

View file

@ -6,10 +6,14 @@
<link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title>
<script defer src="/js/alpine.js"></script>
<script src="/js/code.js"></script>
<script>
let req = new GetJson("/api/game/1/index.json");
</script>
</head>
<body>
<body x-init="Game = await req.theData()" x-data="{Game: {}}">
<header>
<a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span>
</header>
@ -18,12 +22,12 @@
<shape style="--w: 100%; --h: 300px">Gameplay Demo Video</shape>
<block style="--value: 7">
<h1>Turing's Tarpit</h1>
<h1 x-text="Game.title">Title</h1>
<block class="horizontal">
<shape style="--w: 200px; --h: 200px;">Some Image</shape>
<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>
<p x-text="Game.description">Description</p>
</block>
</block>

View file

@ -6,6 +6,11 @@
<link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title>
<script defer src="/js/alpine.js"></script>
<script src="/js/code.js"></script>
<script>
let Games = new GetJson("/api/game/index.json");
</script>
</head>
<body>
@ -22,19 +27,10 @@
</block>
<hr/>
<grid style="--cols: 2">
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game A</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game A</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game A</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game A</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game A</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape>
<grid x-data="Games" style="--cols: 2">
<template x-for="item in theData">
<shape style="--h: 200px"><a x-text="item.title" x-bind:href="item.url"></a></shape>
</template>
</grid>
<block style="--value: 7">