BlockHeads Ep 6: Blockchain In Overwatch

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:00

   ah there's nothing like the sounds of your own oh my god whoa you caught me staring at the wall pondering this amazing idea of what if i can integrate blockchain into the game overwatch well i think that'd be really cool idea i hope you guys think so too because that's what i'm gonna do today so come with me on this crazy journey as i tried to figure a way to integrate the near blockchain into the video game overwatch like a kickass application so with that i say let's go have some fun that was dramatic

2. 0:28

   so my friend mike from new york showed me this website called panda score it's this website that exports data from video games like league of legends counter strike and of course overwatch hopefully what i want to do is i want to have it monitor live games like the ones i'm actually playing in and spit out some sort of data right on the results of the match and see what we can do to facilitate some cool action at the end of our smart contract that was a lot of words i'm super

3. 0:52

   excited for this here's like the most like basic strip-down version i can kind of envision for this allocation so we have our past matches here we have the toilets versus the pumpkin spices and the pumpkin spices one yeah yes queen yes queen and we also have the raiders versus the 49ers and the nurses the fanboys they got beat by the fanboys and we also have the narutos versus the sasukes you can tell how creative of an individual i am uh i think it'd be kind

4. 1:16

   of cool to have like a random twitch stream of an overwatch game playing place your bets with some friends or something for your near tokens and if we click on new game i think what i want to display is the live winning criteria being displayed in front of the user as well as the amount of new tokens on the line for this match so i think this is a really cool application i'm really excited to dive into this and want to see this come to life

5. 1:47

   okay i'm going to lay out some cool placeholders for this table i'm going to do is i'm going to start with the first you know part of the table which is the head of the table i have to change the default color of this table it seems so style is equal to um let's just make it all just make the color all white for now there we go create the body of the table yo body on my body baby cool the naruto's win so here's our table we have our table

6. 2:14

   like nice laid out i want to like now shift it over put it into its own column and begin working on perhaps like the twitch video just like video box to see if we can get some cool live twitch action going on hey everyone i moved outside because well why not it's beautiful day um the next i want to create is the twitch stream and see if like we want users of this application to be able to showcase this opt in or out or opt out of being featured onto the home page and then see if there's a way to

7. 2:47

   actually specify that so people can jump in and either place their bets or they can just watch someone start by making a component i'll just call twitchviewhome for the homepage rcsp there we go third time's a charm i just want some way to make the page feel uh dynamics let's go over to react bootstrap's website um just kind of steal their styling again i still i mean use i swear i'm an angel so maybe here we

8. 3:12

   can have like some information here's obviously where the video will be see what errors i get button is not defined so let's go back and fix that i've just accepted errors as a part of life in programming cool that's actually perfect and we'll see if i can actually just like figure out how to just embed like a normal clip into this um into my web page actually i don't know if i iframe works in react in the way i might think it does let's just throw this on the app.js page and

9. 3:51

   see what we get okay so i have something it's not it's an error but it's something like console say anything oh so much so much is going wrong ew okay frame border okay i have to camel case that too okay i've got room whenever and received uh string true for boolean attribute allow full screen although this works it'll not work as expected if you pass string false and saying this request is not processed okay it's gonna be dorgan108 this will be my own name the parent

10. 4:24

    website so i think that's just gonna be localhost one two three four so just copy that and place into here oh ip address could not be found so how do we actually get the correct ip address or maybe it is player maybe it has to be players let's just try that like maybe it's not okay interesting what am i doing wrong frame porter using video okay so i am the channel i wonder if this actually works if i just copy

11. 5:01

    this line here right well will this actually work oh that's not good as expected uh okay so it says request failed with 401 at create error is truly bugging me for one unauthorized error what it is and how to fix it but unauthorize there can be a challenge to properly diagnose and resolve that's comforting look at the distinct feeling that's gonna be a challenge so yay hear any relevant cookies let's see if we can do that hockey do that yeah this is fine clear data let's try this again

12. 5:39

    okay that didn't work clear to cash okay so none of that worked hmm that's good let me play a sad song for you i'm the world's smallest violin that's a serious i know this really is the world's smallest violin okay i want to actually confirm that iframes actually works so i'm going to embed and also put in sheamus plug for my halloween episode ichi's randomly load every time the page refreshes um you can see them actively drawing which is pretty cool you can see who owns these pumpkins

13. 6:11

    and you get the id of these particular tokens anyway let's see if this actually works in bed oh he had the cop okay okay whatever i just wanna see if i frame works there you go frame border perfect okay you can see me and all my cringy spiderman goodness so it's not iframe that's not the issue can i just do that and i'm still okay i'm still getting this error ew so if i place this twitch player id with mine and just hit save just start there

14. 6:50

    start small i see a loading circle oh and my no id profile name and my my low quality xbox like recording stream whoa oh and my little awkward haircut cool this is all me okay sweet and now what is this i don't know what this is all it has is a channel name if i look up some random overwatch channel just do for what who's my lucky rando sponsored not not sponsored but you know random person since i'm not currently playing can't take this guy xqcow

