Merge branch 'main' of https://github.com/xenix1337/hack-of-tomorrow

Author: Sobgo

backend/blockchain.py

@@ -1,8 +1,11 @@
+import json
+from functools import lru_cache
+
+from eth_account import Account
 from web3 import Web3
 from web3.middleware import SignAndSendRawMiddlewareBuilder
-from eth_account import Account
+
 from game_settings import settings
-import json
 
 CONTRACT_ABI = None
 

frontend/src/App.jsx

@@ -1,77 +1,86 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import './styles.css';
 
+const LOCATION_NAMES = ["inn", "fairy_village"];
+const PLAYER_ID = 0;
+
 export default function App() {
     const [message, setMessage] = useState("");
-	const [dialogue, setDialogue] = useState("");
+    const [dialogue, setDialogue] = useState("");
     const [activeCharacter, setActiveCharacter] = useState(0);
     const [isSending, setIsSending] = useState(false);
     const [location, setLocation] = useState(0);
     const [agentsIds, setAgentsIds] = useState([]);
 
     const API_URL = import.meta.env.VITE_BACKEND_API_URL;
 
+    const locationIdToResourceName = useCallback((id) => LOCATION_NAMES[id], []);
+
     const sendMessage = async (e) => {
         if (e.key === "Enter" && message.trim()) {
-			setIsSending(true);
+            setIsSending(true);
+            try {
+                const response = await fetch(`${API_URL}/say`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ player_id: PLAYER_ID, agent_id: activeCharacter, message: message }),
+                });
+
+                if (!response.ok) throw new Error(`Error: ${response.status}`);
+
+                const data = await response.json();
+
+                setDialogue(data.message);
+                setActiveCharacter(data.responder_id);
+                setMessage("");
+            } catch (error) {
+                console.error(error);
+            } finally {
+                setIsSending(false);
+            }
+        }
+    };
 
-            const response = await fetch(`${API_URL}/say`, {
+    const enterLocation = async () => {
+        try {
+            const response = await fetch(`${API_URL}/enterLocation`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ player_id: 0, agent_id: activeCharacter, message: message }),
+                body: JSON.stringify({ player_id: PLAYER_ID, location_id: location }),
             });
 
             if (!response.ok) throw new Error(`Error: ${response.status}`);
 
             const data = await response.json();
+            setAgentsIds(data.agents_ids);
+            setActiveCharacter(data.agents_ids[0]);
 
-            setDialogue(data.message);
-            setActiveCharacter(data.responder_id);
-            setMessage("");
-			setIsSending(false);
+        } catch (error) {
+            console.error(error);
         }
     };
 
-    const locationIdToResourceName = (id) => ["inn", "fairy_village"][id];
-
-	useEffect(() => {
-        const enterLocation = async () => {
-            try {
-                const response = await fetch(`${API_URL}/enterLocation`, 
-                    {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ player_id: 0, location_id: location }),
-                    });
-
-                if (!response.ok) throw new Error(`Error: ${response.status}`);
-
-                const data = await response.json();
-
-                setAgentsIds(data.agents_ids);
-                setActiveCharacter(data.agents_ids[0]);
-
-            } catch (error) {
-                console.error(error);
-            }
-        };
+    useEffect(() => {
         enterLocation();
     }, [location]);
 
+    const changeLocation = () => {
+        setLocation((prevLocation) => (prevLocation + 1) % LOCATION_NAMES.length);
+        setDialogue("");
+    }
+
     return (
         <div className="app-container"
-             style={{backgroundImage: `url('/images/${locationIdToResourceName(location)}/background.jpg')`}}>
-            {dialogue ? <div className="dialogue-box">{dialogue}</div> : <></>}
+            style={{ backgroundImage: `url('/images/${locationIdToResourceName(location)}/background.jpg')` }}>
+            {dialogue && <div className="dialogue-box">{dialogue}</div>}
             <div className="content">
                 {agentsIds.map((char, i) => (
                     <div key={char} className="column">
                         <img
                             src={`/images/${locationIdToResourceName(location)}/character_0${i + 1}.png`}
                             className={`character-img ${activeCharacter === char ? "talking" : ""}`}
                             alt="Character"
-                            onClick={() => {
-                                if (!isSending) setActiveCharacter(char)
-                            }}
+                            onClick={() => !isSending && setActiveCharacter(char)}
                         />
                     </div>
                 ))}
@@ -86,9 +95,9 @@ export default function App() {
             />
             <button
                 className="change-location-button"
-                onClick={() => {setLocation((location + 1) % 2)}}
+                onClick={changeLocation}
             >
-                {(location === 0) ? "Leave Inn" : "Go back to Inn"}
+                {location === 0 ? "Leave Inn" : "Go back to Inn"}
             </button>
         </div>
     );

frontend/src/styles.css

@@ -33,6 +33,9 @@ html, body {
     font-size: 3em;
 	white-space: pre-wrap;
     z-index: 10;
+    position: absolute;
+    left: 12px;
+    right: 12px;
 }
 
 .content {
@@ -75,7 +78,7 @@ html, body {
 
 .change-location-button {
     position: fixed;
-    top: 20px;
+    bottom: 50%;
     right: 20px;
     height: 50px;
     border-radius: 5px;
@@ -89,6 +92,7 @@ html, body {
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 50;
 }
 
 .change-location-button:hover {