These are chat archives for Azurasky1/DragonArena

27th
Jul 2016
Billy B.
@Azurasky1
Jul 27 2016 10:09
i have a question

``` function Healthbar(width, height, hex, anyPlayerOrEnemy) {
this.width = width;
this.height = height;
this.color = hex;
this.pos = {
x: anyPlayerOrEnemy.pos.x,
y: anyPlayerOrEnemy.pos.y - 20
};
}

modules.Healthbar = new Healthbar(); ```

  function Healthbar(width, height, hex, anyPlayerOrEnemy) {
    this.width = width;
    this.height = height;
    this.color = hex;
    this.pos = {
      x: anyPlayerOrEnemy.pos.x,
      y: anyPlayerOrEnemy.pos.y - 20
    };
  }

  modules.Healthbar = new Healthbar();
how come you set modules.healthbar to an instance of a healthbar?
wouldn't you rather set it to the function itself
i am having a hard time navigating the code and cross-referencing it with what we have already and understanding your code in general
Andrea Sonny
@andreasonny83
Jul 27 2016 10:11
maybe I’m wrong but modules is an Object
and I’m creating a new key called Healthbar
Billy B.
@Azurasky1
Jul 27 2016 10:11
and it's not any fault of your own it's me. i haven't dealt with code formatted like this and looking at it and going back and forth gives me anxiety
part of me wants to just scrap all of the old code and rewrite it
Andrea Sonny
@andreasonny83
Jul 27 2016 10:12
in where I create the new Healthbar function
Billy B.
@Azurasky1
Jul 27 2016 10:12
and yes modules is an object to which you assign all of the functions coming from the modules
Andrea Sonny
@andreasonny83
Jul 27 2016 10:12
modules.Healthbar doesn’t exist at that point of the code, right?
Billy B.
@Azurasky1
Jul 27 2016 10:13
it's created
Andrea Sonny
@andreasonny83
Jul 27 2016 10:13
when?
Billy B.
@Azurasky1
Jul 27 2016 10:13
when you assign it to an object
it's created
Andrea Sonny
@andreasonny83
Jul 27 2016 10:13
modules.Healthbar = new Healthbar();
Billy B.
@Azurasky1
Jul 27 2016 10:13
yes
that is creating it and at the same time assigning it
Andrea Sonny
@andreasonny83
Jul 27 2016 10:13
yes
but modules.Healthbar is not Healthbar
Billy B.
@Azurasky1
Jul 27 2016 10:14
but there is no point in setting it equal to a healthbar with no properties because then you can't create any new healthbars with it
that defeats the purpose
Andrea Sonny
@andreasonny83
Jul 27 2016 10:14
modules.Healthbar is inside the modules object
Healthbar is just a constructor defined inside this module
Billy B.
@Azurasky1
Jul 27 2016 10:14
modules.Healthbar is an object with undefined properties of width, height, color, and position
you are not assigning modules.Healthbar to a constructor
you are assigning it to an object
if you try to use that in the app, it won't work
what it should be is modules.Healthbar = Healthbar;
Andrea Sonny
@andreasonny83
Jul 27 2016 10:15
yes, is creating a new object node inside the modules object
Billy B.
@Azurasky1
Jul 27 2016 10:15
that way you can create health bars on the fly
yea but that's pointless
why would you want to do that
Andrea Sonny
@andreasonny83
Jul 27 2016 10:16
to create a Healthbar object inside modules and set the values in the same time
after calling modules.Healthbar = new Healthbar();,
the modules object should look like this:
Billy B.
@Azurasky1
Jul 27 2016 10:17
modules.Healthbar = Healthbar object { width: undefined, height: undefined, color: undefined, position: undefined }
u can't use that to create anything so why would u want it
Andrea Sonny
@andreasonny83
Jul 27 2016 10:18
modules = {
  …
  Healthbar: {
    width: 100,
    heighth: 200,
    etc…
  },
  ...
};
Billy B.
@Azurasky1
Jul 27 2016 10:18
right
an object
Andrea Sonny
@andreasonny83
Jul 27 2016 10:18
yes
Billy B.
@Azurasky1
Jul 27 2016 10:18
don't u want to assign it as a function equal to the constructor Healthbar
explain
you said something about an object node
i want to know more about that
Andrea Sonny
@andreasonny83
Jul 27 2016 10:19
ok, let me open the project
Billy B.
@Azurasky1
Jul 27 2016 10:19
kk
Andrea Sonny
@andreasonny83
Jul 27 2016 10:19
maybe I did something wrong
Billy B.
@Azurasky1
Jul 27 2016 10:19
there is a chance i could be wrong too that's why i want to know
looking at it though what you wrote just doesn't make sense
if u set modules.Healthbar = Healthbar, you can just call modules.Healthbar() as if you're calling Healthbar()
but if u set it to an object, then modules.Healthbar() will give you an error because modules.Healthbar isn't a function
see what i'm getting at?
maybe there is some other purpose for this module that you have intended that i am not seeing
Andrea Sonny
@andreasonny83
Jul 27 2016 10:22
wait
that module is not used
no idea why is there
Billy B.
@Azurasky1
Jul 27 2016 10:22
i think i added it and you adjusted it so that it matched the other modules
Andrea Sonny
@andreasonny83
Jul 27 2016 10:22
all the logic for the healthbar is inside the player module
Billy B.
@Azurasky1
Jul 27 2016 10:23
that's bad we should move that
i can do it right now
Andrea Sonny
@andreasonny83
Jul 27 2016 10:23
each player have a different healthbar
but we don’t need a module
is just a variable inside the player object
_game.player.health = 100;
that’s it
then, Player.prototype.draw calls this.drawHealth(); for drawing the player health
Billy B.
@Azurasky1
Jul 27 2016 10:24
i see so here is where you draw the actual bars
Andrea Sonny
@andreasonny83
Jul 27 2016 10:25
maybe we can move that function only outside but I don’t see the point now
maybe will be required in the future but I’m not sure
Billy B.
@Azurasky1
Jul 27 2016 10:25
  _game.cv.fillStyle = _game.player.color;

    _game.cv.fillRect((_game.player.pos.x) - (9 * _game.scaleFactor),
                      _game.player.pos.y - (13 * _game.scaleFactor),
                      _game.player.frame.width * (_game.player.health / 100) *
                        _game.scaleFactor * 1.6,
                      6 * _game.scaleFactor);
