From 2e1c837643a1f91fca1658f13bd1574b0c7c6f4c Mon Sep 17 00:00:00 2001 From: Sergey Stepanov Date: Fri, 2 Jun 2023 20:49:50 +0300 Subject: [PATCH] Show systems in the interface --- pkg/api/user.go | 6 +++++- pkg/coordinator/hub.go | 7 ++++++- pkg/coordinator/userapi.go | 5 ++--- pkg/games/launcher.go | 9 ++++----- web/css/main.css | 10 +++++++++- web/js/gameList.js | 30 +++++++++++++++++++++--------- 6 files changed, 47 insertions(+), 20 deletions(-) diff --git a/pkg/api/user.go b/pkg/api/user.go index df7f9e22..84d8ee62 100644 --- a/pkg/api/user.go +++ b/pkg/api/user.go @@ -18,9 +18,13 @@ type ( } InitSessionUserResponse struct { Ice []IceServer `json:"ice"` - Games []string `json:"games"` + Games []AppMeta `json:"games"` Wid string `json:"wid"` } + AppMeta struct { + Title string `json:"title"` + System string `json:"system"` + } WebrtcAnswerUserRequest string WebrtcUserIceCandidate string ) diff --git a/pkg/coordinator/hub.go b/pkg/coordinator/hub.go index bc815d9d..87794ade 100644 --- a/pkg/coordinator/hub.go +++ b/pkg/coordinator/hub.go @@ -72,7 +72,12 @@ func (h *Hub) handleUserConnection() http.HandlerFunc { } user.Bind(worker) h.users.Add(user) - user.InitSession(worker.Id().String(), h.conf.Webrtc.IceServers, h.launcher.GetAppNames()) + apps := h.launcher.GetAppNames() + list := make([]api.AppMeta, len(apps)) + for i := range apps { + list[i] = api.AppMeta{Title: apps[i].Name, System: apps[i].System} + } + user.InitSession(worker.Id().String(), h.conf.Webrtc.IceServers, list) log.Info().Str(logger.DirectionField, logger.MarkPlus).Msgf("user %s", user.Id()) <-done } diff --git a/pkg/coordinator/userapi.go b/pkg/coordinator/userapi.go index 77590062..4f922d9a 100644 --- a/pkg/coordinator/userapi.go +++ b/pkg/coordinator/userapi.go @@ -22,10 +22,9 @@ func (u *User) CheckLatency(req api.CheckLatencyUserResponse) (api.CheckLatencyU } // InitSession signals the user that the app is ready to go. -func (u *User) InitSession(wid string, ice []config.IceServer, games []string) { +func (u *User) InitSession(wid string, ice []config.IceServer, games []api.AppMeta) { u.Notify(api.InitSession, api.InitSessionUserResponse{ - // don't do this at home - Ice: *(*[]api.IceServer)(unsafe.Pointer(&ice)), + Ice: *(*[]api.IceServer)(unsafe.Pointer(&ice)), // don't do this at home Games: games, Wid: wid, }) diff --git a/pkg/games/launcher.go b/pkg/games/launcher.go index b9146594..c0b1e478 100644 --- a/pkg/games/launcher.go +++ b/pkg/games/launcher.go @@ -10,7 +10,7 @@ import ( type Launcher interface { FindAppByName(name string) (AppMeta, error) ExtractAppNameFromUrl(name string) string - GetAppNames() []string + GetAppNames() []AppMeta } type AppMeta struct { @@ -37,12 +37,11 @@ func (gl GameLauncher) FindAppByName(name string) (AppMeta, error) { func (gl GameLauncher) ExtractAppNameFromUrl(name string) string { return ExtractGame(name) } -func (gl GameLauncher) GetAppNames() []string { - var gameList []string +func (gl GameLauncher) GetAppNames() (apps []AppMeta) { for _, game := range gl.lib.GetAll() { - gameList = append(gameList, game.Name) + apps = append(apps, AppMeta{Name: game.Name, System: game.System}) } - return gameList + return } const separator = "___" diff --git a/web/css/main.css b/web/css/main.css index 6fb53307..61f13505 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -508,7 +508,7 @@ body { font-size: 19px; } -.menu-item div { +.menu-item div:first-child { overflow: hidden; display: block; position: absolute; @@ -534,6 +534,14 @@ body { overflow: unset; } +.menu-item__info { + display: none; + color: white; + font-size: 50%; + position: absolute; + right: 15px; +} + .text-move { animation: horizontally 4s linear infinite alternate; } diff --git a/web/js/gameList.js b/web/js/gameList.js index cd68c3f5..db0425bb 100644 --- a/web/js/gameList.js +++ b/web/js/gameList.js @@ -23,19 +23,22 @@ const gameList = (() => { let gamesElList; const setGames = (gameList) => { - games = gameList !== null ? gameList.sort((a, b) => a > b ? 1 : -1) : []; + games = gameList !== null ? gameList.sort((a, b) => a.title > b.title ? 1 : -1) : []; }; const render = () => { log.debug('[games] load game menu'); listBox.innerHTML = games - .map(game => `
${game}
`) + .map(game => `
${game.title}
${game.system}
`) .join(''); }; + const getTitleEl = (parent) => parent.firstChild.firstChild + const getDescEl = (parent) => parent.children[1] + const show = () => { render(); - gamesElList = listBox.querySelectorAll(`.menu-item span`); + gamesElList = listBox.querySelectorAll(`.menu-item`); menuItemChoice.style.display = "block"; pickGame(); }; @@ -44,7 +47,8 @@ const gameList = (() => { const clearPrev = () => { let prev = gamesElList[gameIndex] if (prev) { - prev.classList.remove('pick', 'text-move'); + getTitleEl(prev).classList.remove('pick', 'text-move'); + getDescEl(prev).style.display = 'none' } } @@ -54,8 +58,12 @@ const gameList = (() => { const i = gamesElList[gameIndex]; if (i) { - setTimeout(() => i.classList.add('pick'), 50) - !menuInSelection && i.classList.add('text-move') + const title = getTitleEl(i) + setTimeout(() => { + title.classList.add('pick') + !menuInSelection && (getDescEl(i).style.display = 'block') + }, 50) + !menuInSelection && title.classList.add('text-move') } // transition menu box @@ -78,7 +86,11 @@ const gameList = (() => { const stopGamePickerTimer = () => { menuInSelection = false - gamesElList[gameIndex] && gamesElList[gameIndex].classList.add('text-move') + const item = gamesElList[gameIndex] + if (item) { + getTitleEl(item).classList.add('text-move') + getDescEl(item).style.display = 'block' + } if (gamePickTimer === null) return; clearInterval(gamePickTimer); @@ -86,7 +98,7 @@ const gameList = (() => { }; const onMenuPressed = (newPosition) => { - clearPrev() + clearPrev(true) listBox.style.transition = ''; listBox.style.top = `${menuTop - newPosition}px`; }; @@ -106,6 +118,6 @@ const gameList = (() => { pickGame: pickGame, show: show, set: setGames, - getCurrentGame: () => games[gameIndex] + getCurrentGame: () => games[gameIndex].title } })(document, event, log);