permaweb · cedriking · May 21, 2024 · May 22, 2024 · May 23, 2024
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/tmp.css
diff --git a/process/gatherchat.lua b/process/gatherchat.lua
@@ -14,31 +14,32 @@ Users = Users or {
     status = "Bureaucratizing cyberspace!",
     currentWorldId = "LlamaFED",
     following = {},
+    isNPC = true,
   },
 }
 
 -- Key: World ID
 World = World or {
-    created = 1713833416559,
-    lastActivity = 1713833416559,
-    name = "LlamaFED",
-    description = "Home of the LLamaCoin Bureaucracy",
-    worldSize = {
-      w = 21,
-      h = 12,
-    },
-    worldType = "clubbeach",
-    worldTheme = "beach1",
-    spawnPosition = {
-      x = 6,
-      y = 6,
+  created = 1713833416559,
+  lastActivity = 1713833416559,
+  name = "LlamaFED",
+  description = "Home of the LLamaCoin Bureaucracy",
+  worldSize = {
+    w = 21,
+    h = 12,
+  },
+  worldType = "clubbeach",
+  worldTheme = "beach1",
+  spawnPosition = {
+    x = 6,
+    y = 6,
+  },
+  playerPositions = {
+    LlamaSecretary = {
+      x = 3,
+      y = 1,
     },
-    playerPositions = {
-      LlamaSecretary = {
-        x = 3,
-        y = 1,
-      },
-    }
+  }
 }
 
 -- Key: Message ID
@@ -48,10 +49,10 @@ Posts = Posts or {
     author = "Secretary of the Llama Board",
     worldId = "LlamaFED",
     type = "text",
-    textOrTxId = "Welcome to LlamaFED! This room hosts the expert LlamaCoin Bureaucracy. " .. 
-    "We are a group of Llamas working to make cyberspace a better place through sound, prudent, " ..
-    "and very serious LlamaCoin monetary policy. You may petition the Llama council in this room to " .. 
-    "print some new LlamaCoins for you, if you represent a worthy cause. Llama printer goes scREEEEEEEEE---",
+    textOrTxId = "Welcome to LlamaFED! This room hosts the expert LlamaCoin Bureaucracy. " ..
+        "We are a group of Llamas working to make cyberspace a better place through sound, prudent, " ..
+        "and very serious LlamaCoin monetary policy. You may petition the Llama council in this room to " ..
+        "print some new LlamaCoins for you, if you represent a worthy cause. Llama printer goes scREEEEEEEEE---",
   }
 }
 
@@ -67,7 +68,7 @@ Handlers.add(
   "GetWorldIndex",
   Handlers.utils.hasMatchingTag("Action", "GetWorldIndex"),
   function(msg)
-    ao.send({ Target = msg.From, Status = "OK", Data = json.encode({"LlamaFED"}) })
+    ao.send({ Target = msg.From, Status = "OK", Data = json.encode({ "LlamaFED" }) })
   end
 )
 
@@ -227,4 +228,4 @@ Handlers.add(
 
     ao.send({ Target = msg.From, Status = "OK", Data = json.encode(Posts[postId]) })
   end
-)
+)
diff --git a/public/assets/dice.png b/public/assets/dice.png
diff --git a/scripts/generate.ts b/scripts/generate.ts
@@ -14,7 +14,10 @@ type Frame = {
   pivot: { x: number; y: number };
 };
 
