The video doesn't show any time marks so you'll have to interpolate the locations. -- So the first thing I thought we would do is create a little custom git w

The video doesn't show any time marks so you'll have to interpolate the locations. -- So the first thing I thought we would do is create a little custom git widget that shows the files modified in our repository. So we add a custom object. And we're going to write some clojure script code just to hold the state of our (circle??) the git status We just need a way then to get that So we ask the server for it And... here we're just creating some html representation of our list of files And then when we save We're going to make sure we update So if we run this We should see Yes, there we go we have a list of modified files We can add some css to make it look prettier And now I can just move this wherever we want I'll put it down here And let's actually open a file and modify it and prove that our widget is actually working So, we have server.clj here And when I save it Yes, there we go It's changed And if I remove that modification, then it goes away, great! Then I thought we should do something a bit more interesting than that. I've been working on a game with my little brother So let's build an environment to play that game in and work on it It's written in Javascript so we're going to need a canvas element So that we can put the game on the canvas Canvas by default isn't visible so you dont't see it immediately So Let's give it a background, black just so we can actually see that we added something. here we go And we'll move this over to this this side so don't have it in the middle of our workspace And that as well Let's run the game to make sure this is all working as expected There's the game there is the javascript file execute it there we go Now we have the game running, You can see I can play it here You can move around, some little bad guy shooting me. Cool! now I talked about being able to build, to bring your abstractions into the environment Let's control the game from light table I add another custom object We're going to create start and stop buttons for the game We start writing the clojure script here we create a little function to create a button That has a label and an action And here is our init which just returns the html that we want it to to be represented as And you can see after executing it you get a start and stop Some css here , that's a little too big Let's actually shrink the font size a bit that's still too big.. 11 60 Great, now if I click stop, he stops moving there you go And If I click start he starts moving again And you can see what this init function is doing is calling our javascript code Move this guy down here So let's take this up a notch Let's actually bring one of the abstractions from the game directly in. So games are usually composed of entities that get drawn to the canvas So let's create a list of all the entities to do that We need some state for our entities And a way obviously to add and remove them And then we need a representation of them in html We have this little item function We're setting our on-add and on-remove functions within our game to our add and remove Execute this and Do the magic of some data binding here We'll see that Every time something gets shot a new entity is added to the canvas So if I shoot this guy, he actually explodes into a bunch of shrapnel let me show this there you go so there is a bunch of shrapnel that's been added And as it sort of fades away it goes away again Cool! So we've actually created a little environment for our game here the whole thing was less than about 50 lines of code And it was completely trivial to build there you go! Fun little way to show how You can extend light table