Cleanup / refactor frontend

keep-starknet-strange · Apr 1, 2024 · a5fc471 · a5fc471
1 parent 6c8e948
commit a5fc471
Show file tree

Hide file tree

Showing 22 changed files with 746 additions and 228 deletions.
diff --git a/backend/routes/indexer.go b/backend/routes/indexer.go
@@ -57,8 +57,6 @@ func InitIndexerRoutes() {
 
 // TODO: User might miss some messages between loading canvas and connecting to websocket?
 func consumeIndexerMsg(w http.ResponseWriter, r *http.Request) {
-  fmt.Println("Consume indexer msg")
-
   requestBody, err := io.ReadAll(r.Body)
   if err != nil {
     fmt.Println("Error reading request body: ", err)
@@ -75,11 +73,10 @@ func consumeIndexerMsg(w http.ResponseWriter, r *http.Request) {
     return
   }
 
-  address := reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map[string]interface{})["event  s"].([]interface{})[0].(map[string]interface{})["event"].(map[string]interface{})["keys"].([]interface{})[1]
+  address := reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map[string]interface{})["events"].([]interface{})[0].(map[string]interface{})["event"].(map[string]interface{})["keys"].([]interface{})[1]
   address = address.(string)[2:]
-  posHex := reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map[string]interface{})["events  "].([]interface{})[0].(map[string]interface{})["event"].(map[string]interface{})["keys"].([]interface{})[2]
-  fmt.Println("Total events got: ", len(reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map  [string]interface{})["events"].([]interface{})))
-  colorHex := reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map[string]interface{})["even  ts"].([]interface{})[0].(map[string]interface{})["event"].(map[string]interface{})["data"].([]interface{})[0]
+  posHex := reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map[string]interface{})["events"].([]interface{})[0].(map[string]interface{})["event"].(map[string]interface{})["keys"].([]interface{})[2]
+  colorHex := reqBody["data"].(map[string]interface{})["batch"].([]interface{})[0].(map[string]interface{})["events"].([]interface{})[0].(map[string]interface{})["event"].(map[string]interface{})["data"].([]interface{})[0]
 
   // Convert hex to int
   position, err := strconv.ParseInt(posHex.(string), 0, 64)
