(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[80],{5834:function(e,s,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/emojimon/3-players-and-movement",function(){return l(4851)}])},8986:function(e,s,l){"use strict";l.d(s,{C:function(){return t}});var o=l(7505),r=l(7765),n=l(4737),i=l.n(n);function t(e){let{children:s}=e,l=(0,r.useRef)(null),[n,t]=(0,r.useState)(!0);return(0,r.useEffect)(()=>{if(!l.current)return;let e=Array.from(l.current.querySelectorAll(".line")),s=[];e.forEach((e,l)=>{e.matches(".highlighted")&&s.push(l),/^\s+$/g.test(e.innerHTML)&&e.setAttribute("data-empty","")}),s.length&&e.forEach((e,l)=>{let o=s.reduce((e,s)=>Math.min(e,Math.abs(s-l)),1/0);e.setAttribute("data-highlight-distance",Math.min(o,4).toString())})},[n]),(0,o.jsx)("div",{ref:l,style:{marginTop:"1.5rem"},className:n?i().collapsed:i().expanded,onClick:e=>{e.target instanceof Element&&e.target.closest(".line")&&t(!n)},children:s})}},3307:function(e,s,l){"use strict";l.d(s,{Z:function(){return i}});var o=l(7505),r=l(1689);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,r.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 2023 \xa9 MUD"},primaryHue:28,sidebar:{defaultMenuCollapseLevel:1}};var i=n},4851:function(e,s,l){"use strict";l.r(s);var o=l(7505),r=l(2585),n=l(6252),i=l(3307);l(4693);var t=l(6736);l(8823);var a=l(8986);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:"moveBy method",id:"moveby-method"},{depth:2,value:"Modify the user interface to call the map system",id:"modify-the-user-interface-to-call-the-map-system"}],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",services:"Services","---":{title:"",type:"separator"},guides:"Guides",templates:"Templates",contribute:{title:"Contribute",theme:{breadcrumb:!1}},changelog:"Changelog",retrospectives:"Retrospectives",version:{title:"2.0.0-next.17",type:"menu",items:{changelog:{title:"Changelog",href:"/changelog"},contribute:{title:"Contribute",href:"/contribute"}}},status:{title:"Status",type:"page",href:"https://status.mud.dev",newWindow:!0},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:"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","dev-contracts":"mud dev-contracts","abi-ts":"mud abi-ts",faucet:"mud faucet","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:"faucet",route:"/cli/faucet"},{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:"worldgen",route:"/cli/worldgen"}]},{kind:"MdxPage",name:"config",route:"/config"},{kind:"MdxPage",name:"contribute",route:"/contribute"},{kind:"Folder",name:"guides",route:"/guides",children:[{kind:"Meta",data:{"replicating-onchain-state":"Replicating onchain state","hello-world":"Hello World","extending-a-world":"Extending a World",emojimon:"Emojimon"}},{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:{title:"Deploy to a blockchain",href:"/cli/deploy"}}},{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:"filter-sync",route:"/guides/hello-world/filter-sync"}]},{kind:"MdxPage",name:"hello-world",route:"/guides/hello-world"},{kind:"MdxPage",name:"replicating-onchain-state",route:"/guides/replicating-onchain-state"}]},{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:"Meta",data:{"2023-09-12-register-system-vulnerability":"2023-09-12 registerSystem vulnerability"}}]},{kind:"Folder",name:"services",route:"/services",children:[{kind:"Meta",data:{indexer:"Indexer",faucet:"Faucet"}},{kind:"MdxPage",name:"faucet",route:"/services/faucet"},{kind:"MdxPage",name:"indexer",route:"/services/indexer"}]},{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)",swift:"Swift",svelte:"Svelte",unity:"Unity",disclaimer:{display:"hidden",title:"Disclaimer"}}},{kind:"MdxPage",name:"disclaimer",route:"/templates/disclaimer"},{kind:"MdxPage",name:"godot",route:"/templates/godot"},{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:{"getting-started":"Getting Started",contracts:"Contracts",vanilla:"Vanilla","react-ecs":"React-ECS",three:"Three.js"}},{kind:"MdxPage",name:"contracts",route:"/templates/typescript/contracts"},{kind:"MdxPage",name:"getting-started",route:"/templates/typescript/getting-started"},{kind:"MdxPage",name:"react-ecs",route:"/templates/typescript/react-ecs"},{kind:"MdxPage",name:"three",route:"/templates/typescript/three"},{kind:"MdxPage",name:"vanilla",route:"/templates/typescript/vanilla"}]},{kind:"MdxPage",name:"unity",route:"/templates/unity"}]},{kind:"Folder",name:"world",route:"/world",children:[{kind:"Meta",data:{introduction:"Introduction","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",modules:"Modules",reference:"Reference","world-table-illustration":{display:"hidden",title:"World Table Illustration"}}},{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"}},{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:"system-hooks",route:"/world/system-hooks"},{kind:"MdxPage",name:"systems",route:"/world/systems"},{kind:"MdxPage",name:"tables",route:"/world/tables"},{kind:"MdxPage",name:"world-table-illustration",route:"/world/world-table-illustration"}]}],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: 'bool'"})," - determine which entities are players (e.g. distinct wallet addresses)."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"Movable: 'bool'"})," - determine whether or not an entity can move."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:"Position: { valueSchema: { x: 'uint32', y: 'uint32' } }"})," - 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:" { mudConfig } "}),(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/register"'}),(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:"mudConfig"}),(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:"    "}),(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-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:"      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:"      valueSchema"}),(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-string-expression)"},children:'"uint32"'}),(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:'"uint32"'}),(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.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-color-text)"},children:"    Movable"}),(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:'"bool"'}),(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:" "}),(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:","})]})]})}),(0,o.jsxs)(s.p,{children:["When we do not specify a key schema for a table, MUD uses the default, a ",(0,o.jsx)(s.code,{children:"bytes32"})," value.\nThe key in these cases is the entity ID for the entities being described.\nAs in most cases in the Ethereum ecosystem, there is no distinction between zero (or in the case of boolean values, ",(0,o.jsx)(s.code,{children:"false"}),") and nothing.\nSo by default entites are neither ",(0,o.jsx)(s.code,{children:"Movable"})," nor a ",(0,o.jsx)(s.code,{children:"Player"}),"."]}),(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-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:" {"})]}),"\n",(0,o.jsxs)(s.span,{className:"line",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      dataStruct"}),(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:"false"}),(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:"      valueSchema"}),(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:"        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-string-expression)"},children:'"uint32"'}),(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:"        y"}),(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:'"uint32"'}),(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:","})]})]})}),(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.code,{children:"Position"})," of an entity includes both an ",(0,o.jsx)(s.code,{children:"x"})," coordinate and a ",(0,o.jsx)(s.code,{children:"y"})," coordinate.\nWhen a table has multiple fields, we use ",(0,o.jsx)(s.code,{children:"valueSchema"})," inside a structure to describe them instead of just using a string with the Solidity field type."]})]}),"\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, restart it."]}),"\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.0;"})]}),"\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:"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 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)"},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:" "}),"\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:"distance2"}),(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:" deltaX"}),(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:" deltaY) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"internal"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pure"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(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:") {"})]}),"\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:" deltaX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY;"})]}),"\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":"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"})," 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:"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:" {"})]})})}),(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 in the system contract itself."}),"\n",(0,o.jsxs)(s.h3,{id:"moveby-method",children:[(0,o.jsx)(s.code,{children:"moveBy"})," method"]}),"\n",(0,o.jsxs)(s.p,{children:["Next we’ll add the ",(0,o.jsx)(s.code,{children:"moveBy"})," 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.0;"})]}),"\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",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)"},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:"moveBy"}),(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:" clientX"}),(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:" clientY"}),(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:" deltaX"}),(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:" deltaY) "}),(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)"},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:"uint32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" fromX"}),(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:" fromY) "}),(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:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"distance2"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(deltaX"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY) "}),(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-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:'"can only move to adjacent spaces"'}),(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:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(clientX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" fromX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" clientY "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" fromY"}),(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:'"client confused about location"'}),(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:"uint32"}),(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:"uint32"}),(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:"(fromX) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaX);"})]}),"\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:"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:"="}),(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:"("}),(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:"(fromY) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY);"})]}),"\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:" "}),"\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:"distance2"}),(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:" deltaX"}),(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:" deltaY) "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"internal"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pure"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(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:") {"})]}),"\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:"uint32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(deltaX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY);"})]}),"\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":"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:"moveBy"}),(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:" clientX"}),(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:" clientY"}),(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:" deltaX"}),(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:" deltaY) "}),(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:"If the client and the onchain code ever get out of sync about a player's position, it's best to forbid user movement until they synchronize again.\nTo be able to detect that situation, we have the client code call the system onchain with what it thinks is the player's position."}),(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:"uint32"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" fromX"}),(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:" fromY) "}),(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:"This is how we get the player's real position (the onchain state is the authoritative version)."}),(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:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"distance2"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(deltaX"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY) "}),(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-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:'"can only move to adjacent spaces"'}),(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:"require"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(clientX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" fromX "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" clientY "}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=="}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" fromY"}),(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:'"client confused about location"'}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})]})}),(0,o.jsx)(s.p,{children:"If the attempted move is more than one space, or if the client is out of sync about the player's location, do not move."})]}),"\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:"modify-the-user-interface-to-call-the-map-system",children:"Modify the user interface to call the map system"}),"\n",(0,o.jsxs)(s.p,{children:["We’ll fill in the ",(0,o.jsx)(s.code,{children:"moveBy"})," 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 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:" { 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 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 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:" { 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 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:" { 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",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 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-function)"},children:"moveBy"}),(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:" (deltaX"}),(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:" deltaY"}),(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:"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 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:"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-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 moveBy 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:".moveBy"}),(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:","}),(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:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaX"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY]);"})]}),"\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 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-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-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:(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 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:"return"}),(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:"    moveBy"}),(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:"    spawn"}),(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",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)"},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.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(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:"moveBy"}),(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:" (deltaX"}),(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:" deltaY"}),(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.jsx)(s.p,{children:"This function moves the player by a specific amount."}),(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 moveBy 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-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:".moveBy"}),(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:","}),(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",children:[(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      deltaX"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deltaY]);"})]}),"\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.jsx)(s.span,{className:"line",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})})]})}),(0,o.jsxs)(s.p,{children:["This (",(0,o.jsx)(s.code,{children:"worldContract.write.<method>"}),") 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.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-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:"..."})]}),"\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:["Spawn a new player.\nIt is very similar to ",(0,o.jsx)(s.code,{children:"moveBy"})," above."]}),(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-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:"    moveBy"}),(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.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:"}"})})]})}),(0,o.jsx)(s.p,{children:"Return the functions in a structure so they can be called."})]}),"\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)"},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 highlighted",children:(0,o.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"};"})})]})})}),"\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-constant)"},children:"561"}),(0,o.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"f68112cb104ca106dcf3d79fcaa4ce72d9e66"})]})})}),"\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,r.j)(c)},4737:function(e){e.exports={collapsed:"CollapseCode_collapsed__D1CXB",expanded:"CollapseCode_expanded__x1xKU"}}},function(e){e.O(0,[1877,2888,179],function(){return e(e.s=5834)}),_N_E=e.O()}]);