3-players-and-movement-d2f150dddc908053.js

js mud.dev collected 2026-10-03 19:30:14 UTC 189,324 bytes, 1 lines download raw bytes

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[80],{62094:function(e,s,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/emojimon/3-players-and-movement",function(){return r(56842)}])},94094:function(e,s,r){"use strict";r.d(s,{C:function(){return t}});var o=r(39656),l=r(1220),n=r(38929),i=r.n(n);function t(e){let{children:s}=e,r=(0,l.useRef)(null),[n,t]=(0,l.useState)(!0);return(0,l.useEffect)(()=>{if(!r.current)return;let e=Array.from(r.current.querySelectorAll(".line")),s=[];e.forEach((e,r)=>{e.matches(".highlighted")&&s.push(r),/^\s+$/g.test(e.innerHTML)&&e.setAttribute("data-empty","")}),s.length&&e.forEach((e,r)=>{let o=s.reduce((e,s)=>Math.min(e,Math.abs(s-r)),1/0);e.setAttribute("data-highlight-distance",Math.min(o,4).toString())})},[n]),(0,o.jsx)("div",{ref:r,style:{marginTop:"1.5rem"},className:n?i().collapsed:i().expanded,onClick:e=>{e.target instanceof Element&&e.target.closest(".line")&&t(!n)},children:s})}},59440:function(e,s,r){"use strict";r.d(s,{Z:function(){return i}});var o=r(39656),l=r(83462);let n={logo:function(){return(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"0.25em",fontSize:"32px",fontFamily:"PP Supply Mono",textTransform:"uppercase"},children:[(0,o.jsx)("img",{src:"/images/logos/mud-white.svg",style:{height:"calc(var(--nextra-navbar-height) - 35px)"},alt:"MUD logo"}),"MUD"]})},useNextSeoProps(){let{asPath:e}=(0,l.useRouter)();return{titleTemplate:"/"===e?"MUD â a framework for ambitious Ethereum applications":"%s â MUD"}},project:{link:"https://github.com/latticexyz/mud"},docsRepositoryBase:"https://github.com/latticexyz/mud/tree/main/docs",head:(0,o.jsx)(o.Fragment,{children:(0,o.jsx)("meta",{property:"title",content:"MUD documentation"})}),darkMode:!1,nextThemes:{defaultTheme:"dark"},footer:{text:"MIT 2024 \xa9 MUD"},primaryHue:28,sidebar:{defaultMenuCollapseLevel:1}};var i=n},56842:function(e,s,r){"use strict";r.r(s);var o=r(39656),l=r(30472),n=r(15705),i=r(59440);r(37729);var t=r(97959);r(12164);var a=r(94094);let c={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,t.ah)(),e.components);return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(h,{...e})}):h(e)},pageOpts:{filePath:"pages/guides/emojimon/3-players-and-movement.mdx",route:"/guides/emojimon/3-players-and-movement",headings:[{depth:1,value:"Players and movement",id:"players-and-movement"},{depth:2,value:"Create the components as tables",id:"create-the-components-as-tables"},{depth:2,value:"Create the map system and its methods",id:"create-the-map-system-and-its-methods"},{depth:3,value:"spawn method",id:"spawn-method"},{depth:3,value:"move method",id:"move-method"},{depth:2,value:"Call the map system from the client",id:"call-the-map-system-from-the-client"},{depth:2,value:"Optimistic rendering",id:"optimistic-rendering"}],pageMap:[{kind:"Meta",data:{introduction:{title:"What is MUD?",theme:{breadcrumb:!1}},quickstart:{title:"Get started",theme:{breadcrumb:!1}},protocol:{title:"Protocol",type:"separator"},store:"Store",world:"World",framework:{title:"Framework",type:"separator"},config:"Config",cli:"CLI","state-query":"State Query",indexer:"Indexer","world-explorer":{title:"World Explorer",theme:{breadcrumb:!1}},"---":{title:"",type:"separator"},guides:"Guides",templates:"Templates","best-practices":"Best Practices",contribute:{title:"Contribute",theme:{breadcrumb:!1}},changelog:"Changelog",retrospectives:"Retrospectives",audits:"Audits",version:{title:"2.2.23",type:"menu",items:{changelog:{title:"Changelog",href:"/changelog"},contribute:{title:"Contribute",href:"/contribute"}}},community:{title:"Community",type:"page",href:"https://community.mud.dev",newWindow:!0},twitter:{title:"Twitter",type:"page",href:"https://twitter.com/latticexyz",newWindow:!0},discord:{title:"Discord",type:"page",href:"https://lattice.xyz/discord",newWindow:!0}}},{kind:"Folder",name:"audits",route:"/audits",children:[{kind:"MdxPage",name:"2024-02-11-open-zeppelin",route:"/audits/2024-02-11-open-zeppelin"},{kind:"Meta",data:{"2024-02-11-open-zeppelin":"2024-02-11 OpenZeppelin",pdf:{display:"hidden"},icons:{display:"hidden"}}}]},{kind:"Folder",name:"best-practices",route:"/best-practices",children:[{kind:"Meta",data:{"dividing-into-systems":"Dividing Code into Systems",system:"System Best Practices","deployment-settings":"Recommended Deployment Settings","aws-kms":"Deploy production worlds using AWS KMS"}}

1,{kind:"MdxPage",name:"aws-kms",route:"/best-practices/aws-kms"},{kind:"MdxPage",name:"deployment-settings",route:"/best-practices/deployment-settings"},{kind:"MdxPage",name:"dividing-into-systems",route:"/best-practices/dividing-into-systems"},{kind:"MdxPage",name:"system",route:"/best-practices/system"}]},{kind:"MdxPage",name:"changelog",route:"/changelog"},{kind:"Folder",name:"cli",route:"/cli",children:[{kind:"Meta",data:{tablegen:"mud tablegen",worldgen:"mud worldgen",test:"mud test",deploy:"mud deploy",verify:"mud verify","dev-contracts":"mud dev-contracts","abi-ts":"mud abi-ts","set-version":"mud set-version"}},{kind:"MdxPage",name:"abi-ts",route:"/cli/abi-ts"},{kind:"MdxPage",name:"deploy",route:"/cli/deploy"},{kind:"MdxPage",name:"dev-contracts",route:"/cli/dev-contracts"},{kind:"MdxPage",name:"set-version",route:"/cli/set-version"},{kind:"MdxPage",name:"tablegen",route:"/cli/tablegen"},{kind:"MdxPage",name:"test",route:"/cli/test"},{kind:"MdxPage",name:"verify",route:"/cli/verify"},{kind:"MdxPage",name:"worldgen",route:"/cli/worldgen"}]},{kind:"Folder",name:"config",route:"/config",children:[{kind:"MdxPage",name:"reference",route:"/config/reference"},{kind:"Meta",data:{reference:"Reference"}}]},{kind:"MdxPage",name:"config",route:"/config"},{kind:"MdxPage",name:"contribute",route:"/contribute"},{kind:"Folder",name:"guides",route:"/guides",children:[{kind:"Meta",data:{"hello-world":"Hello World","extending-a-world":"Extending a World","adding-delegation":"Adding Delegation",modules:"Writing MUD Modules",emojimon:"Emojimon",testing:"Testing","replicating-onchain-state":"Replicating onchain state"}},{kind:"MdxPage",name:"adding-delegation",route:"/guides/adding-delegation"},{kind:"Folder",name:"emojimon",route:"/guides/emojimon",children:[{kind:"MdxPage",name:"1-preface-the-ecs-model",route:"/guides/emojimon/1-preface-the-ecs-model"},{kind:"MdxPage",name:"2-getting-started",route:"/guides/emojimon/2-getting-started"},{kind:"MdxPage",name:"3-players-and-movement",route:"/guides/emojimon/3-players-and-movement"},{kind:"MdxPage",name:"4-map-and-terrain",route:"/guides/emojimon/4-map-and-terrain"},{kind:"MdxPage",name:"5-a-wild-emojimon-appears",route:"/guides/emojimon/5-a-wild-emojimon-appears"},{kind:"MdxPage",name:"6-advanced",route:"/guides/emojimon/6-advanced"},{kind:"Meta",data:{"1-preface-the-ecs-model":"Preface: the ECS model","2-getting-started":"Getting started","3-players-and-movement":"Players and movement","4-map-and-terrain":"Map and terrain","5-a-wild-emojimon-appears":"A wild Emojimon appears","6-advanced":"Advanced features"}}]},{kind:"MdxPage",name:"emojimon",route:"/guides/emojimon"},{kind:"MdxPage",name:"extending-a-world",route:"/guides/extending-a-world"},{kind:"Folder",name:"hello-world",route:"/guides/hello-world",children:[{kind:"Meta",data:{"add-table":"Add a table","filter-sync":"Filter data synchronization","add-system":"Add a system",deploy:"Deploy to a blockchain","add-chain-client":"Add chains to the client"}},{kind:"MdxPage",name:"add-chain-client",route:"/guides/hello-world/add-chain-client"},{kind:"MdxPage",name:"add-system",route:"/guides/hello-world/add-system"},{kind:"MdxPage",name:"add-table",route:"/guides/hello-world/add-table"},{kind:"MdxPage",name:"deploy",route:"/guides/hello-world/deploy"},{kind:"MdxPage",name:"filter-sync",route:"/guides/hello-world/filter-sync"}]},{kind:"MdxPage",name:"hello-world",route:"/guides/hello-world"},{kind:"MdxPage",name:"modules",route:"/guides/modules"},{kind:"MdxPage",name:"replicating-onchain-state",route:"/guides/replicating-onchain-state"},{kind:"MdxPage",name:"testing",route:"/guides/testing"}]},{kind:"Folder",name:"indexer",route:"/indexer",children:[{kind:"Meta",data:{using:"Using the Indexer",sqlite:"SQLite Indexer","postgres-event-only":"PostgreSQL for events","postgres-decoded":"PostgreSQL for data (and events)",sql:"SQL API (Experimental)"}},{kind:"MdxPage",name:"postgres-decoded",route:"/indexer/postgres-decoded"},{kind:"MdxPage",name:"postgres-event-only",route:"/indexer/postgres-event-only"},{kind:"MdxPage",name:"sql",route:"/indexer/sql"},{kind:"MdxPage",name:"sqlite",route:"/indexer/sqlite"},{kind:"MdxPage",name:"using",route:"/indexer/using"}]},{kind:"MdxPage",name:"indexer",route:"/indexer"},{kind:"MdxPage",name:"introduction",route:"/introduction"},{kind:"MdxPage",name:"quickstart",route:"/quickstart"},{kind:"Folder",name:"retrospectives",route:"/retrospectives",children:[{kind:"MdxPage",name:"2023-09-12-register-system-vulnerability",route:"/retrospectives/2023-09-12-register-system-vulnerability"},{kind:"MdxPage",name:"2024-04-17-storeread-getdynamicfieldlength-bug",route:"/retrospectives/2024-04-17-storeread-getdynamicfieldlength-bug"},{kind:"Meta",data:{"2024-04-17-storeread-getdynamicfieldlength-bug":"2024-04-17 StoreRead.getDynamicFieldLength bug","2023-09-12-register-system-vulnerability":"2023-09-12 registerSystem vulnerability"}}]},{kind:"Folder",name:"state-query",route:"/state-query",children:[{kind:"Meta",data:{typescript:"TypeScript"}},{kind:"Folder",name:"typescript",route:"/state-query/typescript",children:[{kind:"Meta",data:{recs:"RECS",zustand:"Zustand"}},{kind:"MdxPage",name:"recs",route:"/state-query/typescript/recs"},{kind:"MdxPage",name:"zustand",route:"/state-query/typescript/zustand"}]}]},{kind:"Folder",name:"store",route:"/store",children:[{kind:"Meta",data:{introduction:"Introduction","data-model":"Data model",tables:"Tables","table-libraries":"Table libraries",encoding:"Encoding","store-hooks":"Store hooks",reference:"Reference"}},{kind:"MdxPage",name:"data-model",route:"/store/data-model"},{kind:"MdxPage",name:"encoding",route:"/store/encoding"},{kind:"MdxPage",name:"introduction",route:"/store/introduction"},{kind:"Folder",name:"reference",route:"/store/reference",children:[{kind:"Meta",data:{"store-core":"StoreCore (internal)",store:"IStore (external)","store-hook":"StoreHook",misc:"Miscellaneous"}},{kind:"MdxPage",name:"misc",route:"/store/reference/misc"},{kind:"MdxPage",name:"store-core",route:"/store/reference/store-core"},{kind:"MdxPage",name:"store-hook",route:"/store/reference/store-hook"},{kind:"MdxPage",name:"store",route:"/store/reference/store"}]},{kind:"MdxPage",name:"store-hooks",route:"/store/store-hooks"},{kind:"MdxPage",name:"table-libraries",route:"/store/table-libraries"},{kind:"MdxPage",name:"tables",route:"/store/tables"}]},{kind:"Folder",name:"templates",route:"/templates",children:[{kind:"Meta",data:{typescript:"TypeScript",godot:"Godot",pwa:"Progressive Web App (for mobile)",

1swift:"Swift",svelte:"Svelte",unity:"Unity",nethereum:"Nethereum"}},{kind:"MdxPage",name:"godot",route:"/templates/godot"},{kind:"MdxPage",name:"nethereum",route:"/templates/nethereum"},{kind:"MdxPage",name:"pwa",route:"/templates/pwa"},{kind:"MdxPage",name:"svelte",route:"/templates/svelte"},{kind:"MdxPage",name:"swift",route:"/templates/swift"},{kind:"Folder",name:"typescript",route:"/templates/typescript",children:[{kind:"Meta",data:{contracts:"Contracts",vanilla:"Vanilla","react-ecs":"React-ECS",threejs:"Three.js",vue:"Vue"}},{kind:"MdxPage",name:"contracts",route:"/templates/typescript/contracts"},{kind:"MdxPage",name:"react-ecs",route:"/templates/typescript/react-ecs"},{kind:"MdxPage",name:"threejs",route:"/templates/typescript/threejs"},{kind:"MdxPage",name:"vanilla",route:"/templates/typescript/vanilla"},{kind:"MdxPage",name:"vue",route:"/templates/typescript/vue"}]},{kind:"MdxPage",name:"unity",route:"/templates/unity"}]},{kind:"MdxPage",name:"templates",route:"/templates"},{kind:"Folder",name:"world",route:"/world",children:[{kind:"Meta",data:{introduction:"Introduction","resource-ids":"Resource Identifiers","namespaces-access-control":"Namespaces & Access Control",tables:"Tables",systems:"Systems","system-hooks":"System Hooks","function-selectors":"Function Selectors",balance:"Balance","account-delegation":"Account Delegation","batch-calls":"Batch Calls",upgrades:"Upgrading",modules:"Modules",reference:"Reference"}},{kind:"MdxPage",name:"account-delegation",route:"/world/account-delegation"},{kind:"MdxPage",name:"balance",route:"/world/balance"},{kind:"MdxPage",name:"batch-calls",route:"/world/batch-calls"},{kind:"MdxPage",name:"function-selectors",route:"/world/function-selectors"},{kind:"MdxPage",name:"introduction",route:"/world/introduction"},{kind:"Folder",name:"modules",route:"/world/modules",children:[{kind:"Meta",data:{keyswithvalue:"Keys with Value",keysintable:"Keys in Table",erc20:"ERC-20 tokens",erc721:"ERC-721 (NFT)"}},{kind:"MdxPage",name:"erc20",route:"/world/modules/erc20"},{kind:"MdxPage",name:"erc721",route:"/world/modules/erc721"},{kind:"MdxPage",name:"keysintable",route:"/world/modules/keysintable"},{kind:"MdxPage",name:"keyswithvalue",route:"/world/modules/keyswithvalue"}]},{kind:"MdxPage",name:"modules",route:"/world/modules"},{kind:"MdxPage",name:"namespaces-access-control",route:"/world/namespaces-access-control"},{kind:"Folder",name:"reference",route:"/world/reference",children:[{kind:"Meta",data:{"delegation-external":"Delegation (interface)",module:"Modules","module-external":"Modules (interface)",system:"Systems","system-external":"Systems (interface)",world:"World","world-external":"World (interfaces)","world-context":"World context","world-context-external":"World context (interface)","resource-ids":"Resource IDs",misc:"Miscellaneous",internal:"Internals"}},{kind:"MdxPage",name:"delegation-external",route:"/world/reference/delegation-external"},{kind:"Folder",name:"internal",route:"/world/reference/internal",children:[{kind:"Meta",data:{"access-control":"Access Control",create:"Create2",delegation:"Delegation",erc165:"ERC165","erc165-external":"ERC165 (interface)","init-module":"Init Module","init-module-implementation":"Init Module Implementation",systemcall:"SystemCall"}},{kind:"MdxPage",name:"access-control",route:"/world/reference/internal/access-control"},{kind:"MdxPage",name:"create",route:"/world/reference/internal/create"},{kind:"MdxPage",name:"delegation",route:"/world/reference/internal/delegation"},{kind:"MdxPage",name:"erc165-external",route:"/world/reference/internal/erc165-external"},{kind:"MdxPage",name:"erc165",route:"/world/reference/internal/erc165"},{kind:"MdxPage",name:"init-module-implementation",route:"/world/reference/internal/init-module-implementation"},{kind:"MdxPage",name:"init-module",route:"/world/reference/internal/init-module"},{kind:"MdxPage",name:"systemcall",route:"/world/reference/internal/systemcall"}]},{kind:"MdxPage",name:"misc",route:"/world/reference/misc"},{kind:"MdxPage",name:"module-external",route:"/world/reference/module-external"},{kind:"MdxPage",name:"module",route:"/world/reference/module"},{kind:"MdxPage",name:"resource-ids",route:"/world/reference/resource-ids"},{kind:"MdxPage",name:"system-external",route:"/world/reference/system-external"},{kind:"MdxPage",name:"system",route:"/world/reference/system"},{kind:"MdxPage",name:"world-context-external",route:"/world/reference/world-context-external"},{kind:"MdxPage",name:"world-context",route:"/world/reference/world-context"},{kind:"MdxPage",name:"world-external",route:"/world/reference/world-external"},{kind:"MdxPage",name:"world",route:"/world/reference/world"}]},{kind:"MdxPage",name:"resource-ids",route:"/world/resource-ids"},{kind:"MdxPage",name:"system-hooks",route:"/world/system-hooks"},{kind:"MdxPage",name:"systems",route:"/world/systems"},{kind:"MdxPage",name:"tables",route:"/world/tables"},{kind:"MdxPage",name:"upgrades",route:"/world/upgrades"}]},{kind:"MdxPage",name:"world-explorer",route:"/world-explorer"}],flexsearch:{codeblocks:!0},title:"Players and movement"},pageNextRoute:"/guides/emojimon/3-players-and-movement",nextraLayout:n.ZP,themeConfig:i.Z};function h(e){let s=Object.assign({h1:"h1",p:"p",ul:"ul",li:"li",code:"code",h2:"h2",pre:"pre",span:"span",details:"details",summary:"summary",h3:"h3",a:"a"},(0,t.ah)(),e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.h1,{children:"Players and movement"}),"\n",(0,o.jsx)(s.p,{children:"In this section, we will accomplish the following:"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["Spawn in each unique wallet address as an entity with the ",(0,o.jsx)(s.code,{children:"Player"}),", ",(0,o.jsx)(s.code,{children:"Movable"}),", and ",(0,o.jsx)(s.code,{children:"Position"})," components."]}),"\n",(0,o.jsxs)(s.li,{children:["Operate on a player's ",(0,o.jsx)(s.code,{children:"Position"})," component with a system to create movement."]}),"\n",(0,o.jsx)(s.li,{children:"Optimistically render player movement in the client."}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"create-the-components-as-tables",children:"Create the components as tables"}),"\n",(0,o.jsxs)(s.p,{children:["To create tables in MUD we are going to edit the ",(0,o.jsx)(s.code,{children:"mud.config.ts"})," file.\nYou can define tables, their types, their schemas, and other types of information here.\nMUD then autogenerates all of the files needed to make sure your app knows these tables exist."]}),"\n",(0,o.jsx)(s.p,{children:"We're going to start by defining three new tables:"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"Player"})," to determine which entities are players (e.g. distinct wallet addresses)."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"Movable"})," to determine whether or not an entity can move."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"Position"})," to determine which position an entity is located on a 2D grid."]}),"\n"]}),"\n",(0,o.jsx)(s.p,{children:"The syntax is as follows:"}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"tsx","data-theme":"default",filename:"packages/contract/mud.config.ts",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { defineWorld } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"defineWorld"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  enums"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"North"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"}

