Development Fix for OhSteem by @deveerei

In response to @deveerei's development task here,

1. The Issues

There were three issues raised by the author in his post.

1.1. Change the Tile Colors

We need help changing the colors of the tiles from Red and Blue into Teal and Midnight Blue.

Dev already provided the colors:

• Teal: Hex #00eeb7; RGB (0, 238, 183); CMYK (59, 0, 45, 0)
• Midnight Blue: Hex #1c252b; RGB (28, 37, 43); CMYK (80, 67, 59, 67)

I just needed to find the location on where to place the fix.

1.2. Header Font Size

Taking the image from the task:

We can see that the text "Select a size" is cut on the right.

1.3. Landing Page Animation

Taking also the image from the task:

We can see that "Oh" and "Steem" texts overlap with each other.

2. The Solution

It took time locating the files where the modifications were needed, but using the right keyword to grep eventually led me to the files I needed to change.

2.1. Change the Tile Colors

• js/game.js

From these two lines of codes, we can see that there was an array of colors:

    var colors = ['#a7327c', '#00eeb7', '#c0cd31']
      Utils.setColorScheme(colors[1]);

However, only the second element (colors[1]) was used, the other colors #a7327c and #c0cd31 were really never used.

The fix here was simply substituting the old value of #c24b31 to the new color teal #00eeb7.

• js/utils.js

For the second tile, I needed to change value returned by getComplementary() because it computes for a complementary color. Using the existing function returned a color not equal to the color specified by Dev. Thus, the fix here was to directly return the other tile's color (#1c252b).

2.2. Fix the Header Font Size

This one was tricky because if you grep for "Select a size", you'll get the following results:

You can see here that there was no font-size style attribute:

$('#boardsize').html('<span>Select a size</span>');

But when you display the page and inspect the element:

You'll see that a style="font-size: 74px;" is there. This means that the style attribute was dynamically added. From where? I didn't know. But further search eventually led to me js/game.js.

• js/game.js

If you searched for 74px you won't find it. For this fix, the keyword that led me to this location was font-size. If you search for font-size in the workspace you'll get these results (17 hits):

From here, it was just a matter of finding which line of code added the font size. And the lines of codes that gave me that hint were this:

$('h1').css('font-size', Math.round(containerSize * .24) + 'px')
$('h2').css('font-size', Math.round(containerSize * .18) + 'px')
$('h3').css('font-size', Math.round(containerSize * .15) + 'px')
$('p').css('font-size', Math.round(containerSize * .07) + 'px')

2.3. Landing Page Animation

This was the last bug I tried to fix. There were two factors that needed to be considered to come up with the fix:

1. Whole block width
2. Font size

I won't explain the detail of how I came to the fix here, but basically the solution I provided was to split the hs element id into two - hs1 and hs2. The hs1 id I assigned to the h of "Oh, andhs2id toteem` of "Steem".

This is where I controlled the font sizes and margin of each element.

4. Other Information

4.1. The Fork

The fix was pushed to the fork - https://github.com/eastmaels/OhSteem.

4.2. The Branch

The changes were pushed to the master branch.

4.3. The Commit

The commit was given the hash [9b437bba62b47d9a7aa7174bb06f5325754723f7](https://github.com/eastmaels/OhSteem/commit/9b437bba62b47d9a7aa7174bb06f5325754723f7).

4.4. The PR

The PR is #1.

5. Demonstration

• Live Test Site: https://deveerei.github.io/OhSteem/

---

Posted on Utopian.io - Rewarding Open Source Contributors

---