then u use the utils module to randomly select a color
interesting
Andrea Sonny
@andreasonny83
Jul 27 2016 10:27
whait a minute I have some changes to commit
pushed with the Projectiles module
also, the server status is now working
there is a real SocketIO communication
as you stop the npm start task in the terminal, you should see the server status changing to Offline
Billy B.
@Azurasky1
Jul 27 2016 10:32
what do u think is the maximum amount of connections we could accommodate at any given time
Andrea Sonny
@andreasonny83
Jul 27 2016 10:32
I’m not sure about that but is possible to create different socketIO rooms for each game
Billy B.
@Azurasky1
Jul 27 2016 10:33
i am sure there is a way to test it and find out once everything is set
Andrea Sonny
@andreasonny83
Jul 27 2016 10:33
we need to test that
yes sure, we will try to figure that out at one point
let me know if you can see the projectile implementation now
Billy B.
@Azurasky1
Jul 27 2016 10:35
working on my end albeit only in one direction
in previous code i had changed which part of the sprite the projectile came from based on a direction facing property of the player
not sure where we are at with that now
Andrea Sonny
@andreasonny83
Jul 27 2016 11:04
is inside the Projectile.prototype.draw
when the keyboard listener calls the projectile draw function, it pass all the information for creating a new projectile:
  Keyboard.prototype.listenKeyboard = function() {
    if (this.shoot === true) {
      this.shoot = 2;
      modules.Projectiles.new(_game.cv,
                              _game.player.pos.x,
                              _game.player.pos.y,
                              _game.player.frame.width,
                              _game.player.frame.height,
                              _game.player.frame.direction,
                              10);
      _log('Projectiles actives: ' + modules.Projectiles.getActive());
    }
there is a problem with this logic. every time a new Projectiles.new is called, a new instance of the Projectile is created inside a projectiles array
  modules.Projectiles = (function() {
    return {
      projectiles: [],
      new: function(cv, x, y, width, height, direction, speed) {
        this.projectiles.push(
          new Projectile(cv, x, y, width, height, direction, speed));
      },
we need to find a way to remove them as they exit from the view or they collide on something
Billy B.
@Azurasky1
Jul 27 2016 11:23
oh
i know how we can do that
Andrea Sonny
@andreasonny83
Jul 27 2016 11:23
great
Billy B.
@Azurasky1
Jul 27 2016 16:43
so how come u removed my code w ordinal directoins
i had a bunch of if/else statements to cover all 8 directions but now we have a switch w only 4
i'm gonna leave it as is right now
Andrea Sonny
@andreasonny83
Jul 27 2016 17:02
right, your code was in the old project. You can reimplement that logic inside the keyboard module
Billy B.
@Azurasky1
Jul 27 2016 17:03
also
u must include more comments in your code
it is practically unreadable
Andrea Sonny
@andreasonny83
Jul 27 2016 17:03
but I only put 4 directions because of the sprites
Billy B.
@Azurasky1
Jul 27 2016 17:03
right i'm guessing they only have 4 directions
i have to spend an inordinate amount of time trying to figure out how u wanted things to work in ur mind
more comments!!!!
Andrea Sonny
@andreasonny83
Jul 27 2016 17:04
unfortunatelly yes so, unless we find better sprites we cannot handle diagonal directions at the moment
Billy B.
@Azurasky1
Jul 27 2016 17:04
that's fine i just don't like backtracking my code
so i wanted to know why it was changed
Andrea Sonny
@andreasonny83
Jul 27 2016 17:04
sorry -_-;. I thought that creating small modules in different files would be easy enouth to go through the different methods
Billy B.
@Azurasky1
Jul 27 2016 17:04
no
it is actually much harder than it was originally lol
the modules now force me to switch between 10+ files
Andrea Sonny
@andreasonny83
Jul 27 2016 17:05
there are only 5 modules at the moment
Billy B.
@Azurasky1
Jul 27 2016 17:05
even harder when you're on no sleep like me
well regardless
it's a lot of files
Andrea Sonny
@andreasonny83
Jul 27 2016 17:06
ok so, the best aproach would be to start from the app.js file and understand what is going on
Billy B.
@Azurasky1
Jul 27 2016 17:06
plus, the older files, i had erased what i had already moved so i could easily tell what remained but now it's back to the original
causing even moooore confusion
right
Andrea Sonny
@andreasonny83
Jul 27 2016 17:07
you still have the old files
anyway
all the App logic is directed from the app.js file
that is quite small and easy to understand I guess
you have the ready method triggered as soon as the DOM is ready
and that create the App object, set the frame rate, and call the Overlays.startWelcome function
Billy B.
@Azurasky1
Jul 27 2016 17:08
can u explain something
Andrea Sonny
@andreasonny83
Jul 27 2016 17:09
sure
Billy B.
@Azurasky1
Jul 27 2016 17:09
when are you setting this to hidden
Andrea Sonny
@andreasonny83
Jul 27 2016 17:09
so you don’t care too much about the welcome logic
what?
what is set to hidden?
Billy B.
@Azurasky1
Jul 27 2016 17:09
  app.el.canvas.classList.remove('hide');
also don't use short names like "el"
it's very ambigous
the name should clearly give an indication of what it does
i realize they mean "element"
still there are better names
but anyways
Andrea Sonny
@andreasonny83
Jul 27 2016 17:10
well, el is really common used as a short version for element
Billy B.
@Azurasky1
Jul 27 2016 17:10
use something else for me
Andrea Sonny
@andreasonny83
Jul 27 2016 17:10
you can rename that, it’s fine
you can change whatever you want
Billy B.
@Azurasky1
Jul 27 2016 17:11
i need the code to be easy to understand, i'm still a novice :p
no the whole point is so that i don't have to decipher it
Andrea Sonny
@andreasonny83
Jul 27 2016 17:11
I’m just trying to help you here but it’s still your project
Billy B.
@Azurasky1
Jul 27 2016 17:11
when u write the code for someone else
u need to have readability in mind
Andrea Sonny
@andreasonny83
Jul 27 2016 17:11
so you tell me what you want
ok
Billy B.
@Azurasky1
Jul 27 2016 17:12
just like when u are speaking to an audience, you pick your words carefully to cater to that audience...
well when you code, you must do the same thing
Andrea Sonny
@andreasonny83
Jul 27 2016 17:12
sure
Billy B.
@Azurasky1
Jul 27 2016 17:12
ok now the above question
when are you setting the canvas to "hidden"
Andrea Sonny
@andreasonny83
Jul 27 2016 17:12
the canvas is idden until the overlays is displayed
Billy B.
@Azurasky1
Jul 27 2016 17:12
where do u set that property
Andrea Sonny
@andreasonny83
Jul 27 2016 17:13
you just showed me that line of code
what do you mean?
Billy B.
@Azurasky1
Jul 27 2016 17:13
you're removing the property "hide" from the classlist, right
is "hide" just a default property, or did you manually set it?
see this project is the first time i am working with classlists
so their use confuses me
Andrea Sonny
@andreasonny83
Jul 27 2016 17:15
ok
inside index.html
<canvas class="canvas hide"></canvas>
is set to hide by default
as soon as you start the game, the hide class is removed
Billy B.
@Azurasky1
Jul 27 2016 17:17
that part doesn't make sense to me because every other time i worked with a canvas i didn't have to remove the hide property
it just showed up naturally
Andrea Sonny
@andreasonny83
Jul 27 2016 17:18
yes, but because we have to type in the player name before starting the game, we don’t want to see the canvas on the page background
yoou can remove that rule if you want
is just something extra
Billy B.
@Azurasky1
Jul 27 2016 17:18
it has to have been set to hide somewhere
i'll find it
i'm combing through everything now trying to make sense of it
appreciate ur patience
Andrea Sonny
@andreasonny83
Jul 27 2016 17:19
if you just delete the delete class from the canvas you can see the difference
as you click start game, you just see the canvas appearing suddenly instead of having the fade-in effect
just that
makes sense?
Billy B.
@Azurasky1
Jul 27 2016 17:21
yes
ty
Andrea Sonny
@andreasonny83
Jul 27 2016 17:21
cool
so maybe we can go through the code together and I can explain you the logic
if you want
Billy B.
@Azurasky1
Jul 27 2016 17:22
we aren't restricted to just gitter if you have skype we can talk over voice as well
Andrea Sonny
@andreasonny83
Jul 27 2016 17:23
anywway, if you have Atom, splitting the screen will help: https://www.evernote.com/l/AJ5jz8aZfqVLU75HVzEcnYEUQTuIXA_Ueo0
I don’t have skype installed at the moment and Iwill need to leave soon. but we can consider that for another day for sure
Billy B.
@Azurasky1
Jul 27 2016 17:24
ok sounds good
yea i've got atom i use that trick a lot
Andrea Sonny
@andreasonny83
Jul 27 2016 17:24
ok
so, if you want I can start explain you the code starting from app.js
Billy B.
@Azurasky1
Jul 27 2016 17:25
ok
give it a go
i have it open
Andrea Sonny
@andreasonny83
Jul 27 2016 17:25
the first thing is called in the entire app in on the last line of code:
window.addEventListener('load', ready, false);
as soon as the DOM is ready, the ready function is invoked
do we need a comment for that as well or is something obvious?
Billy B.
@Azurasky1
Jul 27 2016 17:27
it is always better to comment rather than not comment
Andrea Sonny
@andreasonny83
Jul 27 2016 17:27
then, ready() is just removing the event listener pointing to himself to clean that space in memory with:
window.removeEventListener('load', ready, false);
then it create a new App()
and we can move to the top where function App() { is defined
app is the big container of all the variables involved in the game
so, it loads all the modules inside a module key (I think this is not required)
I will put a comment to remove that
then it creates an empty game object
Billy B.
@Azurasky1
Jul 27 2016 17:32
ya i suppose i typically get confused at parts like this
Andrea Sonny
@andreasonny83
Jul 27 2016 17:32
set some variable to the overlays and canvas dom elements to reuse in the future
Billy B.
@Azurasky1
Jul 27 2016 17:33
it won't send -
Andrea Sonny
@andreasonny83
Jul 27 2016 17:33
then it add some listeners that we will see quite soon
Billy B.
@Azurasky1
Jul 27 2016 17:33
  modules.Keyboard = new Keyboard();


  window.$modules = modules;
like that
i don't really understand if ur trying to attach things to the global object or just create a modules object in app and then attach everything to that
Andrea Sonny
@andreasonny83
Jul 27 2016 17:34
yes, we don’t need to keep the modules inside the app object
Billy B.
@Azurasky1
Jul 27 2016 17:34
it confuses me
Andrea Sonny
@andreasonny83
Jul 27 2016 17:34
oh
ok
Billy B.
@Azurasky1
Jul 27 2016 17:34
and i mean ur passing in window.$modules in every module so ur just setting window.$modules equal to itself
seems redundant
Andrea Sonny
@andreasonny83
Jul 27 2016 17:34
window.$modules is the global object attached to the global one
ok
in the beginning I set modules to windows.$modules
in this part present inside all the modules:
(function(modules) {

})(window.$modules || {});
then I create a Keyboard object inside the window.$modules object, rightt?
with modules.Keyboard = new Keyboard();
then, I want to be sure the modules object is injected inside the global scope. window.$modules = modules;
I can avoid this last line of code but, because I said: window.$modules || {} . That means if the $modules object doesn’t exists, create an empty object
Billy B.
@Azurasky1
Jul 27 2016 17:39
isn't modules just equal to window.$modules
Andrea Sonny
@andreasonny83
Jul 27 2016 17:39
so, at the end I need to tell javascript where to put that new object
yes yes
Billy B.
@Azurasky1
Jul 27 2016 17:39
it's just a parameter
ok so you set modules.keyboard = new keyboard()
Andrea Sonny
@andreasonny83
Jul 27 2016 17:39
no, window.$modules = modules
Billy B.
@Azurasky1
Jul 27 2016 17:39
that's what i said lol
Andrea Sonny
@andreasonny83
Jul 27 2016 17:40
yes
Billy B.
@Azurasky1
Jul 27 2016 17:40
so you set modules.keyboard = new keyboard()
which is basically just saying the following
Andrea Sonny
@andreasonny83
Jul 27 2016 17:40
right
Billy B.
@Azurasky1
Jul 27 2016 17:40
window.$modules.keyboard = new keyboard()
Andrea Sonny
@andreasonny83
Jul 27 2016 17:40
right
Billy B.
@Azurasky1
Jul 27 2016 17:40
then u set window.$modules = window.$modules
using the parameter
Andrea Sonny
@andreasonny83
Jul 27 2016 17:40
not exactly
Billy B.
@Azurasky1
Jul 27 2016 17:40
explain that
it's essentially what ur doing, no?
if it's global why would you need to set it to itself if you changed it already with modules.keyboard = new keyboard();
Andrea Sonny
@andreasonny83
Jul 27 2016 17:41
the last fart of the immediately invoked function expression sais:
})(window.$modules || {});
Billy B.
@Azurasky1
Jul 27 2016 17:41
lol
Andrea Sonny
@andreasonny83
Jul 27 2016 17:41
so: if window.$modules already exists in the global scope, use that as modules
OTHERWISE, just create an empty object
Billy B.
@Azurasky1
Jul 27 2016 17:42
so u included it so that if it doesn't already exist then it will be created
this part that is
window.$modules = modules;
if it was just an object then it would still assign window.$modules to something
Andrea Sonny
@andreasonny83
Jul 27 2016 17:43
yes, the first module that will be called by Javascript will create that empty object, and from that point on, all the other modules will just extend that module
Billy B.
@Azurasky1
Jul 27 2016 17:44
so in the other modules u really don't need this line window.$modules = modules;
Andrea Sonny
@andreasonny83
Jul 27 2016 17:44
in theory, I can just define window.$module inside app.js so I don’t need to include that code in all the different modules
Billy B.
@Azurasky1
Jul 27 2016 17:44
but u just include it anyway
Andrea Sonny
@andreasonny83
Jul 27 2016 17:44
that’s right
Billy B.
@Azurasky1
Jul 27 2016 17:44
k
yes seems like it would be easier that way
Andrea Sonny
@andreasonny83
Jul 27 2016 17:44
I can remove that but it’s kind of best practice
Billy B.
@Azurasky1
Jul 27 2016 17:44
there is a lot of best practice i need to learn it seems lol
i'm an uncultured college kid
Andrea Sonny
@andreasonny83
Jul 27 2016 17:45
because is an extension to something else defined elsewhere, is always safe to handle this kind of error cases
but it’s really something extra
Billy B.
@Azurasky1
Jul 27 2016 17:46
ok
Andrea Sonny
@andreasonny83
Jul 27 2016 17:46
if you prefer I can get rid of all those repetitions
Billy B.
@Azurasky1
Jul 27 2016 17:46
no
while painful now it is for my own good to learn them and get used to them
Andrea Sonny
@andreasonny83
Jul 27 2016 17:47
ok
so back to the App() function
the last thing it does it sending a message to the server with $socket.emit('app:ready’);
Billy B.
@Azurasky1
Jul 27 2016 17:47
i figure that's something w socket i/o
Andrea Sonny
@andreasonny83
Jul 27 2016 17:47
this is just from the socketio library
so if you look inside src/server/app.js
you will see : socket.on('app:ready', function() {
but at the moment is just doing nothing
so nothing really to explain at this point
then, the App() function is finished and we can go back to the function ready() {
after, app = new App(); is ended, we set the fps inside the app object
and call the app.modules.Overlays.init
we pass the app.el.overlays element we defined before and the app.game
then, inside the Overlay function there is a lot of logic just to make sure the username is not empty and some bla bla bla you can read when you have time
the important part is the keyPressListener function
Andrea Sonny
@andreasonny83
Jul 27 2016 17:52
when you press the start game button, the validateGame is called
and, if a name is present, startGame will be called and will spread a start event to the app with
var event = new Event('start’);
this.element.dispatchEvent(event);
so, until this event is listened, we don’t have other javascript running
we reached the end
Billy B.
@Azurasky1
Jul 27 2016 17:56
interesting so ur just attaching all these elements like welcome overlay, store, player name to the overlays object
and i guess those are in css somewhere
did u do that manually or did u have something generate css for u
looks like u make a lot of use of classlists here with adding and removing "visible" and "active" as well
i gotta find some documentation on that
it's lookin like i got my work cut out for me, we are only missing the dragon and collision detection
Andrea Sonny
@andreasonny83
Jul 27 2016 18:06
sorry, I need to leave now
Billy B.
@Azurasky1
Jul 27 2016 18:07
np
thx for ur help
i can take it from here