☎️💿 -> Add GameObject management in Phaser to the thirdweb configuration

contracts/dynamic/README.md

@@ -0,0 +1,3 @@
+<!--https://www.youtube.com/watch?v=dNRd_ym0WeQ-->
+
+https://www.pixilart.com/art/b-sr20291a1a9a01a

src/App.css

@@ -0,0 +1,40 @@
+@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
+@import url("https://fonts.googleapis.com/css?family=VT323");
+
+.App {
+  text-align: center;
+  font-family: "Press Start 2p", "VT323";
+  color: white;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  overflow: hidden;
+}
+
+.overlay {
+  opacity: 0.85;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  position: fixed;
+}
+
+.moving-background {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("./assets/background/pixel3.gif");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: 40% 40% ;
+}

src/App.js

@@ -0,0 +1,140 @@
+import './App.css';
+import { useState, useEffect, useMemo } from 'react';
+import MainMint from './components/MainMint';
+import NavBar from './components/NavBar';
+
+// Comments imports
+import { QueryClient, QueryClientProvider, QueryCache } from "react-query";
+import { ChakraProvider, Box, Heading, Button } from '@chakra-ui/react';
+import { Toaster, toast } from "react-hot-toast";
+import { Provider as WagmiProvider } from "wagmi";
+import { providers } from 'ethers';
+
+// Thirdweb & contract components
+import { useAddress, useMetamask, useEditionDrop, useToken, useVote, useNetwork } from '@thirdweb-dev/react';
+import { ChainId } from '@thirdweb-dev/sdk';
+import { AddressZero } from "@ethersproject/constants";
+//import editionDrop from "./editionDrop";
+
+// NFT Display
+// import CharacterGallery from ./components/CharacterGallery;
+
+// Minigame components
+import Phaser from 'phaser';
+import { useMoralis, useMoralisWeb3Api, useMoralisWeb3ApiCall, useNFTbalances, } from "react-moralis";
+import PhaserLoad from './components/PhaserLoad';
+//import PhaserLoad from './components/PhaserLoad';
+
+// Commenting components
+const provider = providers.getDefaultProvider("http://localhost:8545");
+// Create a react-query client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+  queryCache: new QueryCache({
+    onError: () => {
+      toast.error(
+        "Network Error: Ensure Metamask is connected to the same network that your contract is deployed to."
+      );
+    },
+  }),
+});
+
+
+function App() {
+  // Thirdweb components
+  const editionDropAddress = "0xd4F18cF04B9C74d5B69775BBfFbf433Ff24D8dbC";
+  //const editionDrop = useEditionDrop("0xd4F18cF04B9C74d5B69775BBfFbf433Ff24D8dbC");
+  // Initialise the token contract
+  const tokenAddress = "0xe850E4a40F8F1B666C3AC21e7f51e6279cA0af7E";
+  //const token = useToken("0xe850E4a40F8F1B666C3AC21e7f51e6279cA0af7E");
+  //const memberAddressEtherscan = "https://rinkeby.etherscan.io/address" + member.address;
+  const shortenAddress = (str) => {
+    return str.substring(0, 6) + "..." + str.substring(str.length - 4);
+  };
+  const shortenAddressMore = (str) => {
+    return str.substring(0, 4) + ".." + str.substring(str.length - 2);
+  }
+  // Vote token contract
+  const voteAddress = "0xCD2Bf092ce9E051360b649D038c9ecf5b54D203e";
+  //const vote = useVote("0xCD2Bf092ce9E051360b649D038c9ecf5b54D203e");
+
+  // Moralis Components
+
+
+  // Original minting components
+  const [accounts, setAccounts] = useState([]); // Any updates on the frontend (ui) -> use useState to update the value on the frontend (e.g. when the user logins/authenticates)
+
+  const isConnected = Boolean(accounts[0]); // Address of wallet that is connected
+
+  async function connectAccount() {
+      if (window.ethereum) {
+          const accounts = await window.ethereum.request({    
+              method: "eth_requestAccounts", // Give all the accounts that exist in the user's metamask extension
+          });
+          console.log(accounts);
+          setAccounts(accounts);
+      }
+  }
+
+  useEffect(() => {
+    document.title = "Star Sailors Mint";  
+  }, []);
+
+  return (
+    <WagmiProvider autoConnect provider={provider}>
+      <div className="overlay">
+      <div className="App">
+        <NavBar accounts={accounts} setAccounts={setAccounts} />
+        <MainMint accounts={accounts} setAccounts={setAccounts} />
+
+        {/* Commenting tool */}
+        { isConnected ? (
+          <QueryClientProvider client={queryClient}>
+            <Box p={8} maxW="600px" minW="320px" m="0 auto">
+              {/*
+              <Comments topic="my-blog-post" /> // -> Set up headless CMS with automated Comments tag for each post
+              <Toaster position="bottom-right" />
+              */}
+            </Box>
+          </QueryClientProvider>
+        ) : (
+          <Button
+            backgroundColor="#D6517D"
+            borderRadius="5px"
+            boxShadow="0px 2px 2px 1px #0F0F0F"
+            color="white"
+            cursor="pointer"
+            fontFamily="inherit" 
+            padding="15px"
+            margin="0 15px"
+              onClick={connectAccount}>
+                Connect
+          </Button>
+        )}
+
+        {/* Create a new component that only shows if the user has the NFT in their wallet 
+        How about disabling components on mobile devices? -> Start thinking about a mobile design 
+        { isConnected ? (
+          <PhaserLoad accounts={accounts} setAccounts={setAccounts} />
+          // Allow the users to comment on the NFT collection
+          // Show the user's NFTs from the collection -> e.g. commenting on specific nfts, the multiplayer battles, etc
+          // https://skinetics.notion.site/NFT-Drop-c9cabbaf202d46e9bf79e271b9be0b55
+
+          // Notification section -> web3 notifications? One signal?
+        ) : (
+          <div>
+
+          </div>
+        )}*/}
+      </div>
+      <div className="moving-background"></div>
+    </div>
+    </WagmiProvider>
+  );
+}
+
+export default App;