1,children:'"East"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"South"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"West"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  tables"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Movable"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bool"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bool"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      schema"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        id"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bytes32"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"int32"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        y"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"int32"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      key"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"id"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      codegen"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        dataStruct"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})})}),"\n",(0,o.jsxs)(s.details,{children:[(0,o.jsx)(s.summary,{children:"Explanation"}),(0,o.jsxs)(s.p,{children:["For ",(0,o.jsx)(s.code,{children:"Movable"})," and ",(0,o.jsx)(s.code,{children:"Player"}),' tables, we use the "shorthand" table definition that just specifies a single value type. In these cases, MUD defaults the ',(0,o.jsx)(s.code,{children:"schema"})," to an ",(0,o.jsx)(s.code,{children:"id"})," key of ",(0,o.jsx)(s.code,{children:"bytes32"})," and uses the specified type for the ",(0,o.jsx)(s.code,{children:"value"})," field.\nThe ",(0,o.jsx)(s.code,{children:"id"})," key in these cases is the entity ID for the entities being described.\nIn Solidity and the EVM, there is no distinction between an unset variable and zero/false.\nSo by default entites are neither ",(0,o.jsx)(s.code,{children:"Movable"})," nor a ",(0,o.jsx)(s.code,{children:"Player"}),"."]}),(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.code,{children:"Position"})," table defines the full schema with an ",(0,o.jsx)(s.code,{children:"id"})," key to match our other tables as well as ",(0,o.jsx)(s.code,{children:"x"})," and ",(0,o.jsx)(s.code,{children:"y"}),' coordinate fields. For better ergonomics, we turn off the "data struct" codegen option so our table library methods return an ',(0,o.jsx)(s.code,{children:"(x, y)"})," tuple instead of a struct."]})]}),"\n",(0,o.jsxs)(s.p,{children:["If after modifying the file you get an error on the ",(0,o.jsx)(s.code,{children:"pnpm dev"})," process, restarting it should resolve the issue."]}),"\n",(0,o.jsx)(s.h2,{id:"create-the-map-system-and-its-methods",children:"Create the map system and its methods"}),"\n",(0,o.jsxs)(s.p,{children:["In MUD, a system can have an arbitrary number of methods inside of it.\nSince we will be moving players around on a 2D map, we start the codebase off by creating a system that will encompass all of the methods related to the map: ",(0,o.jsx)(s.code,{children:"MapSystem.sol"})," in ",(0,o.jsx)(s.code,{children:"packages/contracts/src/systems"}),"."]}),"\n",(0,o.jsxs)(s.h3,{id:"spawn-method",children:[(0,o.jsx)(s.code,{children:"spawn"})," method"]}),"\n",(0,o.jsx)(s.p,{children:"Before we add in the functionality of users moving we need to make sure each user is being properly identified as a player with the position and movable table. The former gives us a means of operating on it to create movement, and the latter allows us to grant the entity permission to use the move system."}),"\n",(0,o.jsxs)(s.p,{children:["To solve for these problems we can add the ",(0,o.jsx)(s.code,{children:"spawn"})," method, which will assign the ",(0,o.jsx)(s.code,{children:"Player"}),", ",(0,o.jsx)(s.code,{children:"Position"}),", and ",(0,o.jsx)(s.code,{children:"Movable"})," tables we created earlier, inside of ",(0,o.jsx)(s.code,{children:"MapSystem.sol"}),"."]}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",filename:"packages/contract/src/systems/MapSystem.sol",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"solidity","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// SPDX-License-Identifier: MIT"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pragma"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"solidity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >=0.8.24;"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/System.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Movable"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../addressToEntityKey.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MapSystem"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"bytes32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" player "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"address"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"_msgSender"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"()));"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"Player."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"already spawned"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Player."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Position."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Movable."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(s.details,{children:[(0,o.jsx)(s.summary,{children:"Explanation"}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Movable"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),(0,o.jsx)(s.p,{children:"Import the components we use from the automatically generated table list."}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../addressToEntityKey.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"https://github.com/latticexyz/emojimon/blob/main/packages/contracts/src/addressToEntityKey.sol",children:"This function"}

