After installing bootstrap, the following border rules don't apply to my game board. The thing is...the rules apply themselves in on the bottom half of the board but not the top. I can show you this better than explaining it.

.i {
  border-left: 10px solid;
  border-right: 10px solid;
}

.j {
  border-bottom: 10px solid;
  border-top: 10px solid;
}

What is the industry standard for handling old branches?

see Ethan's github branch network

@J-Weeks

currently these div buttons located on my header:

are displaying as a block, each div is underneath each other. I am trying to to have them display inline so the buttons will be adjacent. Here is the CSS:

span {
display: inline;
}

Why is it not working?

Error from grunt serve:
ERROR in .//bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /Users/jamesfriedman/wdi/projects/tic-tac-toe/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//css-loader!./~/sass-loader!./assets/styles/index.scss 6:4172-4253 6:4276-4357

Issue: tried installing Bootstrap in project repository following instructions on https://github.com/ga-wdi-boston/html-css-layout-bootstrap-sass, however when running grunt serve to test in browser, several copies of the above error are thrown each referencing a different file in node_modules/bootstrap-sass/assets/fonts/.

Have tried installing different loaders as suggested by posts on stackoverflow, but receive same errors. App was working correctly prior to Bootstrap installation, but now is unable to style the page.

I'd like to organize the majority of my jquery-centric code into one "main" file, inside of which I would further organize jquery functions into object literals with names like "playerActions", "menuActions, etc. However, I'm having trouble implementing this model, and I worry that I may be missing something fundamental about how handlers are triggered by events within the browser.

In the code below, I'm trying to set up a simple listener that will log the details of a "square" when it is clicked. The goal is to retrieve the data attached to the clicked square -- row and column -- and pass it to the game logic to check for legality and, if legal, to change the game state.

'use strict'

$(document).ready(

playerActions.moveMade();


);

let playerActions = {
  moveMade: function() {
    $(".square").on("click", function(e) {
      console.log(e);
    })
  }

}

Tried to commit some changes to git (had successfully committed aprox. 10 minutes earlier) and when expecting Atom to open a commit message window, instead saw error (see screenshot below). Tried quitting and restarting Atom (both from CLI and Finder), but still receive the same error and can no longer edit any code. Problem is likely associated with HomeBrew as all filepaths listed in the error message include HomeBrew, but unsure of how to proceed.

Linter Output:

Running "jshint:all" (jshint) task
>> 3 files lint free.

Running "jsonlint:all" (jsonlint) task
>> 6 files lint free.

Running "jscs:status" (jscs) task
>> 3 files without code style errors.

Done, without errors.

Issue Description:
I have an array created by calling the children of a div with the class of "board"
var board = $('.board').children();
I created a function to check a square to see if it is not blank:

  var squareIsFull = function squareIsFull(element) {
    return element !== '';
  };

Later, I tried to use .every inside if statement to see if the board is full and do something if so

    if (board.every(squareIsFull())) {
      tieBoard();
      return true;
    }

That throws an error:
Uncaught TypeError: board.every is not a function

This is the only thing that's not working. So far all the google results point me towards how to use every, but I think I'm using it correctly...

I have several games under my user id

{"games":[{"id":1916,"cells":["","","","","","","","",""],"over":false,"player_x":{"id":59,"email":"[email protected]"},"player_o":null},{"id":1913,"cells":["","","","","","","","",""],"over":false,"player_x":{"id":59,"email":"[email protected]"},"player_o":null},{"id":1914,"cells":["","","","","","","","",""],"over":false,"player_x":{"id":59,"email":"[email protected]"},"player_o":null},{"id":1915,"cells":["","","","","","","","",""],"over":false,"player_x":{"id":59,"email":"[email protected]"},"player_o":null}]}

But for some reason my get request always gets a 404 error when trying to Get one of those game id's. Here is my get-game-played.sh:

TOKEN="e250c3f45b4f87cd562e3576231b81c9"
GAME_ID=1915

BASE_URL="http://tic-tac-toe.wdibos.com"
URL="${BASE_URL}/games/:${GAME_ID}"

json() {

  CONTENT_TYPE="application/json"

    curl ${URL} \
      --include \
      --request 'GET' \
      --header "Authorization: Token token=${TOKEN}"
}

json

echo

I am using the same token that I used to get all of the games played so that shouldn't be the problem.

My web app works locally but when it is hosted on github I get bundle.js and vender.bundle.js errors. I looked at both files and the line number on which the error occurred and both of them are on empty lines.

http://ajordon.github.io/tic-tac-toe/

ERROR in multi vendor Module not found: Error: Cannot resolve module 'bootstrap-scss' in /home/ajordon/wdi/projects/Tic-Tac-Toe @ multi vendor

I have updated my package.json, webpack.js and I have the bootstrap directory node_modules/bootstrap-sass
Still no luck

After ignoring vendor.js and *bundle.js and running grunt rebuild in preparation for loading my page on git hub pages, I noticed a number of mysterious files appeared in my project directory, in addition to spec.js and vendor.bundle.js files. Can I safely delete these?

https://www.dropbox.com/s/pc4lhtc84b7akuj/Screenshot%202016-02-06%2019.48.43.jpeg?dl=0

Hi, my page loading perfectly fine off line but when I imported things in git and using grunt serve >localhost:8080.... it is all screw up. May i get some help? Thanks

for (let i = 0; i < 3; i++) {
      for(let x = 0; x < 3; i++) {
        global.board[i][x] = " ";
        console.log(global.board[i][x]);

      }

Stuck in an infinite loop for some reason.

My current problem is I have done work on a branch and the work is not complete but i would like to save it and continue back on it later. I am afraid I will lose my work. I need to change my current branch and create a new one OR open a current one. Damn ADHD!

I just finished my 4 ajax requests. In my console I am getting this error now.

ERROR in ./assets/scripts/index.js
Module build failed: SyntaxError: /home/jeremiah/wdi/projects/temp2/tictactoe/assets/scripts/index.js: Assigning to rvalue (22:0)
20 | };
21 |

22 | $('.sign-up-submit') = function(event) {
| ^
23 | event.preventDefault();
24 | let formData = new FormData(event.target);
25 | $.ajax({

No idea what it means or how to fix, there is a carrot pointed to the $ representing jquery.

I need a little help talking through the high-level organization of the project. I feel I have a pretty good handle on the logic of the game but I am struggling with how to integrate it with the html/css with jquery.

Error:

~/wdi/projects/jentictactoe (gh-pages)$ git push origin gh-pages
To [email protected]:jenweber/jentictactoe.git
! [rejected] gh-pages -> gh-pages (fetch first)
error: failed to push some refs to '[email protected]:jenweber/jentictactoe.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
~/wdi/projects/jentictactoe (gh-pages)$ git push --set-upstream origin gh-pages
To [email protected]:jenweber/jentictactoe.git
! [rejected] gh-pages -> gh-pages (fetch first)
error: failed to push some refs to '[email protected]:jenweber/jentictactoe.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

Issue Description:
I created a remote gh-pages about a week ago when I started working on this project. I just now updated my local gh-pages with my local master. Then when I tried to push my newly-updated local gh-pages to remote gh-pages, I got this error. I tried pushing from my local master to remote gh-pages and that didn't work either. I'm afraid to tangle it up further. Suggestions? How can I push to gh-pages?

I have posted the code for my getWinner function below. It iterates nicely through all the winning combos. I know that I want to use .every() to see if the elements in newArray are equal to X or O in my const. I've read through the docs and know that I need to set the current value of my callback function to newArray[ j ]. I can't define that before the getWinner because it doesn't know what [ j ] is yet but I also can't define it within the block once [ j ] has been established. I don't even know if I'm making any sense. I feel like I'm SO CLOSE.

const board = ['', '', '', '', '', '', '', '', ''];
let winning = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

let getWinner = function() {
    for (let i = 0; i < winning.length; i++) {
    let newArray = winning[i];
       for (let j = 0; j < newArray.length; j++) {
  }
} return;
};

$(document).ready(function() {
  $('#board').find('td').click(function() {
    if (turnCount % 2 === 0) {
      $(this).text('X');
      board[event.target.id] = 'X';
    } else {
      $(this).text('O');
      board[event.target.id] = 'O';
    }
    console.log(board);
    turnCount++;
    getWinner();
    if (turnCount >= 9) {
      window.alert("Cats game. Please play again.");
    }
  });
});

While trying to refactor my code in order to make a defined function be called from another file, I messed something up.

ERROR in ./assets/scripts/example.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/scripts/index.js in /Users/kevinpie/wdi/projects/tic-tac/ticky-tacky/assets/scripts
@ ./assets/scripts/example.js 5:0-36

ERROR in ./assets/scripts/example.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/styles/index.scss in /Users/kevinpie/wdi/projects/tic-tac/ticky-tacky/assets/scripts
@ ./assets/scripts/example.js 6:0-37

The code is all there and I think I'm requiring the right files. But obviously not.

Everything seems correct but when I post this code:

• $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
• @import '~bootstrap-sass/assets/stylesheets/bootstrap';

into my style manifest, i get the following error message:

ERROR in .//css-loader!.//sass-loader!./assets/styles/index.scss
Module build failed:

• $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
  ^
  Invalid CSS after "": expected 1 selector or at-rule, was "con-font-path: ..."
  in /home/jeremiah/wdi/projects/temp2/tictactoe/assets/styles/index.scss (line 1, column 1)
  @ ./assets/styles/index.scss 4:14-122

Any idea why? I did npm install and I have bootstrap 3.3.6 in my webpack.js file.

Last time it was working: before I did save game state stuff. I initially thought it was because I was invoking saveGame() in move() but even when I comment it out it no longer works

I pasted ajax from auth.js into tic-tac-toe.js

let checkWin = function() {
  if(checkWinCombo(1, 2, 3) ||
    checkWinCombo(4, 5, 6) ||
    checkWinCombo(7, 8, 9) ||
    checkWinCombo(1, 4, 7) ||
    checkWinCombo(2, 5, 8) ||
    checkWinCombo(3, 6, 9) ||
    checkWinCombo(1, 5, 9) ||
    checkWinCombo(3, 5, 7) === true) {
      winner = player;
      gameStatus = 'inactive';
      $('.messages').text('Congrats! ' + player + ' wins!');
      score();
    } else if ($('.box').text().length === 9){
      winner = 'tie';
      $('.messages').text('It\'s a tie!');
      score();
    } else {
      return false;
    }
};

let move = function() {
  $('.box').on('click', function() {
    if(gameStatus === 'active') {
        if ($(this).text() !== '') {
          $('.messages').text('Select another box!');
        } else if (player === 'x') {
          $(this).text('x');
          // saveGame('x', $(event.target).attr());
        } else {
          $(this).text('o');
          // saveGame('o', $(event.target).attr());
        }
        checkWin();
        switchPlayer();
    }
  });
};

let saveGame = function (player, index) {
  $.ajax({
    url: myApp.baseUrl + '/games/' + myApp.user.id,
    // url: 'http://httpbin.org/post',
    method: 'PATCH',
    headers: {
      Authorization: 'Token token=' + myApp.user.token,
    },
    contentType: false,
    processData: false,
    data: {
  "game": {
    "cell": {
      "index": index,
      "value": player,
    },
    "over": false
  }
}
  }).done(function(data) {
    myApp.game = data.game;
    console.log(data);
  }).fail(function(jqxhr) {
    console.error(jqxhr);
  });
};

I'm trying to finish the API interface for my tic-tac-toe project. I keep getting a 400 bad request with this error to the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://ttt.wdibos.com/users. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

This is my function for creating a new user on the server:

let baseUrl = "http://ttt.wdibos.com";
let contentType = "application/json";

let createUser = function(data) {
  let credentials = {credentials: $.extend({}, data)};
  console.log(credentials);
  $.ajax({
      type: "POST",
      url: baseUrl + "/users",
      contentType: contentType,
      processData: false,
      data: credentials,
    }).done(function(data) {
      console.log(data);
    }).fail(function(jqxhr) {
      console.error(jqxhr);
    });
}

...where data = {credentials: {email: "something", password: "something", password_confirmation: "something"}}.

What's going on here?

See:

@MattB-GA-Boston Do you mind taking this?

I had a problem with grunt serve this morning as well. When I am running grunt serve, HTML and CSS will automatically update on the browser. However, when I make changes to JS (and save), grunt serve won't update and I need to restart grunt serve (takes a long time). I thought I was just having problems with bootstrap, but I realized it happened to my tic tac toe project too. I don't think this was happening prior to today :(

Is there any way to fix this? Constantly re-running grunt serve is slow.

How I tested whether js was updating on the browser: I had a never-ending loop, and when I removed it from my js file, it wouldn't go away.

With loop:

let newGame = function() {
  $('.board').children().on('click', function() {
    while (turnCount <= 8) {
      if ($(this).hasClass('disable')) {
        alert('Select a different box!');
      } else if (turnCount === 0) {
        $(this).text('x');
        $(this).last().addClass('disable');
        turnCount++;
      } else {
        $(this).text('o');
        $(this).last().addClass('disable');
        turnCount++;
      }
    }
  });
};

Without loop:

let newGame = function() {
  $('.board').children().on('click', function() {

      if ($(this).hasClass('disable')) {
        alert('Select a different box!');
      } else if (turnCount === 0) {
        $(this).text('x');
        $(this).last().addClass('disable');
        turnCount++;
      } else {
        $(this).text('o');
        $(this).last().addClass('disable');
        turnCount++;
      }

  });
};

on branch gh-pages, i removed '*bundle.js' and 'vendor.js' from the gitignore file, added that file to stage, committed it, and pushed all of that using git push origin gh-pages. the hosted site lacks all css and javascript.

i'm looking at http://apalmer0.github.io/tictactoe/index.html

in the console, the errors are:

http://apalmer0.github.io/tictactoe/vendor.bundle.js 
Failed to load resource: the server responded with a status of 404 (Not Found)

and

http://apalmer0.github.io/tictactoe/bundle.js 
Failed to load resource: the server responded with a status of 404 (Not Found)

No Access Control Origin header?
DELETE http://tic-tac-toe.wdibos.com/sign-out kylekatz.github.io/:1 XMLHttpRequest cannot load http://tic-tac-toe.wdibos.com/sign-out. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://kylekatz.github.io' is therefore not allowed access. The response had HTTP status code 404.

See ga-wdi-boston/project-issue-tracker-guide#1 for history

I am using this function:

let player1Move = function () {
  $('.gameboard').children().on('click', function () {
  $(this).text('X');
};

to represent the first players move,

and this function:

let player1moves = []
function (player1moves) {
  $(.gameboard.box).push(player1move);
}

to store each move into an array in order to match an array in the winning conditions.

First issue is the player1move function breaks my game.
Second issue is a player will not reach a winning combination in the first 3 moves each game, meaning they could gather an array of 5 numbers total and that would never be equal to my winning combo arrays of only 3 numbers total.

Any suggestions on syntax or if i'm not thinking through the functions properly would be greatly appreciated!

When I hit the change password modal button, the page refreshes instead of changing the password.

$('.change-password2').on('submit', function(e) {
    e.preventDefault();
    if(!myApp.user) {
      console.error("Wrong!!!");
      return;
    }
    var formData = new FormData(e.target);
    console.log(formData);
    $.ajax({
      url: myApp.baseUrl + '/change-password/' + myApp.user.id,
      method: 'PATCH',
      headers: {
        Authorization: 'Token token=' + myApp.user.token,
      },
      contentType: false,
      processData: false,
      data: formData,
    }).done(function(data) {
      console.log(data);
      console.log("Password changed");
      $('#myModal3').modal('hide');
    }).fail(function(jqxhr) {
      console.error(jqxhr);
    });
  });

Not quite understanding why this isn't woking. ("it would be nice to have all of them export")

Error from browser :

jquery.js:13Uncaught TypeError: gameFunctions.winnerHorz is not a function

i feel like module.exports should look some thing like
module.exports = { function-nickname? : 'function-name'; };

Linter Output:

grunt nag didn't return anything on point.

Issue Description:

I declare a global string variable, and try to change its value inside of a function. Using console logs I found that the value changed within the function, but the global value of the function did not change. Is it just not possible to change the global value of a literal? Do I have to convert it to any array first?

I declared the variable as a var, declared the function as a var, commented out pretty much every possible problem line, and nothing has worked. Any help would be appreciated!

I have auth.js and tic-tac-toe.js

Errors received:
auth.js - saveGame is defined but never used
tic-tac-toe.js - saveGame is used but never defined

I've tried copying my ajax into tic-tac-toe.js but I still get both errors (not defined, and not used, but now both are in tic-tac-toe.js)

let saveGame = function (player, index) {
  $.ajax({
    url: myApp.baseUrl + '/games/' + myApp.user.id,
    // url: 'http://httpbin.org/post',
    method: 'PATCH',
    headers: {
      Authorization: 'Token token=' + myApp.user.token,
    },
    contentType: false,
    processData: false,
    data: {
  "game": {
    "cell": {
      "index": index,
      "value": player,
    },
    "over": false
  }
}
  }).done(function(data) {
    myApp.game = data.game;
    console.log(data);
  }).fail(function(jqxhr) {
    console.error(jqxhr);
  });
};

let move = function() {
  $('.box').on('click', function() {
    if(gameStatus === 'active') {
        if ($(this).text() !== '') {
          $('.messages').text('Select another box!');
        } else if (player === 'x') {
          $(this).text('x');
          saveGame('x', event.target.id);
        } else {
          $(this).text('o');
          saveGame('o', event.target.id);
        }
        checkWin();
        switchPlayer();
    }
  });
};

I can't find the index of the last move on the board so it is preventing me from putting that value in the ajax PATCH request to send data after each move.

There are 2 index.js files in the project - 1 in the parent folder and 1 in assets/scripts/ folder.

I am unsure which file to require(' .js') the API authentication js file.

Thank you.

The error messages pasted below:

Is saving the game state part of the basic requirements for this project, or is that a bonus feature?Just trying to budget the rest of my time remaining to work on my game. I understand that the login/logout functionality is required.

I'm writing my AJAX requests in a separate file from my main function. When I call an AJAX request from main--sign-in(), for instance--I'd like to store the returned user object in a global variable in my main function.

My natural instinct here is to pass by reference this userData variable to the sign-in function (or whichever), and then assign to it the returned value within the .done block of the sign-in function. Can I do this in JS? I've tried but the userData variable remains undefined after a successful sign-in.

Essentially: Can I pass by reference in JS? Would it be reasonable to do so in this case? Would a better workaround be to store userData within the AJAX file and then write a getter function, one which I could export to the main file?

@nwilcox11 and I have the same issue.

Bootstrap javascript fail after "installing" bootstrap with Jason. We copied and pasted code from BootStrap javascript fails.

Tests:
bootstrap components work. (navigation bar).
bootstrap javascript FAIL! (modals)
No error from grunt serve.

I suggest removing all references to time buckets, i.e. "days".

So I created my sign out button (the last step of my api auth yay!) and when I run my page the console logs "cannot read property 'id' of undefined." It references line 84 of my JS.

Line 84 reads as follows:
url: myApp.baseUrl + '/sign-out/' + myApp.user.id,

I have declared myApp and this same line works for the change password function. I made sure that all my ID's are matching and I see no reason why this shouldn't work. Even a second set of eyes would be amazing.

The docs are confusing because this issue seems relatively broad in scope.

What's the best way to refresh the board once a remote player has updated it? Waiting for a local user's click will mean the local player is always one move behind, and refreshing the page seems to defeat the purpose of using ajax.

I recently installed Bootstrap and added a NAV bar to my HTML and CSS. Now my function:

let playerMove = function () {
  $('.box').on('click', function () {
    if(turn % 2 === 0) {
      $(this).text('X');
    }
    else {
      $(this).text('O');
    }
    turn++;
  });
};

no longer works. Before bootstrap was installed it would place an X on each box and alternate to an O after an X was placed. Now when I click on the box's nothing happens. It seems like the jQuery function is no longer grabbing the .box class in my html file which connects to all 9 of my boxes.

I could really use a third eye.

x|x|o

x|o|x

x|x|o

passes instead of fail. I solved the inverse of this. I check with peers. There is no googling this.

To demonstrate save.

ERROR in .//bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /Users/nickwilcox/wdi/projects/js-template/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//css-loader!./~/sass-loader!./assets/styles/index.scss 6:4172-4253 6:4276-4357

I am getting the same error that James was getting. I followed the installation protocol.

my files are linking to each other via html fine but when I put them up on git they won't link at all.
I used
for scss

<link rel="stylesheet" href="assets/styles/index.scss">

or

<link rel="stylesheet" type="text/css" href="./assets/styles/index.scss"/>

and for js

<script src="./assets/scripts/example.js"></script>  or just deleted that line but nothing worked

THanks
Ken

Based on the README description, it was not clear to me that successful completion of this project required login functionality. This would have helped with wireframes and user stories. FYI for future classes.

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg Module parse failed: /Users/kevinpie/wdi/projects/tic-tac/ticky-tacky/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg Line 1: Unexpected token < You may need an appropriate loader to handle this file type. | <?xml version="1.0" standalone="no"?> | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | <svg xmlns="http://www.w3.org/2000/svg"> @ ./~/css-loader!./~/sass-loader!./assets/styles/index.scss 6:4756-4837

$('#gameboard').on('click', function(event) {
  event.stopImmediatePropagation();
  let gameboardBox = $(event.target.id);
  alert(gameboardBox); //Testing purposes
  if (global.turn === true) {
    gameboardBox.text("X").css("background-color", "green");
    global.turn = false;
    console.log(gameboardBox.text());//Testing purposes
  } else {
    gameboardBox.text("O").css("background-color", "red");
    global.turn = true;
    console.log($(event.target.id).text());//Testing purposes
  }
});

I am trying to fill the event.target.id with an X or and O. My alert will display the entire object at the event.target.id. The "selector" function in JQuery will return the correct id name but I get errors on my intital .text(), stating the selector is not a function. Which it isnt.....