 This is what I am Okay, cool, we can get started. Okay, so this is what I'm talking. This is my talk Do I have my mouse? Okay so I'm talking about I'm talking about I'm trying to so Christmas season is there. I'm trying to give you another reason to buy a switch so How does that relate to our life as a developer, right? So it turns out you can use your professional skills to turn part of your switch mainly the joy cons into a quicker that you can use to interact with your page So let's get this started right So before we dive in let me give you some some more context for nearly Half a year I've been building the slides feature for my own site and You might you might wonder since there are already so many existing arts including the one that we just saw just now I still create my own presentation size so those review JS which is Has been there for you for for a few years and a slice.com is like the commercial product on top of review JS and then there's MDX that which turns your MDX file into a Presentation slice and then there's actually a gas meeting on built on top of MDS deck and it's that so cool, which is yet presentation framework and I need to do not know drop drop box Dropbox paper can present and then many developers also choose to build their own So Why am I still creating my own presentation slides? And I think first that comes down to one very philosophical question. Do chefs cook at home? so this is about my own ego as a developer who writes professional rear components at work and Chefs can cook at home and feed everybody. What can I do with my professional skills at home? Also Since I write out all the scripts for nearly most talks I've done in my life I appreciate that good talks are also good reads and since How I create the slides is also roughly to take the headings out I write out the scripts and I take all the headings out and basically just present all the headings Images Add some emojis and then turn all the spirits into speaker notes. So I Can literally take one mark down file and compile that to article or presentation when when According to the needs Okay, so it kind of shares the same spirit with the gas meeting waves that Raj just talked about right, but it's So I have my own approach So with all the motivations I mentioned above I started building the The Re-acknowledgeable site Five months ago with the both of this meetup and then there is a very crude version of this I want to show you here Shit sorry Okay, so this is the initial very crude version. It's not just very crude. It's actually cheating. So I press P here You have a presentation slide and then if you press spacebar, it's gonna page But that's actually cheating because you can just scroll back up. That's not yeah Okay, let's let's let's go back. So Are we still here? Okay, so after the initial or crude version my appetite kind of just grew bigger Like I need a timer. So I've got the timer. Let me see if I can show you If I open my speaker notes, then Speaker notes, then you can see the timer on the bottom and I can pause and I can start I Can have a speaker mode I can have both The the speaker notes as well as the presentation And I can have just a presentation that you're seeing here and I can go full swing as you can like now it's going full swing And yeah, and eventually you come down to this. Can I be more controller size? So actually they can be quite trivial once you have your keyboard shortcut up Because there are many clickers out there already and most of them will map to a key on your keyboard Some even got very cool features such as a pointer Um, and then later on I was a just come with hash earlier this year and doing the closing keynote by jay consumer He's like look at here. What are they? What are we holding on to? Can you see here? That's each they each hold on to a jay computer So like this is the kind of things that all the cookies Like you guys here are quite excited about it. So I'm going to do this So, um So I went ahead and borrowed A pair of jay pumps. I connected them to a mag with bluetooth the connection works um, then I tried to click on it and my slides and nothing works, but apparently so, um No magic will happen because those are not Extra keyboards and those are not extra mouse They're game pads and we actually need to create the magic to make them work in browsers So namely we need the game pad api And by the way, what are your expectations? So first my naive imagination was that I read something similar to the keyboard event handlers, right? It looks like this So maybe you have some imaginary joy compressed and then you can say the event and then you can do your own thing wrong um So the only event handlers that the game pad api it exposes Are the game pad connected and the game pad disconnected apis. So how to use them? Um, so it turns out you need to pull compressors by yourself um, then this is that I don't know about you, but I actually felt quite cheated But like like the cat well that's brian's cat by the way the name is also gatsby Um, trying to relate my talk to gatsby today. I mean it's not um, so how to pull key presses um, it turns out that we um, so if you follow the mdm guide You will implement something called a game group because we're coding the game pad api, right? So the main idea of a game group is that it's like a snake that eats its own tail So for each round we do what we need to do Which normally is to do some updates and once we're done we're called game group again And so so that kind of just keeps running And then we should not forget to kick it off by calling it first But in real life, we're browser, we're web developers Um, we are interrupting the game group with the browser's event loop So in this case, we're relying on the browser's request animation frame dot api So we're kind of weaving our updates into the browser's event loop at one frame at a time And we start this process when the game pad is connected and we stop it when they disconnect So everybody stay with me Yeah, cool. Okay So if you want to learn a bit more about game group you can you can you can go read this book Because here today we're only very shallowly talking about game group But that actually is a very interesting topic by itself and it's completely worth a separate talk Maybe I would might talk some later time This original intent was used to align game processors across different CPU time without time So you'll have the chance during your game group to adjust your time You can slice off extra time or you can match your rendering with the process with respect to real physical time So I also learned last week from Sean's talk that we are also users Work loop and time slicing to keep time in check similarly With a similar Design with the game So how what we actually do inside a game group Is that we can use the DONG's navigator API to get access to a game pass. We don't have to do that. We can also maintain our own game pass when the game pad connected And then what we peek into was inside a game object It will be this giant object containing the data representing our most updated state of the game pad All of them are mutating so So axis is the joystick And then buttons is an array of buttons each mapping to one of the buttons on your game pad There's some other information and then beneath here We have hosts, which will be the gravity sensor So at once again at each single frame we have the most updated information of our game pad And now so we have access to all those data available that makes so sense to everyone here, right? We really have all the freedom however we want to use them. So I think this is when I think how we organize our code matters Um, you can go for an object oriented approach or go for my use case. I find it the most Convenient when I supply a list of buttons I care about and I supply the callbacks. I want to fire If such and such buttons are pressed And during each frame of the game loop, I can loop through all these buttons and update accordingly okay, so Let's see some demos earlier this year. I happen to quote this beautiful css switch up and at the end of this year turns out the more use So I have a code theme loss implementation So let's exit full screen Okay So, uh, I call it up this little demo that you can uh, how many of us here have a switch at home? Oh, oh, that's nice. Okay. You can you can put this in let's see if this works so So I'm connecting a second. This is my first uh game pad and then I'm connecting my second game pad um Hang on So Okay, it looks like it's connected. Oh, yeah, it is. Okay So if I press the minus sign you should see Can you see see a shaking? But I'm not sure it will work anymore. Right Okay, let's go back to the figures and this connection, uh, then if I press this Okay Okay, it's connected to the other one Uh Okay, let's try connecting this again So is this connected? No, it's not connected. It's connected to my size. Well, uh cavias This All right, so I'm just going to describe to you what's going to happen if you have a switch at home Connect it to this uh demo and then you can press the bumper or the trigger Uh, or some buttons you like and then some of them I have coded some interaction that will basically the heart will shake if you figure out the correct button to cast Okay, so Let's go back to the slides Oops, sorry, uh spoiler Um Where is my side? Uh, okay Oh, okay Um, so do I still have it? Okay. Um This is also another cavias. I learned that if you connect two bin pads to a firefox browser Um, it will crash nearly a hundred percent of the time. So many uh firefox developer is watching Uh, please fix the crash I mean try to remove it off and on again Um This is what I am doing now so So, well, I guess it's not it's it's probably freaking out when I try to connect two game pads to multiple tabs And then each of them are like all thinking they're connecting to the game pads and then maybe they're getting confused um, so Okay I hope there are many sides Do I have my Okay, uh Oops, I just lost my super Quick quicker. Uh, wait, sorry the pointer. So beyond this What I find really really interesting is that you can you can call the you can program More gestures with the skin pad api if you notice I was using a pointer Uh, that was controlled by the joycon joystick um, and then maybe You can create more gestures like press hold so um And then release and then uh, you can even call Uh, a combination of gestures. So maybe you can do uh, press hold swipe Um, so that's the thing that you can actually do. Um, if you start, uh, coding these things and there's no like there's no like um, so there's no like the med to So you can for this Um, so, um I found myself diving deep into thinking about gestures and thinking about how I interact with the remote controller and then after a while we realized that we were actually building the driver for the cooker to work in our browsers. And then once our code gets complex enough, we are then forced to think about how to organize our code. So if you are certainly curious now and hope to try out some of the gamepad coding, I find these resources really, really helpful. So the first one is the NBN guide using a gamepad API. Basically you can build all the things I mentioned following that guide. And then game programming patterns is this really awesome book talking about game programming patterns. It's actually not about game programming the industry, but the programming patterns that the author learns as a game developer. And a lot of them are actually applicable to our daily use cases. And then on Switch is an open source project. That is, you can consider that a driver for the Switch Joy-Con to work in browsers. And then finally, Enjoyable is an app. So it's not in browser, but it makes your Joy-Con possible to work directly on Mac. So the third and the fourth are both open source. So you can read the source code to learn from them. There are a few more links that I encountered. So yeah, that's all.