1)," converts an address, use as the player's, to a ",(0,o.jsx)(s.code,{children:"bytes32"})," value that can identify an entity."]}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]})})}),(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.code,{children:"spawn"})," function spawns a new player entity on the map."]}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"bytes32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" player "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"address"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"_msgSender"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"()));"})]})})}),(0,o.jsxs)(s.p,{children:["In certain cases systems are called by ",(0,o.jsxs)(s.a,{href:"/world",children:["a MUD ",(0,o.jsx)(s.code,{children:"World"})]})," using the call opcode.\nIn that case, ",(0,o.jsx)(s.code,{children:"msg.sender"})," is the ",(0,o.jsx)(s.code,{children:"World"})," that called the system, not the actual player.\n",(0,o.jsx)(s.code,{children:"_msgSender()"})," takes care of this and gives us the real user identity, the one who called the ",(0,o.jsx)(s.code,{children:"World"}),"."]}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"Player."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"already spawned"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})})}),(0,o.jsxs)(s.p,{children:["To get a component value we use ",(0,o.jsx)(s.code,{children:"<Component name>.get(<entity>)"}),"."]}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Player."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Position."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Movable."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})})]})}),(0,o.jsxs)(s.p,{children:["To set a component value we use ",(0,o.jsx)(s.code,{children:"<Component name>.set(<entity>, <value>)"}),"."]})]}),"\n",(0,o.jsx)(s.p,{children:"As you see, writing systems and their methods in MUD is similar to writing regular smart contracts. The key difference is that their state is defined and stored in tables rather than

1in the system contract itself."}),"\n",(0,o.jsxs)(s.h3,{id:"move-method",children:[(0,o.jsx)(s.code,{children:"move"})," method"]}),"\n",(0,o.jsxs)(s.p,{children:["Next weâll add the ",(0,o.jsx)(s.code,{children:"move"})," method to ",(0,o.jsx)(s.code,{children:"MapSystem.sol"}),".\nThis will allow us to move users (e.g. the user's wallet address as their entityID) by updating their ",(0,o.jsx)(s.code,{children:"Position"})," table."]}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",filename:"packages/contract/src/systems/MapSystem.sol",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"solidity","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// SPDX-License-Identifier: MIT"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pragma"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"solidity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >=0.8.24;"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/System.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Movable"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/common.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../addressToEntityKey.sol"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MapSystem"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"bytes32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" player "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"address"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"_msgSender"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"()));"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"Player."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"already spawned"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Player."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Position."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Movable."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" direction) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"bytes32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" player "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"addressToEntityKey"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"_msgSender"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"());"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Movable."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cannot move"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Position."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.North) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.East) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.South) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.West) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Position."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y);"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(s.details,{children:[(0,o.jsx)(s.summary,{children:"Explanation"}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" direction) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]})})}),(0,o.jsx)(s.p,{children:"We pass in the direction to move and mutate the onchain player position based on that direction."}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"(Movable."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cannot move"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})})}),(0,o.jsx)(s.p,{children:"Make sure the entity (the player, in this case) can move."}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"int32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Position."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(player);"})]})})}),(0,o.jsx)(s.p,{children:"Load the player's current onchain position."}),(0,o.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.North) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.East) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.South) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Direction.West) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})})]})}),(0,o.jsxs)(s.p,{children:["Mutate the position according to the direction. You may notice that the Y coordinates are in reverse of what you might expect. We do this for ease of rendering in the browser, where the origin (",(0,o.jsx)(s.code,{children:"0,0"}),") is at the top-left corner of the screen (rather than bottom left)."]})]}),"\n",(0,o.jsx)(s.p,{children:"This method will allow users to interact with a smart contract, auto-generated by MUD, to update their position.\nHowever, we are not yet able to visualize this on the client, so let's add that to make it feel more real."}),"\n",(0,o.jsx)(s.h2,{id:"call-the-map-system-from-the-client",children:"Call the map system from the client"}),"\n",(0,o.jsxs)(s.p,{children:["Weâll fill in the ",(0,o.jsx)(s.code,{children:"move"})," and ",(0,o.jsx)(s.code,{children:"spawn"})," methods in our clientâs ",(0,o.jsx)(s.code,{children:"createSystemCalls.ts"}),"."]}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"tsx","data-theme":"default",filename:"packages/client/src/mud/createSystemCalls.ts",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { Has"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" HasValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" getComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" runQuery } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/recs"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { uuid } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/utils"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:" { ClientComponents } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./createClientComponents"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { SetupNetworkResult } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./setupNetwork"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SystemCalls"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReturnType"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"typeof"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" createSystemCalls>;"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createSystemCalls"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" waitForTransaction }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SetupNetworkResult"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Position }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ClientComponents"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"playerEntity) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"no player"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"position) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".warn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cannot move without a player position, not yet spawned?"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([direction]);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"playerEntity) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"no player"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"canSpawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity)?.value "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"canSpawn) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-co

1lor-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"already spawned"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y]);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"throwBall"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// TODO"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"fleeEncounter"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// TODO"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    throwBall"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    fleeEncounter"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(s.details,{children:[(0,o.jsx)(s.summary,{children:"Explanation"}),(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createSystemCalls"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" waitForTransaction }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"}

1,children:"SetupNetworkResult"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})]})}),(0,o.jsxs)(s.p,{children:["From the network setup we get the user identity (",(0,o.jsx)(s.code,{children:"playerEntity"}),"), the address of the ",(0,o.jsx)(s.code,{children:"World"})," we use, and the function to wait for a transaction to be included."]}),(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Position }: ClientComponents"})]})})}),(0,o.jsxs)(s.p,{children:["The client code that uses the system calls needs the ",(0,o.jsx)(s.code,{children:"Player"})," and ",(0,o.jsx)(s.code,{children:"Position"})," components, as you'll see below."]}),(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]})})}),(0,o.jsx)(s.p,{children:"This function moves the player in a specific direction."}),(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"playerEntity) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"no player"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"playerPosition"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"playerPosition) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".warn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cannot move without a player position, not yet spawned?"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,o.jsx)(s.p,{children:"If there is no player, or no player position, we can't move.\nCurrently there is no way to spawn a player without setting a position, so this check is redundant - but we may introduce a spawn method in the future that is positionless, in which case we'll need it."}),(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([direction]);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]})]})}),(0,o.jsxs)(s.p,{children:["This (",(0,o.jsx)(s.code,{children:"worldContract.write.<method>"}

