client

client/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    [
+      "@babel/preset-typescript",
+      {
+        "optimizeConstEnums": true
+      }
+    ]
+  ],
+  "plugins": ["babel-plugin-styled-components"]
+}

client/.env.example

@@ -1,5 +1,13 @@
 NODE_ENV=development
 # This defaults to localhost in development regardless of the value set in this file
-DF_DEFAULT_RPC=https://rpc-df.xdaichain.com/
-# Removing this value will disable all webserver calls in the client
-DF_WEBSERVER_URL=http://localhost:3000
+DEFAULT_RPC=https://rpc-df.xdaichain.com/
+# Removing this value will disable all webserver calls in the client. 
+
+# Arena does not have a webserver, so we comment this out.
+# DF_WEBSERVER_URL=http://localhost:3000
+
+# If you want to use a faucet, put url here
+DFDAO_WEBSERVER_URL=http://localhost:3003
+
+# If you want to use just the Twitter integration, add this:
+DF_TWITTER_URL=https://api.zkga.me

client/README.md

@@ -4,8 +4,8 @@
 
 ### Installing Core Dependencies
 
-- Node (v16.x)
-- Npm (v8+)
+- Node (v14.x OR v16.x)
+- Yarn (Javascript Package Manager)
 
 #### Installing The Correct Node Version Using NVM
 
@@ -18,13 +18,15 @@ nvm install
 
 After the installation is finished, you can run `node --version` to verify that you are running v14 or v16
 
-#### Installing Dependencies
+#### Installing Yarn
 
-After you have Node & Npm installed, run `npm ci` to install the dependencies:
+Refer to [Yarn's official documentation](https://classic.yarnpkg.com/en/docs/install) for the installation guide.
+
+After you have Yarn installed, run `yarn` to install the dependencies:
 
 ### Running the client
 
-To connecting to the mainnet client, simply run `npm start`. When asked you can use your whitelist key or import your mainnet burner secret and home coordinates.
+To connecting to the mainnet client, simply run `yarn start:prod`. When asked you can use your whitelist key or import your mainnet burner secret and home coordinates.
 
 ### Plugin development
 

client/embedded_plugins/Admin-Controls.ts

@@ -1,5 +1,5 @@
 // organize-imports-ignore
-import type { EthAddress, LocatablePlanet, LocationId, Planet } from '@dfdao/types';
+import type { EthAddress, LocatablePlanet, LocationId, Planet } from '@darkforest_eth/types';
 import {
   MAX_ARTIFACT_RARITY,
   MAX_SPACESHIP_TYPE,
@@ -9,14 +9,17 @@ import {
   MIN_BIOME,
   MAX_BIOME,
   //@ts-ignore
-} from 'https://cdn.skypack.dev/@dfdao/constants';
+} from 'https://cdn.skypack.dev/@darkforest_eth/constants';
+  //@ts-ignore
+import { modPBigInt } from 'https://cdn.skypack.dev/@darkforest_eth/hashing';
 //@ts-ignore
-import { getPlanetNameHash } from 'https://cdn.skypack.dev/@dfdao/procedural';
+import { getPlanetNameHash } from 'https://cdn.skypack.dev/@darkforest_eth/procedural';
 import {
   locationIdToDecStr,
+  artifactIdFromHexStr,
   locationIdFromDecStr,
   //@ts-ignore
-} from 'https://cdn.skypack.dev/@dfdao/serde';
+} from 'https://cdn.skypack.dev/@darkforest_eth/serde';
 import {
   ArtifactRarityNames,
   ArtifactType,
@@ -27,7 +30,7 @@ import {
   PlanetTypeNames,
   WorldCoords,
   //@ts-ignore
-} from 'https://cdn.skypack.dev/@dfdao/types';
+} from 'https://cdn.skypack.dev/@darkforest_eth/types';
 import {
   html,
   render,
@@ -79,6 +82,7 @@ async function createArtifact(
     methodName: 'adminGiveArtifact',
   });
   tx.confirmedPromise.then(() => {
+    df.hardRefreshArtifact(artifactIdFromHexStr(tokenId.slice(2)));
     df.hardRefreshPlanet(planet.locationId);
   });
 
