Skip to content

Commit

Permalink
feat: display owner of selected pixel (#38)
Browse files Browse the repository at this point in the history
* feat: display owner of selected pixel

* feat: removed console log

* Panel layout fix

---------

Co-authored-by: Brandon Roberts <[email protected]>
  • Loading branch information
Ayoazeez26 and b-j-roberts authored Apr 12, 2024
1 parent d7afe5a commit 1497651
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 6 deletions.
5 changes: 3 additions & 2 deletions frontend/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/canvas/Canvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
});
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/canvas/SelectedPixelPanel.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.SelectedPixelPanel__item {
font-size: 1.2rem;
text-wrap: nowrap;
white-space: nowrap;
margin: 0.3rem;
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/canvas/SelectedPixelPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down

0 comments on commit 1497651

Please sign in to comment.