Work in java mode but not javascript mode

JoshuaL1830

I know it is very long, but can someone tell me why this does not work in javascript mode??

TicTacToe game;
Button restart;
PFont myFont;

void setup()
{
  size(600, 600);
  background(255);
  game = new TicTacToe(50, 60, 500, 500);
  //String[] fontList = PFont.list();
  //println(fontList);
  myFont = createFont("Serif", 25);
  textFont(myFont);
  restart = new Button(30, 550, 100, 30, "Restart");

}


void draw()
{
  background(255);
  game.drawGrid();
  restart.draw();
  game.all();
  fill(0, 102, 153);
  textSize(18);
  text("Turn: ", 50, 40);
  if(!game.getTurn())
  {
     fill(255, 0, 0, 255);
     text("Your Turn!", 120, 40); 
  } else {
     text("Wait...", 120, 40); 
  }

  String winner = game.findWinner();
  if(winner != null)
  {
      fill(255, 0, 0);
      text(winner, 450, 40);
  }

}

void mouseClicked()
{
     if(game.getTurn())
     {
        int n = game.checkDrawn(mouseX, mouseY);
        if(n != -1)
          game.addRecord(n, 1);
        game.setTurn(false);
     } else {
        int n = game.checkDrawn(mouseX, mouseY);
        if(n != -1)
          game.addRecord(n, 2);
        game.setTurn(true);
     }

     if(restart.isClicked())
      {
         game.repaint(); 
      }
}


class TicTacToe
{
     //false your turn
     //true otherwise
     private boolean turn;
     private int[][] gridTrack = new int[9][1];
     private int[][] area = new int[9][2];
     private int track;
     private int x;
     private int y;
     private int width;
     private int height;
     private int squareWidth;
     private int squareHeight;
     private int count;

     public TicTacToe()
     {
      this.turn = false;
      this.track = 0; 
      this.width = 0;
      this.height = 0;
      this.count = 0;

     }

     public TicTacToe(int x, int y, int width, int height)
     {
       this.turn = false;
       this.x = x;
       this.y = y;
       this.width = width;
       this.height = height;
       this.squareWidth = width / 3;
       this.squareHeight = height / 3;
       writeCoordinate();
       writeTrack();
       this.count = 0;


     }

     private void writeCoordinate()
     {
         int i = 0;
         for(int j = 0; j < 3; j++)
         {
            this.area[i][0] = this.x + this.squareWidth * j;
            this.area[i][1] = this.y; 
            i++;
         }

         for(int j = 0; j < 3; j++)
         {
            this.area[i][0] = this.x + this.squareWidth * j;
            this.area[i][1] = this.y + this.squareHeight; 
            i++;
         }

         for(int j = 0; j < 3; j++)
         {
            this.area[i][0] = this.x + this.squareWidth * j;
            this.area[i][1] = this.y + this.squareHeight * 2; 
            i++;
         }


     }

     private void writeTrack()
     {
        for(int i = 0; i < 9; i++)
        {
           this.gridTrack[i][0] = 0;
        } 

     }

     void drawGrid()
     {
       strokeWeight(3);
       for(int i = 1; i <= 2; i++)
       {
         line(this.x, this.y+this.squareHeight*i, this.x+this.width, this.y+this.squareHeight*i);
       }

       for(int i = 1; i <= 2; i++)
       {
         line(this.x+this.squareWidth*i, this.y, this.x+this.squareWidth*i, this.y+this.squareHeight*3);
       }

     }

     void putX(int x, int y)
     {
         strokeWeight(8);
         fill(255);
         line(x-10, y-10, x+10, y+20);
         line(x+10, y-10, x-10, y+20);

     }

     void putO(int x, int y)
     {
         strokeWeight(8);
         fill(45, 23, 78, 32);
         ellipse(x, y, 30, 30);

     }

    int checkDrawn(int x, int y)
     {
       for(int i = 0; i < 9; i++)
       {
            if(mouseX > this.area[i][0] && mouseX < this.area[i][0] + this.squareWidth
             && mouseY > this.area[i][1] && mouseY < this.area[i][1] + this.squareHeight)
            {
               if(this.gridTrack[i][0] == 0)
                 return i;
            } 
       }
       return -1;
     }

     //add which sqaure is clicked and which player
     void addRecord(int i, int j)
     {
        this.gridTrack[i][0] = j; 
        this.count++;
     }

     void setTurn(boolean turn)
     {
        this.turn = turn; 
     }