@@ -198,42 +202,42 @@ async function addAddressToWhitelist(address: EthAddress) {
   return tx;
 }
 
-async function createPlanet(coords: WorldCoords, level: number, type: PlanetType) {
-  coords.x = Math.round(coords.x);
-  coords.y = Math.round(coords.y);
+async function createPlanet(
+  coords: WorldCoords,
+  level: number,
+  type: PlanetType,
+  isSpawnPlanet: boolean,
+  isTargetPlanet: boolean
+) {
+  coords.x = modPBigInt(Math.round(coords.x)).toString();
+  coords.y = modPBigInt(Math.round(coords.y)).toString();
 
   const location = df.locationBigIntFromCoords(coords).toString();
   const perlinValue = df.biomebasePerlin(coords, true);
 
   const args = Promise.resolve([
     {
+      location,
       x: coords.x,
       y: coords.y,
+      perlin: perlinValue,
       level,
       planetType: type,
       requireValidLocationId: false,
-      location: location,
-      perlin: perlinValue,
+      isTargetPlanet,
+      isSpawnPlanet,
+      blockedPlanetIds: [],
     },
   ]);
 
   const tx = await df.submitTransaction({
     args,
     contract: df.getContract(),
-    methodName: 'createPlanet',
+    methodName: 'createAndReveal',
   });
 
   await tx.confirmedPromise;
 
-  const revealArgs = df.getSnarkHelper().getRevealArgs(coords.x, coords.y);
-  const revealTx = await df.submitTransaction({
-    args: revealArgs,
-    contract: df.getContract(),
-    methodName: 'revealLocation',
-  });
-
-  await revealTx.confirmedPromise;
-
   await df.hardRefreshPlanet(locationIdFromDecStr(location));
 }
 
@@ -354,13 +358,15 @@ function PlanetCreator() {
   const [planetType, setPlanetType] = useState(PlanetType.PLANET);
   const [choosingLocation, setChoosingLocation] = useState(false);
   const [planetCoords, setPlanetCoords] = useState(null);
+  const [isSpawn, setIsSpawn] = useState(false);
+  const [isTarget, setIsTarget] = useState(false);
 
   const placePlanet = useCallback(
     (coords: WorldCoords) => {
-      createPlanet(coords, parseInt(level), planetType);
+      createPlanet(coords, parseInt(level), planetType, isSpawn, isTarget);
       setChoosingLocation(false);
     },
-    [level, planetType, setChoosingLocation]
+    [level, planetType, setChoosingLocation, isSpawn, isTarget]
   );
 
   const updatePlanetCoords = useCallback(
@@ -386,7 +392,7 @@ function PlanetCreator() {
 
   return html`
     <div style=${{ width: '100%' }}>
-      <h2>Create Planet</h2>
+      <${Heading} title="Create planet" />
       <div style=${rowStyle}>
         <df-slider
           label="Planet Level"
@@ -405,6 +411,24 @@ function PlanetCreator() {
         </div>
       </div>
       <div style=${{ ...rowStyle, justifyContent: 'space-between' }}>
+        <div style=${rowStyle}>
+          <input
+            type="checkbox"
+            id="spawn"
+            value=${isSpawn}
+            onChange=${() => setIsSpawn(!isSpawn)}
+          />
+          ${' Spawn Planet'}
+        </div>
+        <div style=${rowStyle}>
+          <input
+            type="checkbox"
+            id="target"
+            value=${isTarget}
+            onChange=${() => setIsTarget(!isTarget)}
+          />
+          ${' Target Planet'}
+        </div>
         ${!choosingLocation &&
         html`
           <df-button