From fbe8ad25039e5b60128a94017530eb0bc0667590 Mon Sep 17 00:00:00 2001
From: Abdulhakeem Abdulazeez <ayoazeez26@gmail.com>
Date: Fri, 12 Apr 2024 13:30:25 +0100
Subject: [PATCH 1/3] feat: display owner of selected pixel

---
 frontend/src/App.js                       | 5 +++--
 frontend/src/canvas/Canvas.js             | 4 ++--
 frontend/src/canvas/SelectedPixelPanel.js | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index f42e38eb..ce387b3e 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -38,6 +38,7 @@ function App() {
   const [pixelSelectedMode, setPixelSelectedMode] = useState(false);
   const [selectedPositionX, setSelectedPositionX] = useState(null)
   const [selectedPositionY, setSelectedPositionY] = useState(null)
+  const [pixelPlacedBy, setPixelPlacedBy] = useState("");
 
   const clearPixelSelection = () => {
     setSelectedPositionX(null);
@@ -57,13 +58,13 @@ function App() {
 
   return (
     <div className="App">
-      <Canvas selectedColorId={selectedColorId} setSelectedColorId={setSelectedColorId} pixelSelectedMode={pixelSelectedMode} selectedPositionX={selectedPositionX} selectedPositionY={selectedPositionY} setPixelSelection={setPixelSelection} clearPixelSelection={clearPixelSelection} />
+      <Canvas selectedColorId={selectedColorId} setSelectedColorId={setSelectedColorId} pixelSelectedMode={pixelSelectedMode} selectedPositionX={selectedPositionX} selectedPositionY={selectedPositionY} setPixelSelection={setPixelSelection} clearPixelSelection={clearPixelSelection} setPixelPlacedBy={setPixelPlacedBy} />
       { !isDesktopOrLaptop && (
         <img src={logo} alt="logo" className="App__logo--mobile" />
       )}
       <div className={"App__panel " + (isTabletOrMobile ? "App__panel--tablet " : " ") + (isPortrait ? "App__panel--portrait " : " ")}>
         { (!isPortrait ? pixelSelectedMode : pixelSelectedMode && activeTab === tabs[0]) && (
-          <SelectedPixelPanel selectedPositionX={selectedPositionX} selectedPositionY={selectedPositionY} clearPixelSelection={clearPixelSelection} />
+          <SelectedPixelPanel selectedPositionX={selectedPositionX} selectedPositionY={selectedPositionY} clearPixelSelection={clearPixelSelection} pixelPlacedBy={pixelPlacedBy} />
         )}
         <TabPanel activeTab={activeTab} setActiveTab={setActiveTab} getDeviceTypeInfo={getDeviceTypeInfo} />
       </div>
diff --git a/frontend/src/canvas/Canvas.js b/frontend/src/canvas/Canvas.js
index b30aab17..caa0799d 100644
--- a/frontend/src/canvas/Canvas.js
+++ b/frontend/src/canvas/Canvas.js
@@ -88,7 +88,6 @@ const Canvas = props => {
   }, [])
 
   const [setup, setSetup] = useState(false)
-  const [pixelPlacedBy, setPixelPlacedBy] = useState("")
 
   const draw = useCallback((ctx, imageData) => {
     ctx.canvas.width = width
@@ -191,7 +190,8 @@ const Canvas = props => {
     }).then(data => {
       // TODO: Cache pixel info & clear cache on update from websocket
       // TODO: Dont query if hover select ( until 1s after hover? )
-      setPixelPlacedBy(data)
+      console.log('pixel placed by data is => ', data);
+      props.setPixelPlacedBy(data)
     }).catch(error => {
       console.error(error)
     });
diff --git a/frontend/src/canvas/SelectedPixelPanel.js b/frontend/src/canvas/SelectedPixelPanel.js
index 020cf5a7..801f8a05 100644
--- a/frontend/src/canvas/SelectedPixelPanel.js
+++ b/frontend/src/canvas/SelectedPixelPanel.js
@@ -6,7 +6,7 @@ const SelectedPixelPanel = props => {
     <div className="SelectedPixelPanel">
       <p className="SelectedPixelPanel__exit" onClick={() => props.clearPixelSelection()}>X</p>
       <p className="SelectedPixelPanel__item">Pos &nbsp; : ({props.selectedPositionX}, {props.selectedPositionY})</p>
-      <p className="SelectedPixelPanel__item SelectedPixelPanel__address"  >Owner : 0xplaced_by</p>
+      <p className="SelectedPixelPanel__item SelectedPixelPanel__address"  >Owner : {props.pixelPlacedBy}</p>
     </div>
   );
 }

From 06ff92c49befc3ad83314db77a320870357e202d Mon Sep 17 00:00:00 2001
From: Abdulhakeem Abdulazeez <ayoazeez26@gmail.com>
Date: Fri, 12 Apr 2024 16:45:07 +0100
Subject: [PATCH 2/3] feat: removed console log

---
 frontend/src/canvas/Canvas.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/canvas/Canvas.js b/frontend/src/canvas/Canvas.js
index caa0799d..43302efb 100644
--- a/frontend/src/canvas/Canvas.js
+++ b/frontend/src/canvas/Canvas.js
@@ -190,7 +190,6 @@ const Canvas = props => {
     }).then(data => {
       // TODO: Cache pixel info & clear cache on update from websocket
       // TODO: Dont query if hover select ( until 1s after hover? )
-      console.log('pixel placed by data is => ', data);
       props.setPixelPlacedBy(data)
     }).catch(error => {
       console.error(error)

From 077643635bb98f2eb76ef07fc919f6dfe663fbbe Mon Sep 17 00:00:00 2001
From: Brandon Roberts <brandonjroberts22@gmail.com>
Date: Fri, 12 Apr 2024 16:29:41 -0500
Subject: [PATCH 3/3] Panel layout fix

---
 frontend/src/canvas/SelectedPixelPanel.css | 2 +-
 frontend/src/canvas/SelectedPixelPanel.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/canvas/SelectedPixelPanel.css b/frontend/src/canvas/SelectedPixelPanel.css
index cc1a5a76..b4b47e83 100644
--- a/frontend/src/canvas/SelectedPixelPanel.css
+++ b/frontend/src/canvas/SelectedPixelPanel.css
@@ -17,7 +17,7 @@
 
 .SelectedPixelPanel__item {
   font-size: 1.2rem;
-  text-wrap: nowrap;
+  white-space: nowrap;
   margin: 0.3rem;
 }
 
diff --git a/frontend/src/canvas/SelectedPixelPanel.js b/frontend/src/canvas/SelectedPixelPanel.js
index 801f8a05..9a07a46c 100644
--- a/frontend/src/canvas/SelectedPixelPanel.js
+++ b/frontend/src/canvas/SelectedPixelPanel.js
@@ -6,7 +6,7 @@ const SelectedPixelPanel = props => {
     <div className="SelectedPixelPanel">
       <p className="SelectedPixelPanel__exit" onClick={() => props.clearPixelSelection()}>X</p>
       <p className="SelectedPixelPanel__item">Pos &nbsp; : ({props.selectedPositionX}, {props.selectedPositionY})</p>
-      <p className="SelectedPixelPanel__item SelectedPixelPanel__address"  >Owner : {props.pixelPlacedBy}</p>
+      <p className="SelectedPixelPanel__item SelectedPixelPanel__address">Owner : 0x{props.pixelPlacedBy}</p>
     </div>
   );
 }