     boolean getTurn()
     {
      return this.turn; 
     }

    String findWinner()
     {

         String text = null;



         //horizontal
         for(int i = 0; i < 9; i+=3)
         {
            int sum = this.gridTrack[i][0] + this.gridTrack[i+1][0] + this.gridTrack[i+2][0];
            if(this.gridTrack[i][0] == this.gridTrack[i+1][0] && this.gridTrack[i+1][0] == this.gridTrack[i+2][0] && sum >= 3)
            {
               if(sum == 3)
               {
                   text = "You Lost!"; 

               } else if(sum == 6) {

                   text =  "You won!";
               }
                line(this.area[i][0], this.area[i][1]+(this.squareWidth/2), this.area[i+2][0]+this.squareWidth, this.area[i+2][1]+(this.squareHeight/2));


            }
         } // end of horizontal

         //straight
         for(int i = 0; i < 3; i++)
         {
            int sum = this.gridTrack[i][0] + this.gridTrack[i+3][0] + this.gridTrack[i+6][0];
            if(this.gridTrack[i][0] == this.gridTrack[i+3][0] && this.gridTrack[i+3][0] == this.gridTrack[i+6][0] && sum >= 3)
            {
               if(sum == 3)
               {

                   text = "You Lost!"; 
               } else if(sum == 6) {

                   text = "You won!";
               }

               line(this.area[i][0]+(this.squareWidth/2), this.area[i][1], this.area[i+6][0]+(this.squareWidth/2), this.area[i+6][1]+this.squareHeight);

            }
         } // end of straight

         //left Diagonal
         int lDiagonal = this.gridTrack[0][0] + this.gridTrack[4][0] + this.gridTrack[8][0];
         if(this.gridTrack[0][0] == this.gridTrack[4][0] && this.gridTrack[4][0] == this.gridTrack[8][0] && lDiagonal >= 3)
         {
               if(lDiagonal == 3)
               {

                   text = "You Lost!"; 

               } else if(lDiagonal == 6) {

                   text = "You won!";
               }

               line(this.area[0][0], this.area[0][1], this.area[8][0]+this.squareWidth, this.area[8][1]+this.squareHeight);

         }

         //right Diagonal
         int rDiagonal = this.gridTrack[2][0] + this.gridTrack[4][0] + this.gridTrack[6][0];
         if(this.gridTrack[2][0] == this.gridTrack[4][0] && this.gridTrack[4][0] == this.gridTrack[6][0] && rDiagonal >= 3)
         {

               if(rDiagonal == 3)
               {

                   text = "You Lost!"; 
               } else if(rDiagonal == 6) {

                   text = "You won!";
               }

               line(this.area[2][0]+this.squareWidth, this.area[2][1], this.area[6][0], this.area[6][1]+this.squareHeight);


         }



         if(count == 9 && text == null) text = "Tie";

         return text;

     }

     //keep track of the Xs and Os
     void all()
     {
        for(int i = 0; i < 9; i++)
        {
           if(this.gridTrack[i][0] != 0)
           {
              int tmpX = this.area[i][0];
              int tmpY = this.area[i][1];
              if(this.gridTrack[i][0] == 1)
                 putX(tmpX+(this.squareWidth/2), tmpY+(this.squareHeight/2));
              else 
                 putO(tmpX+(this.squareWidth/2), tmpY+(this.squareHeight/2));

           }
        } 
     }

     //redraw the game
     void repaint()
     {
        this.count = 0;
        writeTrack();
        this.turn = false;

     }




}


class Button
{
     int x;
     int y;
     int w;
     int h;
     String text;

     public Button()
     {
        int x = 0;
        int y = 0;
        int w = 0;
        int h = 0;
        String text = "";
     } 

     public Button(int x, int y, int w, int h, String text)
     {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.text = text; 

     }

     //draw the button and text
     public void draw()
     {
         fill(0);
         rect(this.x, this.y, this.w, this.h);
         if(!text.equals(""))
         {
             fill(233);
             text(this.text, this.x+(w/4), this.y+(this.h/1.5));
         }
     }

     //check if the button is clicked
     public boolean isClicked()
     {
        return mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h; 

     }

}

JoshuaL1830

I figured it out. I can't use width and height as variables....

GoToLoop

Most common trap. Don't reassign Processing's variables and functions! :-w
In JS, function's references are stored in variables. Reassigning text makes the reference to function text() to get lost!
Also, Processing depends on correct values for width & height. Don't reassign them! 8-|