From 0ca4f2f7112653e386a8f90f105861f511b485b9 Mon Sep 17 00:00:00 2001
From: melanke <gil.bueno@simpli.com.br>
Date: Tue, 17 Dec 2024 20:16:37 -0300
Subject: [PATCH 1/2] place pixel

---
 packages/nextjs/components/PixelCanvas.tsx | 87 +++++++++++++++++-----
 1 file changed, 69 insertions(+), 18 deletions(-)

diff --git a/packages/nextjs/components/PixelCanvas.tsx b/packages/nextjs/components/PixelCanvas.tsx
index 9c3dd6b..d701ae6 100644
--- a/packages/nextjs/components/PixelCanvas.tsx
+++ b/packages/nextjs/components/PixelCanvas.tsx
@@ -1,4 +1,5 @@
-import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import { useState } from "react";
+import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 
 const ColorMap = {
   0: "#FFFFFF", // WHITE
@@ -12,12 +13,42 @@ const ColorMap = {
 };
 
 const PixelCanvas = () => {
+  const [placingCoordinates, setPlacingCoordinates] = useState<{ x: bigint; y: bigint } | null>(null);
+  const [placingColor, setPlacingColor] = useState<number | null>(null);
+
   const { data: canvasData } = useScaffoldReadContract({
     contractName: "PixelCanvas",
     functionName: "getFullCanvas",
     watch: true,
   });
 
+  const { writeContractAsync } = useScaffoldWriteContract("PixelCanvas");
+
+  const save = async () => {
+    if (!placingCoordinates || placingColor === null) return;
+    await writeContractAsync({
+      functionName: "placePixel",
+      args: [placingCoordinates?.x, placingCoordinates?.y, placingColor],
+    });
+    setPlacingCoordinates(null);
+    setPlacingColor(null);
+  };
+
+  const isSelected = (x: number, y: number) => {
+    return BigInt(x) === placingCoordinates?.x && BigInt(y) === placingCoordinates?.y;
+  };
+
+  const getPixelColor = (x: number, y: number) => {
+    if (placingColor !== null && isSelected(x, y)) {
+      return ColorMap[placingColor as keyof typeof ColorMap];
+    }
+    if (!canvasData) {
+      return "#FFFFFF";
+    }
+    const pixel = canvasData[x][y];
+    return ColorMap[pixel.color as keyof typeof ColorMap];
+  };
+
   if (!canvasData?.length) {
     return <div className="animate-pulse">Loading canvas...</div>;
   }
@@ -26,23 +57,43 @@ const PixelCanvas = () => {
   const height = canvasData[0].length;
 
   return (
-    <div
-      className="grid gap-0 border border-base-300"
-      style={{ gridTemplateColumns: `repeat(${height}, minmax(0, 1fr))` }}
-    >
-      {Array.from({ length: height }, (_, y) =>
-        Array.from({ length: width }, (_, x) => {
-          const pixel = canvasData[x][y];
-          return (
-            <div
-              key={`${x}-${y}`}
-              className="w-3 h-3 cursor-pointer outline-white hover:outline hover:z-10 hover:brightness-90"
-              style={{ backgroundColor: ColorMap[pixel.color as keyof typeof ColorMap] }}
-              title={`Author: ${pixel.author}\nTimestamp: ${new Date(Number(pixel.timestamp) * 1000).toLocaleString()}`}
-            />
-          );
-        }),
-      ).flat()}
+    <div className="flex flex-col gap-4">
+      <div
+        className="grid gap-0 border border-base-300"
+        style={{ gridTemplateColumns: `repeat(${height}, minmax(0, 1fr))` }}
+      >
+        {Array.from({ length: height }, (_, y) =>
+          Array.from({ length: width }, (_, x) => {
+            const pixel = canvasData[x][y];
+            return (
+              <div
+                key={`${x}-${y}`}
+                onClick={() => setPlacingCoordinates({ x: BigInt(x), y: BigInt(y) })}
+                className={`w-3 h-3 cursor-pointer outline-white hover:outline hover:z-10 hover:brightness-90 ${isSelected(x, y) && "z-10 outline outline-red-500"}`}
+                style={{ backgroundColor: getPixelColor(x, y) }}
+                title={`Author: ${pixel.author}\nHorário: ${new Date(Number(pixel.timestamp) * 1000).toLocaleString()}`}
+              />
+            );
+          }),
+        ).flat()}
+      </div>
+      {placingCoordinates && (
+        <div className="flex gap-4">
+          <div className="grid grid-cols-4 gap-1">
+            {Object.values(ColorMap).map((color, index) => (
+              <div
+                key={index}
+                className={`w-6 h-6 cursor-pointer ${placingColor === index && "outline outline-red-500"}`}
+                style={{ backgroundColor: color }}
+                onClick={() => setPlacingColor(index)}
+              />
+            ))}
+          </div>
+          <button className="mt-2 p-2 bg-blue-500 text-white rounded" onClick={save}>
+            Save Pixel
+          </button>
+        </div>
+      )}
     </div>
   );
 };

From b2e7b78622597ecb598af4fa95f31599f61b6541 Mon Sep 17 00:00:00 2001
From: phipsae <philip.krause88@yahoo.de>
Date: Fri, 20 Dec 2024 09:23:29 +0100
Subject: [PATCH 2/2] add useEffect to trigger refresh of the canvas if pixel
 has changed

---
 packages/nextjs/components/PixelCanvas.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/nextjs/components/PixelCanvas.tsx b/packages/nextjs/components/PixelCanvas.tsx
index d701ae6..4d23390 100644
--- a/packages/nextjs/components/PixelCanvas.tsx
+++ b/packages/nextjs/components/PixelCanvas.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 
 const ColorMap = {
@@ -16,13 +16,19 @@ const PixelCanvas = () => {
   const [placingCoordinates, setPlacingCoordinates] = useState<{ x: bigint; y: bigint } | null>(null);
   const [placingColor, setPlacingColor] = useState<number | null>(null);
 
-  const { data: canvasData } = useScaffoldReadContract({
+  const { data: canvasData, refetch: refetchCanvas } = useScaffoldReadContract({
     contractName: "PixelCanvas",
     functionName: "getFullCanvas",
     watch: true,
   });
 
-  const { writeContractAsync } = useScaffoldWriteContract("PixelCanvas");
+  const { writeContractAsync, isSuccess } = useScaffoldWriteContract("PixelCanvas");
+
+  useEffect(() => {
+    if (isSuccess) {
+      refetchCanvas();
+    }
+  }, [isSuccess, refetchCanvas]);
 
   const save = async () => {
     if (!placingCoordinates || placingColor === null) return;