Skip to main content

More tic tac node

Well I am feeling pretty good about my progress with React Native, but haven't done any more coding in the last couple of days. I just re-opened the project again today and thought I'd blog about some of my as-yet unsolved challenges!

I like loops

Things with declaring and initializing variables are really different than what I'm used to. In Processing and Python, global variables can be declared and re-declared wherever, and the draw loop will "pick up" those changes and return the desired results. For example, in Processing, I could initialize the integer "y" to 5 with int y = 5; then inside the draw loop, call println(y); to repeatedly print "5" to the console. If I then call a function that just does y=7; the console will start printing "7" repeatedly, since it recognizes the new value of y.

I used this a lot to build setter functions, for example initializing all the entries in the squareStates array in Tic-Tac-Tohmygod (my Processing-built Tic Tac Toe game) to 0s at the beginning of the round, then calling a simple gameBoard.markSquareX() or gameBoard.markSquareO() that basically just said squareStates[i] = 1 (or =2). The updated squareStates array got "picked up" by gameBoard.drawPlayedTokens() automatically (thanks to the draw loop) and so I didn't have to do anything else to get the drawn game board to update from a blank to an X or O - it was basically always updating itself based on the squareStates array.

Without the draw loop, though, I'm finding it hard to get my desired behavior. Here's where I'm at:

Life without draw()


In TicTacNode, I thought I'd start figuring out interaction by having a button that could toggle whether it was currently player one's turn, and print that on the screen. I had already created a Player class and constructor that looks like this:
export class Player extends Component {
  constructor(name, turn) {
    super(name, turn);
    this.name = name;
    this.turn = turn;
  }
(If any experienced JS or React Native coders are reading this they can probably already see the issue, because I don't actually know what I'm doing with some of this - more below) and then initialized player1 with const player1 = new Player((name = "playa1"), (turn = true));

This seemed to go pretty well. I confirmed that my constructor was working; the const declaration was definitely setting the name and controlling the "turn" variable. I could even call a player1.printName() function that just did console.log(this.name). Impressed that I didn't even have to say that "name" was a string and "turn" was a boolean, I thought maybe I was in for a pretty easy road with building my interactivity.
a screenshot of a cell phone with android softkeys at the bottom  and a tic tac toe board with very tall skinny buttons in each cell of the tic tac toe board.
Don't ask about the button sizes, but I thought switching one from blue to yellow would be trivial... it was not.


When I went to use my trusty setter functions, things didn't go as planned. I tried calling player1.setName("Rickaye"), which took name_ as an argument and simply did this.name = name_;. The good news was, I was actually updating player1.name this way! I could even do player1.printName() and print "Rickaye" to the console over and over to be sure! The bad news was, the screen wasn't updating. The screen stuck to "playa1," the name given by its constructor, regardless of what value had since been updated to.

State and setState

I totally understand from reading the React Native documentation that I am supposed to use "state" to solve my problem. I just can't seem to get it working, and I know it's because I fundamentally am not understanding some things about what JS/React Native is doing.

I tried all kinds of quick fixes, like changing my setName(name_) function to do this.setState.name = instead of this.name = (and sundry other variations on just throwing "setState" into places where I was altering the variable). Instead of just trying to get this to work, I'm going to set my sights on understanding a couple things:

  1. what the heck does super() do? The error says I can't call this. without first doing super(), but what is it actually doing?
  2. related: what, exactly, does "this." refer to? I have always understood it as just a clarification that the thing after the dot should be found in the same class or scope as the code containing this., but I guess I don't really know, and scoping seems different with React Native than I'm used to, so my assumptions about how it works don't seem to be working
  3. why do the React Native docs say I should set up my constructor like
    constructor(props) {
      super(props);
      this.state = {whatevervariable: value};
    }
This seems like it would work fine if I made separate classes for Player1 and Player 2 (which I might do as a temporary (hopefully) workaround) but I don't get how to pass different values to the constructor this way. I think once I understand more about what's happening with super and this, I'll be on my way to a solution to my color-changing buttons!

Comments

Popular posts from this blog

New Position with Chicago Metro History Fair

I'm excited to have begun a new position at the Chicago History Museum a couple of weeks ago now. I am a "History Fair Program Specialist," meaning I help run the Chicago Metro History Fair.

The Chicago Metro History Fair (CMHF) is an annual, regional competition where middle and high school students in and around Chicago research a historical topic of their choice and create projects (exhibit boards, websites, documentaries...) that show off their hard work. Volunteer judges from around the community help provide feedback on the students' work, and winning entries can advance to state and national level competitions (administered by Illinois History Day and National History Day, respectively).

So far, my work has primarily been in preparing for weekend "Palooza" events, where volunteer coaches (often history teachers, faculty, graduate students, etc) and librarians assist students with their History Fair projects. The regional competition will take place i…

Setting up an RStudio Server

I'm taking a break from React Native (our group decided not to use it for the Tic Tac Toe project) and wanted to put some thoughts in here about setting up my RStudio server for my SOTU-db project.

I won't get into the details of why I want the RStudio server here - that will be covered on the SOTU-db dev blog. Here, I just want to record some quick thoughts and problems that arose as I set up the server.  Gaining access to the server The server itself is a VM provided by Loyola University Chicago's Computer Science Department - thanks to George Thiruvathukal and Miao Ye for setting me up with this and providing support. 
I initially ran into issues because I couldn't figure out how to connect to the server. I knew I had been assigned a static IP and a DNS entry in Loyola's nameservers at sotu-db.cs.luc.edu, and assumed I would use SSH to connect to the server (which I further assumed was running Ubuntu in accordance with CS departmental policy and my previous expe…

Setting up a Tomcat server

This post covers the process of setting up Apache Tomcat 9 as a server for static .html pages.
Environment & Background I have access to a VM running Ubuntu 18.04 on which I've already set up an instance of RStudio server. I have SSH access but not a graphical interface, so it's been a good opportunity to work on my Linux skills. My goal here was just to serve static HTML pages to site visitors for now. It's really satisfying to have full control over the HTML and CSS, instead of being in an environment like Wordpress (or Blogger!) where it's never quite clear what markup it will accept and what it will totally ignore. I've been mocking up a frontend for SOTU-db using W3-CSS, which feels like kind of a cross between traditional HTML/CSS/JS and React Native. 
I had played around with Ubuntu servers before, so I was familiar with Nginx and Tomcat. As I've said many times, my favorite part about Ubuntu is the documentation that is completely incomprehensible, …