Show systems in the interface

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
 )

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
 	}

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,
 	})

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 = "___"

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;
 }

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 => `<div class="menu-item"><div><span>${game}</span></div></div>`)
+            .map(game => `<div class="menu-item"><div><span>${game.title}</span></div><div class="menu-item__info">${game.system}</div></div>`)
             .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);