pabloid
/
tsgames
1
0
Fork 0
Code

Improve local builds

This commit is contained in:
Pabloader 2026-04-10 13:34:45 +00:00
parent 2b7a73e818
commit a307d4d3eb
8 changed files with 73 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
build/assets/index-local.html
View File

@ -1,58 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title><!--$TITLE$--></title>
<style>
* {
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
}
/*$STYLE$*/
</style>
<!--$ICON$-->
</head>
<body>
<!--$SCRIPT$-->
<script>
function connect() {
const params = new URLSearchParams(location.search);
const game = params.get('game') || '';
const ws = new WebSocket('css-ws?game=' + encodeURIComponent(game));
const onMessage = (e) => {
try {
const { type, css } = JSON.parse(e.data);
if (type === 'css') {
const styleTag = document.querySelector('style');
if (styleTag) styleTag.textContent = css;
}
} catch { }
};
const onClose = () => {
ws.removeEventListener('message', onMessage);
ws.removeEventListener('close', onClose);
setTimeout(connect, 500);
};
ws.addEventListener('message', onMessage);
ws.addEventListener('close', onClose);
}
connect();
</script>
</body>
</html>

30
build/assets/index.html
View File

@ -3,40 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title><!--$TITLE$--></title> <title><!--$TITLE$--></title>
<style> <!--$STYLE$-->
* {
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
}
/*$STYLE$*/
</style>
<!--$MANIFEST$--> <!--$MANIFEST$-->
<!--$ICON$--> <!--$ICON$-->
</head> </head>
<body> <body>
<!--$SCRIPT$--> <!--$SCRIPT$-->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('SW registered'))
.catch(err => console.error('SW registration failed:', err));
});
}
</script>
</body> </body>
</html> </html>

3
build/build.ts
View File