15. 7:27

    okay i'm gonna close this for now it's like making too much choice oh neat oh cool okay so it has the chat along with the video i don't know if that's overwatch i just like pull up pokemon game okay so who do i owe things to here let's let's let's give credit where credit's due um author is made by moonstar x so thank you moonstar x and whoever this collaborator is yeah okay so just next direct thank you moonstarx for this amazing this amazing application i will

16. 8:08

    you guys you are awesome you're my hero for the day thank you okay so what's the best way of showcasing how much money is on the line i don't know what spinner is what's the spinner oh it's like literally just a loading spinner it's kind of fun i don't know what a modal is oh this progress bar can be kind of interesting it's like cool little feature jumbotron add a new row add row error element type invalid and expected

17. 8:34

    what is wrong oh that's what's wrong okay well that would explain that i was pulling from the wrong library say good uh i just want to find a pretty way of like actually showing how much money is on the line here can i modify this oh oh it's actually kind of cool i could just like design it in here cool that's something i didn't know what was i doing where am i where am i who am i i don't know i guess i have a lot of things to ponder maybe the progress card bar could just

18. 9:09

    be like the progress to the winning pot so i can have this like third column as the winning pot value so let's go and throw imong here ooh errors i love aries fills me with hope and dreams thanks this is the best day of my life i'm killing myself tomorrow okay so now row span is equal to two and put in dorian perfect okay we're back on track so let's throw in a container in here and put in a row d flex so flex uh justify

19. 9:46

    content center who is so close to what i want whatever get onto block watch bam like cool live match going you can see who's winning see how much money is online if they want to make it public i'll make an option for that so now i just need like a new game button somewhere create a match there we go so create a match and blah blah blah and i think it's fine cool per usual i have the memory and

20. 10:22

    metabolism of squirrel i always forget how to actually step react router so let's go into regular's documentation and just you know copy and paste some stuff style i'll fix this properly in a minute but i won't see if this works so color and white there we go cool so now if i just get rid of this and hit enter i should just be back at the home page perfect we have our first react router

21. 11:00

    uh nice and wired up so let's keep going round the bat i just want to say that react bootstrap's documentation is just the cleanest documentation i've had the pleasure working with not sponsoring react bootstrap in any way i promise but i thoroughly enjoy using it and just working reading through it it's always very very clear i swear this new microphone makes me feel like a singer sometimes even though you know it's more like screeching cats i promise

22. 11:24

    just a small town girl i wanna swing from the chandelier here okay so import form from react bootstrap and we're also going to import the container and column i wanna live like tomorrow doesn't exist like it doesn't exist nailed that high note come on what else is wrong no button anything else nope cool here i am back at panda score uh and of course they have our lovely game overwatch honestly at least for the functionality against contract to execute is the

23. 12:18

    results uh the result status which i assume is like a boolean or something so uh i don't know if i'm willing to pay six hundred dollars a month just yet maybe in the future yeah it looks like we don't really get the we don't really get the um the cool like live stats feed which is unfortunate but that's okay i'm going to keep going okay anyway that's where i am so let's keep let's keep this moving

24. 12:49

    i've been up and down these things for about a few hours but i can't seem to find exactly how to pull information about like the match itself so i can't um i'm not sure why but hopefully i'll figure it out why so me thinks i may have confused the actual purpose of pandas course i don't know if i can actually get direct like data from the game itself i think this was more for like

25. 13:21

    esports tournaments so uh i may have to take a different direction other than panda score because i think this might be only event based instead of like actually like base up the game which is okay okay so now they actually know that the panda score m api may not work for my purposes i you know instead found this like thing called ow api so i'm hoping my hope is that like i can

26. 13:46

    actually use this to find some you know match data and see if we can actually get the outputs of the matches uh when i read the documentation all planning so far is player info and player character data so i'm not exactly hopeful right now but maybe i don't know i'm going to go to the discord and like leave a message and hopefully like something will um someone would come back

27. 14:09

    to me with some help so dropped my message yesterday and i got some sad news and i was freaking out a lot um so i asked hey is it possible to monitor matches and get match outcomes between two teams put them into a js application for overwatch they said no i was like oh no it isn't with a little sad face uh and they said the only access we have is the overall stats not specific game outcome so i said oh okay appreciate your response uh so i'm glad they responded i'm kind

28. 14:41

    of sad that i don't get matched outcomes and i'm a little stuck because i want the thing to work okay so with finding out that the api does not work or that the other ipad does not give me what i actually need i you know did what i do and i stare at the ceiling for four days straight to come up with a new idea and i have this whole new direction when it takes that vacation and i'm really excited to show you guys

29. 15:06

    what this whole new integration of blockchain into overwatch will look like but i'll show you guys that in the next video so keep an eye out for part two this blockchain overwatch combination series um thank you guys for sticking around and watching our videos it means a lot if there's anything in particular in the future leave a comment below like and subscribe that really helps us out and really helps the channel grow

30. 15:23

    um and with that happy coding happy holidays and i'll catch you guys later ooh errors i love aries fills me with hope and dreams