Hello everybody.
It has been a while since I've streamed, so I think I've forgotten how everything works.
[LAUGH]
Sort of listing out some different things in terms of background noise and all of that.
So if you're in the chat, can you let me know two things? Number one, can you hear the music in the background?
And number two, is my voice loud enough on top of that music so that you can hear me speaking and the music is not drowning me out?
I've tried to tweak the audio stream so that at least you can hear the background noise.
I think the last few times I did this, it was very, very quiet. But let me know, can you hear me? Can you hear me clearly?
And get the music stopped now. But when the music plays, can you hear the music playing in the background?
If you can't hear it, let me know and I'll increase the volume slightly. So just let me know in the chat.
A couple of folks saying they can hear me very clearly. Let me know if you can hear the music as well.
It should be playing now. Can't hear the music. Okay. So some folks can hear the music, some folks can't.
Let me see if I can turn it up slightly. It's not the end of the world if you can't hear it.
I'm trying to make it so that you can hear the music and it doesn't overpower my voice. So let me know if you can hear it now.
Okay. So we are hearing some music. Okay. So that's good. I'm going to drop it down slightly.
Just because I find it hard to think when the music is too loud.
All right. A couple of things before we get started.
I am expecting a delivery today. This afternoon is now 2 p.m. my time.
I'm expecting a delivery today. It could arrive any time now between here and the next two hours.
So if that does happen, I will just...
If that happens. Hopefully it happens after the stream is done, but it could happen.
I'm just going to check whether the Twitch streaming is happening. I guess it is because you're all in the chat with me.
So there it is. That works. We can close that down. And then let's get on to what we're doing here today.
So about a week ago now, maybe even longer, somebody in a Slack channel, it was May the 15th, so two weeks ago now,
somebody in a local community Slack that I belong to asked,
"Is it possible to use the Interactivity API outside of WordPress?"
Now, if you've never used the Interactivity API, it's a new package that was added to WordPress Core in WordPress 6.5.
I have run a few live streams. I think it was one or two maybe, live streams or workshops on just the basics of the Interactivity API and how it works.
But according to the documentation, you should be able to use the Interactivity API outside of WordPress.
So you would need to have Node.js and NPM installed on your machine and be able to set up an NPM project.
But obviously as a WordPress developer, as a WordPress educator, I've never thought about using it outside of WordPress until somebody asks.
And I thought, well, why not? The whole point of some of these new packages is to be able to use them outside of WordPress.
And so I thought it would be cool to see what that would entail, what it would take, whether I can figure it out.
I have done no homework yet, no background research. I have a few links that I've picked up here and there, but I haven't actually tried this myself.
So it's going to be interesting. The links that I'm working off today, so I'm going to first share the Interactivity package.
No, not that one. I'm going to share the Interactivity package with you in the chat if you want to follow along.
The links that I'm... why did that not send in the chat? There we go.
The links that I'm working off is there was a question in the Gutenberg repository in the discussions on April the 23rd, in fact, about making Interactivity work as a standalone.
So, for example, that you could have it hosted somewhere and just be able to load it into your site.
So that's the one link that I'm working on. I'm going to share that with you as well.
I also want to just mention that there is some work happening next to my office.
So if you hear some banging or some shouting or some drilling, I'm hoping that my noise cancelling software will drown most of that out.
But I apologize if that does come through on the stream.
The joys of live streaming in the real world.
Hi there to... I am Axel Chipp, I think. I am Axel Chipp, brother, Axel. Hi there.
The other link that I'm working on there was the StackBlizz project that Michelle, who is the developer who answered this question, actually put together.
He put together a StackBlizz code example. This is all public. This is all publicly available on the Gutenberg repository via the links that I've shared.
So feel free to go check that out. And he's just using a toggle element, toggle... what is it called? Toggle binding?
So action, if you will. What he is doing, however, is he is including the interactivity.min.js, which is one way we can do this.
And it might be the way that I end up reverting to. And he's just importing it inside of his main JavaScript file.
And his JavaScript file is just being loaded inside of his demo page.
So what I might try and do is just see how this would work locally without maybe having direct access to interactivity.
I don't even know how that's going to work. And then I'm going to take it from there.
The other thing that I may or may not do is a while ago I built a game.
And I'm going to load this game up on my site very quickly. Hopefully this will work. That uses the interactivity API.
It's called Dodge. I built it as a simple little project over the holidays this year, over December.
And it's just a game where you can have this little icon that you can move around the screen and sort of try and dodge all the other CMSs that are out there.
And the longer you can stay alive, the greater your score and the greater your level and your time, all that kind of thing.
And so the interactivity bindings that I'm using for this game is essentially keyboard bindings.
I'm binding to the arrow keys. I'm also binding to the RS and some other key for restarting the game and stopping the game and that kind of thing.
That's about all interactivity that I'm using, really.
The rest of the game is just standard HTML, CSS and JavaScript sort of game engine things.
But that's all right. Let's do it. It explodes. You put in your high score.
And so the arrow keys and then S to start the game and R to reset the game are what I'm using interactivity or.
So I'm going to I might try this. I might not. I'm going to see how much of this game I can try and replicate in a standalone demo, maybe try and hook it up to a WordPress site for the REST API stuff.
I may not get that today. I may get completely stuck on just getting it working in a standard little demo page. So we will see how that goes.
So that's kind of the end goal plan. If it takes over two streams to get there, then that's fine.
That's kind of what I'm working with. So if you want to check out the code for this game, here is the link.
This is a public repository. You're welcome to check it out. Fork it. Do whatever you want with it. I don't mind.
It was a fun little weekend. It was a weekend. It was a couple of days.
It took me a couple of days, about four or five months ago.
Five months ago was the original commit. Let's have a look.
It was over the Christmas period. It doesn't show dates here.
January 1st. It was sort of at the beginning of the New Year, end of the last year when I was on my end of year break.
It's about any time I have to hack on little side projects like this.
And if you want to just play the game, you can do so over here.
I'll share that with you. You're welcome to just play it there.
It does have a high school table, which currently is broken for some reason. I'm not sure why.
Actually, maybe it's not broken. Let's just have a look here. See if this resets.
For some reason, the high school is broken. I'm not sure why. So I'll have to figure that one out.
But anyway, so let's start with just getting a basic demo page up and running.
So what I've got here is I've got a WordPress local WordPress site running on WordPress.test local domain.
I've also got a little demo site running on demo.test.
In my code editor, I use PHP Storm in case you're wondering.
One of the reasons I love PHP Storm is I can have multiple sites open in the same sort of project.
So here's the WordPress install and here's the demo install.
The demo just has a standard index HTML page on it. Why is that throwing an error?
Element body is not closed. Okay, let's fix that.
There's the body tag. Okay.
That's not what I wanted.
There we go. I'm going to indent the body tag.
So what I want to start doing is I want to start by just getting into activity working on this page.
And I kind of want to do it using Node.js and npm. I want to set up a project,
install the interactivity package, and then see how I would link to it,
how that might work in a sort of real world environment.
So I'm going to also open up -- I want to see something.
I want to see if this has a package on npm repository site.
I'm going to assume it does. Yeah, there we go.
This is probably an exact copy of the GitHub readme.
Yeah, that does seem to be the case.
So there are no further instructions about running it outside.
So we're kind of on our own here. But that's fine.
So let's start the project. So I'm going to switch to my WhelocallyInvis sites demo directory.
I'm going to initialize -- I'm going to initialize an npm project.
We'll just call it demo and interactivity API demo.
Entry point will leave as index.js. It's fine. I'm not going to have any test commands.
I'm not going to worry about Git repo now. Keywords, I'm just going to go interactivity.
Or there's me. And I'm going to give it the GPL 2.0 or later a license.
That's all fine. All right. So that does that. That's all good.
Now I'm going to set up interactivity API as a dependency.
Okay, that's working. So that should mean that inside of demo there is a node modules directory
and there's all the things. There's WordPress, there's interactivity, there's the bold, there's the source.
Okay. So I am going to assume that if you are an experienced JavaScript developer, you know what to do next.
I don't consider myself an experienced JavaScript developer. I have used JavaScript.
I have used it in what you could call the vanilla JavaScript method where you, you know, add the file,
sort of like what we're seeing here where you just include your main JS
and then your main JS will import from interactivity min.
So one of two things is going to happen. Either I've got to create this interactivity min file somewhere
or I've got to set it up so that it builds it or something.
So I haven't quite figured out how that would work.
I see this is using Vite. So it probably has some things that it does automatically.
So what I'm going to do is I'm going to assume that I'm going to set up this page.
I'm going to set up this is a script as a module. I'm going to just copy this content and just see what happens.
Maybe it will work and it will be happy days. Maybe it won't, but it will give us an error.
So I'm going to copy that code as is. That sets up main.js.
Then we need a main.js file. So let's go JavaScript file and call it main.js.
That just should work. And then I'm going to copy out this code.
And I'm just going to see if that works as is.
And what I'm going to try and do now is this is probably going to need some kind of like bold scripts or something.
So I'm going to try and use the scripts from WordPress scripts.
Let's do that. So let's go down to WordPress scripts.
I have no idea if this is going to work.
Let's install WordPress scripts.
And while that is installing, I'm going to copy out the scripts from the documentation.
Just close VS code. I don't need VS code in my life today.
That's the installing. So while that's installing, I'm going to go back to the package.json.
And I'm going to update the scripts there.
I think I'll just do I'll do them all for now. Why not just not going to hurt anybody.
And if you're sitting here going, that's not going to work. That's fine. I don't mind things not working.
Then at least I'll add something. So I'm going to pop that in there.
I'm going to check on how this is going. This is still installing by looks good.
Got some deprecations. OK, that seems to have installed.
So now we've got a whole bunch of additional modules. That's perfectly fine.
And if we go to WordPress, we've got a whole bunch of other things as well. OK.
Now I want to just see what happens.
I'm just going to run npm run bolt. That's all I'm going to do. See if anything happens.
I'm expecting it not to do anything.
Source directory result, because it expects it to be a source directory. OK.
So let's do that. Let's create a source directory.
And I expected this to happen. And I'm going to put main.js in that source directory.
So what I'm hoping is it's going to read from this and it's going to do so. OK, this is no problem. That's not going to work.
So I wonder if that will work.
No idea. Let's find out.
No entry file. OK.
Now I wonder.
This is specifically set up for like WordPress-y things.
Not documentation. It's not there anymore. Yay.
See, this is very specifically set up for block development. So I had a feeling this wouldn't work.
The full entry point is index.js. So if we change that to index.js, that should work.
So that's done something. So it's created a bold.
It's created index.js. It's created the assets. See, but now that is basically that's not WordPress dependencies.
OK, so now we do some reading because now it's hit my limit of knowledge.
Standing through here to see if I find anything.
Nothing there by the looks of it.
It's probably something I need to configure or something.
OK, let's have a read through here.
Sorry, in case you're wondering, that person there is the chap who asked me about this in the beginning.
He's the reason I'm doing this. So if you're in the chat, say hi.
OK, so I need to generate this interactivity.min.js somehow.
And that's the part that I'm not sure of.
I wonder if this gives us any information.
Interactivity API requirements, Quick Start, first looking at the activity API for the second examples.
No.js local WordPress. You see this all requires WordPress to work.
So I'm not seeing how to generate that at Minvile.
Hmm.
I wonder if it's because he's using Vite.
There's a Vite bold. I've never used Vite, so let's go have a look. Let's see what Vite is all about.
Vite is next generation frontend tooling. It's a local development server. OK.
So he's using Vite for...
DevDependency is Vite, and then he's using those.
I wonder if we...
If we just install Vite as a DevDependency and then...
That's obviously what's generating the...
Yeah.
It would be cool if I could do this outside of needing Vite.
Now I know there was some conversation around...
There was a PR that was open recently. I'm going to see if I can find it.
There's this cool pull request. Configure webpack in the Gutenberg reader so that a minified and bundled version of the interactivity is also available inside of the interactivity NPM package.
So if we've added it with our build system, I'd like to be able to import the package from a CDN.
OK, so this is going to...
Well, packages. So this needs to be merged first.
It's... You can... In other words, go and install with... You know, you can...
Or with any way of performing, you can...
And I would just... You can see this...
I'm going to have to implement this to get it to work.
[humming]
I wonder if I can...
Use the webpack config.
And then add the bold.
I wonder if that would work.
Yeah, you're not wrong. Vite and Wp scripts do the same job.
So I would need to configure Wp scripts, which is what I'm thinking about doing now, to build the final script.
It's not perfect, but it might work. So let's give it a try.
So let's go over here. I'm going to... OK. So let's take the webpack config.
That's a fair point. OK, let's take this webpack config as it is.
If I copy this, yeah, it'll copy it out.
It's webpack.config.js. I don't know if this is going to work. We'll see. We'll see if it works.
So let's create a new file, webpack.config.js. Excuse me.
OK, so that is a standalone version. OK, so that is... I don't know if this is going to work.
We'll have to see. No, that's not going to work because that's looking for...
inside of node modules. So it's probably going to need to be something like this.
I don't even know if this is going to work because this code is meant to be used inside the package.
So my guess is going to be something like node modules.
Let's see here. WordPress. Tools webpack shade. Tools webbing.
No. Is this a webpack? No. No, good grief. OK, let's do a search. No.
Let me just think about this. This is inside of the WordPress interactivity.
It's going up two. It's going up one.
It's meant to run.
OK, now I've got to figure out where that is.
Base config required. Tools webpack. This is inside packages interactivity.
This is...
Oh, this might be inside of something else.
This has got to run inside of interactivity package.
I would have to set this up.
At the moment, the only way I really need to do it is to grab this like this.
There's no...
Or use the white bold thing.
Or configure...
I would definitely need to configure the scripts.
WordPress scripts to know what to build.
And I don't know webpack well enough.
What happens when running npm run start?
Same as npm run bold. Just running it with start runs the development server.
But it generates the same files.
So it's not going to give us what we need.
Hmm.
What we need to do is we need to configure webpack to generate...
I just had a thought.
What happens if I just point this to bold.index?
I wonder if that will just work.
Let's see.
There's a webpack file.
Might just work.
Let's delete the webpack file.
And then we point this to bold.index.js.
No, it's relying on WP interactivity.
So it's not going to work.
It's going to throw an error. But let's have a look and see.
Yeah.
So it's going to throw that error.
So...
Look, one way you could do this is you could see what gets generated in a WordPress site.
Just copy that file over.
I mean, that's a really hacky way to do it.
I wonder if it would work, though.
Let's see.
I'm going to switch over to my WordPress site.
I'm going to clone this repository.
And I'm going to switch to the repository.
And I'm going to...
bold everything.
Right.
What is that happening?
Oh, I need to install everything.
Stupid.
I need to install all the npm stuff first.
Now we can build.
Yay.
Okay.
So let's put the plugin.
Let's go here and activate it.
And then let's add it to a post.
There we go.
Update that.
And view it.
Okay. So there's the post.
So now if I look for interactivity, I should see it coming up some way.
I wonder if it...
interactivity...
See, there it is.
So it includes JS.distinteractivity.men.js.
So if we go here and we go includes JS.dist.interactivity.
Now that probably...
Maybe that works.
There's the men file.
Shall we find out? Let's find out.
Okay. So let's copy that into our demo.
Paste it there.
I have no idea if this is going to work.
So let's close that and close that.
Let's close that.
And let's...
Okay. So there's our index.
So let's create main.
Oh, I called it main.d...
Oh, that's fine. Okay.
And then in the main.js, let's just copy what was in here.
Yes, yes, yes.
Oh, go ahead.
Okay.
And we go back to the example.
So it's like this.
I've got my coffee sitting in front of me next to the keyboard.
I'm going to move it out the way because if I knock it over on my keyboard,
I'm not going to be very impressed with myself.
Okay. So let's pop that in.
Ah, copy.
Okay. So that'll get from interactivity main, which does exist,
which we've copied over.
I'm going to take out the script stuff for now.
So let's go...
Not just in the demo.
And let's go...
NPM...
It's removed scripts.
So it's NPM remove with scripts link.
I just want to kind of clean up all the stuff we were trying out.
In fact, none of this is relevant anymore, actually,
because we don't need it.
So let's delete that.
Let's delete the bold.
I probably don't even need the node modules.
Probably don't need the scripts.
I'm just going to delete all of this for now.
Okay.
So there's index.
There's bold index.
No, no. We want to point to the main now.
So there's main.
There's our main.
It's importing from that file, which is there.
Let's see what happens.
Okay.
So that throws a false.
Hey, it works.
Okay.
So that's one way to do it.
So bold a block that supports the interactivity API in WordPress.
Copy the interactivity API min file out into your standalone folder,
and then you can use it exactly the same way that I think it's Michelle.
I think that's how you pronounce his name.
If you're listening, but I apologize for messing your name up,
but I think it's Michelle.
I'm not sure.
I'm not sure which.
But that's exactly how he's using it.
And then once -- where is it?
Once this pull request gets included,
then it would actually be possible to generate a standalone from the package.
So it would be cool to come back to this at some point
when this has merged and test this out.
But it does at least work, which is cool.
So now that we know it works,
I'm going to try and start migrating my plugin code over.
It took me 40 minutes to get there.
I would prefer if there was a way that I could include the package
and then know how to bold it so that it -- using it.
I guess that way it's got to be inside of WordPress.
And it makes sense that I can't access it the normal way.
I'm not quite sure.
I'm not quite sure how I feel about that.
That's a typical JS Devs there it goes.
That's not typical any developers there it goes.
I'm interested to see what this looks like once it's merged.
I feel like once this is merged, then it will actually have something proper to work with.
It would still be cool if there was a way that I could configure it
without having to copy the file over.
But I guess at least it does work.
Okay.
Let me have a look here.
Let me just go back to my game.
And what I basically have is I have -- these are the high scores.
No, that's not what I want.
This is what I want.
So this is what my game looks like.
It's essentially some very simple HTML inside of a div.
So what I'm going to start doing is I'm going to start copying some of this over.
So let's put that in there.
And we can start figuring things out.
We're not going to need the block wrapper attributes.
I am going to need to change the icons.
So let's copy those over.
And boy, what fun it was finding those icons.
So now it should just be a case of replacing all instances of this with icons.
Probably need to do that.
And yes, there's inline styling.
Deal with it.
Okay.
So that will give us something.
Let's see what this looks like.
Okay.
The icons aren't working.
I'm going to try to test icons.
There it is.
I should probably.
And it might not load SVG's in the browser.
I guess not.
No, there it is.
It sounded.
I think brave is just being stupid.
What?
It's probably some other weird SVG thing that I don't know about.
I mean, I would have thought not, but maybe.
Okay.
Let's do this.
Let's delete that.
I will do it through the file browser thing.
I really wouldn't have thought that that would have happened if I did that that way.
But let's have a look.
Okay.
No, man.
It's going to make me angry now.
I'm going to stick it in the root.
Hey.
Stuff like that annoys me.
It's probably because it's in the icons folder or something.
You probably find there's some weird like you can't have an icons folder in your root or something.
Ridiculous.
Bitchy.
Some days.
Yeah.
And you watch.
If we rename it to like images or something, it'll work.
It's so annoying.
I need to know what that is now.
Apache icons folder in web root.
It's pretty some weird Apache thing.
Anyway, moving on with my life.
Yeah.
Why?
Exactly.
Why?
It's just too funny.
All right.
So we change icons images, apparently.
Good grief.
Actually, let's take this whole one.
Yeah.
I did there.
Some days I love the web and some days I hate it.
It's just too funny.
All right.
Let's go back.
No, not that one.
Okay.
So that's working.
So now some of the styling that I think I had in the plugin is probably missing.
Yeah.
I definitely had some game container styling and all that kind of thing.
So I'm going to need to pull that over.
I'm just going to stick this all on a web root at this point in time.
I don't care about nice folder structure and all that nonsense.
I just literally want it to work.
So we're going to call it index.css.
Keep it super simple.
And then the WP block plus probably doesn't exist.
So I'm going to need to add it to the root.
So I'm going to go plus and just call it interactive game.
Interactive game, interactive game block.
So I'm going to take out all the WP block stuff.
Because that's what gets generated by WordPress blocks.
So take that out.
I love the fact that you all joined me for that journey.
I think it was just really daft.
It really was.
Okay.
So that should start looking a little bit better now.
Oh, no.
I need to include the style sheet.
Okay.
So let's go style.
Can I remember how to view styles?
I haven't done styles like this in forever.
I want to say, no.
Source?
No.
Is it style?
Link.
That's the one.
Thank you, chatgbt.
It's been so long since I've hard coded these things.
Okay.
Let's do this.
Doesn't seem to be working yet.
Oh, because I called it index.css.
Okay.
This is old school web dev folks.
Still not doing anything.
Check my interactive game game block.
Oh, because I did the wrong one.
Hang on.
Let's copy this out.
Okay.
Let's close that one and update this one.
There we go.
That should work now.
Yay.
We have things.
I'm going to just wipe the mouth sprayer if I'm likely, but I just broke it all over.
Okay.
Now, can I get the -- there's a couple of things else that I need.
I need the game engine, which is basically the view.
No, I don't need the game engine.
Where's the game engine?
The game engine is in the index.
No.
I can't for the life of me remember where this is.
There was a game engine script.
Acseus I used.
That's right.
Acseus dodge.
There's a dodge.j as well.
Let's copy that over.
Basically, this contains all the game engine stuff.
So setting up of cookies and things and getting offsets and all the game container stuff.
Nothing to do with interactivity.
This is just how the different things work.
I have a feeling some of the classes are -- yeah.
It's going to take way too long to figure out.
Quickly running through this code to see if there's anything very specific to the WordPress
generated content.
This stuff will be -- it's not a problem.
That's the cookie which I don't need anyway.
That's the high score check stuff.
That's the explosion.
That's the collision detection.
If you want to go for a deep dive into game development and figure out what all these things
mean, I recommend going to -- I think it's Mozilla developer network.
They've got a whole tutorial on game development.
I spent a lot of time reading these docs when I was figuring out how to do the game engine
and all those things.
Recommended reading.
But let's get back here.
It doesn't look like I am referring to any specific things in here, which is good, because
I should then just be able to copy this over and use it.
That's fine.
Let's dodge there.
Let's close that down.
What I am going to need, however, is the -- this stuff.
These are the stores.
I'm going to need those.
Those I'm going to put into my main.js.
I think this will just work.
This is WP interactive game.
I'm going to close some things down here because I'm going to get myself confused.
I have given it the same name space, so that should work.
Something should happen.
It's either going to work or it's going to throw an error.
I'm finding the music a bit loud, so I'm going to just drop the music down a little bit,
folks.
I hope it's not too much of a problem.
Just getting a little bit overpowering for my brain.
Let's see what happens.
Reset game is not defined.
That's cool.
That's because I need to include dodge.
Let's include dodge as well.
This is going to include a normal script.
If I click, reset game, can't read properties of null, reading SRC, dodge for 921.
At least I'm getting errors.
Where did I set up the icons?
Oh, here we go.
Select this game icon.
That's not working.
You know why?
Probably because I need to stick this in, though, after all the HTML is loaded.
That's probably why.
I probably should do some better closures and things because this code was in running in
WordPress and I didn't need any of that.
I'm going to leave it like that for now.
Hey!
Would you look at that?
It just works.
That's freaking cool.
It just works.
That's not going to work because I don't have REST API stuff set up, but the game itself
just works.
That's pretty sweet.
What I'm going to do is I'm actually going to call it a day there.
It took me an hour to migrate it over.
No, I'm kidding.
That's kind of cool.
That's kind of really cool.
What I did do is I did.
I'm pretty sure that I included the Axios.
Did I?
I'm trying to remember.
I included the Axios from J's to the left.
Let's include that.
Let's go back to here.
Up or down at the bottom here.
I'm going to have to remember how to do this.
If you don't know what Axios is.
Axios is a JavaScript HTTP client.
It's for sending and receiving REST API requests.
One of the features of the game is storing the scores via a REST API endpoint.
Let's use the JS deliver option.
There we go.
We'll just pop that.
I'm going to stick it to both dodge.
There we go.
Then what won't work is the actual REST API request, but that's fine.
That I can fix.
March laser.
All right.
Let's get the game running.
Let's fire off a boom explosion collision.
John.
Okay.
That's not going to work because that REST API endpoint doesn't work.
Boom.
But because I have the plugin installed here, I should be able to post to this WordPress
site.
There is a high scores endpoint.
To do that, I need to set up a cookie.
I need to set up a constant, which doesn't quite work at the moment because it needs
to be a WordPress user.
I'm trying to remember how I did that.
Basically it needed a -- it sets up a cookie with details and pops it into the cookie.
It's basically just a user name and password to push to the REST API endpoint, which I
have at least protected by using proper like -- there's the roots.
There's the fish of the scores.
I set up capabilities for that user.
So I'm not too worried about getting that to work now.
I am pretty stoked about the fact that this just works as is.
So this is running purely outside of WordPress just using the interactivity API.
That's really cool.
I have to admit it's really cool that all I had to do was change a couple of class names
and it just worked.
I really expected this to take longer.
I could sit here forever and play this.
Cool.
I am going to disable the high score for now just on this version of the game.
Now to remember how this all works.
So let's do this and this and this and this and this.
Let's close this down.
So we don't need the interactivity API package.
We don't need the node modules.
We don't need any of that.
I'm going to delete all of that because this is running using the interactivity.
I'm going to delete the package file.
This is old school web.
There we go.
Just to prove to you that it does still work, I'm going to refresh the page.
And it still works.
And then I'm going to disable the message.
I'm going to say the score and disable the message log.
Which I think is in here somewhere.
I'm going to pull that code out.
I don't need the cookie.
I don't need to do the rest API stuff.
Offset can stay, game container and all that can stay.
If anybody wants to run through this, they're more than welcome to you.
I'm going to make this publicly available on a GitHub repository.
If anybody wants to check this out.
There's all the collision detection.
There's the high score.
Check.
There you go.
Your score is blah.
We're not going to post the high score.
I'm just going to make this a bit smaller so I can see what I'm doing here.
There's that.
We don't need a prompt.
We just need and alert.
And then we can get rid of all this.
We don't need this.
And then we don't need to post the high score.
If you want to, you can see this code.
It's in the GitHub repository for the original plugin.
I'm not going to worry about it now.
There's all the game loop stuff.
Okay.
Cool.
Let's check that out.
So there's the game.
There's the game running.
Let's have the explosion.
Boom.
There's your high score.
Done.
Happiness.
That's awesome.
So, yes, the one thing we did need was to copy the interactivity min.js from the WordPress
install.
So you don't even need to build a block plugin for that.
It's just sitting inside.
RDP includes JS, dist, interactivity.js.min.
There it is.
So you just grab it from any WordPress install and it's available to you as a standalone
thing.
So that's kind of cool.
I am going to upload all of this.
Let's create a little GitHub repository for this.
No, not load WordPress.
My own.
Yes, you're wondering, yes, I saw me to look at the keyboard.
And I'm going to -- let's just see here.
Interactivity.
So I'm going to just name it interactive game demo.
So it's kind of tied to the two.
So let's go here.
Let's create a new repo.
Interactive game demo.
It's called standalone demo.
Okay.
And I'm just going to -- make it public.
Okay.
Good.
And then just copy this line.
Get the net, get add, get committed, get branch.
Okay.
Get net.
Get add.
Minus A, I think it is.
Minus A.
Minus minus A.
Oh, now I've taken it off screen.
Oh, get commit.
Oh, I don't need the dear store.
I don't need the idea stuff.
Dear store and the idea stuff.
Get rm minus one is cached.
Install and -- oh, got it.
Get minus r.
There we go.
I'll do a -- just ignore it.
Get ignore later.
Okay.
There's all the files.
Demo commit.
Okay.
And then we need the branch minus m main, get branch minus -- I actually tend to call
mine trunk, but anyway, it doesn't matter.
And then get brush minus u, r, j and main.
Okay.
So now you should be able to find all of that code there.
So I'll read me later.
Here is the code.
Feel free to take it, play with it, pull it, push it, break it.
Just as a note, the interactivity.min.js is obviously whatever the current version of
that file is.
So it's version -- current version of WordPress is 6.5.3.
So as that gets changed and updated, that file will change.
John MC says how to copy, save the chat log.
I honestly have no idea.
I don't know.
I don't save Twitch chat logs.
But what I will do is I'm going to -- I wonder if I can -- what I'm going to do is I'm going
to go over -- let me just see.
I'll take all the links that I shared and I will add them to the readme file of the
get repository.
And I'll add the link to the get repository in the meetup.com page.
So if you join through the meetup.com event, I'll add it there.
If you didn't join through the meetup.com event, go there now and RSVP for the event
and then you'll get comments there.
And I'll do my best to remember all these things that I -- that we used and that I shared.
And I'll also be uploading the recording of this livestream to our YouTube channel probably
Friday or Monday.
So you'll be able to watch it and rewatch it if you need to.
I'll have a look and see if it's possible to save the chat log in Twitch.
I don't know how it works.
Never tried.
But I'll see if I can.
But I'll do my best to add a readme to this as well tomorrow.
And I'll link everything that we chatted about in the readme.
So you can go and read those links.
I'll make sure to save them now while I have them all open here.
And I'll do my best to save them all and paste them all for you.
Okay.
I'm pretty impressed that that all just works.
A lot of this code, if you really want to dive into this game code, you're more than
welcome to.
A lot of it doesn't really make sense.
What I would recommend you do if you do pull this down tomorrow or whenever is focus on
the main.js file.
You'll see a lot of the functions in here I'm calling elsewhere.
But this is the core interactivity stuff.
So setting up the directives, setting up the namespace, calling the action.
So there's the enable move icon action.
And then here somewhere is the enable move icon.
There it is.
So that all seems to work quite nicely.
And then the actual game stuff is all the stuff inside the dodge file.
So that's just all the stuff to keep the game working.
So yeah, feel free to put it down on your side, check it out, work through it, understand
how it works.
If you have any questions on any of this and you want to ask me, if you have questions,
there are a couple of places you can find me.
The best place to find me is inside of the make WordPress Slack, which if you aren't
already, you can go to chat.wordpress.org and that'll guide you through the process of
setting up your Slack account for the WordPress Slack.
You can download the Slack app to your desktop or to your phone or whatever, and you can
DM me there at any time with any questions about development, anything related to WordPress
development or other development if you want, or anything about this project.
You're welcome to also add issues to any of my repositories.
If you want to ask me questions there, but WordPress Slack is the best place to ask me
because I might not see that.
If you want to email me, I don't mind if you email me on my about me page.
So my website is jonathanbosenger.com and on my about me page, if you scroll right down
to the bottom of that page, why is it not loading?
Oh, there we go.
Click on the wrong link.
There's a picture of me from last year.
If you scroll right down to the bottom of my page, there is an email me link.
You're welcome to email me at any time with questions.
I can't guarantee I'll answer them straight away, but I do my best to try to answer them
as soon as I can.
So feel free to email me there if you like.
No problems with that.
Cool.
That went really well.
That went a lot better than I expected.
I think one of the reasons it went better than I expected is that I don't tend to write
code that heavily relies on specific WordPress functionality, especially with this block.
I tried to name things that were pretty generic.
So it was really just changing the images and the icons.
It wasn't that a trip, folks.
And then migrating everything over.
But that was fun.
I look forward to following the pull request.
I see this was created two weeks ago.
So hopefully this gets merged.
My guess is this will get merged in a future release of at least the Gutenberg plugin and
then eventually the WordPress repo.
But I'm going to be keeping an eye on this to see when it gets merged because this could
make it easier to be able to generate these things.
I do wish there was a better way that I could install the package and then run some kind
of build step, some kind of preconfigured webpack config, and it would generate it for me in
the root of my directory.
But we figured out a way.
We're developers, we figure out solutions.
So yeah, that was really, really cool.
I enjoyed doing that.
I had set this up for two hours, but I'm going to call it a little bit into the live stream
here.
Thank you all for joining me.
I hope you learned something today about using these packages outside of WordPress, or at
least this one.
And feel free to ping me if you have any questions.
Bye.
[MUSIC PLAYING]