95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import { camelToSpace } from "./camelToSpace.ts";
|
|
import { card } from "./types.ts";
|
|
|
|
const series = 1;
|
|
|
|
const template = (cards: string[]) => `
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blood Red Skies Cards Series ${series}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
fontFamily: {
|
|
sans: [
|
|
'Chakra Petch'
|
|
]
|
|
},
|
|
extend: {
|
|
aspectRatio: {
|
|
card: '2.5 / 3.5'
|
|
},
|
|
container: {
|
|
center: true
|
|
},
|
|
colors: {
|
|
gunmetal: '#0a2e36',
|
|
green: {
|
|
10: '#09a129',
|
|
100: '#036d19'
|
|
},
|
|
violet: {
|
|
10: '#8a7090',
|
|
50: '#8d3b72'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer base {
|
|
* {
|
|
@apply dark:text-white text-black
|
|
}
|
|
hr {
|
|
@apply !border-violet-10
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Rajdhani:wght@300;400;500;600;700&display=swap');
|
|
</style>
|
|
</head>
|
|
<body class="dark:bg-gunmetal">
|
|
<div class="container p-8 grid grid-cols-4 gap-8 bg-purple">
|
|
${cards.join('\n')}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|
|
|
|
const decoder = new TextDecoder();
|
|
const cards: card[] = JSON.parse(decoder.decode(Deno.readFileSync(`./series${series}.json`)));
|
|
|
|
const html = template(cards.map((c, i) => `
|
|
<div class="rounded-lg aspect-card p-8 shadow-lg flex flex-wrap dark:bg-green-700">
|
|
<div class="basis-full">
|
|
<p class="mb-4 font-extrabold uppercase text-xl">${c.type}</p>
|
|
|
|
${c.attacks.length || c.maneuvers.length ?
|
|
`<p class="mb-8 text-sm">Select either one maneuver or one attack to make. If you can't complete one action from this card, you must take one penalty listed. If there are no penalties listed, discard this card.</p>` :
|
|
`<p class="mb-8 text-sm">Bad luck! You must take one of the following penalties</p>`
|
|
}
|
|
|
|
${c.maneuvers.length > 0 ? `<p class="capitalize my-8"><span class="font-bold">Maneuvers</span>: ${c.maneuvers.map(a => camelToSpace(a.name)).join(', ')}</p>` : ''}
|
|
${c.attacks.length > 0 ? `<p class="capitalize my-8"><span class="font-bold">Attacks</span>: ${c.attacks.map(a => camelToSpace(a)).join(', ')}</p>` : ''}
|
|
${c.penalties.length > 0 ? `<hr/><p class="capitalize my-8"><span class="font-bold">Penalties</span>: ${c.penalties.join(', ')}</p>` : ''}
|
|
</div>
|
|
|
|
<div class="text-xs self-end flex justify-between w-full text-white/50">
|
|
<p class="dark:text-white/50 text-black/50">Series ${series}</p>
|
|
<p class="dark:text-white/50 text-black/50">${i + 1}/${cards.length}</p>
|
|
<p class="dark:text-white/50 text-black/50">© ${new Date().getFullYear()} Cyborg Grizzly Games</p>
|
|
</div>
|
|
</div>
|
|
`))
|
|
|
|
const encoder = new TextEncoder();
|
|
Deno.writeFile(`./series${series}.html`, encoder.encode(html));
|