feat: Flipbook structures (#21)

.vscode/launch.json

@@ -55,9 +55,14 @@
  "--resolution",
  "256",
  "--src",
- "./test/connected/lobby_ceiling.png",
+ "./tests/connected/lobby_ceiling.png",
  "--dest",
- "./build/test.mcaddon",
+ "./build/lobby_ceiling.mcaddon",
+ "--pbr",
+ "--frames",
+ "1",
+ "--gridSize",
+ "16",
  "--axis",
  "y"
  ],

app/components/index.tsx

@@ -33,7 +33,7 @@ export function DropImage({ onChange }: { onChange: (file: File) => void }) {
 
  const className = cx(
  "border-dashed border-2 border-gray-500 dark:border-gray-400 rounded-md flex flex-grow items-center justify-center cursor-pointer h-full min-h-40",
- dragging && "border-blue-500"
+ dragging && "border-blue-500",
  );
 
  return (
@@ -129,15 +129,17 @@ export function SelectPalette({
  onChange={({ target }) => {
  onChange(
  Array.from((target as HTMLSelectElement).selectedOptions).map(
- (o) => o.value
- )
+ (o) => o.value,
+ ),
  );
  }}
  >
  {Object.keys(options).map((optGroup) => (
  <optgroup key={optGroup} label={optGroup}>
  {options[optGroup].map((option) => (
- <option key={option.value} value={option.value}>{option.name}</option>
+ <option key={option.value} value={option.value}>
+ {option.name}
+ </option>
  ))}
  </optgroup>
  ))}
@@ -170,7 +172,9 @@ export function SelectSize({
  value={value}
  >
  {options.map((option) => (
- <option key={option} value={option}>{option}</option>
+ <option key={option} value={option}>
+ {option}
+ </option>
  ))}
  </select>
  </div>

app/index.tsx

@@ -1,4 +1,4 @@
 import { render } from "@hono/hono/jsx/dom";
 import App from "./pages/app.tsx";
 
-render(<App />, document.getElementById("app"));
+render(<App />, document.getElementById("app"));

app/pages/app.tsx

@@ -54,7 +54,7 @@ export default function App() {
  0,
  0,
  canvasRef.current.width,
- canvasRef.current.height
+ canvasRef.current.height,
  );
  ctx.drawImage(img, 0, 0, newWidth, newHeight);
  }
@@ -82,7 +82,9 @@ export default function App() {
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
- a.download = `${title.toLowerCase().replace(/\s+/g, "_")}.${isStructure ? "mcstructure" : "mcfunction"}`;
+ a.download = `${title.toLowerCase().replace(/\s+/g, "_")}.${
+ isStructure ? "mcstructure" : "mcfunction"
+ }`;
  document.body.appendChild(a);
  a.click();
  a.remove();
@@ -98,7 +100,7 @@ export default function App() {
  palettes.map(async (id) => {
  const res = await fetch(`/db/${id}`);
  return res.json() as Promise<PaletteSource>;
- })
+ }),
  )
  ).flat();
 
@@ -160,9 +162,8 @@ export default function App() {
  checked={axis === "y"}
  onChange={(e) =>
  setAxis(
- (e.target as HTMLInputElement).value === "y" ? "y" : "x"
- )
- }
+ (e.target as HTMLInputElement).value === "y" ? "y" : "x",
+ )}
  />{" "}
  Ceiling / Floor
  </label>
@@ -178,17 +179,16 @@ export default function App() {
  checked={axis === "x"}
  onChange={({ target }) =>
  setAxis(
- (target as HTMLInputElement).value === "x" ? "x" : "y"
- )
- }
+ (target as HTMLInputElement).value === "x" ? "x" : "y",
+ )}
  />
  Wall
  </label>
  </fieldset>
 
  <fieldset className="flex flex-row py-1 space-x-1.5">
  <legend className="text-lg font-sans font-medium">Structure</legend>
-  <label
+ <label
  className="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 space-x-2 flex justify-start"
  htmlFor="mcstructure"
  >
@@ -198,11 +198,7 @@ export default function App() {
  id="mcstructure"
  value="mcstructure"
  checked={isStructure}
- onChange={(e) =>
- setIsStructure(
- e.target.checked
- )
- }
+ onChange={(e) => setIsStructure(e.target.checked)}
  />{" "}
  .mcstructure
  </label>
@@ -217,11 +213,7 @@ export default function App() {
  id="mcfunction"
  value="mcfunction"
  checked={!isStructure}
- onChange={(e) =>
- setIsStructure(
- !e.target.checked
- )
- }
+ onChange={(e) => setIsStructure(!e.target.checked)}
  />
  .mcfunction
  </label>

deno.json

@@ -1,16 +1,24 @@
 {
  "name": "@jjg/img2mcstructure",
- "version": "1.2.1",
+ "version": "1.2.2",
  "exports": "./mod.ts",
- "tasks": {
- "build:tailwind": "tailwindcss -i ./style.css -o ./static/style.css --minify",
- "build:packup": "packup build ./public/index.html",
- "dev:frontend": "packup serve ./public/index.html",
- "dev:backend": "deno run -A ./main.ts",
- "dev:tailwind": "tailwindcss -i ./style.css -o ./static/style.css --watch",
- "ci:deploy": "deno fmt && deno task build:tailwind && deno task build:packup",
- "dev": "deno task ci:deploy && deno task dev:backend",
- "demo:bds": "deno run -A ./bds/_pack.ts && deno run -A ./bds/_bds.ts"
+ "fmt": {
+ "include": [
+ "./app",
+ "./src",
+ "./*.ts",
+ "./*.tsx",
+ "./example",
+ "./db"
+ ],
+ "exclude": [
+ "./static",
+ "./dist",
+ "./build",
+ "./cache",
+ "./node_modules",
+ "./tests"
+ ]
  },
  "compilerOptions": {
  "lib": [