(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3802],{25042:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/hello-world/add-table",function(){return n(9033)}])},48986:function(e,s,n){"use strict";n.d(s,{C:function(){return l}});var r=n(7505),o=n(7765),t=n(24737),i=n.n(t);function l(e){let{children:s}=e,n=(0,o.useRef)(null),[t,l]=(0,o.useState)(!0);return(0,o.useEffect)(()=>{if(!n.current)return;let e=Array.from(n.current.querySelectorAll(".line")),s=[];e.forEach((e,n)=>{e.matches(".highlighted")&&s.push(n),/^\s+$/g.test(e.innerHTML)&&e.setAttribute("data-empty","")}),s.length&&e.forEach((e,n)=>{let r=s.reduce((e,s)=>Math.min(e,Math.abs(s-n)),1/0);e.setAttribute("data-highlight-distance",Math.min(r,4).toString())})},[t]),(0,r.jsx)("div",{ref:n,style:{marginTop:"1.5rem"},className:t?i().collapsed:i().expanded,onClick:e=>{e.target instanceof Element&&e.target.closest(".line")&&l(!t)},children:s})}},73307:function(e,s,n){"use strict";n.d(s,{Z:function(){return i}});var r=n(7505),o=n(11689);let t={logo:function(){return(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"0.25em",fontSize:"32px",fontFamily:"PP Supply Mono",textTransform:"uppercase"},children:[(0,r.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,o.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,r.jsx)(r.Fragment,{children:(0,r.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=t},9033:function(e,s,n){"use strict";n.r(s);var r=n(7505),o=n(42585),t=n(38288),i=n(73307);n(54693);var l=n(26736);n(98823);var a=n(48986);let c={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,l.ah)(),e.components);return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)},pageOpts:{filePath:"pages/guides/hello-world/add-table.mdx",route:"/guides/hello-world/add-table",headings:[{depth:1,value:"Add a table",id:"add-a-table"},{depth:2,value:"Setup",id:"setup"},{depth:2,value:"Modify the MUD configuration file",id:"modify-the-mud-configuration-file"},{depth:2,value:"Update IncrementSystem",id:"update-incrementsystem"},{depth:2,value:"Update the user interface",id:"update-the-user-interface"}],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",audits:"Audits",version:{title:"2.1.1",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:"Folder",name:"audits",route:"/audits",children:[{kind:"MdxPage",name:"2024-02-11-open-zeppelin",route:"/audits/2024-02-11-open-zeppelin"},{kind:"Meta",data:{"2024-02-11-open-zeppelin":"2024-02-11 OpenZeppelin",pdf:{display:"hidden"},icons:{display:"hidden"}}}]},{kind:"MdxPage",name:"changelog",route:"/changelog"},{kind:"Folder",name:"cli",route:"/cli",children:[{kind:"Meta",data:{tablegen:"mud tablegen",worldgen:"mud worldgen",test:"mud test",deploy:"mud deploy",verify:"mud verify","dev-contracts":"mud dev-contracts","abi-ts":"mud abi-ts","set-version":"mud set-version"}},{kind:"MdxPage",name:"abi-ts",route:"/cli/abi-ts"},{kind:"MdxPage",name:"deploy",route:"/cli/deploy"},{kind:"MdxPage",name:"dev-contracts",route:"/cli/dev-contracts"},{kind:"MdxPage",name:"set-version",route:"/cli/set-version"},{kind:"MdxPage",name:"tablegen",route:"/cli/tablegen"},{kind:"MdxPage",name:"test",route:"/cli/test"},{kind:"MdxPage",name:"verify",route:"/cli/verify"},{kind:"MdxPage",name:"worldgen",route:"/cli/worldgen"}]},{kind:"Folder",name:"config",route:"/config",children:[{kind:"MdxPage",name:"reference",route:"/config/reference"},{kind:"Meta",data:{reference:"Reference"}}]},{kind:"MdxPage",name:"config",route:"/config"},{kind:"MdxPage",name:"contribute",route:"/contribute"},{kind:"Folder",name:"guides",route:"/guides",children:[{kind:"Meta",data:{"replicating-onchain-state":"Replicating onchain state","hello-world":"Hello World","extending-a-world":"Extending a World","adding-delegation":"Adding Delegation",modules:"Writing MUD Modules",emojimon:"Emojimon",testing:"Testing","best-practices":"Best Practices"}},{kind:"MdxPage",name:"adding-delegation",route:"/guides/adding-delegation"},{kind:"Folder",name:"best-practices",route:"/guides/best-practices",children:[{kind:"Meta",data:{"dividing-into-systems":"Dividing Code into Systems","system-best-practices":"System Best Practices","deployment-settings":"Recommended Deployment Settings",kms:"Deploy production worlds using AWS KMS"}},{kind:"MdxPage",name:"deployment-settings",route:"/guides/best-practices/deployment-settings"},{kind:"MdxPage",name:"dividing-into-systems",route:"/guides/best-practices/dividing-into-systems"},{kind:"MdxPage",name:"kms",route:"/guides/best-practices/kms"},{kind:"MdxPage",name:"system-best-practices",route:"/guides/best-practices/system-best-practices"}]},{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:"Folder",name:"extending-a-world",route:"/guides/extending-a-world",children:[{kind:"Meta",data:{index:"Extending a World Permissionlessly"}},{kind:"MdxPage",name:"index",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"},"add-chain-client":"Add chains to the client"}},{kind:"MdxPage",name:"add-chain-client",route:"/guides/hello-world/add-chain-client"},{kind:"MdxPage",name:"add-system",route:"/guides/hello-world/add-system"},{kind:"MdxPage",name:"add-table",route:"/guides/hello-world/add-table"},{kind:"MdxPage",name:"filter-sync",route:"/guides/hello-world/filter-sync"}]},{kind:"MdxPage",name:"hello-world",route:"/guides/hello-world"},{kind:"MdxPage",name:"modules",route:"/guides/modules"},{kind:"MdxPage",name:"replicating-onchain-state",route:"/guides/replicating-onchain-state"},{kind:"MdxPage",name:"testing",route:"/guides/testing"}]},{kind:"MdxPage",name:"introduction",route:"/introduction"},{kind:"MdxPage",name:"quickstart",route:"/quickstart"},{kind:"Folder",name:"retrospectives",route:"/retrospectives",children:[{kind:"MdxPage",name:"2023-09-12-register-system-vulnerability",route:"/retrospectives/2023-09-12-register-system-vulnerability"},{kind:"MdxPage",name:"2024-04-17-storeread-getdynamicfieldlength-bug",route:"/retrospectives/2024-04-17-storeread-getdynamicfieldlength-bug"},{kind:"Meta",data:{"2024-04-17-storeread-getdynamicfieldlength-bug":"2024-04-17 StoreRead.getDynamicFieldLength bug","2023-09-12-register-system-vulnerability":"2023-09-12 registerSystem vulnerability"}}]},{kind:"Folder",name:"services",route:"/services",children:[{kind:"Meta",data:{indexer:"Indexer",faucet:"Faucet"}},{kind:"MdxPage",name:"faucet",route:"/services/faucet"},{kind:"Folder",name:"indexer",route:"/services/indexer",children:[{kind:"Meta",data:{"using-indexer":"Using the Indexer","sqlite-indexer":"SQLite Indexer","postgres-event-only":"PostgreSQL for events","postgres-decoded":"PostgreSQL for data (and events)"}},{kind:"MdxPage",name:"postgres-decoded",route:"/services/indexer/postgres-decoded"},{kind:"MdxPage",name:"postgres-event-only",route:"/services/indexer/postgres-event-only"},{kind:"MdxPage",name:"sqlite-indexer",route:"/services/indexer/sqlite-indexer"},{kind:"MdxPage",name:"using-indexer",route:"/services/indexer/using-indexer"}]},{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",nethereum:"Nethereum"}},{kind:"MdxPage",name:"godot",route:"/templates/godot"},{kind:"MdxPage",name:"nethereum",route:"/templates/nethereum"},{kind:"MdxPage",name:"pwa",route:"/templates/pwa"},{kind:"MdxPage",name:"svelte",route:"/templates/svelte"},{kind:"MdxPage",name:"swift",route:"/templates/swift"},{kind:"Folder",name:"typescript",route:"/templates/typescript",children:[{kind:"Meta",data:{contracts:"Contracts",vanilla:"Vanilla","react-ecs":"React-ECS",threejs:"Three.js",vue:"Vue"}},{kind:"MdxPage",name:"contracts",route:"/templates/typescript/contracts"},{kind:"MdxPage",name:"react-ecs",route:"/templates/typescript/react-ecs"},{kind:"MdxPage",name:"threejs",route:"/templates/typescript/threejs"},{kind:"MdxPage",name:"vanilla",route:"/templates/typescript/vanilla"},{kind:"MdxPage",name:"vue",route:"/templates/typescript/vue"}]},{kind:"MdxPage",name:"unity",route:"/templates/unity"}]},{kind:"Folder",name:"world",route:"/world",children:[{kind:"Meta",data:{introduction:"Introduction","resource-ids":"Resource Identifiers","namespaces-access-control":"Namespaces & Access Control",tables:"Tables",systems:"Systems","system-hooks":"System Hooks","function-selectors":"Function Selectors",balance:"Balance","account-delegation":"Account Delegation","batch-calls":"Batch Calls",upgrades:"Upgrading",modules:"Modules",reference:"Reference"}},{kind:"MdxPage",name:"account-delegation",route:"/world/account-delegation"},{kind:"MdxPage",name:"balance",route:"/world/balance"},{kind:"MdxPage",name:"batch-calls",route:"/world/batch-calls"},{kind:"MdxPage",name:"function-selectors",route:"/world/function-selectors"},{kind:"MdxPage",name:"introduction",route:"/world/introduction"},{kind:"Folder",name:"modules",route:"/world/modules",children:[{kind:"Meta",data:{keyswithvalue:"Keys with Value",erc721:"ERC-721 (NFT)"}},{kind:"MdxPage",name:"erc721",route:"/world/modules/erc721"},{kind:"MdxPage",name:"keyswithvalue",route:"/world/modules/keyswithvalue"}]},{kind:"MdxPage",name:"modules",route:"/world/modules"},{kind:"MdxPage",name:"namespaces-access-control",route:"/world/namespaces-access-control"},{kind:"Folder",name:"reference",route:"/world/reference",children:[{kind:"Meta",data:{"delegation-external":"Delegation (interface)",module:"Modules","module-external":"Modules (interface)",system:"Systems","system-external":"Systems (interface)",world:"World","world-external":"World (interfaces)","world-context":"World context","world-context-external":"World context (interface)","resource-ids":"Resource IDs",misc:"Miscellaneous",internal:"Internals"}},{kind:"MdxPage",name:"delegation-external",route:"/world/reference/delegation-external"},{kind:"Folder",name:"internal",route:"/world/reference/internal",children:[{kind:"Meta",data:{"access-control":"Access Control",create:"Create2",delegation:"Delegation",erc165:"ERC165","erc165-external":"ERC165 (interface)","init-module":"Init Module","init-module-implementation":"Init Module Implementation",systemcall:"SystemCall"}},{kind:"MdxPage",name:"access-control",route:"/world/reference/internal/access-control"},{kind:"MdxPage",name:"create",route:"/world/reference/internal/create"},{kind:"MdxPage",name:"delegation",route:"/world/reference/internal/delegation"},{kind:"MdxPage",name:"erc165-external",route:"/world/reference/internal/erc165-external"},{kind:"MdxPage",name:"erc165",route:"/world/reference/internal/erc165"},{kind:"MdxPage",name:"init-module-implementation",route:"/world/reference/internal/init-module-implementation"},{kind:"MdxPage",name:"init-module",route:"/world/reference/internal/init-module"},{kind:"MdxPage",name:"systemcall",route:"/world/reference/internal/systemcall"}]},{kind:"MdxPage",name:"misc",route:"/world/reference/misc"},{kind:"MdxPage",name:"module-external",route:"/world/reference/module-external"},{kind:"MdxPage",name:"module",route:"/world/reference/module"},{kind:"MdxPage",name:"resource-ids",route:"/world/reference/resource-ids"},{kind:"MdxPage",name:"system-external",route:"/world/reference/system-external"},{kind:"MdxPage",name:"system",route:"/world/reference/system"},{kind:"MdxPage",name:"world-context-external",route:"/world/reference/world-context-external"},{kind:"MdxPage",name:"world-context",route:"/world/reference/world-context"},{kind:"MdxPage",name:"world-external",route:"/world/reference/world-external"},{kind:"MdxPage",name:"world",route:"/world/reference/world"}]},{kind:"MdxPage",name:"resource-ids",route:"/world/resource-ids"},{kind:"MdxPage",name:"system-hooks",route:"/world/system-hooks"},{kind:"MdxPage",name:"systems",route:"/world/systems"},{kind:"MdxPage",name:"tables",route:"/world/tables"},{kind:"MdxPage",name:"upgrades",route:"/world/upgrades"}]}],flexsearch:{codeblocks:!0},title:"Add a table"},pageNextRoute:"/guides/hello-world/add-table",nextraLayout:t.ZP,themeConfig:i.Z};function d(e){let s=Object.assign({h1:"h1",p:"p",code:"code",a:"a",h2:"h2",pre:"pre",span:"span",ol:"ol",li:"li",details:"details",summary:"summary",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",ul:"ul",strong:"strong"},(0,l.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{children:"Add a table"}),"\n",(0,r.jsxs)(s.p,{children:["In this tutorial you add a table of historical counter values and the time in which the counter reached those values.\nFor the sake of simplicity, we will implement this in the ",(0,r.jsx)(s.code,{children:"increment"})," function rather than use a ",(0,r.jsx)(s.a,{href:"/store/table-hooks",children:"storage hook"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"setup",children:"Setup"}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"/quickstart",children:"Create a new MUD application from the template"}),".\nUse the ",(0,r.jsx)(s.code,{children:"vanilla"})," template."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"sh","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"create"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"mud@latest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"tutorial"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--template"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"vanilla"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cd"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"tutorial"})]})]})}),"\n",(0,r.jsx)(s.h2,{id:"modify-the-mud-configuration-file",children:"Modify the MUD configuration file"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["In an editor, open ",(0,r.jsx)(s.code,{children:"packages/contracts/mud.config.ts"})," and add a table definition for ",(0,r.jsx)(s.code,{children:"History"}),"."]}),"\n",(0,r.jsx)(a.C,{children:(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"mud.config.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { defineWorld } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"defineWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  namespace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"app"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  tables"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      schema"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"uint32"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" []"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      schema"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        counterValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"uint32"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        blockNumber"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"uint256"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        time"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"uint256"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"counterValue"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.details,{children:[(0,r.jsx)(s.summary,{children:"Explanation"}),(0,r.jsxs)(s.p,{children:["A MUD table is a ",(0,r.jsx)(s.a,{href:"https://en.wikipedia.org/wiki/Key%E2%80%93value_database",children:"key-value database"}),".\nThe ",(0,r.jsx)(s.a,{href:"/store/data-model",children:"schema"})," includes all the fields in the key and the value, along with their types."]}),(0,r.jsxs)(s.p,{children:["To distinguish between the key fields and value fields the ",(0,r.jsx)(s.code,{children:"key"})," field includes a list of fields that are part of the key."]}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Field"}),(0,r.jsx)(s.th,{children:"Type"}),(0,r.jsx)(s.th,{children:"Part of the"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"counterValue"}),(0,r.jsx)(s.td,{children:"uint32"}),(0,r.jsx)(s.td,{children:"Key"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"blockNumber"}),(0,r.jsx)(s.td,{children:"uint256"}),(0,r.jsx)(s.td,{children:"Value"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"time"}),(0,r.jsx)(s.td,{children:"uint256"}),(0,r.jsx)(s.td,{children:"Value"})]})]})]})]}),"\n",(0,r.jsxs)(s.ol,{start:"2",children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Run this command to regenerate the table libraries."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cd"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"packages/contracts"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"mud"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"tablegen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"})]})})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"update-incrementsystem",children:["Update ",(0,r.jsx)(s.code,{children:"IncrementSystem"})]}),"\n",(0,r.jsxs)(s.p,{children:["In an editor, open ",(0,r.jsx)(s.code,{children:"packages/contracts/src/systems/IncrementSystem.sol"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Modify the second ",(0,r.jsx)(s.code,{children:"import"})," line to import ",(0,r.jsx)(s.code,{children:"History"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:["Modify the ",(0,r.jsx)(s.code,{children:"increment"})," function to also update ",(0,r.jsx)(s.code,{children:"History"}),".\nTo see the exact functions that are available, you can look at ",(0,r.jsx)(s.code,{children:"packages/contracts/src/codegen/tables/History.sol"})," (that is the reason we ran ",(0,r.jsx)(s.code,{children:"pnpm build"})," to recreate it already)."]}),"\n"]}),"\n",(0,r.jsx)(a.C,{children:(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",filename:"IncrementSystem.sol",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"solidity","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// SPDX-License-Identifier: MIT"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pragma"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"solidity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >=0.8.0;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/System.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"IncrementSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" counter "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" Counter."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"get"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" newValue "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" counter "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Counter."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(newValue);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    History."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(newValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" block.number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" block.timestamp);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" newValue;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(s.details,{children:[(0,r.jsx)(s.summary,{children:"Explanation"}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),(0,r.jsx)(s.p,{children:"Import the new table."}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"History."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(newValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" block.number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" block.timestamp);"})]})})}),(0,r.jsxs)(s.p,{children:["Set the value.\nAll MUD tables have a ",(0,r.jsx)(s.code,{children:"<table>.set"})," function with the parameters being the key fields in order and then the value schema fields in order."]})]}),"\n",(0,r.jsx)(s.h2,{id:"update-the-user-interface",children:"Update the user interface"}),"\n",(0,r.jsxs)(s.p,{children:["You can already run the application and see in the MUD Dev Tools that there is a ",(0,r.jsx)(s.code,{children:"History"})," table and it gets updated when you click ",(0,r.jsx)(s.strong,{children:"Increment"}),".\nClick the ",(0,r.jsx)(s.strong,{children:"Components"})," tab and select the ",(0,r.jsx)(s.strong,{children:"History"})," component."]}),"\n",(0,r.jsxs)(s.p,{children:["However, you can also add the history to the user interface.\nThe directions here apply to the ",(0,r.jsx)(s.code,{children:"vanilla"})," client template, if you use anything else you'll need to modify them as appropriate."]}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Edit ",(0,r.jsx)(s.code,{children:"packages/client/src/index.ts"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Import some additional definitions."}),"\n",(0,r.jsxs)(s.li,{children:["Use ",(0,r.jsx)(s.code,{children:"components.History.update$.subscribe"})," to update the history."]}),"\n"]}),"\n",(0,r.jsx)(a.C,{children:(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"index.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { setup } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./mud/setup"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" mudConfig "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"contracts/mud.config"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { encodeEntity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" singletonEntity } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store-sync/recs"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { getComponentValue } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/recs"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  systemCalls: { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Components expose a stream that triggers when the component is updated."})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".subscribe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"((update) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"nextValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"prevValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"] "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".value;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Counter updated"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { nextValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" prevValue });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"document"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getElementById"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"counter"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".innerHTML "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"String"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"nextValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"?.value "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"unset"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".subscribe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"((update) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".History;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" table "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"<tr><th>Counter</th><th>Block</th><th>Time</th></tr>"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" i "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"; i "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" singletonEntity).value; i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"++"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encodeEntity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"metadata"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".keySchema"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { counterValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" i });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" key);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (value)"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      table "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<tr><td>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</td><td>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".blockNumber"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</td>`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<td>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Date"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".time) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</td></tr>\\n`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line highlighted",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"document"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getElementById"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"history"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".innerHTML "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<table border>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"table"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</table>`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line highlighted",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Attach the increment function to the html element with ID `incrementButton` (if it exists)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"document"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".querySelector"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#incrementButton"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"?.addEventListener"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"click"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" increment);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"meta"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"env"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"DEV"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { mount: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"mountDevTools"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/dev-tools"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"mountDevTools"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    config"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" mudConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    walletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".walletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    latestBlock$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".latestBlock$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    storedBlockLogs$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".storedBlockLogs$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    worldAddress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    worldAbi"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".abi"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    recsWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  });"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.details,{children:[(0,r.jsx)(s.summary,{children:"Explanation"}),(0,r.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"typescript","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".subscribe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"((update) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]})})}),(0,r.jsxs)(s.p,{children:["Register a function to be called when the ",(0,r.jsx)(s.code,{children:"History"})," component changes."]}),(0,r.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".History;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" table "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"<tr><th>Counter</th><th>Block</th><th>Time</th></tr>"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"for"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"var"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"; i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"singletonEntity).value; i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"++"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]})]})}),(0,r.jsxs)(s.p,{children:["To get the value of a component we use ",(0,r.jsx)(s.code,{children:"getComponentValue"})," (or ",(0,r.jsx)(s.code,{children:"getComponentValueStrict"})," if we want to throw an error if the value is not found).\nThis function gets a component and a key.\nIn the case of a singleton there is no key, so we use ",(0,r.jsx)(s.code,{children:"singletonEntity"}),".\nThe returned value includes multiple fields, but here we only care about the value."]}),(0,r.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encodeEntity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"metadata"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".keySchema"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { counterValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" i });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(History"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" key);"})]})]})}),(0,r.jsx)(s.p,{children:"Reading a value from a table that has keys is a two-step process:"}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["Use ",(0,r.jsx)(s.code,{children:"encodeEntity"})," to get the key."]}),"\n",(0,r.jsxs)(s.li,{children:["Use ",(0,r.jsx)(s.code,{children:"getComponentValue"})," to get the value tied to that key."]}),"\n"]}),(0,r.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (value)"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  table "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<tr><td>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</td><td>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".blockNumber"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</td>`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<td>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Date"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".time) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</td></tr>\\n`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),(0,r.jsx)(s.p,{children:"If there is a value, add a line to the table."}),(0,r.jsxs)(s.p,{children:["Solidity uses ",(0,r.jsx)(s.a,{href:"https://en.wikipedia.org/wiki/Unix_time",children:"Unix time"}),".\nJavaScript uses a similar system, but it measures times in milliseconds.\nSo to get a readable date, we take the time (which is a ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt",children:(0,r.jsx)(s.code,{children:"BigInt"})}),"), multiply it by a thousand, and then convert it to a ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date",children:(0,r.jsx)(s.code,{children:"Date"})})," object."]}),(0,r.jsx)(s.pre,{"data-language":"typescript","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"typescript","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"document"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getElementById"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"history"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".innerHTML "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`<table border>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"table"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"</table>`"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),(0,r.jsxs)(s.p,{children:["Set the internal HTML of the ",(0,r.jsx)(s.code,{children:"history"})," HTML tag.\nNotice the exclamation mark (",(0,r.jsx)(s.code,{children:"!"}),").\n",(0,r.jsx)(s.code,{children:"document.getElementById"})," may return either a tag that can be changed, or an empty value (if the parameter is not an id of any of the HTML tags).\nWe know that ",(0,r.jsx)(s.code,{children:"history"})," exists in the HTML, but the TypeScript compiler does not.\nThis exclamation point tells the compiler that it's OK, there will be a real value there.\n",(0,r.jsx)(s.a,{href:"https://blog.logrocket.com/understanding-exclamation-mark-typescript/",children:"See here for additional information"}),"."]})]}),"\n",(0,r.jsxs)(s.ol,{start:"2",children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Edit ",(0,r.jsx)(s.code,{children:"packages/clients/index.html"})," to add a text area for the history."]}),"\n",(0,r.jsx)(a.C,{children:(0,r.jsx)(s.pre,{"data-language":"html","data-theme":"default",filename:"index.html",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"html","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<!"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"doctype"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"html"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"html"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"lang"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"en"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"head"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"charset"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"UTF-8"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"meta"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"viewport"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"content"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"width=device-width, initial-scale=1.0"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"title"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">a minimal MUD client</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"title"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"head"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"body"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"module"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"src"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/src/index.ts"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Counter: <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"counter"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">0</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"span"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"incrementButton"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">Increment</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hr"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">History</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"h2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"id"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"history"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"></"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"div"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  </"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"body"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"html"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Run ",(0,r.jsx)(s.code,{children:"pnpm dev"})," in the application's root directory (unless it is already running), browse to the app URL, and click ",(0,r.jsx)(s.strong,{children:"Increment"})," a few times.\nSee that the history table gets populated."]}),"\n"]}),"\n"]})]})}s.default=(0,o.j)(c)},24737:function(e){e.exports={collapsed:"CollapseCode_collapsed__D1CXB",expanded:"CollapseCode_expanded__x1xKU"}}},function(e){e.O(0,[3720,2888,179],function(){return e(e.s=25042)}),_N_E=e.O()}]);