New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server browser #1538

Closed
oy opened this Issue Oct 21, 2018 · 45 comments

Comments

Projects
None yet
10 participants
@oy
Member

oy commented Oct 21, 2018

Improve the server browser.
Suggestions?

@oy oy added the feature label Oct 21, 2018

@oy oy modified the milestones: 0.7.0, 0.7.1 Oct 21, 2018

@Wuerstchen

This comment has been minimized.

Wuerstchen commented Oct 21, 2018

Make all input boxes (also both F1+F2 consoles) selectable with mouse and keyboard shortcuts. Also allow cut/copy/paste with keyboard shortcuts. #1467 might be related.

@fokkonaut

This comment has been minimized.

Contributor

fokkonaut commented Oct 21, 2018

ingame server Browser

@fokkonaut

This comment has been minimized.

Contributor

fokkonaut commented Oct 21, 2018

make the browser more like 0.6, generally make menus more like 0.6 xd

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 22, 2018

The open pull request #1171 is relevant to this and should be looked into.

  • New scoreboard
  • some changes on the server browser
  • Background map animation

It's a fairly large commit though, we might need anyone's (ideally @SushiTee's) help to test out things and ease up the work pressure on @oy

@Sonix-

This comment has been minimized.

Member

Sonix- commented Oct 22, 2018

  • We should be able to move Favorites tab above "All" tab.

  • Tab positions should be remembered and not reseted everytime we start the game

  • It shouldn't be able to deactivate 'Standard gametype' in the 'Standard gametype'-tab (from #988)

  • Add a settings button next to the quit button. A simple "⚙️" would be enough.

  • Add back a sidebar that displays the server info and the players list of the selected server (the sidebar could be collapsable if possible; when the sidebar is collapsed popup infos should be activated automatically)

  • Use only one column for favorites (the stars), currently 2 are used. Suggestion: use only the left column.

  • Make the text/type boxes in the server filter more visible and also reduce/properly align the flag (doesn't look that good to me)
    filter

  • Actually display Server Skill Level in Server info, use stars as rating:
    "Skill level: ⭐️⭐️"

I would suggest to make it look like this (note: its a quick sketch):
serverbrowser_ui

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 23, 2018

@Sonix-
Oh, right, that skill level feature! I remember it was proposed by @LordSk back in the days (2011).
I remember implementing his mockup in a 0.5 (!) client mod:

image

Does that look good to you?

Edit: referencing issue #1000

@oy

This comment has been minimized.

Member

oy commented Oct 23, 2018

@jordy-ruiz
Grabbed everything but the scoreboard from that pull request I think.
These icons are more compact than the stars which is probably good, though I'm not sure about the colours. Red usually indicates sth bad.

@Sonix-
That's good.
What do you mean by "We should be able to move Favorites tab above "All" tab"? Isn't it already above the "All"-tab?

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 23, 2018

@oy

These icons are more compact than the stars which is probably good, though I'm not sure about the colours. Red usually indicates sth bad.

Yeah, I tend to like colourful stuff but since the Teeworlds menus are completely black&white, should we drop the colors altogether and just have those icons in white?

@jordy-ruiz
Grabbed everything but the scoreboard from that pull request I think.

Oh, cool. So what's left to do with the scoreboard in PR #1171 then? Reviewing, merging? Could a reviewer be assigned, maybe?

@oy

This comment has been minimized.

Member

oy commented Oct 23, 2018

The ping already got coloured (green=good, red=bad). So we just have to be carefull :)

I'm not sure if the scoreboard is finished in there. But if someone wants to work on/add it, that would be fine with me.

@Sonix-

This comment has been minimized.

Member

Sonix- commented Oct 23, 2018

@oy
What do you mean by "We should be able to move Favorites tab above "All" tab"? Isn't it already above the "All"-tab?

Ooop! I meant the Teeworlds tab.

@jordy-ruiz
I like the idea of using these as level indicators, I'd just use white icons instead of colored ones.

About the scoreboard, this is what I've found in Zatline's original project:
fireshot capture 16 - teeworlds 0 7 x - user inte_ - https___zatline carbonmade com_projects_5691196

@ZombieToad

This comment has been minimized.

Contributor

ZombieToad commented Oct 24, 2018

it would be nice if server browser favourites could show hostnames instead of ips and also show hostnames that it didnt manage to get an ip for

@oy

This comment has been minimized.

Member

oy commented Oct 24, 2018

We should probably move the scorebaord discussion to a seperate issue.

@LordSk

This comment has been minimized.

Member

LordSk commented Oct 26, 2018

server_broswer_mockup_lines

Scaling/aligning properly is hard, so please consider the general idea of the mockup.
When you click on a server, it expands downward showing details and player list.

Here is the file, if you want to tinker with it.

@Zatline

This comment has been minimized.

Member

Zatline commented Oct 27, 2018

inkedscreenshot_2018-10-27_07-55-59_li

will make some proper concepts soon once I get Inkscape back running,
here a lil draft of what should be addressed.

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Oct 27, 2018

What do you think? Do you have any idea to improve it? (the "information" tab isn't complete, yet)
screenshot_1
screenshot_2
screenshot_3
screenshot_4

@oy

This comment has been minimized.

Member

oy commented Oct 27, 2018

@LordSk
That's too cluttered with details for my taste, prefer it simpler. It's hard to get the information you're looking for at first sight.
And in general I prefer the favourite servers in the internet tab. There were supposed to be custom filters as well. So if you like to play some setting you make a custom filter for it. Then you see the available servers/players right away and don't need to change the search criterion each time.

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 27, 2018

I believe the custom filters appear as a drop-down on the right on the said mockup (it says "Default").

@oy

This comment has been minimized.

Member

oy commented Oct 27, 2018

untitled
With the custom filters you don't need the server filter menu showing all the time.

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 27, 2018

Those are quite well hidden in their current state, I couldn't figure how to filter before someone showed me.

@Sonix-

This comment has been minimized.

Member

Sonix- commented Oct 27, 2018

Gonna post an update of my mockup, I've added @LordSk server filter in the sidebar and I also like hid idea of displaying skill levels (tee eyes). I've made 2 versions regarding skill level icons:
mockup_browser_ui_skill1

mockup_browser_ui_skill2

There still should be a tooltip once you hover the icons with the cursor saying: Competitive/Hard, Medium/Normal, Easy

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 27, 2018

I like the tee expressions much more: I think something that says "Casual/Competitive" would be closer to the reality of what those are likely to be used for than proper skill ranks.

I really like the settings button on the top right, I feel like it was missing. If possible, also improve the close button that just looks like an X for now.

Another suggestion: some sort of easier-to-spot visual indicator for empty/full servers would be cool (darker background maybe?).

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Oct 27, 2018

It was brought to attention that the UI is also missing a button to save filter settings other than using JSON files like:

  {"custom": {
       "type": 0,
       "extended": 1,
       "settings": {
           "filter_hash": 65537,
           "filter_gametype": "",
           "filter_ping": 999,
           "filter_address": "",
           "filter_country": -1,
           }
       }
   },

@Sonix- reminds us that the server rank icons should have a tooltip.

Since this issue is high-priority for 0.7.1, I think it would be nice to settle on details of the mockup quickly. Important points:

  • do we keep the 0.6 filter bar on the right?
  • what should the rank icons look like? (separate issue?)
  • how are server details shown? @LordSk's expand, the current hover, or the 0.6 style?
  • ... anything else?
@Zatline

This comment has been minimized.

Member

Zatline commented Oct 27, 2018

do we keep the 0.6 filter bar on the right?

the thing is it still has to work on a 4:3 aspect ratio without clustering everything togheter making a mess. Having it on the right would't be a problem for widescreen ratios but what when the game is played on 4:3 it would clip beyond the visable so an exception has to be hard-coded in case of clipping.

@oy

This comment has been minimized.

Member

oy commented Oct 28, 2018

LordSk's server rank icons with tooltip would be my choice.
Also like the gametypes selecting from LordSk's mockup.
Expanding it like LordSk did would be better for 4:3 ratio like Zatline mentioned.
We could check how the filter bar on the right looks like. If it isn't too squeezed then go for it.

@Zatline

This comment has been minimized.

Member

Zatline commented Oct 28, 2018

@oy been working on some fresh concepts last night addressing all open issues gotta clean it up and refine it some more so it can be used as 1:1 template and guid for u guys to code.

@android272

This comment has been minimized.

android272 commented Oct 30, 2018

@LordSk's mockup looks the best to me. I was working on something like this like two years ago but stopped for some reason. I feel as though it shows everything you need to know about that server clearly right there. You don't need to know the column names as you do now. Currently, unless you have been playing Teeworlds for a bit you may not know the difference between the game type column and the map column as most maps are named after what you play on them. But as his mockup shows you can play LMS on a dm7. The icons clearly show you what each of these letters actually means. You can just infer that the icon that looks like a Mario map is probably the map and the icon with a tee standing on bones is the game type. especially with the icon above that in the previous server shows two flags indicating that the server is playing CTF. This is very simple and in my opinion, the way we should go with this.

I am kinda mixed on whether to go with the meddles or the tee eyes for the difficulty level.

@Zatline

This comment has been minimized.

Member

Zatline commented Oct 31, 2018

@android272 I think the LordSk mockup is way too detailed there is so much going on it's kinda hard to focus on anything specific and have some sort of orientiation .. !
Also not everyone wants or needs to have all the detailed informations displayed all at once, that just seems overwhelming and kinda uneccesary I imagin especially for beginners.
If someone really wants to go down the rabit hole and see every bit of detail in addition it is quite reasonable to hide that function behind a botton and let it be activated intentionally by will.
Having specific icons for every single column seems a little bit ridiculous as well,
looking at how other multiplayer games do it they manage just fine with a simple kept browser with even no icons in some cases or very few in most and there often isn't even detailed info at all.

The original idea from 2013 when Shushi and me started was to show every bit of detailed info as a additional dynamic mouseover window, example: you want to know who is playing on the map? you take the cursor and just hover it over the Player column, want to know the map? take the curser and just hover over the Map column that's it which actually allowed us to use all the space that is now taken and dedicate it specificaly as browser in the first place. actual samples from 2013:
https://i.gyazo.com/5d3f91cd5ff26bf52e93431e007eceb0.png
https://i.gyazo.com/597e1fcbd51e83890a541a2776d83240.png
this function was to be en- and disabled in the right upper top, just one click away.

As for the Filter / Friends / Info panels well guess we unfortunatly somehow missed to include that smoothly it's now the challange that remains to be fixed and that is what we should mainly focus on!
to quote Oy on possible 3:4 compatibelity issue

We could check how the filter bar on the right looks like. If it isn't too squeezed then go for it.

goal should certainly be to make it as functional as 0.6.x

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Oct 31, 2018

steam_server_browser

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Oct 31, 2018

700px-02-03_02_1_serverbrowser_newlook5

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Nov 2, 2018

Teeworlds deserves this server browser, it's simple, useful and neat. From beginners and old players is easy to use, and find things.

This is the dark version, I will later upload the lighter version (both are supposed to be eligible in advance configs).
11
12
13
14
15
16

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Nov 2, 2018

Maybe late, I like the tabs design for the right panel though. It is very apparent that you can switch :)
Not everything looks feasible, like the checklist of gametypes or the size of maps (that the client doesn't know).

But overall lots of things are good-looking. Things I personally like:

  • the reset friends button
  • the difficulty choosing panel
  • the country flag that isn't a scrolling list
  • the design of the server info, especially the icons for the gametype
  • the overall floating panels and their color/transparency levels

Too bad it's a bit late. We shouldn't have split the issues with #1588 :/
I hope some of those ideas can eventually be included.

Edit: oh, and I really like the idea of a back button, too.

@Sonix-

This comment has been minimized.

Member

Sonix- commented Nov 2, 2018

Why is it late? To me looks like Zatline didn’t even consider the ones we suggested, and made/continued his initial one on his own

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Nov 2, 2018

@Sonix- yeah, I'm a bit upset about that too :/

@Zatline

This comment has been minimized.

Member

Zatline commented Nov 2, 2018

@Dune-jr @Sonix it's not to late for anything guys please!
The way I aranged the filters or anything included in the side panel ain't final yet Oy asked for squeezing stuff togheter so 4:3 compatibiilty is there and that is what I mainly focused on that latest concept besides that adjustments to the aragment of things has been started on like some icons instead of text ect. and I will make more adjustments to get things as close as here is suggested like single country flag instead of scrolldown menu and so on .. I might have underestimated how important that is for some you I'm sorry if there is confusion please have patience!

and I agree we should either close this issue and move to #1588 or the otherway around.

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Nov 2, 2018

From my understanding, @oy said he would like to code a prototype this weekend though, so there needs to be a consensus on what it should look like.

@oy

This comment has been minimized.

Member

oy commented Nov 3, 2018

I would suggest:
to use this as a template. So we add a sidebar to the right which is collapsable. And has 3 tabs. 1 for friends, 1 for filters and 1 for server info.

  • friends tab: like @Zatline proposed in the template, additionally show what gametype and map the friend is playing.
  • filter tab: like @Sonix- @LordSk suggested plus the new difficulty graphics (multiple choices).
  • server info tab: like @1stDecadeTW suggested, minus the map image (that needs to be done first, other topic). Show game version on top. And remove "join server button" (already have a connect button)

In the server browser:

  • show the gametype with an additional image like @LordSk suggested. For mods we use the unpure icon. (everything black&white?) Then we can remove the pure column.
  • for non favourite servers show the shadow like done by @1stDecadeTW so it's easier to see that it's clickable.
  • when the sidebar is closed the server browser could show (adjustable?) the server info like @LordSk suggested. Then people can easily use the server browser with opened and closed sidebar. For friends you can add a friends filter(compatible version+show friends only).
@LordSk

This comment has been minimized.

Member

LordSk commented Nov 3, 2018

@oy Sounds great to me.

@Dune-jr

This comment has been minimized.

Member

Dune-jr commented Nov 3, 2018

@oy I second this, it sounds very good.

@Zatline

This comment has been minimized.

Member

Zatline commented Nov 3, 2018

@oy sounds very good indeed

@oy

This comment has been minimized.

Member

oy commented Nov 3, 2018

Ok. then we'll try it that way.
We gonna need gametype icons, an icon for the header of the server level column and the icons for the 3 tabs of the sidebar.

@Zatline

This comment has been minimized.

Member

Zatline commented Nov 3, 2018

refresh, friends, filter, info

browse_main

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Nov 4, 2018

Maybe upload the UI advance of the current server browser to see how we can continue improving it, and see how it looks like?

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Nov 4, 2018

Not everything looks feasible, like the checklist of gametypes or the size of maps (that the client doesn't know).

@Dune-jr
I will be really helpful that the client could display this kind of Quick filters, especially when you have the collapsible side panel hidden.

Adicional function: new players could discover all kind of game types in teeworlds.

screenshot_2
screenshot_3
screenshot_4
screenshot_5

@Zatline

This comment has been minimized.

Member

Zatline commented Nov 5, 2018

@1stDecadeTW I think it's a nice and honorable thing to provide icons for the very most iconic and popular community mods like Race and Instagib and perhaps DDrace but besides that there should just be a universal icon for mods / non-offical gametypes.

@1stDecadeTW

This comment has been minimized.

1stDecadeTW commented Nov 7, 2018

imagen1
screenshot_1

@oy oy closed this Nov 19, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment