Likes
12
dialog
@jdan
HTTP (preview)
dialog Renders windows 98 dialog boxes as SVGs. Using satori and styles from 98.css Usage https://jdan-dialog.web.val.run/? w =200& h =110& title =Hello& caption =World w (default: 200): the width of the dialog h (default: 110): the height of the dialog title (default: "{title}"): the text in the title bar caption (default: "{caption}"): the caption text
animatedReadmeSVG
@maxm
HTTP
Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" />
</p> <p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" />
</p>
![stevekrouse avatar](https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg)
staticWordle
@stevekrouse
HTTP (preview)
Clone of @maxm/staticChess but for Wordle. Every letter is a link. The game state is stored in the URL bar. You could do silly things like playing collaborative Wordle with your friends by trading links back and forth. Or undo any mistakes by clicking the back button. I also make it easy to generate a new game from any of your current game's guesses β to send to a friend. They key to these static games like this one and @maxm/staticChess is to figure out: a representation for your game state (the Game type ) how to encode/decode your game state into the URL ( base64-encoding JSON ) how to render your game state into HTML ( looping over guesses and making divs ) placing the links into your HTML in the right spots (on my on-screen keyboard ) prettify with CSS (for guesses and the keyboard )
staticChess
@maxm
HTTP (preview)
Check it out here: https://chess.maxmcd.com Plain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves? Functionality is quite limited, and things might be broken. Please let me know if you find bugs! Inspired by this HN discussion about sites that have all possible game states of tic-tac-toe. I plan on extending this to support real gameplay. I think it could be a nice simple interface for long form games with friends. Might also be fun to add a static AI to play against. Feel free to PR any changes if you'd like to see something added.
![stevekrouse avatar](https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg)
react_http
@stevekrouse
Script
Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
export function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Example App</h1>
<button
onClick={() => setCount(count + 1)}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
{count}
</button>
</div>
);
}
export default () =>
react_http({
component: App,
sourceURL: import.meta.url,
head: `<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Example App</title>`,
}); Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.