upd: .mcfunction output in frontend (#20)

.gitignore

@@ -7,4 +7,5 @@ cache/
 !.env.example
 dist/*
 build/*
-node_modules/
+node_modules/
+tests/

README.md

@@ -1,21 +1,7 @@
 # img2mcstructure
+[![img2mcstructure on JSR](https://jsr.io/badges/@jjg/img2mcstructure)](https://jsr.io/@jjg/img2mcstructure "Add JSR package")
+![JSR structure](https://github.com/user-attachments/assets/3266865a-d6db-4063-9dc9-c0d9c6291860)
 
-> ![RGB example](https://github.com/jasonjgardner/img2mcstructure/assets/1903667/3f98a433-9f41-4009-b840-d8341eb2c2f7)
-> [Made with RGB add-on](https://cdn.discordapp.com/attachments/830521962383802368/1201692650122792990/RGB.mcaddon)
+### Demo: https://mcstructure.deno.dev/
 
-> ![Minecraft mural made with RAINBOW III!!!](https://github.com/jasonjgardner/img2mcstructure/assets/1903667/dcc165d9-4cab-4858-9106-330426a4a0e7)
-> [_RAINBOW III!!!_ add-on](https://cdn.discordapp.com/attachments/830521962383802368/1200453046304518164/RAINBOW_III-beta.mcaddon).
-
-Try it at https://mcstructure.deno.dev/
-
-Images will be clamped to 64px. To create a larger structure, download Deno and
-run:
-
-```powershell
-deno run --allow-net --allow-write --allow-env https://raw.githubusercontent.com/jasonjgardner/img2mcstructure/main/main.ts "http://placekitten.com/256/256" y
-```
-
-Set the axis parameter to `y` to create ceiling and floors. Omit the axis to
-default to walls.
-
-##### [See examples](./example/README.md) for advanced usage.
+##### [See examples](https://github.com/jasonjgardner/img2mcstructure/blob/main/example/README.md) for advanced usage.

app/pages/app.tsx

@@ -4,6 +4,7 @@ import { DropImage, SelectPalette, SelectSize } from "../components/index.tsx";
 import type { PaletteSource } from "../../src/types.ts";
 
 const SVC_URL = "/v1/structure";
+const SVC_URL_FUNCTION = "/v1/fill";
 const MAX_HEIGHT = 512;
 const MAX_WIDTH = 512;
 
@@ -12,6 +13,7 @@ export default function App() {
  const [userSetSize, setUserSetSize] = useState<boolean>(false);
  const [size, setSize] = useState(64);
  const [axis, setAxis] = useState<"x" | "y">("y");
+ const [isStructure, setIsStructure] = useState<boolean>(true);
  const [image, setImage] = useState<File | null>(null);
  const [title, setTitle] = useState<string>(nanoid(8));
  const [db, setDb] = useState<PaletteSource[]>([]);
@@ -63,7 +65,7 @@ export default function App() {
 
  const handleSubmit = useCallback(async () => {
  setIsProcessing(true);
- const res = await fetch(SVC_URL, {
+ const res = await fetch(isStructure ? SVC_URL : SVC_URL_FUNCTION, {
  method: "POST",
  headers: {
  "Content-Type": "application/json",
@@ -80,7 +82,7 @@ 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, "_")}.mcstructure`;
+ a.download = `${title.toLowerCase().replace(/\s+/g, "_")}.${isStructure ? "mcstructure" : "mcfunction"}`;
  document.body.appendChild(a);
  a.click();
  a.remove();
@@ -183,6 +185,47 @@ export default function App() {
  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
+ className="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 space-x-2 flex justify-start"
+ htmlFor="mcstructure"
+ >
+ <input
+ type="radio"
+ name="structure"
+ id="mcstructure"
+ value="mcstructure"
+ checked={isStructure}
+ onChange={(e) =>
+ setIsStructure(
+ e.target.checked
+ )
+ }
+ />{" "}
+ .mcstructure
+ </label>
+
+ <label
+ className="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 space-x-2 flex justify-start"
+ htmlFor="mcfunction"
+ >
+ <input
+ type="radio"
+ name="structure"
+ id="mcfunction"
+ value="mcfunction"
+ checked={!isStructure}
+ onChange={(e) =>
+ setIsStructure(
+ !e.target.checked
+ )
+ }
+ />
+ .mcfunction
+ </label>
+ </fieldset>
  </div>
  <div className="grid gap-4">
  <SelectPalette onChange={(value) => handlePaletteChange(value)} />

deno.json

@@ -1,6 +1,6 @@
 {
  "name": "@jjg/img2mcstructure",
- "version": "1.2.0",
+ "version": "1.2.1",
  "exports": "./mod.ts",
  "tasks": {
  "build:tailwind": "tailwindcss -i ./style.css -o ./static/style.css --minify",

example/animation.ts

@@ -1,27 +1,26 @@
-import createFunction from "./setBlock.ts";
-import { basename, extname, join, readdir, writeFile } from "../deps.ts";
+import { img2mcfunction } from "../mod.ts";
+import { basename, extname, join } from "node:path";
+import { readdir, writeFile } from "node:fs/promises";
 import process from "node:process";
+import db from "../db/minecraft.json" with { type: "json" };
 
 if (import.meta.main) {
- const dir = process.argv[0] ?? process.cwd();
+ const dir = process.argv[0] ?? process.cwd();
 
- let itr = 0;
- const files = await readdir(dir, { recursive: true });
+ let itr = 0;
+ const files = await readdir(dir, { recursive: true });
 
- for await (const path of files) {
- if (!path.endsWith(".png")) {
- continue;
- }
+ for await (const path of files) {
+ if (!path.endsWith(".png")) {
+ continue;
+ }
 
- const fn = `${basename(path, extname(path))}.mcfunction`;
+ const fn = `${basename(path, extname(path))}.mcfunction`;
 
- await writeFile(
- join(dir, fn),
- await createFunction(path, [200, 100, 200]),
- );
+ await writeFile(join(dir, fn), await img2mcfunction(path, db, [0, 0, 0]));
 
- itr++;
- }
+ itr++;
+ }
 
- process.exit(0);
+ process.exit(0);
 }

example/dalle.ts

@@ -1,10 +1,10 @@
 import type { Axis } from "../src/types.ts";
-import { nanoid } from "../deps.ts";
+import { nanoid } from "nanoid";
 import img2mcstructure, { createPalette } from "../src/mcstructure/mod.ts";
 import OpenAI from "openai";
 import { load } from "@std/dotenv";
 import db from "../db/rainbow.json" with { type: "json" };
-import { writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
 import process from "node:process";
 
 await load();

example/glowing.ts

@@ -1,8 +1,8 @@
 import type { Axis } from "../src/types.ts";
-import { nanoid } from "../deps.ts";
+import { nanoid } from "nanoid";
 import img2mcstructure, { createPalette } from "../src/mcstructure/mod.ts";
 import db from "../db/rainbow.json" with { type: "json" };
-import { writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
 import process from "node:process";
 
 const palette = createPalette(Object.fromEntries(

example/qr.ts

@@ -1,9 +1,9 @@
 import { qrPng } from "@sigmasd/qrpng";
 import type { Axis } from "../src/types.ts";
-import { nanoid } from "../deps.ts";
+import { nanoid } from "nanoid";
 import img2mcstructure, { createPalette } from "../src/mcstructure/mod.ts";
 import db from "../db/minecraft.json" with { type: "json" };
-import { writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
 import process from "node:process";
 
 const palette = createPalette(Object.fromEntries(

example/rainbow.ts

@@ -1,8 +1,8 @@
 import type { Axis } from "../src/types.ts";
-import { nanoid } from "../deps.ts";
+import { nanoid } from "nanoid";
 import img2mcstructure, { createPalette } from "../src/mcstructure/mod.ts";
 import db from "../db/rainbow.json" with { type: "json" };
-import { writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
 import process from "node:process";
 
 const structureId = nanoid(6);

example/rgb.ts

@@ -2,7 +2,8 @@ import type { Axis } from "../src/types.ts";
 import { createMcStructure } from "../src/mcstructure/mod.ts";
 import decode from "../src/_decode.ts";
 import blocks from "../db/rgb.ts";
-import { join, writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
+import { join } from "node:path";
 import process from "node:process";
 
 export default async function main(

example/stainedGlassWindow.ts

@@ -1,7 +1,7 @@
 import type { Axis } from "../src/types.ts";
-import { nanoid } from "../deps.ts";
+import { nanoid } from "nanoid";
 import img2mcstructure, { createPalette } from "../src/mcstructure/mod.ts";
-import { writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
 import process from "node:process";
 
 const { default: mc } = await import("../db/minecraft.json");

example/vanilla.ts

@@ -1,9 +1,9 @@
 import type { Axis } from "../src/types.ts";
-import { nanoid } from "../deps.ts";
+import { nanoid } from "nanoid";
 import img2mcstructure, { createPalette } from "../src/mcstructure/mod.ts";
 import db from "../db/minecraft.json" with { type: "json" };
 import process from "node:process";
-import { writeFile } from "../deps.ts";
+import { writeFile } from "node:fs/promises";
 
 const structureId = nanoid(6);
 

package.json

@@ -1,7 +1,8 @@
 {
  "type": "module",
  "scripts": {
- "format": "bunx @biomejs/biome format --write ./**/*.{js,ts,json,jsx,tsx,html,css}"
+ "format": "bunx @biomejs/biome format --write ./**/*.{js,ts,json,jsx,tsx,html,css}",
+ "build": "bun build ./app/index.tsx > ./dist/bundle.js"
  },
  "dependencies": {
  "@hono/hono": "npm:@jsr/hono__hono",

server.tsx

@@ -33,7 +33,7 @@ export default function main(defaultDb: PaletteSource) {
  const { img, axis, db } = await ctx.req.json();
 
  try {
- const data = await createFunction(db ?? defaultDb, img, axis);
+ const data = await createFunction(img, db ?? defaultDb, [0, 0, 0]);
 
  return new Response(data, {
  headers: {

src/_constants.ts

@@ -5,6 +5,11 @@ import process from "node:process";
  */
 export const BLOCK_VERSION = 18153475;
 
+/**
+ * NBT tag data version.
+ */
+export const NBT_DATA_VERSION = 3093;
+
 /**
  * Minecraft behavior block format version.
  */
@@ -35,5 +40,6 @@ export const MAX_WIDTH = Number(process.env.MAX_SIZE ?? 256);
 
 /**
  * Maximum depth of structure.
+ * Limited to 1 chunk when deployed to Deno Deploy.
  */
-export const MAX_DEPTH = 256;
+export const MAX_DEPTH = process.env.DENO_DEPLOYMENT_ID !== undefined ? 16 : 256;

src/mcaddon/cli.ts

@@ -10,9 +10,10 @@ async function createAddon(
  gridSize = 3,
  resolution = 16,
  dest?: string,
- axis?: Axis
+ axis?: Axis,
+ pbr = false
 ) {
- const addon = await img2mcaddon(src, gridSize, resolution, axis ?? "z");
+ const addon = await img2mcaddon(src, gridSize, resolution, axis ?? "z", pbr);
 
  const addonDest =
  dest ??
@@ -25,7 +26,7 @@ async function createAddon(
 
 if (import.meta.main) {
  const {
- values: { src, gridSize, resolution, dest, axis },
+ values: { src, gridSize, resolution, dest, axis, pbr },
  } = parseArgs({
  args: process.argv.slice(2),
  options: {
@@ -51,6 +52,10 @@ if (import.meta.main) {
  type: "string",
  multiple: false,
  default: "z",
+ },
+ pbr: {
+ type: "boolean",
+ default: false,
  }
  },
  });
@@ -60,7 +65,8 @@ if (import.meta.main) {
  Math.max(1, Number(gridSize)),
  Math.max(16, Math.min(1024, Number(resolution))),
  dest,
- axis as Axis
+ axis as Axis,
+ pbr
  );
  process.exit(0);
 }