Basic API kind of worked out and solved a bunch of things with alpine.js
This commit is contained in:
Zed A. Shaw
parent
f49608d74c
commit
07fa59c8e7
12 changed files with 149 additions and 61 deletions
|
|
@ -1,6 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
|
||||
|
|
|
|||
3
public/api/game/1/index.json
Normal file
3
public/api/game/1/index.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{"title": "Turing's Tarpit",
|
||||
"description": "The description.",
|
||||
"url": "/game/1/turings-tarpit/"}
|
||||
6
public/api/game/index.json
Normal file
6
public/api/game/index.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[
|
||||
{"title": "Turing's Tarpit", "url": "/game/1/turings-tarpit/"},
|
||||
{"title": "Roguish", "url": "/game/1/turings-tarpit/"},
|
||||
{"title": "Raycaster", "url": "/game/1/turings-tarpit/"},
|
||||
{"title": "Clicker Loves You", "url": "/game/1/turings-tarpit/"}
|
||||
]
|
||||
18
public/api/live/index.json
Normal file
18
public/api/live/index.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"title": "Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream",
|
||||
"description": "Some kind of stream.",
|
||||
"links": [
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,7 +1,22 @@
|
|||
[
|
||||
{
|
||||
"title": "Sample Stream",
|
||||
"streamed_on": "10/10/2025",
|
||||
"description": "Some kind of stream."
|
||||
}
|
||||
]
|
||||
{
|
||||
"title": "Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream",
|
||||
"streamed_on": "10/10/2025",
|
||||
"description": "Some kind of stream.",
|
||||
"links": [
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
},
|
||||
{"description": "A funky website",
|
||||
"url": "https://test.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,44 @@
|
|||
[
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
},
|
||||
{ "date": "12/10/2025",
|
||||
"description": "A great stream.",
|
||||
"url": "/stream/1/"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
15
public/js/code.js
Normal file
15
public/js/code.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
class GetJson {
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
this.items = [];
|
||||
}
|
||||
|
||||
async theData() {
|
||||
const resp = await fetch(this.url);
|
||||
console.assert(resp.status == 200, "failed to get it");
|
||||
this.items = await resp.json();
|
||||
return this.items;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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/live/index.json");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<body x-init="Stream = await req.theData()" x-data="{Stream: {}}">
|
||||
<header>
|
||||
<a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span>
|
||||
</header>
|
||||
|
|
@ -22,12 +26,11 @@
|
|||
|
||||
<block>
|
||||
<h2>Links Found in Chat</h2>
|
||||
<dl>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
</dl>
|
||||
<ul>
|
||||
<template x-for="item in Stream.links">
|
||||
<li><a x-text="item.description" x-bind:href="item.url"></a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</block>
|
||||
|
||||
<form action="/api/link" method="POST">
|
||||
|
|
|
|||
|
|
@ -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/stream/1/index.json");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<body x-init="Stream = await req.theData()" x-data="{Stream: {}}">
|
||||
<header>
|
||||
<a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span>
|
||||
</header>
|
||||
|
|
@ -17,10 +21,10 @@
|
|||
<blockstart>
|
||||
|
||||
<block style="--value: 7">
|
||||
<h1>Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream</h1>
|
||||
<h1 x-text="Stream.title"></h1>
|
||||
|
||||
<div>
|
||||
<p>Summary Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror.</p>
|
||||
<p x-text="Stream.description"></p>
|
||||
</div>
|
||||
</block>
|
||||
|
||||
|
|
@ -31,20 +35,11 @@
|
|||
<block>
|
||||
<h2>Links Posted</h2>
|
||||
|
||||
<dl>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
<dt><a href="#">https://somelink.com</a></dt>
|
||||
<dd>A funky website</dd>
|
||||
</dl>
|
||||
<ul>
|
||||
<template x-for="item in Stream.links">
|
||||
<li><a x-text="item.description" x-bind:href="item.url"></a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</block>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,17 +7,9 @@
|
|||
<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 Streams = {
|
||||
items: [],
|
||||
|
||||
pastStreams: async () => {
|
||||
const resp = await fetch("/api/stream/index.json");
|
||||
console.assert(resp.status == 200, "failed to get it");
|
||||
return await resp.json();
|
||||
}
|
||||
};
|
||||
let Streams = new GetJson("/api/stream/index.json");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
|
@ -34,7 +26,7 @@
|
|||
</block>
|
||||
|
||||
<block x-data="Streams">
|
||||
<template x-for="item in pastStreams">
|
||||
<template x-for="item in theData">
|
||||
<stream class="horizontal">
|
||||
<shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
|
||||
<info>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue