Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Eric Hasegawa
@EricHasegawa
@khaduch Yeah I'm working on it, I think I'm getting there
Ken Haduch
@khaduch
@EricHasegawa - yeah, it seems to be working now - at least I uncommented the code and tried the .focus() again and it changes the color... did you have multiple handlers set up, perhaps?
@EricHasegawa - at least it is working once, then something seems to go awry...
Eric Hasegawa
@EricHasegawa
@khaduch Thanks! using a different method
CamperBot
@camperbot
erichasegawa sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3774 | @khaduch |http://www.freecodecamp.org/khaduch
Gulsvi
@gulsvi
@EricHasegawa You may want to blur() the element after it has focus(), and jQuery has a delay() method you can use instead of setTimeout if preferred:
$("#red").focus(function() {
  $("#red")
    .css("box-shadow", "0 0 10px 15px yellow")
    .delay(5000)
    .queue(function() {
      $("#red").css("box-shadow", "none").blur();
    });
});
Ken Haduch
@khaduch

@EricHasegawa - that sounds like a good idea that @gulsvi has. I find that if I use the .focus method, which I set up to alternate colors between red and black, that unless I get the red button "unfocused" (which would be blur) that it will not trigger the focus handler again.

Another good idea with jquery is to cache the various selectors that you are using, jquery goes through a lot of contortions to find things - so you could create variables like this:

var $red = $("#red");
var $blue = $("#blue");

// and use them like this:
$red.css("background-color", "black");

That would mean that instead of jquery going through gobs of code to find the element each time, you would only do that once and then just use the cached information to access it with the various jquery methods.

Gulsvi
@gulsvi
^That's a great suggestion. If you don't expect to call $("#red") anywhere else, you could speed up that method above with:
$("#red").focus(function() {
  var $this = $(this);
  $this
    .css("box-shadow", "0 0 10px 15px yellow")
    .delay(5000)
    .queue(function() {
      $this.css("box-shadow", "none").blur();
    });
});
Ken Haduch
@khaduch
@gulsvi - great tips - I haven't used jquery queue at all - I'll have to remember that, probably will come in handy sometimes - thanks!
CamperBot
@camperbot
khaduch sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2641 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
@khaduch Thank you too! A jQuery Promise also works :)
$("#red").focus(function() {
  var $this = $(this);
  $this
    .css("box-shadow", "0 0 10px 15px yellow")
    .delay(5000)
    .promise()
    .done(function() {
      $this.css("box-shadow", "none").blur();
    });
});
CamperBot
@camperbot
gulsvi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3775 | @khaduch |http://www.freecodecamp.org/khaduch
Daniel
@DanJP2016
working out the javascript for the tic tac toe challenge. I'm thinking the best approach would be to have a core function keep track of the game state and update the board instead of letting the player clicks fire everything off, but I am at a loss and open to suggestions.
Multivac
@univacc
in mdn's cascade and inheritance page, it says "The only way to win against an ID selector is to use !important", but we can win against ID selectors with inline styles o.O
Is there something I'm missing
Bin Gao
@gaobin1019
"Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity."
Multivac
@univacc
Thanks @gaobin1019
CamperBot
@camperbot
enigmacipher sends brownie points to @gaobin1019 :sparkles: :thumbsup: :sparkles:
api offline
abraham anak agung
@padunk
@enigmacipher !important will ignore any inline styles
Eric Weiss
@eweiss17
!important is great
Ken Haduch
@khaduch
@enigmacipher - they make a point when referring to inline style attributes: (such declarations don't have selectors, so their specificity is always simply 1000.) So, technically, there is no "selector" involved in an inline style, so they are talking about a "win against an ID selector" - and they are talking about other selectors (which, an inline style doesn't have) so there isn't any way to "beat" an ID selector with any other selector unless you use !important. I think that is the logic behind their statement.
Heathercoraje
@Heathercoraje
Hello friends, consider this code
arr1.sort(function(a, b) {
        return a[1] > b[1] ? 1 : a[1] < b[1] ? -1 : 0;
    });
}
I don't understand why returning 1,-1 or 0 would sort an array?
Bin Gao
@gaobin1019
the function let you specify who is bigger, a or b. It serves as a parameter to the sort function.
Heathercoraje
@Heathercoraje
but when return with 1, what happens?
Bin Gao
@gaobin1019
-1 means a < b, 0 means a === b, 1 means a > b
Heathercoraje
@Heathercoraje
then it just sorts based on that
brilliant.
Thanks! @gaobin1019
CamperBot
@camperbot
heathercoraje sends brownie points to @gaobin1019 :sparkles: :thumbsup: :sparkles:
api offline
check this example @Heathercoraje
Heathercoraje
@Heathercoraje
@gaobin1019 precisely. I also found docs. it was silly one haha
Bin Gao
@gaobin1019
:)
Baibhav Gautam
@baibhavx

Hello friends, I am making a TicTacToe game using OOP JS and React. I am fairly new to React.
I have these classes for game logic(Not React classes)
Game
Board
Player
HumanPlayer extends Player
ComputerPlayer extends Player

A new game is instantiated like this:

   let GAME = null; //Global variable 
   ....  
   // some code
   ....  

   //When user chooses mark and level, 

   GAME = new Game(
    new BoardModel(),
    new HumanPlayer(this.state.humanName, this.state.humanMark),
    new ComputerPlayer('Computer', this.state.humanMark === 'X' ? 'O' : 'X'),
    level
  );

In React, App component is the parent component which displays BoardUI or InfoForm component based on state.

Now what is the best way to synchronize the game logic with the App component state.

Currently I am experimenting with something like this in App component

this.setState( {
  game: GAME
}) 


makeMove(mark, position) {
  GAME.board.makeMove(mark, position) 
  this.setState({
    game: GAME 
  })
}

I am not sure if this is an ideal approach. I know I should not mutate the state directly. So when I do GAME.board.makeMove('X', 0) this is in effect messing with the state because of this.setState({ game: GAME }) already.

I thought may be something like this.setState({ game: this.deepClone(GAME) }) would be more ideal, but still not feeling good about this appoach.

I'd appreciate any thoughts, suggestions to point me in the right direction.

Here is my Repo if that is helpful:
https://github.com/baibhavx/Tic-Tac-Toe-AI

habibaatify
@habibatify_twitter
hello
i want to add a pic from my google drive to codepen when i pest the url it not show how can solve it?
Supra01
@Supra01
Hello! I'm currently working on the Twitch API Project. In an effort to not have to write my GET request code more than once I used a few callbacks and I'm able to get back user logo images, channel names and online status. However, when you look at console in the devtools you can see that online status data comes in a different order than the images . Is there a way for me to get them in the same order or are my callback causing this problem?
Claudio Restifo
@Marmiz

@baibhavx since you have decoupled the logic from the UI, I'd let React handle the UI changes via props and not state.

Make each react class a "dumb" component that receives everything via props, and implement the logic somewhere else... Kinda the same idea with SSR.

something along the line of:

<MyReactComponent board={board} onChange={myOnChangeMethods} onOtherAction={differentActionMethod} />

And make use of componentWillReceiveProps lifecycle to perform (if you want to) any check on incoming props.

Anyway, you sure like making things more difficult :)

Bin Gao
@gaobin1019
@baibhavx react is all about rendering components, I feels like the game logic should be inside the React application it self. Since a TicTacToe game is all about how to render the current board based on current game state.
Claudio Restifo
@Marmiz

@Supra01 what do you mean by

comes in a different order than the images

?

Supra01
@Supra01
@Marmiz for example the name and image for user ESL_SC2 might be displayed first but that users online status might show up at a different time even though the array in in the same order
image.png