Archives
/
learn-wgpu
mirror of https://github.com/sotrh/learn-wgpu
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
gh-pages
dependabot/cargo/mio-0.8.11
dependabot/npm_and_yarn/tar-6.2.1
master
0.19
hdr
0.17
0.16
0.15
0.14
0.13
web2
0.12
web
0.11
0.10
0.9
0.8
0.7
0.6
0.5
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5cb5d83c2a'
${ noResults }
learn-wgpu/assets/js/51.820d6108.js

1 line
106 KiB
JavaScript
Raw Blame History

(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{388:function(A,t){A.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAABnsVYUAAAAA3NCSVQICAjb4U/gAAAAGXRFWHRTb2Z0d2FyZQBnbm9tZS1zY3JlZW5zaG907wO/PgAAGrRJREFUeJzs3ctqQkEQQEE7+P+/PFkEgoKGED0ZH1Wri4j0QqQ5DOPhAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI9pdg8AwN+ttS6+PuPnHQAADofrO/Mp+zNA52P3AAAAAAAAvCYBGgAAAACAhAANAAAAAEDCJUcAT8YddgAA8LPTnfnabuz/VAD+hxPQAAAAAAAkBGgAAAAAABICNAAAAAAACRcbATwx99YBAMCXW3ZjezVAxwloAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAxHH3AAAAAAC3mpnv57XWxefT9/zmcwC4nRPQAAAAAAAkBGgAAAAAABICNAAAAAAACRcbATyB03vrbuE+OwAA3s1vdml7MkDHCWgAAAAAABICNAAAAAAACQEaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgHc3uAQAAAACA+1tr7R7hzIwU+Y4+dg8AAAAAAMBrEqABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgcdw/AHmut3SOcmZndIwAAAAAAd+YENAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASBx3DwAAd7DW2j3CQ5uZ3SMAAADwjpyABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABICNAAAAAAACQEaAAAAAICEAA0AAAAAQEKABgAAAAAgIUADAAAAAJAQoAEAAAAASAjQAAAAAAAkBGgAAAAAABKzewD2WGvtHuHMjK8iAAAAALwaJ6ABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAJARoAAAAAAASAjQAAAAAAAkBGgAAAACAhAANAAAAAEBCgAYAAAAAICFAAwAAAACQEKABAAAAAEgI0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBne3BAAgAAACDo/+t2BCoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADARnUXMiKE+bnlAAAAAElFTkSuQmCC"},460:function(A,t,s){"use strict";s.r(t);var a=s(7),n=Object(a.a)({},(function(){var A=this,t=A._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":A.$parent.slotKey}},[t("h1",{attrs:{id:"pong"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pong"}},[A._v("#")]),A._v(" Pong")]),A._v(" "),t("p",[t("img",{attrs:{src:s(388),alt:"A screenshot of pong"}})]),A._v(" "),t("p",[A._v('Practically the "Hello World!" of games. Pong has been remade thousands of times. I know Pong. You know Pong. We all know Pong. That being said, this time I wanted to put in a little more effort than most people do. This showcase has a basic menu system, sounds, and different game states.')]),A._v(" "),t("p",[A._v("The architecture is not the best as I prescribed to the \"get things done\" mentality. If I were to redo this project, I'd change a lot of things. Regardless, let's get into the postmortem.")]),A._v(" "),t("h2",{attrs:{id:"the-architecture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-architecture"}},[A._v("#")]),A._v(" The Architecture")]),A._v(" "),t("p",[A._v("I was messing around with separating state from the render code. It ended up similar to an Entity Component System model.")]),A._v(" "),t("p",[A._v("I had a "),t("code",[A._v("State")]),A._v(" class with all of the objects in the scene. This included the ball and the paddles, as well as the text for the scores and even the menu. "),t("code",[A._v("State")]),A._v(" also included a "),t("code",[A._v("game_state")]),A._v(" field of type "),t("code",[A._v("GameState")]),A._v(".")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Copy, Clone, Eq, PartialEq)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("GameState")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The "),t("code",[A._v("State")]),A._v(" class didn't have any methods on it as I was taking a more data-oriented approach. Instead, I created a "),t("code",[A._v("System")]),A._v(" trait and created multiple structs that implemented it.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("trait")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("System")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[allow(unused_variables)]")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("State")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Event")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The systems would be in charge of controlling updating the different objects' states (position, visibility, etc), as well as updating the "),t("code",[A._v("game_state")]),A._v(" field. I created all the systems on startup and used a "),t("code",[A._v("match")]),A._v(" on "),t("code",[A._v("game_state")]),A._v(" to determine which ones should be allowed to run (the "),t("code",[A._v("visiblity_system")]),A._v(" always runs as it is always needed).")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[A._v("visiblity_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Playing")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n ball_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n play_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Serving")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n serving_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameOver")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n game_over_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("update_state")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("input"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" events"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("game_state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("MainMenu")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n menu_system"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("GameState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Quiting")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("It's definitely not the cleanest code, but it works.")]),A._v(" "),t("p",[A._v("I ended up having 6 systems in total.")]),A._v(" "),t("ol",[t("li",[t("p",[A._v("I added the "),t("code",[A._v("VisibilitySystem")]),A._v(" near the end of development. Up to that point, all the systems had to set the "),t("code",[A._v("visible")]),A._v(" field of the objects. That was a pain and cluttered the logic. Instead, I decided to create the "),t("code",[A._v("VisiblitySystem")]),A._v(" to handle that.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("MenuSystem")]),A._v(" handled controlling what text was focused, and what would happen when the user pressed the enter key. If the "),t("code",[A._v("Play")]),A._v(" button was focused, pressing enter would change "),t("code",[A._v("game_state")]),A._v(" to "),t("code",[A._v("GameState::Serving")]),A._v(" which would start the game. The "),t("code",[A._v("Quit")]),A._v(" button would shift to "),t("code",[A._v("GameState::Quiting")]),A._v(".")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("ServingSystem")]),A._v(" sets the ball's position to "),t("code",[A._v("(0.0, 0.0)")]),A._v(", updates the score texts, and shifts into "),t("code",[A._v("GameState::Playing")]),A._v(" after a timer.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("PlaySystem")]),A._v(" controls the players. It allows them to move and keeps them from leaving the play space. This system runs on both "),t("code",[A._v("GameState::Playing")]),A._v(" as well as "),t("code",[A._v("GameState::Serving")]),A._v(". I did this to allow the players to reposition themselves before the serve. The "),t("code",[A._v("PlaySystem")]),A._v(" also will shift into "),t("code",[A._v("GameState::GameOver")]),A._v(" when one of the players' scores is greater than 2.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("BallSystem")]),A._v(" system controls the ball's movement as well as its bouncing of walls/players. It also updates the score and shifts to "),t("code",[A._v("GameState::Serving")]),A._v(" when the ball goes off the side of the screen.")])]),A._v(" "),t("li",[t("p",[A._v("The "),t("code",[A._v("GameOver")]),A._v(" system updates the "),t("code",[A._v("win_text")]),A._v(" and shifts to "),t("code",[A._v("GameState::MainMenu")]),A._v(" after a delay.")])])]),A._v(" "),t("p",[A._v("I found the system approach quite nice to work with. My implementation wasn't the best, but I would like to work with it again. I might even implement my own ECS.")]),A._v(" "),t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input"}},[A._v("#")]),A._v(" Input")]),A._v(" "),t("p",[A._v("The "),t("code",[A._v("System")]),A._v(" trait, originally had a "),t("code",[A._v("process_input")]),A._v(" method. This became a problem when I was implementing allowing players to move between serves. The players would get stuck when the "),t("code",[A._v("game_state")]),A._v(" switched from "),t("code",[A._v("Serving")]),A._v(" to "),t("code",[A._v("Playing")]),A._v(" as the inputs were getting stuck. I only called "),t("code",[A._v("process_input")]),A._v(" on systems that were currently in use. Changing that would be finicky, so I decided to move all the input code into its own struct.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("event"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Default)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Input")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_up_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p1_down_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_up_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" p2_down_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" enter_pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Input")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Default")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("default")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("update")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" key"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" state "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("==")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ElementState")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" key "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Up")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Down")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("W")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("S")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("VirtualKeyCode")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Return")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("enter_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" pressed"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("true")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n _ "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_up_pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_up_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_up_pressed\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("ui_down_pressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("bool")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p1_down_pressed "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("||")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("p2_down_pressed\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("This works really well. I simply pass this struct into the "),t("code",[A._v("update_state")]),A._v(" method.")]),A._v(" "),t("h2",{attrs:{id:"render"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[A._v("#")]),A._v(" Render")]),A._v(" "),t("p",[A._v("I used "),t("a",{attrs:{href:"https://docs.rs/wgpu_glyph",target:"_blank",rel:"noopener noreferrer"}},[A._v("wgpu_glyph"),t("OutboundLink")],1),A._v(" for the text and white quads for the ball and paddles. There's not much to say here, it's Pong after all.")]),A._v(" "),t("p",[A._v("I did mess around with batching, however. It was totally overkill for this project, but it was a good learning experience. Here's the code if you're interested.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("struct")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("impl")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("QuadBufferBuilder")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vec")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n current_quad"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_ball")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ball")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" min_y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" max_y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" ball"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("radius"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n \n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_player")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("state"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Player")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("visible "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("-")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("x "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" player"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("size"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("y "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0.5")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" \n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("push_quad")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("mut")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("Self")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" min_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("max_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vertex")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n position"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("min_x"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" max_y"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("into")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("extend")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("[")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("0")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("2")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("4")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("3")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("]")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("current_quad "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("+=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("1")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("build")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(":")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wgpu"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Device")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("->")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("vertex_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("StagingBuffer")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("device"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("self")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),A._v("index_data"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("len")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("as")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("h2",{attrs:{id:"sound"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sound"}},[A._v("#")]),A._v(" Sound")]),A._v(" "),t("p",[A._v("I used "),t("a",{attrs:{href:"https://docs.rs/rodio",target:"_blank",rel:"noopener noreferrer"}},[A._v("rodio"),t("OutboundLink")],1),A._v(" for sound. I created a "),t("code",[A._v("SoundPack")]),A._v(" class to store the sounds. Deciding how to get the sounds to play took some thinking. I chose to pass in a "),t("code",[A._v("Vec<state::Event>")]),A._v(" into the "),t("code",[A._v("update_state")]),A._v(" method. The system would then push an event to the "),t("code",[A._v("Vec")]),A._v(". The "),t("code",[A._v("Event")]),A._v(" enum is listed below.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[derive(Debug, Copy, Clone)]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("enum")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token type-definition class-name"}},[A._v("Event")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("ButtonPressed")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("FocusChanged")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("BallBounce")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cgmath"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Vector2")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("<")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("f32")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v(">")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Score")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("u32")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("I was going to have "),t("code",[A._v("BallBounce")]),A._v(" play a positioned sound using a "),t("code",[A._v("SpatialSink")]),A._v(", but I was getting clipping issues, and I wanted to be done with the project. Aside from that, the events system worked nicely.")]),A._v(" "),t("h2",{attrs:{id:"wasm-support"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#wasm-support"}},[A._v("#")]),A._v(" WASM Support")]),A._v(" "),t("p",[A._v("This example works on the web, but there are a few steps that I needed to take to make things work. The first one was that I needed to switch to using a "),t("code",[A._v("lib.rs")]),A._v(" instead of just "),t("code",[A._v("main.rs")]),A._v(". I opted to use "),t("a",{attrs:{href:"https://rustwasm.github.io/wasm-pack/",target:"_blank",rel:"noopener noreferrer"}},[A._v("wasm-pack"),t("OutboundLink")],1),A._v(" to create the web assembly. I could have kept the old format by using wasm-bindgen directly, but I ran into issues with using the wrong version of wasm-bindgen, so I elected to stick with wasm-pack.")]),A._v(" "),t("p",[A._v("In order for wasm-pack to work properly I first needed to add some dependencies:")]),A._v(" "),t("div",{staticClass:"language-toml[dependencies] extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[A._v('cfg-if = "1"\nenv_logger = "0.10"\nwinit = "0.28"\nanyhow = "1.0"\nbytemuck = { version = "1.12", features = [ "derive" ] }\ncgmath = "0.18"\npollster = "0.3"\nwgpu = { version = "0.18", features = ["spirv"]}\nwgpu_glyph = "0.18"\nrand = "0.8"\nrodio = { version = "0.15", default-features = false, features = ["wav"] }\nlog = "0.4"\ninstant = "0.1"\n\n[target.\'cfg(target_arch = "wasm32")\'.dependencies]\nconsole_error_panic_hook = "0.1.6"\nconsole_log = "1.0"\ngetrandom = { version = "0.2", features = ["js"] }\nrodio = { version = "0.15", default-features = false, features = ["wasm-bindgen", "wav"] }\nwasm-bindgen-futures = "0.4.20"\nwasm-bindgen = "=0.2.87"\nweb-sys = { version = "0.3.53", features = [\n "Document",\n "Window",\n "Element",\n]}\nwgpu = { version = "0.18", features = ["spirv", "webgl"]}\n\n[build-dependencies]\nanyhow = "1.0"\nfs_extra = "1.2"\nglob = "0.3"\nrayon = "1.4"\nnaga = { version = "0.9", features = ["glsl-in", "spv-out", "wgsl-out"]}\n\n')])])]),t("p",[A._v("I'll highlight a few of these:")]),A._v(" "),t("ul",[t("li",[A._v("rand: If you want to use rand on the web, you need to include getrandom directly and enable its "),t("code",[A._v("js")]),A._v(" feature.")]),A._v(" "),t("li",[A._v("rodio: I had to disable all of the features for the WASM build, and then enabled them separately. The "),t("code",[A._v("mp3")]),A._v(" feature specifically wasn't working for me. There might have been a workaround, but since I'm not using mp3 in this example I just elected to only use wav.")]),A._v(" "),t("li",[A._v("instant: This crate is basically just a wrapper around "),t("code",[A._v("std::time::Instant")]),A._v(". In a normal build, it's just a type alias. In web builds it uses the browser's time functions.")]),A._v(" "),t("li",[A._v("cfg-if: This is a convenient crate for making platform-specific code less horrible to write.")]),A._v(" "),t("li",[A._v("env_logger and console_log: env_logger doesn't work on web assembly so we need to use a different logger. console_log is the one used in the web assembly tutorials, so I went with that one.")]),A._v(" "),t("li",[A._v("wasm-bindgen: This crate is the glue that makes Rust code work on the web. If you are building using the wasm-bindgen command you need to make sure that the command version of wasm-bindgen matches the version in Cargo.toml "),t("strong",[A._v("exactly")]),A._v(" otherwise you'll have problems. If you use wasm-pack it will download the appropriate wasm-bindgen binary to use for your crate.")]),A._v(" "),t("li",[A._v('web-sys: This has functions and types that allow you to use different methods available in js such as "getElementById()".')])]),A._v(" "),t("p",[A._v("Now that that's out of the way let's talk about some code. First, we need to create a function that will start our event loop.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch="),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("wasm_bindgen"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("prelude"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("*")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg_attr(target_arch="),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(", wasm_bindgen(start))]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("pub")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("fn")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token function-definition function"}},[A._v("start")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Snipped...")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("The "),t("code",[A._v("wasm_bindgen(start)")]),A._v(" tell's wasm-bindgen that this function should be started as soon as the web assembly module is loaded by javascript. Most of the code inside this function is the same as what you'd find in other examples on this site, but there is some specific stuff we need to do on the web.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("cfg_if"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token macro property"}},[A._v("cfg_if!")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_log"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("init_with_level")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("log"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Level")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Warn")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Could\'t initialize logger"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("std"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("panic"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_hook")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Box")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("console_error_panic_hook"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),A._v("hook"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("else")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("env_logger"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("init")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("This code should run before you try to do anything significant. It sets up the logger based on what architecture you're building for. Most architectures will use "),t("code",[A._v("env_logger")]),A._v(". The "),t("code",[A._v("wasm32")]),A._v(" architecture will use "),t("code",[A._v("console_log")]),A._v(". It's also important that we tell Rust to forward panics to javascript. If we didn't do this we would have no idea when our Rust code panics.")]),A._v(" "),t("p",[A._v("Next, we create a window. Much of it is like we've done before, but since we are supporting fullscreen we need to do some extra steps.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" event_loop "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("EventLoop")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" monitor "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" event_loop"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("primary_monitor")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" video_mode "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" monitor"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("video_modes")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("next")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" size "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" video_mode"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("clone")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("map_or")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("800")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("600")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" vm"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" window "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowBuilder")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_visible")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token boolean"}},[A._v("false")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_title")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Pong"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("with_fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("video_mode"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("map")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Exclusive")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("vm"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("build")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("event_loop"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("unwrap")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// WASM builds don't have access to monitor information, so")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// we should specify a fallback resolution")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("if")]),A._v(" window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("is_none")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("set_inner_size")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("PhysicalSize")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("new")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[A._v("512")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("We then have to do some web-specific stuff if we are on that platform.")]),A._v(" "),t("div",{staticClass:"language-rust extra-class"},[t("pre",{pre:!0,attrs:{class:"language-rust"}},[t("code",[t("span",{pre:!0,attrs:{class:"token attribute attr-name"}},[A._v("#[cfg(target_arch = "),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm32"')]),A._v(")]")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("use")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("winit"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("platform"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),A._v("web"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("WindowExtWebSys")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("window")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("win"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" win"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("document")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("and_then")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token closure-params"}},[t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")]),A._v("doc"),t("span",{pre:!0,attrs:{class:"token closure-punctuation punctuation"}},[A._v("|")])]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" dst "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" doc"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("get_element_by_id")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"wasm-example"')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("let")]),A._v(" canvas "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token namespace"}},[A._v("web_sys"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")])]),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Element")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("::")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("from")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("window"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("canvas")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n dst"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("append_child")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("&")]),A._v("canvas"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("ok")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("?")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token comment"}},[A._v("// Request fullscreen, if denied, continue as normal")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token keyword"}},[A._v("match")]),A._v(" canvas"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("request_fullscreen")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Ok")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("{")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(",")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Err")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),A._v("_"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[A._v("=>")]),A._v(" "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n\n "),t("span",{pre:!0,attrs:{class:"token class-name"}},[A._v("Some")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),A._v("\n "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(".")]),t("span",{pre:!0,attrs:{class:"token function"}},[A._v("expect")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("(")]),t("span",{pre:!0,attrs:{class:"token string"}},[A._v('"Couldn\'t append canvas to document body."')]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(")")]),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v(";")]),A._v("\n"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[A._v("}")]),A._v("\n")])])]),t("p",[A._v("Everything else works the same.")]),A._v(" "),t("h2",{attrs:{id:"summary"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#summary"}},[A._v("#")]),A._v(" Summary")]),A._v(" "),t("p",[A._v("A fun project to work on. It was overly architected, and kinda hard to make changes, but a good experience nonetheless.")]),A._v(" "),t("p",[A._v("Try the code down below! (Controls currently require a keyboard.)")]),A._v(" "),t("WasmExample",{attrs:{example:"pong"}})],1)}),[],!1,null,null,null);t.default=n.exports}}]);
Reference in New Issue View Git Blame Copy Permalink