src/Components/Minigame/GameObject.js

@@ -0,0 +1,7 @@
+class GameObject {
+    constructor(config) {
+        this.x = config.x || 0;
+        this.y = config.y || 0;
+        this.sprite = null; 
+    }
+}

src/Components/Minigame/Minigame.js

@@ -0,0 +1,18 @@
+import Phaser from "Phaser";
+import styles from "./Styles/phaser-styles.css"
+import Overworld from "./Phaser/Overworld.js"
+import init from "./Phaser/init.js"
+
+const Minigame = () => {
+  return (
+    <div>
+      <title>Star Sailors</title>
+      <link href='./Styles/phaser-styles.css' type='text/css' rel='stylesheet' />
+      <div className='game-container'>
+        <canvas className='game-canvas' width='352' height='198' />
+      </div>
+    </div>
+  )
+}
+
+export default Minigame;

src/Components/Minigame/Overworld.js

@@ -0,0 +1,51 @@
+class Overworld {
+    constructor(config) {
+        this.element = config.element;
+        this.canvas = this.element.querySelector(".game-canvas");
+        this.ctx = this.canvas.getContext("2d");
+    }
+
+    init() {
+        console.log("Hello (over)world", this)
+
+        const image = new Image(); // Load the image to the canvas memory so that pixel generation can be created based on the image (e.g. drawing a room in pixels based on an image inserted [here] into memory)
+        image.onload = () => {
+            this.ctx.drawImage(image,0,0)
+        };
+        image.src = "/images/maps/DemoMap.png"; // Still need to get this assets -> take from github/signal-k/marketplace (Phaser)
+
+        // Character position variables
+        const x = 5;
+        const y = 6;
+
+        // Character Creation
+        const character = new Image();
+        character.onload = () => {
+            this.ctx.drawImage(character,
+                0, // Params for cropping the sprite pack -> left cut
+                0, // top cut
+                32, // Size of cut in pixels -> 32x32 (width)
+                32, // height of cut
+                x * 16 -8, // x pos of cut image
+                y * 16 -18, // * 16 -> compensating for the grid size, then move the character to the top left of the grid
+                32, // Size of character (in pixels)
+                32)
+        }
+        character.src = "/images/characters/character.png"
+
+        // Perspective/shadow for the character
+        const shadow = new Image();
+        shadow.onload = () => {
+            this.ctx.drawImage(shadow,
+                0, 
+                0, 
+                32, 
+                32, 
+                x * 16 -8, 
+                y * 16 -18, 
+                32, 
+                32)
+        }
+        shadow.src = "images/characters/shadow.png" 
+    }
+}

src/Components/Minigame/Sprite.js

@@ -0,0 +1,30 @@
+class Sprite {
+    constructor(config) {
+        // Set image for the character(s) or other object(s)
+        this.image = new Image();
+        this.image.src = config.src;
+        this.image.onload = () => {
+            this.isLoaded = true;
+        }
+
+        // Configure animation & initial state
+        this.animation = config.animations || {
+            idleDown: [
+                [0,0]
+            ],
+            /*walkDown: [
+
+            ]*/
+        }
+        this.currentAnimation = config.currentAnimation || "idleDown";
+        this.currentAnimationFrame = 0; // What animation [frame] will be shown?
+    }
+
+    draw(ctx) {
+        const x = this.gameObject.x * 16 - 8; // Set this value for the sprite to be equal to the specific game object's position
+    }
+}
+
+/* Some notes:
+Any game object can pass in their own definitions for animations -> not just the player character
+*/

src/Components/Minigame/Styles/phaser-styles.css

@@ -0,0 +1,25 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background: #333;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.game-container {
+    position: relative;
+    width: 352px;
+    height: 198px;
+    margin: 0 auto;
+    outline: 1px solid #fff;
+
+    transform: scale(3) translateY(50%) /* Scale the pixels in the image/window (find an alternative to this method for non-pixel-art assets) */
+}
+
+/* Unblur the expanded pixel art from ^^ */
+.game-container canvas {
+    image-rendering: pixelated;
+}

src/Components/Minigame/init.js

@@ -0,0 +1,6 @@
+(function () {
+    const overworld = new Overworld({
+        element: document.querySelector(".game-container")
+    });
+    overworld.init();
+})();