learn-code-the-hard-way
/
zedshaw-games
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
Zed A. Shaw 3 weeks ago
parent f49608d74c
commit 07fa59c8e7
12 changed files with 149 additions and 61 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      public/alpine_test.html
  2. 3
      public/api/game/1/index.json
  3. 6
      public/api/game/index.json
  4. 18
      public/api/live/index.json
  5. 21
      public/api/stream/1/index.json
  6. 40
      public/api/stream/index.json
  7. 12
      public/game/1/turings-tarpit/index.html
  8. 22
      public/game/index.html
  9. 15
      public/js/code.js
  10. 19
      public/live/index.html
  11. 31
      public/stream/1/index.html
  12. 14
      public/stream/index.html

1
public/alpine_test.html
Unescape View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body> <body>
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1> <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

3
public/api/game/1/index.json
Unescape View File

@ -0,0 +1,3 @@
{"title": "Turing's Tarpit",
"description": "The description.",
"url": "/game/1/turings-tarpit/"}

6
public/api/game/index.json
Unescape View 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
Unescape View 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"
}
]
}

21
public/api/stream/1/index.json
Unescape View File

@ -1,7 +1,22 @@
[
{ {
"title": "Sample Stream", "title": "Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream",
"streamed_on": "10/10/2025", "streamed_on": "10/10/2025",
"description": "Some kind of 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"
},
{"description": "A funky website",
"url": "https://test.com"
} }
] ]
}

40
public/api/stream/index.json
Unescape View File

@ -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", { "date": "12/10/2025",
"description": "A great stream.", "description": "A great stream.",
"url": "/stream/1/" "url": "/stream/1/"

12
public/game/1/turings-tarpit/index.html
Unescape View File

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

22
public/game/index.html
Unescape View File

@ -6,6 +6,11 @@
<link rel="stylesheet" href="/color.css"> <link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.css"> <link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title> <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> </head>
<body> <body>
@ -22,19 +27,10 @@
</block> </block>
<hr/> <hr/>
<grid style="--cols: 2"> <grid x-data="Games" style="--cols: 2">
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape> <template x-for="item in theData">
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game A</a></shape> <shape style="--h: 200px"><a x-text="item.title" x-bind:href="item.url"></a></shape>
<shape style="--h: 200px"><a href="/game/1/turings-tarpit/">Game B</a></shape> </template>
<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> </grid>
<block style="--value: 7"> <block style="--value: 7">

15
public/js/code.js
Unescape View 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;
}
}

19
public/live/index.html
Unescape View File

@ -6,10 +6,14 @@
<link rel="stylesheet" href="/color.css"> <link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.css"> <link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title> <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> </head>
<body x-init="Stream = await req.theData()" x-data="{Stream: {}}">
<body>
<header> <header>
<a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span> <a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span>
</header> </header>
@ -22,12 +26,11 @@
<block> <block>
<h2>Links Found in Chat</h2> <h2>Links Found in Chat</h2>
<dl> <ul>
<dt><a href="#">https://somelink.com</a></dt> <template x-for="item in Stream.links">
<dd>A funky website</dd> <li><a x-text="item.description" x-bind:href="item.url"></a></li>
<dt><a href="#">https://somelink.com</a></dt> </template>
<dd>A funky website</dd> </ul>
</dl>
</block> </block>
<form action="/api/link" method="POST"> <form action="/api/link" method="POST">

31
public/stream/1/index.html
Unescape View File

@ -6,10 +6,14 @@
<link rel="stylesheet" href="/color.css"> <link rel="stylesheet" href="/color.css">
<link rel="stylesheet" href="/blockstart.css"> <link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title> <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> </head>
<body x-init="Stream = await req.theData()" x-data="{Stream: {}}">
<body>
<header> <header>
<a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span> <a href="/">🏡</a> <span>Zed's Game Dev Website Yay</span>
</header> </header>
@ -17,10 +21,10 @@
<blockstart> <blockstart>
<block style="--value: 7"> <block style="--value: 7">
<h1>Stream #34: C++ Game Dev|Retro Raycaster|No Brainrot Stream</h1> <h1 x-text="Stream.title"></h1>
<div> <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> </div>
</block> </block>
@ -31,20 +35,11 @@
<block> <block>
<h2>Links Posted</h2> <h2>Links Posted</h2>
<dl> <ul>
<dt><a href="#">https://somelink.com</a></dt> <template x-for="item in Stream.links">
<dd>A funky website</dd> <li><a x-text="item.description" x-bind:href="item.url"></a></li>
<dt><a href="#">https://somelink.com</a></dt> </template>
<dd>A funky website</dd> </ul>
<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>
</block> </block>

14
public/stream/index.html
Unescape View File

@ -7,17 +7,9 @@
<link rel="stylesheet" href="/blockstart.css"> <link rel="stylesheet" href="/blockstart.css">
<title>ZedShaw's Game Thing</title> <title>ZedShaw's Game Thing</title>
<script defer src="/js/alpine.js"></script> <script defer src="/js/alpine.js"></script>
<script src="/js/code.js"></script>
<script> <script>
let Streams = { let Streams = new GetJson("/api/stream/index.json");
items: [],
pastStreams: async () => {
const resp = await fetch("/api/stream/index.json");
console.assert(resp.status == 200, "failed to get it");
return await resp.json();
}
};
</script> </script>
</head> </head>
@ -34,7 +26,7 @@
</block> </block>
<block x-data="Streams"> <block x-data="Streams">
<template x-for="item in pastStreams"> <template x-for="item in theData">
<stream class="horizontal"> <stream class="horizontal">
<shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape> <shape style="--w: 100px; --h: 100px">Stream Thumbnail</shape>
<info> <info>

Write Preview
Loading…
Cancel
Save