score screen not properly visible on mobile

[DreadKnight]

The score screen is not properly visible on mobile devices in landscape mode, should probably remove the header text or even rescale the table text down just for phones.

[Ryuuko]

Hi! Can I help with it? ・◡・

[DreadKnight]

@Ryuuko Sure, go ahead. Will assign you to it for 2 weeks. We got a Discord server btw, https://discord.me/AncientBeast feel free to drop by.

[DreadKnight]

Done. I've tweaked description to be more clear. Don't forget to ⭐ the project ^_^

[Ryuuko]

Hi Dread Knight @DreadKnight !

I come up with the solution I guess, but not sure which is better.

The first one simply add codes in media query in the style.less ("scale down" as you've suggested):

    #scoreboard{
        transform: scale(0.58);
        transform-origin: top;
    }

The result will be like this:

2vs2: 4vs4:

Then I feel it might suspiciously too easy (heh) and come up with another thought: what if I utilize the space during the landscape? Therefore I transpose the table with css using

        tr{
            display: block;
            float: left;
            td{
                display: block;
                border: 2px solid black;
            }
        }

2vs2:

4vs4: The "price" will be changing some default css setting, for example using !important to adjust the width<id="scoreboard"> (the border between the table item is of course optional. And the return button should be resized as well)

Although the second one spend me (too) much time to tweak, it seems no big different to me and I don't which type you guys will prefer (or neither hahaha). I'd be glad to have some further feedback. And of course It's still a question to me if we should remove the title "current score".

[DreadKnight]

There's no such thing as 4vs4 :P

Regarding the first try, the close button should have stayed in the corner, where it belongs.

I've thought as well about making the table horizontally oriented, but each row should fit properly, so there are two approaches:

• either stack the header words like this guy did here https://github.com/FreezingMoon/AncientBeast/pull/1717
• or we could try going for emojies, 🩸💀⛓️👶⚰💥🍒⏰🐔💓🦇🎖💯 (none for "Players" as it will have that cell empty) The header titles would show up when hovering each of them. Hopefully it's not too cryptic, but for me they make sense.

[Ryuuko]

I don't know how I come up with the term 4vs4 .__."

emmmmm, just to make sure some my understanding in order to make us on the same page:

1. When you refer to header word or header title, you mean "Players", "First blood" and so on?

2. I've read the post about the first approach, but it's still confusing to me. If we stack the header together, the first try or the original one should have done the job?

3. About the second approach, If I've understood correctly, you mean we only have 2 (or 4) Players icon(or emoji), when the user hover on one of it, it will show the game details of this particular player like "First blood", "Kills" etc ?

[DreadKnight]

1. Yes, tables have headers like that, naming the purpose of columns and/or even rows.
2. Stacking of longer names to make sure the horizontal approach has nice fitting rows.
3. Table headers stuff = emoji icons; the table content itself will display score numbers.

[Ryuuko]

2. I kind of got what u mean... Instead of:

First Blood	Kill

You expect to have:	First Blood	Kill

So that the table can display all the header in only one line three rows, instead of two lines like above:

Have I understood correctly?

3. Oh w(ﾟДﾟ)w I finally see why u show these emojis

Let's say 1vs1, the scoreboard will like this?:

Player1	🩸💀⛓️👶⚰💥🍒⏰🐔💓🦇🎖💯

Player2	🩸💀⛓️👶⚰💥🍒⏰🐔💓🦇🎖💯

So you mean when the user hover 🩸, a extra table will show up:	First Blood
1000

(Although the emoji will be too cute for the game ( ͡° ͜ʖ ͡°) , but not the concern right now... ..right?

[DreadKnight]

You understood the number 2 point.

Regarding number 3, I said the emojies would be like 🩸in the table header for columns instead of showing "First blood", that text would be displayed on hover only. The cells will get the score numbers in them :P There are some of them that kinda act like radio type of buttons, only scoring a certain player achieving that, like in the case of 🩸.

[Ryuuko]

Sorry if I'm being too wordy since it's my first open-source participation and I want to make sure I'm doing right (＠_＠;)

I see what you mean....the second thought should be like：

Player	🩸	💀	⛓️	👶	⚰	💥	🍒	⏰	🐔	💓	🦇	🎖	💯
Player1	1	1	--	--	--	--	--	--	--	--	--	--	1

And hovering above the emoji will display the text (like hover over 🩸 will display the "First Blood")

I'll try to implement the second one first since it might be more entertaining to the users (and myself). I see your radio-button-logic since eg. only one player can get the point for "First Blood", but kind of wonder if it requires much larger adjustment.....I just try to start first....

[DreadKnight]

@Ryuuko No worries. I really love it when the project gathers first time contributors actually :) which will happen less after TS.

Yeah, table looks about right. That score logic was stuff I was explaining regarding radio buttons is under the hood mechanics already implemented, no need to worry about it. We're just poking at visuals here. 1+1 is 2, lulz, I'm just messing with you :D

Would be cool if you would implement this, as it's more visual and makes sense fast. Only one thing to consider overall though... Will eventually have to test and see if those specific emojies actually show up on mobile, because I've noticed discrepancies like that before between desktop emojies and the ones on mobile, as some would display differently, some would display as rectangles.

[Ryuuko]

okidoki, I'll see how far I can goヽ(✿ﾟ▽ﾟ)ノ

[Ryuuko]

@DreadKnight Sorry I'm kind of busy for a week, I hope you don't mind if I complete the stuffs in few days later. Because tomorrow will be the "deadline" of this assignment as you said "for two weeks" and I'm afraid I can't finish on time. (つд⊂)

[DreadKnight]

@Ryuuko Alrighty, thanks for the update. Seems most people a tad more busy than usual because of summer ending :P