1),") is the way we call a method on a system at the root namespace."]}),(0,o.jsx)(s.pre,{"data-language":"ts","data-theme":"default",children:(0,o.jsx)(s.code,{"data-language":"ts","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]})})}),(0,o.jsxs)(s.p,{children:["Spawn a new player.\nIt is very similar to ",(0,o.jsx)(s.code,{children:"move"})," above."]})]}),"\n",(0,o.jsxs)(s.p,{children:["Now we can apply all of these backend changes to the client by updating ",(0,o.jsx)(s.code,{children:"GameBoard.tsx"})," to spawn the player when a map tile is clicked, show the player on the map, and move the player with the keyboard."]}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"tsx","data-theme":"default",filename:"packages/client/src/GameBoard.tsx",hasCopyCode:!0,children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { useComponentValue } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/react"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { GameMap } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./GameMap"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { useMUD } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./MUDContext"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { useKeyboardMovement } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./useKeyboardMovement"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"GameBoard"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"useKeyboardMovement"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"();"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    components: { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    network: { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    systemCalls: { "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"useMUD"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"canSpawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"useComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity)?.value "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"playerPosition"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"useComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    playerEntity "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerPosition"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"          x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"playerPosition"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"          y"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"playerPosition"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".y"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"          emoji"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"\uD83E\uDD20"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"          entity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        }"})}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" <"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"GameMap"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"width"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"20"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"height"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"20"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"onTileClick"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{canSpawn "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" spawn "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"undefined"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"players"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{player "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" [player] "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" []} />;"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})})}),"\n",(0,o.jsx)(s.h2,{id:"optimistic-rendering",children:"Optimistic rendering"}),"\n",(0,o.jsx)(s.p,{children:"Our player movement renders very slowly, because it waits for the onchain state to be updated, those updates propagate to our client, and then the map and player position updates accordingly. We can make this feel near-instant b

1y adding optimistic rendering."}),"\n",(0,o.jsxs)(s.p,{children:["First, we'll make our ",(0,o.jsx)(s.code,{children:"Player"})," and ",(0,o.jsx)(s.code,{children:"Position"})," components overridable."]}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",filename:"packages/client/src/mud/createClientComponents.ts",children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"typescript","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { overridableComponent } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/recs"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { SetupNetworkResult } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./setupNetwork"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ClientComponents"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReturnType"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"typeof"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" createClientComponents>;"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createClientComponents"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({ components }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SetupNetworkResult"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"components"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"overridableComponent"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".Player)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"overridableComponent"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".Position)"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(s.p,{children:['This lets us "overlay" values while our ',(0,o.jsx)(s.code,{children:"spawn"})," and ",(0,o.jsx)(s.code,{children:"move"})," transactions are pending, which we'll add next."]}),"\n",(0,o.jsx)(a.C,{children:(0,o.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",filename:"packages/client/src/mud/createSystemCalls.ts",children:(0,o.jsxs)(s.code,{"data-line-numbers":"","data-language":"typescript","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { getComponentValue } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/recs"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { singletonEntity } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store-sync/recs"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { uuid } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/utils"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:" { ClientComponents } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./createClientComponents"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { SetupNetworkResult } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./setupNetwork"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { Direction } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../direction"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SystemCalls"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReturnType"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"typeof"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" createSystemCalls>;"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createSystemCalls"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" waitForTransaction }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SetupNetworkResult"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Position }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ClientComponents"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"playerEntity) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"no player"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"position) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".warn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cannot move without a player position, not yet spawned?"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" position;"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".North) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".East) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".South) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".West) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"positionId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"uuid"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"();"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".addOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(positionId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      entity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      value"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    });"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"try"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([direction]);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"finally"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".removeOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(positionId);"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"number"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"playerEntity) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"no player"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"canSpawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity)?.value "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"canSpawn) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Error"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"already spawned"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"positionId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"uuid"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"}

