FL resizer for 5-card lodgings (browser extension)

Hello delicious friends,
since many people got their 5-carders in recent Sackmas lacre extravaganza and since some of them (including me) expressed their dislike to having the card hand broken to two lines I made my friend develop a tiny user script that modifies the default user interface slightly in following fashion:

Fallen London resizer for 5-card lodgings (https://greasyfork.org/en/scripts/7366-fallen-london-resizer)

  • resizes main body of Fallen London game page to fir all 5 opportunity cards on single line
  • to keep the uniform look of the wider body, other tabs (Messages, Myself, Bazaar, Nex, Help are also resized)
  • to prevent Dangerous and Persuasive stat being broken into 2 lines with long numbers, font in the left frame of the game was slightly decreased in size

…and that’s it. If you have any questions of ideas, let me know (here, in FL or in IRC, i have the same nick everywhere).

Just first thing before anyone asks, the inventory is not extended to have more items on each line… It would be possible (and quite easy) to do, but due to mechanics of the game that dynamically add new lines there would be empty lines even with previous lines would not be full and i didn’t see a benefit in that (fixing that would be more like a hack than anything else or so i was told by the maker (no i don’t mean The Maker)).

I hope there will be people enjoying this tiny script as much as i do.

Fallen London without the extension: Screenshot by Lightshot
Fallen London with the extension: Screenshot by Lightshot

If you do not know how to install script to your browser, please click the question mark next to the &quotinstall this script button&quot.

Regards,
Furak
edited by Furak on 2/18/2015
edited by Furak on 2/18/2015

Oooh! It looks so much prettier now! Thank you!

(You might consider a brief mention on how to install it though, as just straight up clicking on it is disabled, at least in Chrome.)

[quote=Lady Taimi Ward-Felix]Oooh! It looks so much prettier now! Thank you!

(You might consider a brief mention on how to install it though, as just straight up clicking on it is disabled, at least in Chrome.)[/quote]
thanks for the point, but i think the greasyfork already has pretty good help section and there is no need for me to copy-paste it here. But i mentioned it in the OP.

although you may face a problem where chrome decides to disable the extension because it does not come from chrome market… tampermonkey prevents this

I installed tampermonkey to counter Chrome’s nonsense, but I am still having trouble getting the script to run. Any advice?

What seems to be the problem? I just tested it, and it is as straightforward as

  1. Install Tampermonkey,
  2. Go to the script’s page, click &quotInstall this script&quot
  3. Tampermonkey page shows up, confirm by clicking &quotInstall&quot
  4. Reload FL’s page and it will take effect (as is usually the case with any kind of extensions in Chrome)

Thanks a bunch! It works great with Greasemonkey.

What seems to be the problem? I just tested it, and it is as straightforward as

  1. Install Tampermonkey,
  2. Go to the script’s page, click &quotInstall this script&quot
  3. Tampermonkey page shows up, confirm by clicking &quotInstall&quot
  4. Reload FL’s page and it will take effect (as is usually the case with any kind of extensions in Chrome)[/quote]
    I did not realize I had to reinstall the script. (I downloaded Tamper monkey after originally downloading the script) Doing it a second time got it to work. Thanks!

My hand of opportunities is far more aesthetically pleasing now.

I was wondering if it was possible to consolidate some of the sidebar qualities. Since certain qualities, such as BDR and K&C, do not use a progress bar, I was curious how feasible it would be to condense them up.

Such as:

  • BDR as a set of cards with no progress bar
  • K&C as a set of cards with no progress bar
  • MW with a progress bar, and Notability and Influence in the second chance card slots.

eg:
[Scandal_4][][]
=scandal progress bar=

[MW_16][Not_8][Inf_44]
=making waves progress bar=
[Biz_4][Dre_4][Res_12]
break
[Sav_60][Elu_60][Bar_100]
break
[A Turncoat_3][][]
break
edited by fitz on 9/9/2015

[quote=fitz]I was wondering if it was possible to consolidate some of the sidebar qualities. Since certain qualities, such as BDR and K&C, do not use a progress bar, I was curious how feasible it would be to condense them up.
[/quote]
This was discussed in another extension thread, IIRC what you’re suggesting isn’t really possible at the moment. However! I believe it’s been mentioned that FBG is working towards adding this functionality into the game as part of their port to iOS.

I also feel like this was probably the wrong place to suggest that, considering this specific browser extension is vastly different than what you’re suggesting. But hey, I could be wrong. I’ve been known to be wrong before.

Thanks, that helps. It was mostly their current modifications to the sidebar that made me want to ask here. I wasn’t sure if it was possible, but thought I might as see if anyone thought it might be feasible.

Unfortunately, this extension will remove all of the left margin and make the layout not fit in a standard window at low resolution (1024X768). Which is somewhat problematic for those whose eyes do not adjust well to higher resolutions. Good idea, though.

– Mal

The main problem I’ve found with this is that when you perform an action that increases a quality (such as Dangerous), the number at the end of the progress bar (e.g. 126-127) will be shifted to the next line.

Also, the map no longer fits in the game window properly. Perhaps I’ll just go and sulk in my Dripstone-Snared Temple rather than dealing with this horrific card-alignment issue.
edited by JimmyTMalice on 1/6/2016

Another alternative is just to apply some simple custom CSS:

ul#cards.hand-size5 li { width: 86px; }

This makes the cards overlap, but keeps all the column widths - like this:

edited by yetanotherone on 1/6/2016

[quote=yetanotherone]Another alternative is just to apply some simple custom CSS:

ul#cards.hand-size5 li { width: 86px; }

Oh that’s pretty neat too. Could you tell us how to use custom CSS in firefox or chrome? Thanks.

[quote=Lomias]Oh that’s pretty neat too. Could you tell us how to use custom CSS in firefox or chrome? Thanks.[/quote]There may be other ways but I use the Stylish addon (i.e., using the &quotWrite new style > For fallenlondon.storynexus.com…&quot option).

Based on the Resizer, I am currently using the following CSS changes for Fallen London:

@namespace url(XHTML namespace);

@-moz-document domain(&quotfallenlondon.storynexus.com&quot)
{
.outer_wrapper {width: 1080px;}
.rhs_col {width: 950px;}
.content_lhs {width: 820px;}
.tab_content_bg {width: 785px}
.tab_content {width: 750px}
.toggle-map {margin-right: 7px}
.you_lhs p {font-size: 0.7em}
img#mainContentLoading {margin-left: 343px !important}
div#topMap {margin-left: 40px}
ul#cards {width: 610px}
.storylet {width: 741px}
.storylet-select
.storylet_rhs {width: 645px}
.storylet_flavour_text {width: 728px}
.quality_update_box {width: 748px}
.quality_update_rank {width: 600px}
.quality_update_box p {width: 670px; margin-left: 6px}
.quality_update_box .score {margin: 0 6px}
input.standard_btn {height: 30px}
a.standard_btn {padding: 5px 6px !important}
.site-message {width: 736px;}
div.landingPageColumn {width: 365px;}
.shop-items {width: 555px;}
.me-page-inventory {width: 425px}
ul.me-profile-slot-items {width: 360px}
ul.me-profile-slot-items li {margin: 0 8px 10px 0;}
ul.me-profile-slot-items li.slot-item-empty,
ul.me-profile-slot-items li.slot-item-empty:hover,
ul.me-profile-slot-items li.slot-item-empty:focus {margin: 2px 10px 10px 2px;}
}

edited by Travers on 1/7/2016

[quote=Travers][There may be other ways but I use the Stylish addon (i.e., using the &quotWrite new style > For fallenlondon.storynexus.com…&quot option).

Based on the Resizer, I am currently using the following CSS changes for Fallen London:

@namespace url(XHTML namespace);

@-moz-document domain(&quotfallenlondon.storynexus.com&quot)
{
.outer_wrapper {width: 1080px;}
.rhs_col {width: 950px;}
.content_lhs {width: 820px;}
.tab_content_bg {width: 785px}
.tab_content {width: 750px}
.toggle-map {margin-right: 7px}
.you_lhs p {font-size: 0.7em}
img#mainContentLoading {margin-left: 343px !important}
div#topMap {margin-left: 40px}
ul#cards {width: 610px}
.storylet {width: 741px}
.storylet-select
.storylet_rhs {width: 645px}
.storylet_flavour_text {width: 728px}
.quality_update_box {width: 748px}
.quality_update_rank {width: 600px}
.quality_update_box p {width: 670px; margin-left: 6px}
.quality_update_box .score {margin: 0 6px}
input.standard_btn {height: 30px}
a.standard_btn {padding: 5px 6px !important}
.site-message {width: 736px;}
div.landingPageColumn {width: 365px;}
.shop-items {width: 555px;}
.me-page-inventory {width: 425px}
ul.me-profile-slot-items {width: 360px}
ul.me-profile-slot-items li {margin: 0 8px 10px 0;}
ul.me-profile-slot-items li.slot-item-empty,
ul.me-profile-slot-items li.slot-item-empty:hover,
ul.me-profile-slot-items li.slot-item-empty:focus {margin: 2px 10px 10px 2px;}
}

edited by Travers on 1/7/2016[/quote]
Thank you very much for your kindness, sir!

is there any chance of this every getting offical enough to get a security cert and be in the store as an extension, instead of one where it gets turned off every time I restart, because it’s insecure and chrome is paranoid?

I was wondering if anyone could tell me how to automate such an alteration to the style? It seems to remove itself upon reloading the page. I’d use stylish but I’ve been told it’s been used as spyware by the developer.

Well, not to sound all tinfoil-hatted, but the entirely of the internet is being used as spyware, so I personally wouldn’t be overly concerned about a highly-rated official add-on like stylish. However, as an alternative, if you use Firefox, there’s a version of Tampermonkey for FF as well. I use the Chrome version and it handles loading the scripts for you. Hope that helps!

Edit: Ah, I see that just a few days ago, the developer of stylish announced his &quotpartnership&quot with an analytics company.

Well, that’s unfortunate.
edited by Lady Taimi Felix on 1/6/2017