@ -13,6 +13,7 @@ const publish = process.env.PUBLISH_LOCATION;
const args = process.argv.slice(2); const args = process.argv.slice(2);
const local = args.includes('--local'); const local = args.includes('--local');
const exported = args.includes('--exported');
let game = args.find(a => !a.startsWith('-')) ?? ''; let game = args.find(a => !a.startsWith('-')) ?? '';
while (!await isGame(game)) { while (!await isGame(game)) {
@ -22,7 +23,7 @@ while (!await isGame(game)) {
}); });
} }
console.log(`Building ${game}...`); console.log(`Building ${game}...`);
const html = await buildHTML(game, { production: true, local }); const html = await buildHTML(game, { production: true, local, exported });
if (!html) { if (!html) {
process.exit(1); process.exit(1);

58
build/html.ts
View File

@ -33,13 +33,53 @@ interface Args {
production?: boolean; production?: boolean;
mobile?: boolean; mobile?: boolean;
local?: boolean; local?: boolean;
exported?: boolean;
} }
const SW_SCRIPT = `<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => console.log('SW registered'))
.catch(err => console.error('SW registration failed:', err));
});
}
</script>`;
const CSS_RELOAD_SCRIPT = `<script>
function connect() {
const params = new URLSearchParams(location.search);
const game = params.get('game') || '';
if (!game) return;
const ws = new WebSocket('css-ws?game=' + encodeURIComponent(game));
const onMessage = (e) => {
try {
const { type, css } = JSON.parse(e.data);
if (type === 'css') {
const styleTag = document.querySelector('style');
if (styleTag) styleTag.textContent = css;
}
} catch { }
};
const onClose = () => {
ws.removeEventListener('message', onMessage);
ws.removeEventListener('close', onClose);
setTimeout(connect, 500);
};
ws.addEventListener('message', onMessage);
ws.addEventListener('close', onClose);
}
connect();
</script>`;
async function buildBundle(game: string, production: boolean) { async function buildBundle(game: string, production: boolean) {
const srcDir = path.resolve(import.meta.dir, '..', 'src'); const srcDir = path.resolve(import.meta.dir, '..', 'src');
return Bun.build({ return Bun.build({
outdir: '/tmp', outdir: '/tmp',
entrypoints: [path.resolve(srcDir, 'index.ts')], entrypoints: [
path.resolve(srcDir, 'index.ts'),
path.resolve(srcDir, 'common', 'assets', 'global.css'),
],
sourcemap: production ? 'none' : 'inline', sourcemap: production ? 'none' : 'inline',
define: { define: {
global: 'window', global: 'window',
@ -56,13 +96,17 @@ async function buildBundle(game: string, production: boolean) {
}); });
} }
export async function buildHTML(game: string, { production = false, mobile = false, local = false }: Args = {}) { export async function buildHTML(game: string, {
production = false,
mobile = false,
local = false,
}: Args = {}) {
const assetsDir = path.resolve(import.meta.dir, 'assets'); const assetsDir = path.resolve(import.meta.dir, 'assets');
const srcDir = path.resolve(import.meta.dir, '..', 'src'); const srcDir = path.resolve(import.meta.dir, '..', 'src');
const gameDir = path.resolve(srcDir, 'games', game); const gameDir = path.resolve(srcDir, 'games', game);
const gameAssetsDir = path.resolve(gameDir, 'assets'); const gameAssetsDir = path.resolve(gameDir, 'assets');
const html = await Bun.file(path.resolve(assetsDir, local ? 'index-local.html' : 'index.html')).text(); const html = await Bun.file(path.resolve(assetsDir, 'index.html')).text();
const bundle = await buildBundle(game, production); const bundle = await buildBundle(game, production);
if (bundle.success) { if (bundle.success) {
@ -150,6 +194,12 @@ export async function buildHTML(game: string, { production = false, mobile = fal
const eruda = await Bun.file(path.resolve(import.meta.dir, '..', 'node_modules', 'eruda', 'eruda.js')).text(); const eruda = await Bun.file(path.resolve(import.meta.dir, '..', 'node_modules', 'eruda', 'eruda.js')).text();
scriptPrefix = `<script>${eruda};\neruda.init();</script>`; scriptPrefix = `<script>${eruda};\neruda.init();</script>`;
} }
if (!local) {
scriptPrefix += SW_SCRIPT;
}
if (local && !production) {
scriptPrefix += CSS_RELOAD_SCRIPT;
}
// function to avoid $& being replaced // function to avoid $& being replaced
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_the_replacement // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_the_replacement
@ -158,7 +208,7 @@ export async function buildHTML(game: string, { production = false, mobile = fal
.replace('<!--$TITLE$-->', () => title) .replace('<!--$TITLE$-->', () => title)
.replace('<!--$ICON$-->', () => icon) .replace('<!--$ICON$-->', () => icon)
.replace('<!--$MANIFEST$-->', () => manifest) .replace('<!--$MANIFEST$-->', () => manifest)
.replace('/*$STYLE$*/', () => style); .replace('<!--$STYLE$-->', () => `<style>${style}</style>`);
return minify(resultHTML, { return minify(resultHTML, {
collapseWhitespace: production, collapseWhitespace: production,

12
src/common/assets/global.css
View File

@ -27,9 +27,14 @@
scrollbar-color: var(--bg-active) transparent; scrollbar-color: var(--bg-active) transparent;
} }
html { html,
padding: 0; body {
width: 100vw;
height: 100vh;
margin: 0; margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
} }
body { body {
@ -38,7 +43,4 @@ body {
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
width: 100dvw;
height: 100dvh;
overflow: hidden;
} }

6
src/games/hordeseer/components/modals/manage-workers-modal.tsx
View File

@ -38,7 +38,7 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
const loading = useBool(false); const loading = useBool(false);
useEffect(() => { useEffect(() => {
if (!open || !user || !apiKey) return; if (!open || !user?.worker_ids || !apiKey || !user) return;
let cancelled = false; let cancelled = false;
loading.setTrue(); loading.setTrue();
@ -63,7 +63,7 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
.finally(() => { if (!cancelled) loading.setFalse(); }); .finally(() => { if (!cancelled) loading.setFalse(); });
return () => { cancelled = true; }; return () => { cancelled = true; };
}, [open, user?.worker_ids.join(',')]); }, [open, user?.worker_ids?.join(',')]);
const setEdit = (id: string, patch: Partial<WorkerEdit>) => { const setEdit = (id: string, patch: Partial<WorkerEdit>) => {
setWorkers(prev => prev.map(w => setWorkers(prev => prev.map(w =>
@ -110,7 +110,7 @@ export const ManageWorkersModal = ({ open, onClose }: Props) => {
}; };
const confirmDelete = async (id: string) => { const confirmDelete = async (id: string) => {
if (!apiKey) return; if (!apiKey || !user?.worker_ids) return;
setWorkers(prev => prev.map(w => setWorkers(prev => prev.map(w =>
w.data.id === id ? { ...w, deleting: true, confirmDelete: false } : w w.data.id === id ? { ...w, deleting: true, confirmDelete: false } : w
)); ));

2
src/games/hordeseer/components/navbar.tsx
View File

@ -10,7 +10,7 @@ export const Navbar = () => {
<div class={styles.actions}> <div class={styles.actions}>
<button onClick={leaderboard.setTrue}>Leaderboard</button> <button onClick={leaderboard.setTrue}>Leaderboard</button>
<button onClick={options.setTrue}>Options</button> <button onClick={options.setTrue}>Options</button>
{state.user && ( {state.user?.worker_ids && (
<button onClick={manageWorkers.setTrue}>Manage Workers</button> <button onClick={manageWorkers.setTrue}>Manage Workers</button>
)} )}
</div> </div>

2
src/games/hordeseer/utils/api.ts
View File

@ -25,7 +25,7 @@ export interface UserData {
username: string; username: string;
kudos: number; kudos: number;
worker_count: number; worker_count: number;
worker_ids: string[]; worker_ids?: string[];
records: { records: {
contribution: { tokens: number }; contribution: { tokens: number };
fulfillment: { text: number }; fulfillment: { text: number };