feat: display owner of selected pixel (#38)

* feat: display owner of selected pixel * feat: removed console log * Panel layout fix --------- Co-authored-by: Brandon Roberts <[email protected]>
keep-starknet-strange · Apr 12, 2024 · 1497651 · 1497651
1 parent d7afe5a
commit 1497651
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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,7 @@ 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)
+      props.setPixelPlacedBy(data)
     }).catch(error => {
       console.error(error)
     });

diff --git 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
@@ -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 : 0x{props.pixelPlacedBy}</p>
     </div>
   );
 }