Help
RSS
API
Feed
Maltego
Contact
Domain > fluidframework.com
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2024-02-09
40.90.64.228
(
ClassC
)
2024-02-28
40.90.64.151
(
ClassC
)
2025-12-01
13.107.226.70
(
ClassC
)
Port 443
HTTP/1.1 200 OKDate: Mon, 01 Dec 2025 03:46:33 GMTContent-Type: text/htmlContent-Length: 96274Connection: keep-aliveVary: Accept-EncodingCache-Control: must-revalidate, max-age3600ETag: 39738574Last-Modified: Mon, 01 Dec 2025 01:31:36 GMTStrict-Transport-Security: max-age10886400; includeSubDomains; preloadReferrer-Policy: same-originX-Content-Type-Options: nosniffX-XSS-Protection: 1; modeblockX-DNS-Prefetch-Control: offContent-Security-Policy: script-src self sha256-faMHt+UAWeoFU7ZBnPhfAu9zOnnNUwL4RYp09gSUEjU sha256-O8zYuOjyuzUZDv3fub7DKfAs5TEd1dG+fz+hCSCFmQA unsafe-inline unsafe-eval https:; base-uri self; object-src none; require-trusted-types-for script; trusted-types default dompurify ff#webpack; report-uri https://csp.microsoft.com/report/FluidFramework-WWx-azure-ref: 20251201T034633Z-185bfcc4b64n9gddhC1CO1928s00000018t000000000d9u4x-fd-int-roxy-purgeid: 0X-Cache: TCP_MISSAccept-Ranges: bytes !doctype html>html langen dirltr classplugin-pages plugin-id-default data-has-hydratedfalse>head>meta charsetUTF-8>meta namegenerator contentDocusaurus v3.6.2>title data-rhtrue>Fluid Framework/title>meta data-rhtrue propertyog:title contentFluid Framework>meta data-rhtrue nameviewport contentwidthdevice-width,initial-scale1>meta data-rhtrue nametwitter:card contentsummary_large_image>meta data-rhtrue propertyog:url contenthttps://fluidframework.com/>meta data-rhtrue propertyog:locale contenten>meta data-rhtrue namedocusaurus_locale contenten>meta data-rhtrue namedocusaurus_tag contentdefault>meta data-rhtrue namedocsearch:language contenten>meta data-rhtrue namedocsearch:docusaurus_tag contentdefault>link data-rhtrue relicon href/assets/fluid-icon.svg>link data-rhtrue relcanonical hrefhttps://fluidframework.com/>link data-rhtrue relalternate hrefhttps://fluidframework.com/ hreflangen>link data-rhtrue relalternate hrefhttps://fluidframework.com/ hreflangx-default>script data-rhtrue>function insertBanner(){var ndocument.createElement(div);n.id__docusaurus-base-url-issue-banner-container;n.innerHTML\ndiv id__docusaurus-base-url-issue-banner styleborder: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;>\n p stylefont-weight: bold; font-size: 30px;>Your Docusaurus site did not load properly./p>\n p>A very common reason is a wrong site a hrefhttps://docusaurus.io/docs/docusaurus.config.js/#baseUrl stylefont-weight: bold;>baseUrl configuration/a>./p>\n p>Current configured baseUrl span stylefont-weight: bold; color: red;>//span> (default value)/p>\n p>We suggest trying baseUrl span id__docusaurus-base-url-issue-banner-suggestion-container stylefont-weight: bold; color: green;>/span>/p>\n/div>\n,document.body.prepend(n);var edocument.getElementById(__docusaurus-base-url-issue-banner-suggestion-container),swindow.location.pathname,o/s.substr(-1)?s:s+/;e.innerHTMLo}document.addEventListener(DOMContentLoaded,(function(){void 0window.docusaurus&&insertBanner()}))/script>link relsearch typeapplication/opensearchdescription+xml titleFluid Framework href/opensearch.xml>script src/dompurify/purify.min.js>/script>script src/trusted-types-policy.js>/script>link relstylesheet href/assets/css/styles.26f6f976.css>script src/assets/js/runtime~main.0a77aa27.js deferdefer>/script>script src/assets/js/main.090cc9ff.js deferdefer>/script>/head>body classnavigation-with-keyboard>script>!function(){function t(t){document.documentElement.setAttribute(data-theme,t)}var efunction(){try{return new URLSearchParams(window.location.search).get(docusaurus-theme)}catch(t){}}()||function(){try{return window.localStorage.getItem(theme)}catch(t){}}();null!e?t(e):window.matchMedia((prefers-color-scheme: dark)).matches?t(dark):(window.matchMedia((prefers-color-scheme: light)).matches,t(light))}(),function(){try{const cnew URLSearchParams(window.location.search).entries();for(vart,eof c)if(t.startsWith(docusaurus-data-)){var at.replace(docusaurus-data-,data-);document.documentElement.setAttribute(a,e)}}catch(t){}}()/script>div id__docusaurus>div roleregion aria-labelSkip to main content>a classskipToContent_C7zZ href#__docusaurus_skipToContent_fallback>Skip to main content/a>/div>nav aria-labelMain classnavbar navbar--fixed-top>div classnavbar__inner>div classnavbar__items>button aria-labelToggle navigation bar aria-expandedfalse classnavbar__toggle clean-btn typebutton>svg width30 height30 viewBox0 0 30 30 aria-hiddentrue>path strokecurrentColor stroke-linecapround stroke-miterlimit10 stroke-width2 dM4 7h22M4 15h22M4 23h22>/path>/svg>/button>a classnavbar__brand href/>div classnavbar__logo>img src/assets/fluid-icon.svg altFluid Framework Logo classthemedComponent_EBwV themedComponent--light_M5U7>img src/assets/fluid-icon.svg altFluid Framework Logo classthemedComponent_EBwV themedComponent--dark_ylCQ>/div>b classnavbar__title text--truncate>Fluid Framework/b>/a>a classnavbar__item navbar__link href/docs/>Docs/a>a classnavbar__item navbar__link href/community/>Community/a>a classnavbar__item navbar__link href/support/>Support/a>/div>div classnavbar__items navbar__items--right>div classtoggle_Ydlq colorModeToggle_YezA>button classclean-btn toggleButton_APwf toggleButtonDisabled_z9M6 typebutton disabled titleSwitch between dark and light mode (currently light mode) aria-labelSwitch between dark and light mode (currently light mode) aria-livepolite aria-pressedfalse>svg viewBox0 0 24 24 width24 height24 classlightToggleIcon_OwO6>path fillcurrentColor dM12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z>/path>/svg>svg viewBox0 0 24 24 width24 height24 classdarkToggleIcon_oWMj>path fillcurrentColor dM9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z>/path>/svg>/button>/div>div classnavbarSearchContainer_OLFy>button typebutton classDocSearch DocSearch-Button aria-labelSearch>span classDocSearch-Button-Container>svg width20 height20 classDocSearch-Search-Icon viewBox0 0 20 20>path dM14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z strokecurrentColor fillnone fill-ruleevenodd stroke-linecapround stroke-linejoinround>/path>/svg>span classDocSearch-Button-Placeholder>Search/span>/span>span classDocSearch-Button-Keys>/span>/button>/div>/div>/div>div rolepresentation classnavbar-sidebar__backdrop>/div>/nav>div id__docusaurus_skipToContent_fallback classmain-wrapper mainWrapper_OyVs>main>div classffcom-homepage>div classffcom-banner>div classffcom-banner-inner>div classffcom-title-box>h1 classffcom-title>Fluid Framework/h1>span classffcom-description>Empower collaborative innovation with Fluid Framework's seamless, high-performance tech stack for real-time applications./span>/div>div classffcom-video-container>iframe width100% height100% srchttps://www.youtube-nocookie.com/embed/fjRfTdIYzWg titleFluid Framework - Build collaborative apps fast! allowaccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share referrerpolicystrict-origin-when-cross-origin allowfullscreen>/iframe>/div>/div>/div>div classffcom-homepage-body>div classffcom-home-page-section>div classffcom-home-page-section-inner>div classffcom-section-header>div classffcom-section-header-inner>p classffcom-section-header-subtitle>Key Features/p>h2 classffcom-section-header-title>Start building with Fluid Framework/h2>/div>/div>div classffcom-key-features-card-grid>div classffcom-key-feature-card>div classffcom-key-feature-card-image-container>img srchttps://storage.fluidframework.com/static/images/website/home/easy-to-use.png altEasy to use classffcom-key-feature-card-image>/div>div classffcom-key-feature-card-contents>div classffcom-key-feature-card-body>div classffcom-key-feature-card-body-label-container>p classffcom-key-feature-card-body-label>Easy to use/p>/div>div classffcom-key-feature-card-body-text-container>p classffcom-key-feature-card-body-text>Transform your collaborative experience with our developer friendly framework - where simplicity meets powerful functionality effortlessly. The framework provides usability that drives innovation within Microsoft and across the industry by dramatically lowering the difficulty and cost of building innovative, collaborative software./p>/div>/div>div classffcom-key-feature-card-footer>div classffcom-key-feature-card-footer-content>div classffcom-key-feature-card-footer-link>div classffcom-key-feature-card-footer-link-button>>/div>div classffcom-key-feature-card-footer-link-label-frame>a classffcom-key-feature-card-footer-link-label-text href/docs/start/quick-start aria-labelEasy to use, Learn More>Learn more/a>/div>/div>/div>/div>/div>/div>div classffcom-key-feature-card>div classffcom-key-feature-card-image-container>img srchttps://storage.fluidframework.com/static/images/website/home/open-source.png altOpen source classffcom-key-feature-card-image>/div>div classffcom-key-feature-card-contents>div classffcom-key-feature-card-body>div classffcom-key-feature-card-body-label-container>p classffcom-key-feature-card-body-label>Open Source/p>/div>div classffcom-key-feature-card-body-text-container>p classffcom-key-feature-card-body-text>We believe that an open, inclusive, and respectful community will help shape a better future for this project. That's why Fluid Framework is made available for FREE as an Open Source project under the MIT license./p>/div>/div>div classffcom-key-feature-card-footer>div classffcom-key-feature-card-footer-content>div classffcom-key-feature-card-footer-link>div classffcom-key-feature-card-footer-link-button>>/div>div classffcom-key-feature-card-footer-link-label-frame>a classffcom-key-feature-card-footer-link-label-text href/community aria-labelOpen Source, Learn More>Learn more/a>/div>/div>/div>/div>/div>/div>div classffcom-key-feature-card>div classffcom-key-feature-card-image-container>img srchttps://storage.fluidframework.com/static/images/website/home/performance.png altIndustry-leading speed and performance classffcom-key-feature-card-image>/div>div classffcom-key-feature-card-contents>div classffcom-key-feature-card-body>div classffcom-key-feature-card-body-label-container>p classffcom-key-feature-card-body-label>Industry-leading speed & performance/p>/div>div classffcom-key-feature-card-body-text-container>p classffcom-key-feature-card-body-text>Unleash unparalleled speed and performance with our cutting-edge solution for building real-time collaborative applications. Collaborative features are only successful if they are fast, scale to large data and user bases. Fluid offers an approachable programming model that leverages mainstream web technology while delivering best-in-class performance./p>/div>/div>div classffcom-key-feature-card-footer>div classffcom-key-feature-card-footer-content>div classffcom-key-feature-card-footer-link>div classffcom-key-feature-card-footer-link-button>>/div>div classffcom-key-feature-card-footer-link-label-frame>a classffcom-key-feature-card-footer-link-label-text href/docs/build/dds#performance-characteristics aria-labelIndustry-leading speed & performance, Learn More>Learn more/a>/div>/div>/div>/div>/div>/div>/div>/div>/div>div classffcom-home-page-section>div classffcom-home-page-section-inner>div classffcom-section-header>div classffcom-section-header-inner>h2 classffcom-section-header-title>Who's using Fluid Framework/h2>/div>/div>div classffcom-partners-section-contents>div classffcom-partners-section-contents-inner>div classffcom-partner-entry>div classffcom-partner-entry-inner>div classffcom-partner-entry-body>div classffcom-partner-entry-icon>img srchttps://storage.fluidframework.com/static/images/website/partner-logos/autodesk-logo.png titleAutodesk>/div>div classffcom-partner-entry-label-container>div classffcom-partner-entry-label-container-inner>div classffcom-partner-entry-label-indicator-container>div classffcom-partner-entry-label-indicator-shape>/div>/div>p classffcom-partner-entry-label-text>Autodesk/p>/div>/div>div classffcom-partner-entry-learn-more-container>div classffcom-partner-entry-learn-more-container-inner>a classffcom-partner-entry-learn-more-text hrefhttps://www.autodesk.com/ target_blank relnoreferrer aria-labelAutodesk>Learn more/a>/div>/div>/div>/div>/div>div classffcom-partner-entry>div classffcom-partner-entry-inner>div classffcom-partner-entry-body>div classffcom-partner-entry-icon>img srchttps://storage.fluidframework.com/static/images/website/partner-logos/hexagon-logo.png titleHexagon>/div>div classffcom-partner-entry-label-container>div classffcom-partner-entry-label-container-inner>div classffcom-partner-entry-label-indicator-container>div classffcom-partner-entry-label-indicator-shape>/div>/div>p classffcom-partner-entry-label-text>Hexagon/p>/div>/div>div classffcom-partner-entry-learn-more-container>div classffcom-partner-entry-learn-more-container-inner>a classffcom-partner-entry-learn-more-text hrefhttps://hexagon.com/ target_blank relnoreferrer aria-labelHexagon>Learn more/a>/div>/div>/div>/div>/div>div classffcom-partner-entry>div classffcom-partner-entry-inner>div classffcom-partner-entry-body>div classffcom-partner-entry-icon>img srchttps://storage.fluidframework.com/static/images/website/partner-logos/loop-logo.svg titleMicrosoft Loop>/div>div classffcom-partner-entry-label-container>div classffcom-partner-entry-label-container-inner>div classffcom-partner-entry-label-indicator-container>div classffcom-partner-entry-label-indicator-shape>/div>/div>p classffcom-partner-entry-label-text>Microsoft Loop/p>/div>/div>div classffcom-partner-entry-learn-more-container>div classffcom-partner-entry-learn-more-container-inner>a classffcom-partner-entry-learn-more-text hrefhttps://www.microsoft.com/microsoft-loop target_blank relnoreferrer aria-labelMicrosoft Loop>Learn more/a>/div>/div>/div>/div>/div>div classffcom-partner-entry>div classffcom-partner-entry-inner>div classffcom-partner-entry-body>div classffcom-partner-entry-icon>img srchttps://storage.fluidframework.com/static/images/website/partner-logos/teams-logo.png titleMicrosoft Teams>/div>div classffcom-partner-entry-label-container>div classffcom-partner-entry-label-container-inner>div classffcom-partner-entry-label-indicator-container>div classffcom-partner-entry-label-indicator-shape>/div>/div>p classffcom-partner-entry-label-text>Microsoft Teams/p>/div>/div>div classffcom-partner-entry-learn-more-container>div classffcom-partner-entry-learn-more-container-inner>a classffcom-partner-entry-learn-more-text hrefhttps://www.microsoft.com/microsoft-teams target_blank relnoreferrer aria-labelMicrosoft Teams>Learn more/a>/div>/div>/div>/div>/div>div classffcom-partner-entry>div classffcom-partner-entry-inner>div classffcom-partner-entry-body>div classffcom-partner-entry-icon>img srchttps://storage.fluidframework.com/static/images/website/partner-logos/power-apps-logo.png titlePower Apps>/div>div classffcom-partner-entry-label-container>div classffcom-partner-entry-label-container-inner>div classffcom-partner-entry-label-indicator-container>div classffcom-partner-entry-label-indicator-shape>/div>/div>p classffcom-partner-entry-label-text>Power Apps/p>/div>/div>div classffcom-partner-entry-learn-more-container>div classffcom-partner-entry-learn-more-container-inner>a classffcom-partner-entry-learn-more-text hrefhttps://www.microsoft.com/power-platform/products/power-apps target_blank relnoreferrer aria-labelPower Apps>Learn more/a>/div>/div>/div>/div>/div>div classffcom-partner-entry>div classffcom-partner-entry-inner>div classffcom-partner-entry-body>div classffcom-partner-entry-icon>img srchttps://storage.fluidframework.com/static/images/website/partner-logos/whiteboard-logo.png titleWhiteboard>/div>div classffcom-partner-entry-label-container>div classffcom-partner-entry-label-container-inner>div classffcom-partner-entry-label-indicator-container>div classffcom-partner-entry-label-indicator-shape>/div>/div>p classffcom-partner-entry-label-text>Whiteboard/p>/div>/div>div classffcom-partner-entry-learn-more-container>div classffcom-partner-entry-learn-more-container-inner>a classffcom-partner-entry-learn-more-text hrefhttps://www.microsoft.com/microsoft-365/microsoft-whiteboard target_blank relnoreferrer aria-labelWhiteboard>Learn more/a>/div>/div>/div>/div>/div>/div>/div>/div>/div>div classffcom-home-page-section stylebackground:linear-gradient(to bottom, rgba(255, 253, 251, 0.8) 10%, rgba(255, 253, 251, 0.8)), url(https://storage.fluidframework.com/static/images/website/home/how-it-works-section-background.png);background-position:center;background-repeat:no-repeat;background-size:cover>div classffcom-home-page-section-inner>div classffcom-section-header>div classffcom-section-header-inner>p classffcom-section-header-subtitle>Open Source/p>h2 classffcom-section-header-title>See how it works/h2>/div>/div>div classffcom-how-it-works-section-body>div classffcom-how-it-works-section-code-body>div classffcom-how-it-works-code-column>div classffcom-how-it-works-column-label>Sample Code/div>div classffcom-card-with-blur>div classffcom-how-it-works-code-card-body>div classffcom-how-it-works-code-card-text language-typescript codeBlockContainer_nawm theme-code-block style--prism-color:#000000;--prism-background-color:#ffffff>div classcodeBlockContent_jesU>pre tabindex0 classprism-code language-typescript codeBlock_YUd8 thin-scrollbar stylecolor:#000000;background-color:#ffffff>code classcodeBlockLines_MwUY codeBlockLinesWithNumbering_TJk0>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken keyword stylecolor:rgb(0, 0, 255)>import/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> SharedTree/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> TreeViewConfiguration/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> SchemaFactory/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> Tree /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>from/span>span classtoken plain> /span>span classtoken string stylecolor:rgb(163, 21, 21)>"fluid-framework"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>import/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> TinyliciousClient /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>from/span>span classtoken plain> /span>span classtoken string stylecolor:rgb(163, 21, 21)>"@fluidframework/tinylicious-client"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> client /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>new/span>span classtoken plain> /span>span classtoken class-name stylecolor:rgb(38, 127, 153)>TinyliciousClient/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> containerSchema /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> initialObjects/span>span classtoken operator stylecolor:rgb(0, 0, 0)>:/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> diceTree/span>span classtoken operator stylecolor:rgb(0, 0, 0)>:/span>span classtoken plain> SharedTree /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> root /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> document/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>getElementById/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken string stylecolor:rgb(163, 21, 21)>"content"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// The string passed to the SchemaFactory should be unique/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> sf /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>new/span>span classtoken plain> /span>span classtoken class-name stylecolor:rgb(38, 127, 153)>SchemaFactory/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken string stylecolor:rgb(163, 21, 21)>"fluidHelloWorldSample"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Here we define an object we'll use in the schema, a Dice./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>class/span>span classtoken plain> /span>span classtoken class-name stylecolor:rgb(38, 127, 153)>Dice/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>extends/span>span classtoken plain> /span>span classtoken class-name stylecolor:rgb(38, 127, 153)>sf/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>object/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken string stylecolor:rgb(163, 21, 21)>"Dice"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> value/span>span classtoken operator stylecolor:rgb(0, 0, 0)>:/span>span classtoken plain> sf/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken builtin stylecolor:rgb(0, 112, 193)>number/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Here we define the tree schema, which has a single Dice object starting at 1./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// We'll call viewWith() on the SharedTree using this schema, which will give us a tree view to work with./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// The createContainer call includes the parameter "2" which indicates the version of FluidFramework that/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// the data in the container is compatible with. For this example, we are using version "2"./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// If the tree is new, we'll initialize it with a Dice object with a value of 1./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> treeViewConfiguration /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>new/span>span classtoken plain> /span>span classtoken class-name stylecolor:rgb(38, 127, 153)>TreeViewConfiguration/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> schema/span>span classtoken operator stylecolor:rgb(0, 0, 0)>:/span>span classtoken plain> Dice /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> /span>span classtoken function-variable function stylecolor:rgb(0, 0, 255)>createNewDice/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>async/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> container /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>await/span>span classtoken plain> client/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>createContainer/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>containerSchema/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> /span>span classtoken string stylecolor:rgb(163, 21, 21)>"2"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> dice /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> container/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>initialObjects/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>diceTree/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>viewWith/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>treeViewConfiguration/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>initialize/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>new/span>span classtoken plain> /span>span classtoken class-name stylecolor:rgb(38, 127, 153)>Dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> value/span>span classtoken operator stylecolor:rgb(0, 0, 0)>:/span>span classtoken plain> /span>span classtoken number stylecolor:rgb(9, 134, 88)>1/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> id /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>await/span>span classtoken plain> container/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>attach/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken function stylecolor:rgb(0, 0, 255)>renderDiceRoller/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>root/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> root/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>return/span>span classtoken plain> id/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> /span>span classtoken function-variable function stylecolor:rgb(0, 0, 255)>loadExistingDice/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>async/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>id/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain> container /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>await/span>span classtoken plain> client/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>getContainer/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>id/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> containerSchema/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> /span>span classtoken string stylecolor:rgb(163, 21, 21)>"2"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> dice /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> container/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>initialObjects/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>diceTree/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>viewWith/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>treeViewConfiguration/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken function stylecolor:rgb(0, 0, 255)>renderDiceRoller/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>root/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> root/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>async/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>function/span>span classtoken plain> /span>span classtoken function stylecolor:rgb(0, 0, 255)>start/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>if/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>location/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>hash/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>await/span>span classtoken plain> /span>span classtoken function stylecolor:rgb(0, 0, 255)>loadExistingDice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>location/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>hash/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>substring/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken number stylecolor:rgb(9, 134, 88)>1/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>else/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> id /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>await/span>span classtoken plain> /span>span classtoken function stylecolor:rgb(0, 0, 255)>createNewDice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> location/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>hash /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> id/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken function stylecolor:rgb(0, 0, 255)>start/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>catch/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>error/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>>/span>span classtoken plain> /span>span classtoken builtin stylecolor:rgb(0, 112, 193)>console/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>error/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>error/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Define the view/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> template /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> document/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>createElement/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken string stylecolor:rgb(163, 21, 21)>"template"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>template/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>innerHTML /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken template-string template-punctuation string stylecolor:rgb(163, 21, 21)>`/span>span classtoken template-string html language-html>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html> /span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)></span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>style/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html style language-css>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css selector class>.wrapper/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>display/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> flex/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>flex-direction/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> column/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>align-items/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> center/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken template-string html language-html style language-css>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css selector class>.dice/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>width/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css number stylecolor:rgb(9, 134, 88)>200/span>span classtoken template-string html language-html style language-css unit>px/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken template-string html language-html style language-css>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css selector class>.rollButton/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>width/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css number stylecolor:rgb(9, 134, 88)>118/span>span classtoken template-string html language-html style language-css unit>px/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>height/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css number stylecolor:rgb(9, 134, 88)>48/span>span classtoken template-string html language-html style language-css unit>px/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>background/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css hexcode color>#0078D4/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>border-style/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> none/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>border-radius/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css number stylecolor:rgb(9, 134, 88)>8/span>span classtoken template-string html language-html style language-css unit>px/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken template-string html language-html style language-css>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css selector class>.rollText/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>font-size/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css number stylecolor:rgb(9, 134, 88)>20/span>span classtoken template-string html language-html style language-css unit>px/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css property>color/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>:/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css hexcode color>#FFFFFF/span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html style language-css punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken template-string html language-html style language-css>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html style language-css> /span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)><//span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>style/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html> /span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)></span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>div/span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)> /span>span classtoken template-string html language-html tag attr-name stylecolor:rgb(255, 0, 0)>class/span>span classtoken template-string html language-html tag attr-value punctuation attr-equals stylecolor:rgb(4, 81, 165)>/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag attr-value stylecolor:rgb(128, 0, 0)>wrapper/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html> /span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)></span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>img/span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)> /span>span classtoken template-string html language-html tag attr-name stylecolor:rgb(255, 0, 0)>class/span>span classtoken template-string html language-html tag attr-value punctuation attr-equals stylecolor:rgb(4, 81, 165)>/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag attr-value stylecolor:rgb(128, 0, 0)>dice/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>/>/span>span classtoken template-string html language-html>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html> /span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)></span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>button/span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)> /span>span classtoken template-string html language-html tag attr-name stylecolor:rgb(255, 0, 0)>class/span>span classtoken template-string html language-html tag attr-value punctuation attr-equals stylecolor:rgb(4, 81, 165)>/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag attr-value stylecolor:rgb(128, 0, 0)>rollButton/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)></span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>span/span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)> /span>span classtoken template-string html language-html tag attr-name stylecolor:rgb(255, 0, 0)>class/span>span classtoken template-string html language-html tag attr-value punctuation attr-equals stylecolor:rgb(4, 81, 165)>/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag attr-value stylecolor:rgb(128, 0, 0)>rollText/span>span classtoken template-string html language-html tag attr-value punctuation stylecolor:rgb(4, 81, 165)>"/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html>Roll/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)><//span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>span/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)><//span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>button/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html> /span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)><//span>span classtoken template-string html language-html tag stylecolor:rgb(128, 0, 0)>div/span>span classtoken template-string html language-html tag punctuation stylecolor:rgb(4, 81, 165)>>/span>span classtoken template-string html language-html>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken template-string html language-html>/span>span classtoken template-string template-punctuation string stylecolor:rgb(163, 21, 21)>`/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> /span>span classtoken function-variable function stylecolor:rgb(0, 0, 255)>renderDiceRoller/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> elem/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> elem/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>appendChild/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>template/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>content/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>cloneNode/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken boolean>true/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> rollButton /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> elem/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>querySelector/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken string stylecolor:rgb(163, 21, 21)>".rollButton"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> diceElem /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> elem/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>querySelector/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken string stylecolor:rgb(163, 21, 21)>".dice"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Set the value at our dataKey with a random number between 1 and 6./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> rollButton/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function-variable function stylecolor:rgb(0, 0, 255)>onclick/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>value /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> Math/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>floor/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>Math/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>random/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>*/span>span classtoken plain> /span>span classtoken number stylecolor:rgb(9, 134, 88)>6/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>+/span>span classtoken plain> /span>span classtoken number stylecolor:rgb(9, 134, 88)>1/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Get the current value of the shared data to update the view whenever it changes./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> /span>span classtoken function-variable function stylecolor:rgb(0, 0, 255)>updateDice/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken plain> /span>span classtoken operator stylecolor:rgb(0, 0, 0)>>/span>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>{/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken keyword stylecolor:rgb(0, 0, 255)>const/span>span classtoken plain> diceValue /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>value/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> diceElem/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>src /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken template-string template-punctuation string stylecolor:rgb(163, 21, 21)>`/span>span classtoken template-string string stylecolor:rgb(163, 21, 21)>/images/dice-/span>span classtoken template-string interpolation interpolation-punctuation punctuation stylecolor:rgb(4, 81, 165)>${/span>span classtoken template-string interpolation>diceValue/span>span classtoken template-string interpolation interpolation-punctuation punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken template-string string stylecolor:rgb(163, 21, 21)>.png/span>span classtoken template-string template-punctuation string stylecolor:rgb(163, 21, 21)>`/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> diceElem/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>alt /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> diceValue/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>toString/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken function stylecolor:rgb(0, 0, 255)>updateDice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain styledisplay:inline-block>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Use the changed event to trigger the rerender whenever the value changes./span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> Tree/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken function stylecolor:rgb(0, 0, 255)>on/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>(/span>span classtoken plain>dice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> /span>span classtoken string stylecolor:rgb(163, 21, 21)>"nodeChanged"/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>,/span>span classtoken plain> updateDice/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>)/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> /span>span classtoken comment stylecolor:rgb(0, 128, 0)>// Setting "fluidStarted" is just for our test automation/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain> window/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>./span>span classtoken plain>fluidStarted /span>span classtoken operator stylecolor:rgb(0, 0, 0)>/span>span classtoken plain> /span>span classtoken boolean>true/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>span classtoken plain>/span>/span>br>/span>span classtoken-line codeLine_sU1T stylecolor:#000000>span classcodeLineNumber_XyO_>/span>span classcodeLineContent_BeAg>span classtoken plain>/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>}/span>span classtoken punctuation stylecolor:rgb(4, 81, 165)>;/span>/span>br>/span>/code>/pre>div classbuttonGroup_U8Hj>button typebutton aria-labelCopy code to clipboard titleCopy classclean-btn>span classcopyButtonIcons_AtQO aria-hiddentrue>svg viewBox0 0 24 24 classcopyButtonIcon_dJYl>path fillcurrentColor dM19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z>/path>/svg>svg viewBox0 0 24 24 classcopyButtonSuccessIcon_B0vL>path fillcurrentColor dM21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z>/path>/svg>/span>/button>/div>/div>/div>/div>/div>/div>div classffcom-how-it-works-output-column>div classffcom-how-it-works-column-label>Sample Output/div>div classffcom-how-it-works-dice-cards>div classffcom-card-with-blur>div classffcom-dice-roller-card>div classffcom-dice-roller-card-nav-bar>http://localhost:8080#1764551811641/div>img classffcom-dice-image srchttps://storage.fluidframework.com/static/images/website/dice/1.png altDice showing 1 aria-livepolite>button classffcom-roll-button>span classffcom-roll-button-label>Roll/span>/button>/div>/div>div classffcom-card-with-blur>div classffcom-dice-roller-card>div classffcom-dice-roller-card-nav-bar>http://localhost:8080#1764551811641/div>img classffcom-dice-image srchttps://storage.fluidframework.com/static/images/website/dice/1.png altDice showing 1 aria-livepolite>button classffcom-roll-button>span classffcom-roll-button-label>Roll/span>/button>/div>/div>/div>/div>/div>div classffcom-how-it-works-try-samples-row>a classffcom-how-it-works-try-samples-link hrefhttps://github.com/microsoft/FluidHelloWorld>Try the dice-roller sample/a>a classffcom-how-it-works-try-samples-link hrefhttps://github.com/Microsoft/FluidExamples>Try the other samples/a>/div>/div>/div>/div>div classffcom-home-page-section stylebackground:linear-gradient(to bottom, rgba(255, 253, 251, 1) 10%, rgba(255, 253, 251, 0.2)), url(https://storage.fluidframework.com/static/images/website/home/services-section-background.png);background-position:center;background-repeat:no-repeat;background-size:cover>div classffcom-home-page-section-inner>div classffcom-section-header>div classffcom-section-header-inner>h2 classffcom-section-header-title>Fluid Framework in the Cloud/h2>/div>/div>div classffcom-service-content-container>img srchttps://storage.fluidframework.com/static/images/website/home/services-diagram.png altFluid architecture diagram stylewidth:100%>div classffcom-services>div classffcom-service>div classffcom-service-content>img srchttps://storage.fluidframework.com/static/images/website/azure-logo.png classffcom-service-card-logo altMicrosoft Azure logo>div classffcom-service-title>Azure Fluid Relay/div>div classffcom-service-description>Azure Fluid Relay is a cloud service that enables real-time collaboration on shared data models. It is a fully managed service that provides a secure, scalable, and reliable way to connect clients to each other and to the data models they share./div>a classffcom-learn-more-link hrefhttps://azure.microsoft.com/en-us/products/fluid-relay/#overview target_blank relnoopener noreferrer aria-labelAzure Fluid Relay>Learn more/a>/div>/div>div classffcom-service>div classffcom-service-content>img srchttps://storage.fluidframework.com/static/images/website/microsoft-logo.png classffcom-service-card-logo altMicrosoft logo>div classffcom-service-title>SharePoint Embedded/div>div classffcom-service-description>Microsoft SharePoint Embedded is a cloud-based file and document management system suitable for use in any application. It is a new API-only solution which enables app developers to harness the power of the Microsoft 365 file and document storage platform for any app, and is suitable for enterprises building line of business applications and ISVs building multi-tenant applications./div>a classffcom-learn-more-link hrefhttps://learn.microsoft.com/en-us/sharepoint/dev/embedded/overview target_blank relnoopener noreferrer aria-labelSharePoint Embedded>Learn more/a>/div>/div>/div>/div>/div>/div>/div>/div>/main>/div>footer classfooter>div classffcom-footer-social>a hrefhttps://x.com/fluidframework target_blank relnoopener noreferrer classfooter__link-item aria-labelFluid Framework on X (Twitter).>svg xmlnshttp://www.w3.org/2000/svg width1em height1em fillnone viewBox0 0 1200 1227 classxSvg_neD1 style--dark:#000;--light:#fff>path dM714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z>/path>/svg> @fluidframework/a>a hrefhttps://github.com/microsoft/FluidFramework target_blank relnoopener noreferrer classfooter__link-item aria-labelFluid Framework on GitHub.>svg viewBox0 0 256 250 width1em height1em classgithubSvg_cUEy xmlnshttp://www.w3.org/2000/svg style--dark:#000;--light:#fff preserveAspectRatioxMidYMid>path dM128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z>/path>/svg> fluid-framework/a>a hrefhttps://github.com/microsoft/FluidFramework/discussions target_blank relnoopener noreferrer classfooter__link-item aria-labelAsk questions on GitHub.>💬 Ask questions/a>a hrefhttps://github.com/microsoft/FluidFramework/issues/new/choose target_blank relnoopener noreferrer classfooter__link-item aria-labelReport issues on GitHub.>🐛 Report issues/a>/div>div classffcom-footer-copyright>a hrefhttps://www.microsoft.com/ relnoopener noreferrer classfooterLogoLink_DDai>img srchttps://storage.fluidframework.com/static/images/microsoft-logo-inverted.png altMicrosoft Logo classfooter__logo themedComponent_EBwV themedComponent--light_M5U7 width200>img srchttps://storage.fluidframework.com/static/images/microsoft-logo-inverted.png altMicrosoft Logo classfooter__logo themedComponent_EBwV themedComponent--dark_ylCQ width200>/a>div classfooter__copyright>Copyright © 2025 Microsoft/div>/div>div classffcom-footer-privacy>a hrefhttps://privacy.microsoft.com/privacystatement target_blank relnoopener noreferrer classfooter__link-item>Privacy/a>a hrefhttps://go.microsoft.com/fwlink/?linkid2259814 target_blank relnoopener noreferrer classfooter__link-item>Consumer Health Privacy/a>a hrefhttps://www.microsoft.com/legal/terms-of-use target_blank relnoopener noreferrer classfooter__link-item>Terms of Use/a>a hrefhttps://github.com/microsoft/FluidFramework/blob/main/LICENSE target_blank relnoopener noreferrer classfooter__link-item>License/a>/div>/footer>/div>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]