-function tileBoxToSegmentedFrames(tileSize: { w: number, h: number }, tileBox: TileBox): Record<string, Frame> {
+function tileBoxToSegmentedFrames(
+  tileSize: { w: number; h: number },
+  tileBox: TileBox,
+): Record<string, Frame> {
   const frameIndicies = {
     x: Array(tileBox.rect.w)
       .fill(0)
@@ -63,7 +66,10 @@ function tileBoxToSegmentedFrames(tileSize: { w: number, h: number }, tileBox: T
   return Object.assign({}, ...frames);
 }
 
-function frameGroupToBlockFrame(tileSize: { w: number, h: number }, tileBox: TileBox): Record<string, Frame> {
+function frameGroupToBlockFrame(
+  tileSize: { w: number; h: number },
+  tileBox: TileBox,
+): Record<string, Frame> {
   const name = tileBox.name;
   const globalOffset = {
     x: tileBox.rect.x,
@@ -100,20 +106,22 @@ function frameGroupToBlockFrame(tileSize: { w: number, h: number }, tileBox: Til
 export const generate = (
   fname: string,
   meta,
-  tileSize: { w: number, h: number },
+  tileSize: { w: number; h: number },
   segmentTileBoxes: TileBox[],
   blockTileBoxes: TileBox[] = [],
-) => fs.writeFileSync(
-  fname,
-  JSON.stringify(
-    {
-      meta,
-      frames: Object.assign({}, 
-        ...segmentTileBoxes.map((f) => tileBoxToSegmentedFrames(tileSize, f)), 
-        ...blockTileBoxes.map((f) => frameGroupToBlockFrame(tileSize, f)),
-      ),
-    },
-    null,
-    2,
-  ),
-);
+) =>
+  fs.writeFileSync(
+    fname,
+    JSON.stringify(
+      {
+        meta,
+        frames: Object.assign(
+          {},
+          ...segmentTileBoxes.map((f) => tileBoxToSegmentedFrames(tileSize, f)),
+          ...blockTileBoxes.map((f) => frameGroupToBlockFrame(tileSize, f)),
+        ),
+      },
+      null,
+      2,
+    ),
+  );
diff --git a/scripts/generateAll.ts b/scripts/generateAll.ts
@@ -2,6 +2,6 @@ import { generateClubBeach } from "./generateClubBeach";
 import { generateRoom3 } from "./generateRoom3";
 import { generateLlamaFED } from "./generateLlamaFED";
 
-generateClubBeach()
-generateRoom3()
-generateLlamaFED()
+generateClubBeach();
+generateRoom3();
+generateLlamaFED();
diff --git a/scripts/generateClubBeach.ts b/scripts/generateClubBeach.ts
@@ -18,7 +18,7 @@ const tileSize = {
 const sectionSize = {
   x: 21,
   y: 19,
-}
+};
 
 const sectionNames = ["clubhouse1", "beach1"];
 
@@ -27,15 +27,16 @@ const floorSize = {
   y: 4,
 };
 
-const floorName = (xyStr: string) => ({
-  '0_0': 'default',
-  '0_1': 'wall',
-  '1_0': 'deepwater',
-  '1_1': 'walkable',
-})[xyStr];
+const floorName = (xyStr: string) =>
+  ({
+    "0_0": "default",
+    "0_1": "wall",
+    "1_0": "deepwater",
+    "1_1": "walkable",
+  })[xyStr];
 
-const floors: TileBox[] = sectionNames.flatMap((sectionName, s) => 
-  Array.from(Array(2).keys()).flatMap((x) => 
+const floors: TileBox[] = sectionNames.flatMap((sectionName, s) =>
+  Array.from(Array(2).keys()).flatMap((x) =>
     Array.from(Array(2).keys()).flatMap((y) => {
       const name = `${sectionName}_floor_${floorName(`${x}_${y}`)}`;
       const rect = {
@@ -45,8 +46,8 @@ const floors: TileBox[] = sectionNames.flatMap((sectionName, s) =>
         h: floorSize.y,
       };
       return { name, rect };
-    })
-  )
+    }),
+  ),
 );
 
 const couchesOffset = {
@@ -58,7 +59,7 @@ export const couchSize = {
   y: 2,
 };
 
-const couches: TileBox[] = sectionNames.flatMap((sectionName, s) => 
+const couches: TileBox[] = sectionNames.flatMap((sectionName, s) =>
   Array.from(Array(3).keys()).flatMap((y) => {
     const name = `${sectionName}_couch_${y}`;
     const rect = {
@@ -68,7 +69,7 @@ const couches: TileBox[] = sectionNames.flatMap((sectionName, s) =>
       h: couchSize.y,
     };
     return { name, rect };
-  })
+  }),
 );
 
 const rugsOffset = {
@@ -79,7 +80,7 @@ export const rugSize = {
   x: 3,
   y: 3,
 };
-const rugs: TileBox[] = sectionNames.flatMap((sectionName, s) => 
+const rugs: TileBox[] = sectionNames.flatMap((sectionName, s) =>
   Array.from(Array(3).keys()).flatMap((x) => {
     const name = `${sectionName}_rug_${x}`;
     const rect = {
@@ -89,7 +90,7 @@ const rugs: TileBox[] = sectionNames.flatMap((sectionName, s) =>
       h: rugSize.y,
     };
     return { name, rect };
-  })
+  }),
 );
 
 const segmentTileBoxes: TileBox[] = [
@@ -103,4 +104,11 @@ const blockFrameSets: TileBox[] = [
   // TODO: Plants, etc
 ];
 
-export const generateClubBeach = () => generate("./public/assets/tiles/clubbeach.json", meta, tileSize, segmentTileBoxes, blockFrameSets);
+export const generateClubBeach = () =>
+  generate(
+    "./public/assets/tiles/clubbeach.json",
+    meta,
+    tileSize,
+    segmentTileBoxes,
+    blockFrameSets,
+  );
diff --git a/scripts/generateLlamaFED.ts b/scripts/generateLlamaFED.ts
@@ -30,4 +30,10 @@ const segmentedTileBoxes: TileBox[] = [
   },
 ];
 
-export const generateLlamaFED = () => generate("./public/assets/tiles/llamaFED.json", meta, tileSize, segmentedTileBoxes);
+export const generateLlamaFED = () =>
+  generate(
+    "./public/assets/tiles/llamaFED.json",
+    meta,
+    tileSize,
+    segmentedTileBoxes,
+  );
diff --git a/scripts/generateRoom3.ts b/scripts/generateRoom3.ts
@@ -30,4 +30,10 @@ const segmentedTileBoxes: TileBox[] = [
   },
 ];
 
-export const generateRoom3 = () => generate("./public/assets/tiles/room3.json", meta, tileSize, segmentedTileBoxes);
+export const generateRoom3 = () =>
+  generate(
+    "./public/assets/tiles/room3.json",
+    meta,
+    tileSize,
+    segmentedTileBoxes,
+  );
diff --git a/src/components/layout/GatherChat.tsx b/src/components/layout/GatherChat.tsx
@@ -140,24 +140,22 @@ export const GatherChat = ({
 
   const world = useMemo(
     () =>
-      (contractState.world.worldType as WorldType) === "clubbeach" ? (
-        createClubBeach(
-          contractState.world.worldTheme as GenericTileSet,
-          contractState.world.worldSize,
-          () => setSidePanelState("feed"),
-        )
-      ) : (
-        createDecoratedRoom(
-          contractState.world.worldTheme as RoomTileSet,
-          contractState.world.worldSize,
-          () => setSidePanelState("feed"),
-          3,
-          {
-            w: 4,
-            h: 4,
-          },
-        )
-      ),
+      (contractState.world.worldType as WorldType) === "clubbeach"
+        ? createClubBeach(
+            contractState.world.worldTheme as GenericTileSet,
+            contractState.world.worldSize,
+            () => setSidePanelState("feed"),
+          )
+        : createDecoratedRoom(
+            contractState.world.worldTheme as RoomTileSet,
+            contractState.world.worldSize,
+            () => setSidePanelState("feed"),
+            3,
+            {
+              w: 4,
+              h: 4,
+            },
+          ),
     [contractState.world],
   );
 
@@ -171,21 +169,23 @@ export const GatherChat = ({
         }}
       >
         <div ref={containerRef} className="h-screen relative">
-          <div className="absolute top-0 left-0 bg-red-100">
-            {/* World dropdown */}
-            <select
-              className=" text-xl px-2 py-1"
-              onChange={(e) => {
-                contractEvents.setWorldId(e.target.value);
-              }}
-              defaultValue={contractState.worldId}
-            >
-              {contractState.worldIndex.map((worldId) => (
-                <option key={worldId} value={worldId}>
-                  {worldId}
-                </option>
-              ))}
-            </select>
+          <div className="absolute top-2 left-2">
+            <div className="select">
+              {/* World dropdown */}
+              <select
+                className=" text-sm px-2 py-1"
+                onChange={(e) => {
+                  contractEvents.setWorldId(e.target.value);
+                }}
+                defaultValue={contractState.worldId}
+              >
+                {contractState.worldIndex.map((worldId) => (
+                  <option key={worldId} value={worldId}>
+                    {worldId}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
           <RenderEngine
             parentRef={containerRef}
@@ -224,7 +224,7 @@ export const GatherChat = ({
           onSelectState={setSidePanelState}
           activityFeed={
             <div className="min-h-min h-auto flex flex-col gap-4 py-4">
-              <ul className="w-[100%] min-h-0 max-h-full h-[calc(100vh-140px)] overflow-y-auto px-2">
+              <ul className="w-[100%] min-h-0 max-h-full h-[calc(100vh-180px)] overflow-y-auto px-2">
                 {Object.keys(contractState.posts).map((postId) => {
                   const post = contractState.posts[postId];
                   const selectedPlayer = [
@@ -238,12 +238,16 @@ export const GatherChat = ({
                   return (
                     <li
                       key={postId}
-                      className={`${
+                      className={`balloon block w-full ${
                         selectedPlayer?.isFollowedByUser ? "bg-blue-100" : ""
-                      } ${isUser ? "bg-gray-200" : ""} break-words max-w-sm`}
+                      } ${
+                        isUser ? "from-right" : "from-left"
+                      } break-words max-w-xs`}
                     >
                       <button
-                        className={"text-muted-foreground text-underline px-1"}
+                        className={
+                          "text-muted-foreground text-underline px-1 mb-2"
+                        }
                         type="button"
                         onClick={
                           isLink
@@ -269,7 +273,7 @@ export const GatherChat = ({
                           ({post.type})
                         </a>
                       )}
-                      <span className="text-muted-foreground text-xs">
+                      <span className="text-muted-foreground text-base block text-right">
                         {" "}
                         {timeAgo.format(post.created)}
                       </span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,4 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    /tmp.css