1,children:"();"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".addOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(positionId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      entity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      value"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    });"})}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"playerId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"uuid"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".addOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(playerId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      entity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      value"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { value"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    });"})}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"try"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y]);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"finally"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".removeOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(positionId);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line highlighted",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Player"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".removeOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(playerId);"})]}),"\n",(0,o.jsx)(s.span,{className:"line highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"throwBall"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// TODO"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"fleeEncounter"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// TODO"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"null"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:" "}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    spawn"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    throwBall"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    fleeEncounter"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n",(0,o.jsxs)(s.details,{children:[(0,o.jsx)(s.summary,{children:"Explanation"}),(0,o.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y } "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" position;"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".North) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".East) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{

1style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".South) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  y "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"else"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (direction "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Direction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".West) {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  x "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,o.jsx)(s.p,{children:"Mutate the position in the same way we do onchain. In the future, MUD will be able to better simulate contract calls in the client to avoid duplicating logic like this."}),(0,o.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"positionId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"uuid"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".addOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(positionId"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  entity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" playerEntity"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  value"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { x"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" y }"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),(0,o.jsxs)(s.p,{children:["Add a component value override for the player ",(0,o.jsx)(s.code,{children:"Position"}),". We need to provide the override a unique ID so that we can later remove the value by this ID."]}),(0,o.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,o.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"try"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".move"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"([direction]);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"finally"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Position"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".removeOverride"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(positionId);"})]}),"\n",(0,o.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,o.jsxs)(s.p,{children:["Wrap our ",(0,o.jsx)(s.code,{children:"move"})," contract call in a ",(0,o.jsx)(s.code,{children:"try"}),"/",(0,o.jsx)(s.code,{children:"catch"})," block and then, if the transaction call completes or fails for any reason, remove the override."]}),(0,o.jsxs)(s.p,{children:["For ",(0,o.jsx)(s.code,{children:"spawn"}),", we do a similar approach, except we need to add overrides for both the ",(0,o.jsx)(s.code,{children:"Player"})," and ",(0,o.jsx)(s.code,{children:"Position"})," component values, to mirror what happens onchain."]})]}),"\n",(0,o.jsx)(s.p,{children:"You can run this command to update all the files to this point in the game's development."}),"\n",(0,o.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,o.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"git"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"reset"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--hard"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"origin/step-1"})]})})}),"\n",(0,o.jsx)(s.p,{children:"Now that we have players, movement, and a basic map, let's start making improvements to the map itself."})]})}s.default=(0,l.j)(c)},38929:function(e){e.exports={collapsed:"CollapseCode_collapsed__D1CXB",expanded:"CollapseCode_expanded__x1xKU"}}},function(e){e.O(0,[6873,2888,179],function(){return e(e.s=62094)}),_N_E=e.O()}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.