@@ -98,6 +95,8 @@ func consumeIndexerMsg(w http.ResponseWriter, r *http.Request) {
   bitfieldType := "u" + strconv.Itoa(int(backend.ArtPeaceBackend.CanvasConfig.ColorsBitWidth))
   pos := uint(position) * backend.ArtPeaceBackend.CanvasConfig.ColorsBitWidth
 
+  fmt.Println("Pixel indexed with position: ", position, " and color: ", color)
+
   // Set pixel in redis
   ctx := context.Background()
   err = backend.ArtPeaceBackend.Databases.Redis.BitField(ctx, "canvas", "SET", bitfieldType, pos, color).Err()

diff --git a/backend/routes/pixel.go b/backend/routes/pixel.go
@@ -45,9 +45,9 @@ func getPixelInfo(w http.ResponseWriter, r *http.Request) {
 
   // Get pixel info from postgres
   var address string
-  err := backend.ArtPeaceBackend.Databases.Postgres.QueryRow(context.Background(), "SELECT address FROM Pixels WHERE position = $1 OR  DER BY time DESC LIMIT 1", position).Scan(&address)
+  err := backend.ArtPeaceBackend.Databases.Postgres.QueryRow(context.Background(), "SELECT address FROM Pixels WHERE position = $1 ORDER BY time DESC LIMIT 1", position).Scan(&address)
   if err != nil {
-    w.Write([]byte("Pixel not found"))
+    w.Write([]byte("0000000000000000000000000000000000000000000000000000000000000000"))
   } else {
     w.Write([]byte(address))
   }
@@ -77,12 +77,11 @@ func placePixelDevnet(w http.ResponseWriter, r *http.Request) {
   shellCmd := "../tests/integration/local/place_pixel.sh"
   position := x + y * int(backend.ArtPeaceBackend.CanvasConfig.Canvas.Width)
   cmd := exec.Command(shellCmd, jsonBody["contract"], "place_pixel", strconv.Itoa(position), jsonBody["color"])
-  out, err := cmd.Output()
+  _, err = cmd.Output()
   if err != nil {
     fmt.Println("Error executing shell command: ", err)
     panic(err)
   }
-  fmt.Println("Place Pixel command gave:", string(out))
 
   w.Header().Set("Access-Control-Allow-Origin", "*")
   w.Write([]byte("Pixel placed"))

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -42,7 +42,7 @@
     <link rel="preconnect" href="https://rsms.me/">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 
-    <title>art/peace</title>
+    <title>art/peace - Collaborative art on Starknet</title>
 
     <style>
       @supports (font-variation-settings: normal) {

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,38 +1,40 @@
 .App {
-  text-align: center;
-}
+  height: 100vh;
+  width: 100vw;
 
-.App-logo {
-  height: 5vmin;
-  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  background-color: #FEFDFB;
 }
 
-.App-header {
-  background-color: #282c3460;
-  min-height: 5vh;
+.App__rhs-panel {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: max(22rem, 25%);
+  margin: 0.5rem;
+  padding: 0;
+
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
-  justify-content: left;
-  font-size: calc(10px + 1vmin);
-  color: #282c34;
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  width: 100%;
-  top: 0;
-  z-index: 100;
+  justify-content: center;
+
+  z-index: 3;
+
+  font-size: 1.2rem;
 }
 
-.App-body {
-  background-color: red;
-  margin: 0;
-  padding: 0;
-  /*height: 100vh;*/
-  /*
+.App__footer {
+  width: 100%;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  */
+
+  position: fixed;
+  bottom: 0;
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,49 +1,55 @@
 import React, { useEffect, useState } from 'react';
-// import { connect, disconnect } from 'starknetkit'; // TODO: to starknet-react/core instead?
-import { connect } from "get-starknet";
-import { Contract } from "starknet";
-import logo from './logo.svg';
+//import { connect } from "get-starknet";
+//import { Contract } from "starknet";
 import './App.css';
 import Canvas from './Canvas.js';
+import Tabs from './Tabs.js';
+import PixelSelector from './PixelSelector.js';
 // TODO: Generate contract.abi.json
-import contractAbi from "./contract.abi.json";
 
-function App() {
-  //TODO: dynamic modal w/ next/dynamic
-      /*
-  const [account, setAccount] = useState('');
-  const [chain, setChain] = useState('');
+function usePreventZoom(scrollCheck = true, keyboardCheck = true) {
+    useEffect(() => {
+      const handleKeydown = (e) => {
+        if (
+          keyboardCheck &&
+          e.ctrlKey &&
+          (e.keyCode == "61" ||
+            e.keyCode == "107" ||
+            e.keyCode == "173" ||
+            e.keyCode == "109" ||
+            e.keyCode == "187" ||
+            e.keyCode == "189")
+        ) {
+          e.preventDefault();
+        }
+      };
+
+      const handleWheel = (e) => {
+        if (scrollCheck && e.ctrlKey) {
+          e.preventDefault();
+        }
+      };
+
+      document.addEventListener("keydown", handleKeydown);
+      document.addEventListener("wheel", handleWheel, { passive: false });
+
+      return () => {
+        document.removeEventListener("keydown", handleKeydown);
+        document.removeEventListener("wheel", handleWheel);
+      };
+    }, [scrollCheck, keyboardCheck]);
+  }
 
-  useEffect(() => {
-    const connectToStarknet = async () => {
-      const connection = await connect();// { modalMode: "neverAsk" } );
-
-      if (connection && connection.wallet.isConnected) {
-        console.log('Connected to Starknet');
-        setAccount(connection.wallet.selectedAddress);
-        setChain(connection.wallet.chainId);
-        // TODO: set connection, provider, address, disconnect, ...
-        // TODO: more docs read
-        //setConnection(connection);
-        //setProvider(connection.account);
-        //setAddress(connection.selectedAddress);
-      } else {
-        console.log('Failed to connect to Starknet');
-      }
-        <div>{account ? <DisconnectModal /> : <ConnectModal />}</div>
-    };
+function App() {
 
-    connectToStarknet();
-  }, []);
-      */
+  /*
+  // TODO: Wallet integration
   const [provider, setProvider] = useState(null)
   const [address, setAddress] = useState(null)
   const [isConnected, setIsConnected] = useState(false)
   const [chainId, setChainId] = useState(null)
-  //const [contract, setContract] = useState(null)
   // TODO: Dynamic contract address
   const contractAddress = process.env.REACT_APP_ART_PEACE_CONTRACT_ADDRESS;
-
   useEffect(() => {
     const connectToStarknet = async () => {
       try {
@@ -64,8 +70,7 @@ function App() {
         //console.log("Setting pixel", pixel_pos, pixel_color)
         //console.log(contract.populate("place_pixel", [pixel_pos, pixel_color]))
         //contract.place_pixel(pixel_pos, pixel_color).then(
-        //  (result) => console.log("Contract called", result)
-        //).catch(
+        //  (result) => console.log("Contract called", result)).catch(
         //  (error) => console.log("Contract call failed", error)
         //)
         //setContract(contract)
@@ -77,27 +82,22 @@ function App() {
 
     connectToStarknet()
   }, [])
+  */
+
+  usePreventZoom();
+
+  // TODO: use -1 for all or other state
+  // TODO: move pixel selected rhs panel
+  const [selectedColorId, setSelectedColorId] = useState(-1);
 
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>art/peace</p>
-        <button className="App-button">Wallet</button>
-        <div>
-          {isConnected ? (
-            <div>
-              <p>Connected to Starknet</p>
-              <p>ChainId: {chainId}</p>
-              <p>Address: {address}</p>
-            </div>
-          ) : (
-            <p>Connecting to Starknet...</p>
-          )}
-        </div>
-      </header>
-      <div className="App-body">
-        <Canvas />
+      <Canvas selectedColorId={selectedColorId} setSelectedColorId={setSelectedColorId} />
+      <div className="App__rhs-panel">
+      </div>
+      <div className="App__footer">
+        <PixelSelector selectedColorId={selectedColorId} setSelectedColorId={setSelectedColorId} />
+        <Tabs />
       </div>
     </div>
   );