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,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">