arcomage / arcomage-hd

Web-based, free and open source, remastered 3D clone of 3DO/NWC's 2000 card game Arcomage. 13 languages. Desktop or mobile Android iOS. Online or offline PWA. Against AI or Multiplayer (w/o server). 🧝👾🃏 (ts+react+redux+rxjs, CSS-based anim, WebRTC)

Home Page:https://arcomage.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Font size option (make it bold)

igroglaz opened this issue · comments

Please add possibility to increase font size by making it bold. Atm it's too thin for poor old eyes of M&M7 veterans :)

Also maybe even add possibility to change font size... but even making it bold will help a lot!

OK. So you only want the card description and nothing else to be bold I assume? The card title is already bold.

Can you tell me your device type (Android, iPhone, mobile, tablet, PC...) and screen size (e.g. 1920x1080. Go to screenresolutiontest.com, or execute JavaScript code console.log(window.screen.width + 'x' + window.screen.height) in your F12 browser console), so I can better understand your situation.

I think in 1920x1080 or in mobile screen the text is usually very readable (in 1920x1080 it's surely more readable/bigger than the text here in this GitHub issue page), but, I'm not sure about other screens. Because the font size depends on the screen width and height, it indeed could be not so readable in some narrow (h<<w) screen.

Yep, only card description :D I use PC 1920x1080 with 150% DPI

You run it fullscreen or you resize your browser window making it smaller?

I'll add font weight option in the future. In the meantime, for the current version of the game, you can zoom in the web page (try Ctrl + +, or Ctrl + mouse wheel scroll up, or read how to zoom web page in Chrome) to force the big-font-mobile-mode. 150% scaling screen needs to be 150% zoomed-in and 125% scaling screen needs to be 200% zoomed-in:
2022-02-18_193511

I run fullscreen.

Indeed zoom helps a lot! Thank you :) Still bold option will be nice ;D

Hi @igroglaz, in the meantime you can use the following code to create a bookmarklet that will toggle (on/off) bold text on cards for you:

javascript:!function(){var e=document.getElementById("arcomageBoldText");e?document.head.removeChild(e):((e=document.createElement("style")).id="arcomageBoldText",e.innerHTML='button [class*="text-"] { font-weight: 700 !important; }',document.head.appendChild(e))}();

You can create a bookmarklet by selecting all the code and dragging it into your bookmarks bar in the browser, or add it manually:

  1. Open your web browser and show the bookmarks bar.
  2. Right-click on the bookmarks bar and choose to add a new bookmark.
  3. In the Name field, enter a name for your bookmarklet, like "Toggle Button Style".
  4. In the URL field, paste the JavaScript code.

Should you need a different font-weight (boldness), you can change the number 700 inside the script to either 600 or 800.

Card before:
card-before

Card after:
card-after