[enhancement] Add "Night mode"

[ghost]

I saw this on com.estoty.game2048 game and i think it is a good idea. It will allow users to play 2048 in low light areas without eye strain. here is the screenshot (the image is from Play store).

Basically, we would need some JS call that will change CSS bg on click. It would be desirable if this was persistent option.

[uberspot]

++ for that. Seems quite useful.

[gurshabad]

Hi,

I agree with the suggestion. Added a pull request with the basic functionality, check it out here: https://github.com/gabrielecirulli/2048/pull/150

[ghost]

@gurshabad Looks good but there are room for improvements:

• Make that function toggle bg color;
• Make that function change between 2 font colors for light/dark variant;
• Make icon better and inside something like div.restart.button;
• Add bg transition to enable smooth and sexy effect.

I did something just for a quick showcase:

window.onload = function() {
  var a = document.getElementById("nightbtn");
  a.onclick = function() {
    if (document.getElementsByTagName("html")[0].style.backgroundColor === "rgb(0, 0, 0)") {
        document.getElementsByTagName("html")[0].style.backgroundColor = "#faf8ef";
        document.getElementsByTagName("body")[0].style.backgroundColor = "#faf8ef";
      document.getElementsByTagName("body")[0].style.color = "#776e65";
        return false;
    }
    else {
        document.getElementsByTagName("html")[0].style.backgroundColor = "#403226";
        document.getElementsByTagName("body")[0].style.backgroundColor = "#403226";
      document.getElementsByTagName("body")[0].style.color = "#AB9E91";

      // this is not working but it could give ideas?
      document.getElementsByTagName("html")[0].style.transition = "opacity 1s";
        return false;
    }
  }
}

[Sneffel]

+1

[MrMagma]

I made my own version of this in my (under development) fork. I'm not sure if it's high enough contrast (I just added night mode cuz I could) but it does have nifty transitions. I also added a little style to links (Some text shadow on hover). (I love giving people notifications on their nearly 1 y/o posts!)

[sigod]

Hi, @JavascriptFTW. Very interesting. Can you update your gh-pages branch? We like to see your changes in action.

Small tip: don't forget to update cache.appcache or your version might not work properly.

[MrMagma]

Just made an IO for it. Please be aware that this is still under development so there are a few weird Dev things floating around.

[MrMagma]

http://javascriptftw.github.io

[0frasure]

I cleaned it up: http://seanfrasure.github.io/2048/

[onmi]

Very nice

[0frasure]

@JavascriptFTW load and save game buttons don't work for your newest version. Let's say I want to reset the tiles and I hit new game. It asks me to save but when I hit save and then new game it does the same thing(nothing). Load game does zip as well.

For legal reasons you may want to say its the official version "made by Gabriele Cirulli ".

Just some thoughts

[MrMagma]

I'll remove those buttons. I'll also add a notifier on the pop up that you cannot currently save game. I did not know that people actually visited that site (maybe I should check my IO stats a bit more often...)

On Monday, April 20, 2015, Sean Frasure [email protected] wrote:

@JavascriptFTW https://github.com/JavascriptFTW load and save game buttons don't work for your newest version. Let's say I want to reset the tiles and I hit new game. It asks me to save but when I hit save and then new game it does the same thing(nothing). Load game does zip as well.

For legal reasons you may want to say its the official version "made by Gabriele Cirulli ".

Just some thoughts

— Reply to this email directly or view it on GitHub https://github.com/gabrielecirulli/2048/issues/146#issuecomment-94429472 .

[MrMagma]

@seanfrasure Updated it to make it clear that I did NOT create 2048 (I wish I had), I also added a disclaimer on the new game confirmation and below the save and load buttons that saving and loading games is currently not implemented. Thanks for the tips!