From 0f72d048ee5a0330e23c9eda870be383b60b7cf4 Mon Sep 17 00:00:00 2001 From: Endeavorance Date: Tue, 18 Mar 2025 10:02:58 -0400 Subject: [PATCH] More convert to jsx --- src/index.ts | 15 +++---- src/render/html/component/ability.ts | 41 ------------------- src/render/html/component/ability.tsx | 38 +++++++++++++++++ .../html/component/base/react-section.tsx | 6 ++- src/render/html/component/method.ts | 38 ----------------- src/render/html/component/method.tsx | 28 +++++++++++++ src/render/html/component/species.ts | 7 ---- src/util/args.ts | 20 ++------- 8 files changed, 79 insertions(+), 114 deletions(-) delete mode 100644 src/render/html/component/ability.ts create mode 100644 src/render/html/component/ability.tsx delete mode 100644 src/render/html/component/method.ts create mode 100644 src/render/html/component/method.tsx diff --git a/src/index.ts b/src/index.ts index befddd4..cb96466 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,12 +18,10 @@ Usage: Options: --check Only load and check the current binding and resources, but do not compile - --write Write the output to a file. If not specified, outputs to stdout - --outfile Specify the output file path [default: playbill.json] - --verbose, -v Verbose output - --minify, -m Minify the output JSON - --watch Watch the directory for changes and recompile - --help, -h Show this help message + --outfile, -o Specify the output file path. If not specified, output to stdout + --watch, -w Watch the directory for changes and recompile + --renderer, -r Specify the output renderer. Options: json, html + --help, -h Show this help message `.trim(); enum ExitCode { @@ -58,10 +56,9 @@ async function processBinding({ inputFilePath, options }: CLIArguments) { throw new CLIError(`Unknown renderer: ${options.renderer}`); } - // -- WRITE TO DISK OR STDOUT --// - if (options.write) { + // Write to disk if an outfile is specified + if (options.outfile !== "") { await Bun.write(options.outfile, serializedPlaybill); - return ExitCode.Success; } diff --git a/src/render/html/component/ability.ts b/src/render/html/component/ability.ts deleted file mode 100644 index 8b090a6..0000000 --- a/src/render/html/component/ability.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type { Ability } from "@proscenium/playbill"; -import { html, renderMarkdown } from "#lib"; - -export async function AbilityCard(ability: Ability): Promise { - const renderedMarkdown = await renderMarkdown(ability.description); - - const costs: string[] = []; - - if (ability.ap > 0) { - costs.push(`
  • ${ability.ap} AP
    • `); - } - - if (ability.hp > 0) { - costs.push(`
  • ${ability.hp} HP
    • `); - } - - if (ability.ep > 0) { - costs.push(`
  • ${ability.ep} EP
    • `); - } - - const costList = - costs.length > 0 - ? `` - : ""; - - const classList = `ability ability-${ability.type}`; - - return html` -
    -
    -

    ${ability.name}

    - ${ability.type} - ${ability.xp} XP - ${costList} -
    -
    - ${renderedMarkdown} -
    -
    - `; -} diff --git a/src/render/html/component/ability.tsx b/src/render/html/component/ability.tsx new file mode 100644 index 0000000..3efa648 --- /dev/null +++ b/src/render/html/component/ability.tsx @@ -0,0 +1,38 @@ +import type { Ability } from "@proscenium/playbill"; + +interface AbilityCardProps { + ability: Ability; +} + +export function AbilityCard({ ability }: AbilityCardProps) { + const costs: React.ReactNode[] = []; + + if (ability.ap > 0) { + costs.push(
  • {ability.ap} AP
    • ); + } + + if (ability.hp > 0) { + costs.push(
  • {ability.hp} HP
    • ); + } + + if (ability.ep > 0) { + costs.push(
  • {ability.ep} EP
    • ); + } + + const costList = + costs.length > 0 + ? `` + : ""; + + const classList = `ability ability-${ability.type}`; + + return
    +
    +

    ${ability.name}

    + ${ability.type} + ${ability.xp} XP + ${costList} +
    +
    +
    +} diff --git a/src/render/html/component/base/react-section.tsx b/src/render/html/component/base/react-section.tsx index 899bc1a..c5f8a52 100644 --- a/src/render/html/component/base/react-section.tsx +++ b/src/render/html/component/base/react-section.tsx @@ -4,7 +4,7 @@ import React from "react"; interface SectionProps { type: string; title: string; - content: string; + content: React.ReactNode; preInfo?: React.ReactNode; info?: React.ReactNode; componentId?: string; @@ -26,6 +26,8 @@ export function Section({ const headerClasses = classNames("section-header", `${type}-header`); const contentClasses = classNames("section-content", `${type}-content`); + const contentDiv = typeof content === "string" ?
    :
    {content}
    ; + return
    {preInfo} @@ -34,7 +36,7 @@ export function Section({
    {leftCornerTag}
    {rightCornerTag}
    -
    + {contentDiv}
    } diff --git a/src/render/html/component/method.ts b/src/render/html/component/method.ts deleted file mode 100644 index 62d9ed9..0000000 --- a/src/render/html/component/method.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { Method, Playbill } from "@proscenium/playbill"; -import { html, renderMarkdown } from "#lib"; -import { AbilityCard } from "./ability"; -import { Section } from "./base/section"; - -export async function MethodSection(method: Method, playbill: Playbill) { - const descriptionHTML = await renderMarkdown(method.description); - let ranksHTML = ""; - let rankNumber = 1; - - for (const rank of method.abilities) { - ranksHTML += `

    Rank ${rankNumber}

    `; - - for (const ability of rank) { - const html = await AbilityCard(playbill.abilities[ability]); - ranksHTML += html; - } - - ranksHTML += "
    "; - - rankNumber++; - } - - const methodContent = html` -
    - ${ranksHTML} -
    - `; - - return Section({ - type: "method", - componentId: method.id, - title: method.name, - preInfo: html`

    ${method.curator}'s Method of

    `, - info: html`

    ${descriptionHTML}

    `, - content: methodContent, - }); -} diff --git a/src/render/html/component/method.tsx b/src/render/html/component/method.tsx new file mode 100644 index 0000000..6b52ca1 --- /dev/null +++ b/src/render/html/component/method.tsx @@ -0,0 +1,28 @@ +import type { Method, Playbill } from "@proscenium/playbill"; +import { AbilityCard } from "./ability"; +import { Section } from "./base/react-section"; + +export function MethodSection(method: Method, playbill: Playbill) { + const ranks = method.abilities.map((rank, i) => { + return
    +

    Rank {i + 1}

    +
    + {rank.map((abilityId) => { + const ability = playbill.abilities[abilityId]; + return ; + }) + } +
    +
    + }); + + return
    {method.curator}

    } + info={

    {method.description}

    } + content={
    {ranks}
    } + /> + +} diff --git a/src/render/html/component/species.ts b/src/render/html/component/species.ts index efd8de7..81c4881 100644 --- a/src/render/html/component/species.ts +++ b/src/render/html/component/species.ts @@ -5,12 +5,6 @@ import { Section } from "./base/section"; export async function SpeciesSection(species: Species, playbill: Playbill) { const descriptionHTML = await renderMarkdown(species.description); - let abilitiesHTML = ""; - - for (const ability of species.abilities) { - abilitiesHTML += await AbilityCard(playbill.abilities[ability]); - } - const hpString = species.hp >= 0 ? `+${species.hp}` : `-${species.hp}`; const apString = species.ap >= 0 ? `+${species.ap}` : `-${species.ap}`; const epString = species.ep >= 0 ? `+${species.ep}` : `-${species.ep}`; @@ -21,7 +15,6 @@ export async function SpeciesSection(species: Species, playbill: Playbill) { ? html`

    Innate Abilities

    - ${abilitiesHTML}
    ` : ""; diff --git a/src/util/args.ts b/src/util/args.ts index 2f75b4c..75dedcf 100644 --- a/src/util/args.ts +++ b/src/util/args.ts @@ -13,11 +13,9 @@ export interface CLIArguments { inputFilePath: string; options: { - write: boolean; check: boolean; outfile: string; help: boolean; - minify: boolean; renderer: Renderer; watch: boolean; }; @@ -35,11 +33,6 @@ export function parseCLIArguments(argv: string[]): CLIArguments { const { values: options, positionals: args } = parseArgs({ args: argv, options: { - write: { - short: "w", - type: "boolean", - default: false, - }, check: { short: "c", type: "boolean", @@ -48,18 +41,13 @@ export function parseCLIArguments(argv: string[]): CLIArguments { outfile: { short: "o", type: "string", - default: "playbill.json", + default: "", }, help: { short: "h", default: false, type: "boolean", }, - minify: { - short: "m", - default: false, - type: "boolean", - }, renderer: { short: "r", default: "json", @@ -75,8 +63,8 @@ export function parseCLIArguments(argv: string[]): CLIArguments { }); // -- ARG VALIDATION -- // - if (options.check && options.write) { - throw new CLIError("Cannot use --check and --write together"); + if (options.check && options.outfile !== "") { + throw new CLIError("Cannot use --check and --outfile together"); } const parsedRenderer = RendererSchema.safeParse(options.renderer); @@ -89,11 +77,9 @@ export function parseCLIArguments(argv: string[]): CLIArguments { inputFilePath: args[0] ?? "./binding.yaml", options: { - write: options.write, check: options.check, outfile: options.outfile, help: options.help, - minify: options.minify, renderer: parsedRenderer.data, watch: options.watch, },