Support local development with Controller

client/src/components/status-bar.tsx

@@ -65,7 +65,20 @@ export function StatusBar() {
     return { color: "bg-yellow-500", text: "Loading..." };
   };
 
-  // function to open the Controller Profile 
+  const getDeploymentType = () => {
+    switch (import.meta.env.VITE_PUBLIC_DEPLOY_TYPE) {
+      case "localhost":
+        return "Localhost";
+      case "mainnet":
+        return "Mainnet";
+      case "sepolia":
+        return "Sepolia";
+      default:
+        return "Sepolia";
+    }
+  };
+
+  // function to open the Controller Profile
   const handlePlayerReady = useCallback(() => {
     if (!connector || !('controller' in connector)) {
       console.error("Connector not initialized");
@@ -79,6 +92,7 @@ export function StatusBar() {
   }, [connector]);
 
   const playerStatus = getPlayerStatus();
+  const deploymentType = getDeploymentType();
 
   return (
     <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 mb-8">
@@ -107,7 +121,7 @@ export function StatusBar() {
               <Button
                 onClick={player ? handlePlayerReady : undefined}
                 className={`px-6 py-3 font-semibold transition-all duration-300 shadow-lg ${
-                  player 
+                  player
                     ? "bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 shadow-green-500/40 cursor-pointer hover:scale-105 active:scale-95"
                     : "bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 shadow-yellow-500/30 cursor-default"
                 }`}
@@ -158,7 +172,7 @@ export function StatusBar() {
           <div className="flex items-center gap-2 text-sm mb-1">
             <div className={`w-2 h-2 rounded-full animate-pulse ${playerStatus.color}`}></div>
             <span className="text-slate-300">
-              {playerStatus.text} • Sepolia
+              {playerStatus.text} • {deploymentType}
             </span>
           </div>
           <div className="text-xs text-slate-400">
@@ -199,4 +213,4 @@ export function StatusBar() {
       )}
     </div>
   )
-}
+}

client/src/config/cartridgeConnector.tsx

@@ -1,12 +1,46 @@
-
 import { Connector } from "@starknet-react/core";
 import { ControllerConnector } from "@cartridge/connector";
 import { ControllerOptions } from "@cartridge/controller";
 import { constants } from "starknet";
+import { manifest } from "./manifest";
 
 const { VITE_PUBLIC_DEPLOY_TYPE } = import.meta.env;
 
-const CONTRACT_ADDRESS_GAME = '0x31b119987eeb1a6c0d13b029ad9a3c64856369dcdfd6e69d9af4c9fba6f507f'
+console.log("VITE_PUBLIC_DEPLOY_TYPE", VITE_PUBLIC_DEPLOY_TYPE);
+
+const getRpcUrl = () => {
+  switch (VITE_PUBLIC_DEPLOY_TYPE) {
+    case "localhost":
+        return "http://localhost:5050"; // Katana localhost default port
+    case "mainnet":
+        return "https://api.cartridge.gg/x/starknet/mainnet";
+    case "sepolia":
+        return "https://api.cartridge.gg/x/starknet/sepolia";
+    default:
+        return "https://api.cartridge.gg/x/starknet/sepolia";
+  }
+};
+
+const getDefaultChainId = () => {
+  switch (VITE_PUBLIC_DEPLOY_TYPE) {
+    case "localhost":
+        return "0x4b4154414e41"; // KATANA in ASCII
+    case "mainnet":
+        return constants.StarknetChainId.SN_MAIN;
+    case "sepolia":
+        return constants.StarknetChainId.SN_SEPOLIA;
+    default:
+        return constants.StarknetChainId.SN_SEPOLIA;
+  }
+};
+
+const getGameContractAddress = () => {
+  return manifest.contracts[0].address;
+
+};
+
+const CONTRACT_ADDRESS_GAME = getGameContractAddress();
+console.log("Using game contract address:", CONTRACT_ADDRESS_GAME);
 
 const policies = {
   contracts: {
@@ -22,12 +56,8 @@ const policies = {
 }
 
 const options: ControllerOptions = {
-  chains: [
-    {
-      rpcUrl: "https://api.cartridge.gg/x/starknet/sepolia",
-    },
-  ],
-  defaultChainId: VITE_PUBLIC_DEPLOY_TYPE === 'mainnet' ?  constants.StarknetChainId.SN_MAIN : constants.StarknetChainId.SN_SEPOLIA,
+  chains: [{ rpcUrl: getRpcUrl() }],
+  defaultChainId: getDefaultChainId(),
   policies,
   namespace: "full_starter_react",
   slot: "full-starter-react",

client/src/config/manifest.ts

@@ -1,12 +1,14 @@
-import slot from "../config/manifest_sepolia.json"; // change for the right slot manifest
-import sepolia from "../config/manifest_sepolia.json"; // sepolia example manifest for this starter
-import mainnet from "../config/manifest_sepolia.json"; // change for the right mainnet manifest
+import localhost from "../../../contract/manifest_dev.json"; // local development manifest
+import sepolia from "./manifest_sepolia.json"; // sepolia manifest
+import mainnet from "./manifest_sepolia.json"; // change for the right mainnet manifest
+import slot from "./manifest_sepolia.json"; // change for the right slot manifest
 
 // Define valid deploy types
 type DeployType = keyof typeof manifests;
 
 // Create the manifests object
 const manifests = {
+  localhost,
   mainnet,
   sepolia,
   slot,
@@ -16,8 +18,8 @@ const manifests = {
 const deployType = import.meta.env.VITE_PUBLIC_DEPLOY_TYPE as string;
 
 // Export the appropriate manifest with a fallback
-export const manifest = deployType in manifests 
-  ? manifests[deployType as DeployType] 
+export const manifest = deployType in manifests
+  ? manifests[deployType as DeployType]
   : sepolia;
 
-export type Manifest = typeof manifest;
+export type Manifest = typeof manifest;

contract/README.md

@@ -68,6 +68,38 @@ pub enum Achievement {
 }
 ```
 
+## 🛠️ Local Development
+
+> The next three steps assume you are in the `contract/` directory.
+
+### 1️⃣ Start Katana (Local Blockchain)
+```bash
+katana --config katana.toml
+```
+
+### 2️⃣ Local Deployment
+```bash
+sozo build
+sozo migrate
+```
+
+### 3️⃣ Start Local Torii
+```bash
+torii --world <WORLD_ADDRESS> --http.cors_origins "*"
+```
+
+### 4️⃣ Configure the Client for local development
+
+In the `client/` directory, create an `.env.development.local` file with the following contents:
+
+```bash
+VITE_PUBLIC_DEPLOY_TYPE=localhost
+VITE_PUBLIC_NODE_URL=http://localhost:5050
+VITE_PUBLIC_TORII=http://localhost:8080
+```
+
+Now run `npm run dev:https` and you should be ready to go!
+
 ## 🚀 Deploy to Sepolia
 
 ### 1️⃣ Prepare Deploy Account
@@ -193,25 +225,6 @@ sozo test
 - **`test_rest_player()`**: Rest system
 - **`test_complete_game_flow()`**: Complete flow of the game
 
-## 🛠️ Local Development
-
-### 1️⃣ Start Katana (Local Blockchain)
-```bash
-katana --dev --dev.no-fee
-```
-
-### 2️⃣ Local Deployment
-```bash
-cd contract
-sozo build
-sozo migrate
-```
-
-### 3️⃣ Start Local Torii
-```bash
-torii --world <WORLD_ADDRESS> --http.cors_origins "*"
-```
-
 ## 📝 Configs
 
 ### Scarb.toml

contract/katana.toml

@@ -0,0 +1,10 @@
+[dev]
+dev = true
+no_fee = true
+
+[server]
+http_cors_origins = "*"
+
+[cartridge]
+controllers = true
+paymaster = true