Settings Menu! (2/13)

Today I mainly worked on implementing a settings menu. I had done this yesterday, but the code needed some cleaning up.

I now have it so that you can press a gear icon in the top-right of the app. This gear icon will redirect you to the settings menu when you press it, and I've also included a back button to go back to the main game from the settings menu. Both buttons work via the <a> tag in HTML. No Javascript is used (yet), but I plan to change them to Javascript so I can work on their design a bit more.

Here's a code example of the settings button:

    <a href="settings.html"><img id="settingsButton" src="settings.png"></img></a>

And the back button:

    <a href="index.html"><img id="proBackButton" src="settings.png"></img></a>

Together, they work very well. On Monday I'll work on saving data, and hopefully getting some background sounds!

Working with Buttons / Menus (2/12)

Today I worked with some buttons and menus. It's pretty different on FirefoxOS, since you cannot have objects float to the bottom for some reason. Jack, Dylan, Aki, and I all tried to modify this, but had no success. I decided to have the settings menu button at the top of the page instead.

I also worked on an interesting concept: getting text to change size based on how many characters it has. I successfully got that working with the following function in Javascript:

function checkText(newtext){
  console.log("Newtext.length is " + newtext.length);
  if(newtext.length >= 15){
    if(newtext.length >= 30){
      if(newtext.length >= 40){
        $("#textId").animate({
        "font-size":"5pt"
      });
      console.log("setsize to 5");
      $("#textId").text(newtext);
      }
      else{
        $("#textId").animate({
        "font-size":"7pt"
      });
      console.log("setsize to 7");
      $("#textId").text(newtext);
      }
    }
    else{
      $("#textId").animate({
        "font-size":"10pt"
      });
      $("#textId").text(newtext);
      console.log("setsize to 10");
    }
  }
  else{
    $("#textId").text(newtext);
  }
}

Probably not the best way to get it to work, but it does the job. I just check to see how many characters the text has, and then based on how long it is, I change its size. That way, my elements won't shift down, if it's done correctly. It still needs some experimentation, but it's working well so far.

Working with a master branch (2/10)

Today we came into an issue when we added Aki into GitHub, and that was the realization that my code wasn't pushing to the right repo. Instead of our shared repo, it was pushing to a repo with the same name on my account, while Aki's was pushing straight to the shared repo. We fixed this on my machine with the following commands:

git remote add upstream "giturlhere"
git pull upstream master
git push upstream master

My code can now be pushed to the shared repo by the following:

git commit -a
git push upstream master

And if I want it only to go to my repo:

git commit -a
git push

Thursday we're going to setup Aki for this.

In other news, I also setup JQueryMobile. I haven't really used the library yet, however I plan to implement a settings menu using this, and possibly a store. It looks fairly simply to use!

Setting Up GitHub and Pushing Changes (2/9)

Today I mainly worked on setting up GitHub on my Mac. I started out with installing Git (using Homebrew):

brew install git

Then I set it up with my username and email:

git config --global user.name "YOUR NAME"

git config --global user.email "YOUR EMAIL ADDRESS"

After that, I cloned the repository in my project's folder:

git clone "url" - replacing URL with our repo's url

Then I cd'd into the repository's new folder.

cd FXOS_Experimentation

... and committed all my files

git commit -A

... then pushed them all!

git push

It was fairly simple, and now I can commit and push whenever I like. Our repo is now available here.

I also got custom fonts working in my app!

Working with Aki and BuddyUp (2/5)

Today I mainly worked with Aki on setting up BuddyUp. I had originally intended to work on setting up Google Fonts on my app, but after asking the question on IRC, I didn't really get enough help towards that, so I decided to do something else. Edit: I got a lot of help in the last few minutes! I'll attempt a fix tomorrow.

Anyways, the setup of BuddyUp was fairly simple. We first downloaded it from the GitHub repo, then added it into the WebIDE. From there, we pretty much were able to launch it right to the device in a few seconds. We even tested asking a question, which worked as well. However, one issue so far is that the app is EXTREMELY laggy. I think it's because it's trying to load all of the questions every single time a character is typed. That, or it's because we're running the app via USB. It'll take a lot of experimentation.

More Experimentation with Firefox OS (2/4/15)

Sorry for the lack of blog post yesterday! I was working very hard on my Javascript/HTML code, and I wanted to save the best for last!

I've been experimenting in Javascript for the past few days with a pretty basic app, I'm calling it "Project Push The Button" at the moment. Basically, it's a 'game' in which the user of the phone taps the button a ton of times. There's a counter, which displays how many times the button is pressed, as well as messages to encourage the player.

Today, I implemented an EXP and leveling system, as well as animations! I've gotten a lot of help from Aki and Alex, and I almost fully understand Javascript and JQuery now.

I've decided to post my code when it's a bit more finalized. However, I'll post some examples of how I handled EXP, Leveling, and Animations.

All of the variables I write are stored to IDs, I've learned. These IDs show what you're modifying, and you can modify them in all sorts of ways. For the most part, I've been changing their text. I do that with the following code:

$("#idName").text("yourTextHere");

Where idName is the name of your ID.

Animations are just as simple. I've been messing around with both fadeTo and slideToggle, both of which are handled by JQuery.

FadeTo fades a block of text, either to dissolve or to make it more visible. It's done by the following code:

$("#idName").fadeTo(400, 0.01);

Where idName is the name of your ID, 400 is the time of the fade, in MS, and 0.01 is the opacity of the object after the fade. You can fade in with the code below:

$("#idName").fadeTo(400, 1);

Where 1 is setting it's opacity to 100%.

SlideToggles are called with the following code:

$("#idName").slideToggle();

The time slideToggles take by default is 400ms. It can be set by putting a number in the parenthesis. I use slideToggles to handle when a user levels up, as it provides me with a nice little animation.

Experimenting with my first Firefox OS App!

Today I fooled around with Javascript and HTML a bit and got my first app working. It's pretty simplistic. Basically, the user clicks a button a ton of times, and there's a counter. When they reach certain milestones, a text area will display messages. I'm also working on exp, levels, coins, and a reward system. All in one day!

Working with Javascript is really nice for apps, it's much easier to work with than Android, and you can refresh the app in under a second, rather than taking the time to reinstall it a ton of times. I'll post source for my app tomorrow!