Adapting a Game for Mys?

[squiggler]

Hey. I found an open-source game called 2048. It's under the MIT license. (I'm pretty sure this means that any mods we make will be open source as well.)

I want to adapt the code to make it look like this game- with the pictures instead of numbers. (I can't use that site to make it because of their TOS.)
I've figured out that it probably would be edited in the style folder, but can anyone help me decode it?

Also, I would like to do one of two things: send score to get promocode to get money, or have you automatically earn funds as you're playing. There would need to be a cap on this, obviously.

Thank you in advance for any help you can provide!

 

[squiggler]

Okay, so I think the file I want is main.css in the style folder. I found this section:

.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; }
  .tile .tile-inner {
    border-radius: 3px;
    background: #eee4da;
    text-align: center;
    font-weight: bold;
    z-index: 10;
    font-size: 55px; }
  .tile.tile-2 .tile-inner {
    background: #eee4da;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-4 .tile-inner {
    background: #ede0c8;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-8 .tile-inner {
    color: #f9f6f2;
    background: #f2b179; }
  .tile.tile-16 .tile-inner {
    color: #f9f6f2;
    background: #f59563; }
  .tile.tile-32 .tile-inner {
    color: #f9f6f2;
    background: #f67c5f; }
  .tile.tile-64 .tile-inner {
    color: #f9f6f2;
    background: #f65e3b; }
  .tile.tile-128 .tile-inner {
    color: #f9f6f2;
    background: #edcf72;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-128 .tile-inner {
        font-size: 25px; } }
  .tile.tile-256 .tile-inner {
    color: #f9f6f2;
    background: #edcc61;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-256 .tile-inner {
        font-size: 25px; } }
  .tile.tile-512 .tile-inner {
    color: #f9f6f2;
    background: #edc850;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
    font-size: 45px; }
    @media screen and (max-width: 520px) {
      .tile.tile-512 .tile-inner {
        font-size: 25px; } }
  .tile.tile-1024 .tile-inner {
    color: #f9f6f2;
    background: #edc53f;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
    font-size: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-1024 .tile-inner {
        font-size: 15px; } }
  .tile.tile-2048 .tile-inner {
    color: #f9f6f2;
    background: #edc22e;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
    font-size: 35px; }
    @media screen and (max-width: 520px) {
      .tile.tile-2048 .tile-inner {
        font-size: 15px; } }
  .tile.tile-super .tile-inner {
    color: #f9f6f2;
    background: #3c3a32;
    font-size: 30px; }
    @media screen and (max-width: 520px) {
      .tile.tile-super .tile-inner {
        font-size: 10px; } }

Is this where I change it to images, and can someone please tell me how? Thank you!

 

[Kyttias]

On Chrome, I opened up the game, right clicked a tile that had an image, and at the bottom of Chrome's right click menu there is a listing that says 'Inspect Element'. From there I just examined the css that modified the title. The tiles are probably dynamically given images via Javascript/jQuery, but the css looks like this when a tile has an image:

.tile-1 .tile-inner {
background-image: url(http://img2.wikia.nocookie.net/__cb20130710011141/flightrising/images/3/38/Egg_Nature.png) !important;
}

So, that would also be .tile-2 .tile-inner, .tile-3 .tile-inner, so on and so forth. Again, this is not done by editting a css file directly, but by Javascript telling it to apply a background image and remove it when you can't see a tile, etc. You'd have to see what they're doing in the Javascript.

You'd be better off finding a different free source version of 2048 that already has images. ( Also this??? I think this was used to build the FR version with images. )

 

[squiggler]

Darn. So there's no way I can edit the CSS myself? I was sure it was possible...

 

[Kyttias]

You'll have to find wherever in the source is pointing to the actual images and swap those links out for your own. I've yet to find where that is.

 

[Hall of Famer]

Theoretically you should be able to edit the css if you have full access to the source file. It may be hidden somewhere though, not every script has a css folder or theme folder that you can identify immediately.

 

[squiggler]

Well, it's been fully shared on gitHub: https://github.com/gabrielecirulli/2048
It has a style folder with 3 css files in it. I think it was in that stretch of code from above?