From 1b10cfe2f37bbc2f2fa1260babc95d86f2e068ac Mon Sep 17 00:00:00 2001 From: Gareth Latty Date: Thu, 23 Jan 2020 21:08:12 +0000 Subject: [PATCH] Minor improvements and groundwork for spectation changes (#96). --- README.md | 7 +++- client/src/elm/MassiveDecks.elm | 5 ++- client/src/elm/MassiveDecks/Model.elm | 1 + client/src/elm/MassiveDecks/Pages/Lobby.elm | 40 +++++++++++++------ .../src/elm/MassiveDecks/Pages/Spectate.elm | 31 ++++++++++++-- .../MassiveDecks/Pages/Spectate/Messages.elm | 1 + client/src/elm/MassiveDecks/Strings.elm | 8 ++++ .../elm/MassiveDecks/Strings/Languages/En.elm | 32 +++++++++++++-- client/src/scss/pages/lobby.scss | 7 +++- 9 files changed, 108 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 0fee64f..7e917b9 100644 --- a/README.md +++ b/README.md @@ -25,9 +25,13 @@ The web client for the game is written in [Elm][elm], while the back-end is writ If you would like to run an instance of Massive Decks, there are a couple of options. +It is suggested you read the [deployment guide on the wiki][deployment-guide]. + +[deployment-guide]: https://github.com/Lattyware/massivedecks/wiki/Deploying + ### Docker -[Server](https://hub.docker.com/repository/docker/massivedecks/server/general) / [Client](https://hub.docker.com/repository/docker/massivedecks/client/general) +[Server](https://hub.docker.com/r/massivedecks/server) / [Client](https://hub.docker.com/r/massivedecks/client) Also see [`docker-compose.yml`](https://github.com/Lattyware/massivedecks/blob/master/docker-compose.yml). The client image is an nginx server that both serves the static web client and acts as a proxy for the server. As such, the server should @@ -37,7 +41,6 @@ not be exposed publicly directly. [![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/Lattyware/massivedecks) - ## Contributing If you have any problems with the game, please [raise an issue][issue]. If you would like to help develop the game, diff --git a/client/src/elm/MassiveDecks.elm b/client/src/elm/MassiveDecks.elm index de1e97b..18fc5c5 100644 --- a/client/src/elm/MassiveDecks.elm +++ b/client/src/elm/MassiveDecks.elm @@ -85,6 +85,7 @@ init flags url key = , castStatus = Cast.NoDevicesAvailable , speech = speech , notifications = Notifications.init + , remoteMode = remoteMode } ( page, pageCmd ) = @@ -310,10 +311,10 @@ view model = Start.view model.shared m Pages.Lobby m -> - Lobby.view LobbyMsg SettingsMsg model.shared m + Lobby.view LobbyMsg SettingsMsg ChangePage model.shared m Pages.Spectate m -> - Spectate.view model.shared m + Spectate.view SpectateMsg ChangePage model.shared m Pages.Unknown m -> Unknown.view model.shared m diff --git a/client/src/elm/MassiveDecks/Model.elm b/client/src/elm/MassiveDecks/Model.elm index 6dd7aef..a92819e 100644 --- a/client/src/elm/MassiveDecks/Model.elm +++ b/client/src/elm/MassiveDecks/Model.elm @@ -22,6 +22,7 @@ type alias Shared = , castStatus : Cast.Status , speech : Speech.Model , notifications : Notifications.Model + , remoteMode : Bool } diff --git a/client/src/elm/MassiveDecks/Pages/Lobby.elm b/client/src/elm/MassiveDecks/Pages/Lobby.elm index b29902c..5a4253d 100644 --- a/client/src/elm/MassiveDecks/Pages/Lobby.elm +++ b/client/src/elm/MassiveDecks/Pages/Lobby.elm @@ -297,8 +297,8 @@ update wrap shared msg model = ( Stay model, Cmd.none ) -view : (Msg -> msg) -> (Settings.Msg -> msg) -> Shared -> Model -> List (Html msg) -view wrap wrapSettings shared model = +view : (Msg -> msg) -> (Settings.Msg -> msg) -> (Route.Route -> msg) -> Shared -> Model -> List (Html msg) +view wrap wrapSettings changePage shared model = let usersShown = shared.settings.settings.openUserList @@ -403,15 +403,15 @@ lobbyMenu wrap shared r user player game = "lobby-menu-button" lobbyMenuItems = - [ Menu.button Icon.bullhorn Strings.InvitePlayers Strings.InvitePlayers (ToggleInviteDialog |> wrap |> Just) ] + [ Menu.button Icon.bullhorn Strings.InvitePlayers Strings.InvitePlayersDescription (ToggleInviteDialog |> wrap |> Just) ] setPresence = setPresenceMenuItem wrap player userLobbyMenuItems = - [ setPresence - , Menu.button Icon.signOutAlt Strings.LeaveGame Strings.LeaveGame (Leave |> wrap |> Just) - , Menu.link Icon.tv Strings.Spectate Strings.SpectateDescription (r |> Spectate.Route |> Route.Spectate |> Route.url |> Just) + [ Menu.link Icon.tv Strings.Spectate Strings.SpectateDescription (r |> Spectate.Route |> Route.Spectate |> Route.url |> Just) + , setPresence + , Menu.button Icon.signOutAlt Strings.LeaveGame Strings.LeaveGameDescription (Leave |> wrap |> Just) ] privilegedLobbyMenuItems = @@ -419,8 +419,8 @@ lobbyMenu wrap shared r user player game = ] mdMenuItems = - [ Menu.link Icon.info Strings.AboutTheGame Strings.AboutTheGame (Just "https://github.com/lattyware/massivedecks") - , Menu.link Icon.bug Strings.ReportError Strings.ReportError (Just "https://github.com/Lattyware/massivedecks/issues/new") + [ Menu.link Icon.info Strings.AboutTheGame Strings.AboutTheGameDescription (Just "https://github.com/lattyware/massivedecks") + , Menu.link Icon.bug Strings.ReportError Strings.ReportErrorDescription (Just "https://github.com/Lattyware/massivedecks/issues/new") ] menuItems = @@ -436,7 +436,7 @@ lobbyMenu wrap shared r user player game = Html.div [] [ Components.iconButtonStyled [ HtmlA.id id, Strings.GameMenu |> Lang.title shared ] ( [ Icon.lg ], Icon.bars ) - , Menu.view shared id ( WlA.XCenter, WlA.YBottom ) ( WlA.XCenter, WlA.YTop ) separatedMenuItems + , Menu.view shared id ( WlA.XCenter, WlA.YBottom ) ( WlA.XLeft, WlA.YTop ) separatedMenuItems ] @@ -507,21 +507,24 @@ keyedViewNotification wrap shared lobby notification = viewNotification : (Msg -> msg) -> Shared -> Maybe (Dict User.Id User) -> Html.Attribute msg -> Notification -> Html msg viewNotification wrap shared users animationState notification = let - ( icon, message ) = + ( icon, message, class ) = case notification.message of UserConnected id -> ( Icon.viewIcon Icon.plug , Strings.UserConnected { username = username shared users id } |> Lang.html shared + , Nothing ) UserDisconnected id -> ( Icon.layers [] [ Icon.viewIcon Icon.plug, Icon.viewIcon Icon.slash ] , Strings.UserDisconnected { username = username shared users id } |> Lang.html shared + , Nothing ) UserJoined id -> ( Icon.viewIcon Icon.signInAlt , Strings.UserJoined { username = username shared users id } |> Lang.html shared + , Nothing ) UserLeft id leaveReason -> @@ -532,15 +535,17 @@ viewNotification wrap shared users animationState notification = User.Kicked -> Strings.UserKicked { username = username shared users id } |> Lang.html shared + , Nothing ) Error mdError -> ( Icon.viewIcon Icon.exclamationTriangle , MdError.describe mdError |> Lang.html shared + , Just "error" ) in Wl.card - [ HtmlA.class "notification", animationState ] + [ HtmlA.class "notification", animationState, class |> Maybe.map HtmlA.class |> Maybe.withDefault HtmlA.nothing ] [ Html.div [ HtmlA.class "content" ] [ Html.span [ HtmlA.class "icon" ] [ icon ] , Html.span [ HtmlA.class "message" ] [ message ] @@ -680,6 +685,13 @@ viewUser wrap shared localUserId localUserPrivilege game ( userId, user ) = User.Unprivileged -> [] + --playerState = + -- case user.role of + -- User.Player -> + -- [ Menu.button Icon.eye Strings.BecomeSpectator Strings.BecomeSpectatorDescription Nothing |> Just ] + -- + -- User.Spectator -> + -- [ Menu.button Icon.chessPawn Strings.BecomePlayer Strings.BecomePlayerDescription Nothing |> Just ] presenceMenuItems = case user.presence of User.Joined -> @@ -719,7 +731,11 @@ viewUser wrap shared localUserId localUserPrivilege game ( userId, user ) = User.Left -> [] in - [ privilegeMenuItems, presenceMenuItems ] + [ privilegeMenuItems + + --, playerState + , presenceMenuItems + ] |> List.filterMap (\part -> part |> List.filterMap identity |> (\l -> l |> Maybe.justIf (l |> List.isEmpty >> not))) |> List.intersperse [ Menu.Separator ] |> List.concat diff --git a/client/src/elm/MassiveDecks/Pages/Spectate.elm b/client/src/elm/MassiveDecks/Pages/Spectate.elm index 94ae8ed..41bb98e 100644 --- a/client/src/elm/MassiveDecks/Pages/Spectate.elm +++ b/client/src/elm/MassiveDecks/Pages/Spectate.elm @@ -13,6 +13,8 @@ import FontAwesome.Icon as Icon import FontAwesome.Solid as Icon import Html exposing (Html) import Html.Attributes as HtmlA +import Html.Events as HtmlE +import MassiveDecks.Components as Component import MassiveDecks.Error.Model exposing (Error) import MassiveDecks.Messages as Global import MassiveDecks.Model exposing (Shared) @@ -66,8 +68,8 @@ initWithAuth auth = ( { lobby = lobby, advertise = True }, cmd ) -view : Shared -> Model -> List (Html msg) -view shared model = +view : (Msg -> msg) -> (Route.Route -> msg) -> Shared -> Model -> List (Html msg) +view wrap changePage shared model = let advert = if model.advertise then @@ -78,7 +80,8 @@ view shared model = in [ Html.div [ HtmlA.id "spectate" ] (List.concat - [ advert + [ viewSettings wrap changePage shared model + , advert , viewStage shared model ] ) @@ -101,11 +104,33 @@ update wrap shared msg model = _ -> ( model, Cmd.none ) + ToggleAdvert -> + ( { model | advertise = not model.advertise }, Cmd.none ) + {- Private -} +viewSettings : (Msg -> msg) -> (Route.Route -> msg) -> Shared -> Model -> List (Html msg) +viewSettings wrap changePage shared model = + if not shared.remoteMode then + let + advertiseIcon = + if model.advertise then + Icon.eyeSlash + + else + Icon.eye + in + [ Component.iconButton [ model.lobby.route |> Route.Lobby |> changePage |> HtmlE.onClick ] Icon.arrowLeft + , Component.iconButton [ ToggleAdvert |> wrap |> HtmlE.onClick ] advertiseIcon + ] + + else + [] + + viewStage : Shared -> Model -> List (Html msg) viewStage shared model = case model.lobby.lobby of diff --git a/client/src/elm/MassiveDecks/Pages/Spectate/Messages.elm b/client/src/elm/MassiveDecks/Pages/Spectate/Messages.elm index 2820b99..7781267 100644 --- a/client/src/elm/MassiveDecks/Pages/Spectate/Messages.elm +++ b/client/src/elm/MassiveDecks/Pages/Spectate/Messages.elm @@ -5,3 +5,4 @@ import MassiveDecks.Pages.Lobby.Messages as Lobby type Msg = LobbyMsg Lobby.Msg + | ToggleAdvert diff --git a/client/src/elm/MassiveDecks/Strings.elm b/client/src/elm/MassiveDecks/Strings.elm index 07fe64f..90741cf 100644 --- a/client/src/elm/MassiveDecks/Strings.elm +++ b/client/src/elm/MassiveDecks/Strings.elm @@ -25,6 +25,7 @@ type MdString | JoinPrivateGame -- The action of joining a private game the user was invited to. (Short, ideally one word). | PlayGame -- The action of joining a game to play it. (Short, ideally one word). | AboutTheGame -- The action of finding out more information about the game. (Short, ideally one word). + | AboutTheGameDescription -- A description of the action of finding out about the game. | MDLogoDescription -- A description of the Massive Decks logo (e.g: for blind users). | RereadLogoDescription -- A description of the Reread Games logo (e.g: for blind users). | MDProject -- A description of the action of visiting the development project for Massive Decks. @@ -147,11 +148,17 @@ type MdString | GameMenu -- A description of the game menu. | UnknownUser -- A name for a user that doesn't have a known name. | InvitePlayers -- A short term for inviting players to the game. + | InvitePlayersDescription -- A description of what inviting players to the game means. | SetAway -- A short term for leaving the game temporarily. | SetBack -- A short term for returning to the game after being away. | LeaveGame -- A short term for the action of leaving the game permanently. + | LeaveGameDescription -- A description of what leaving the game means. | Spectate -- A short term for spectating the game. | SpectateDescription -- A description of the action of spectating the game. + | BecomeSpectator -- A short term for becoming soley a spectator of the game, rather than an active player. + | BecomeSpectatorDescription -- A description of becoming soley a spectator of the game, rather than an active player. + | BecomePlayer -- A short term for becoming an active player of the game, rather than a spectator. + | BecomePlayerDescription -- A description of becoming an active player of the game, rather than a spectator. | EndGame -- A short term for the action of ending the game early. | EndGameDescription -- A description of the action of ending the game early. | KickUser -- A short term for the action of forcing a user to leave the game permanently. @@ -240,6 +247,7 @@ type MdString | ErrorHelp -- A message telling the user that an error has occurred and what to do. | ErrorHelpTitle -- A title saying something went wrong. | ReportError -- The action to report an error with the application to a developer. + | ReportErrorDescription -- A description of the action of reporting an error to a developer. | ReportErrorBody -- An explanation of how to report an error to the developer. | BadUrlError -- An error where the server url wasn't valid. | TimeoutError -- An error where the server didn't respond for a long time. diff --git a/client/src/elm/MassiveDecks/Strings/Languages/En.elm b/client/src/elm/MassiveDecks/Strings/Languages/En.elm index 0d33c2f..39b3923 100644 --- a/client/src/elm/MassiveDecks/Strings/Languages/En.elm +++ b/client/src/elm/MassiveDecks/Strings/Languages/En.elm @@ -78,6 +78,9 @@ translate mdString = AboutTheGame -> [ Text "About" ] + AboutTheGameDescription -> + [ Text "Find out about ", Ref MassiveDecks, Text " and how it is developed." ] + MDLogoDescription -> [ Text "A ", Ref Call, Text " and a ", Ref Response, Text " marked with an “M” and a “D”." ] @@ -522,6 +525,9 @@ translate mdString = InvitePlayers -> [ Text "Invite Players" ] + InvitePlayersDescription -> + [ Text "Get the game code/link/qr code to let others join this game." ] + SetAway -> [ Text "Mark As Away" ] @@ -531,17 +537,32 @@ translate mdString = LeaveGame -> [ Text "Leave Game" ] + LeaveGameDescription -> + [ Text "Permanently leave the game." ] + Spectate -> - [ Text "Spectate" ] + [ Text "Spectator View" ] SpectateDescription -> - [ Text "Open a spectator's view of the game." ] + [ Text "Open a spectator's view of the game in a new tab/window." ] + + BecomeSpectator -> + [ Text "Spectate" ] + + BecomeSpectatorDescription -> + [ Text "Just watch the game without playing." ] + + BecomePlayer -> + [ Text "Play" ] + + BecomePlayerDescription -> + [ Text "Play in the game." ] EndGame -> [ Text "End Game" ] EndGameDescription -> - [ Text "End the game early." ] + [ Text "End the game now." ] KickUser -> [ Text "Kick" ] @@ -823,6 +844,9 @@ translate mdString = ReportError -> [ Text "Report Bug" ] + ReportErrorDescription -> + [ Text "Let the developers know about a bug you encountered so they can fix it." ] + ReportErrorBody -> [ Text "I was [replace with a short explanation of what you were doing] when I got the following error:" ] @@ -860,7 +884,7 @@ translate mdString = [ Text "The round needs to be at the ", Ref expected, Text " stage to do that, but it is at the ", Ref stage, Text " stage." ] ConfigEditConflictError -> - [ Text "Someone else changed the configuration before you, so their changes took priority." ] + [ Text "Someone else changed the configuration before you, your change was not saved." ] UnprivilegedError -> [ Text "You don't have the privileges to do that." ] diff --git a/client/src/scss/pages/lobby.scss b/client/src/scss/pages/lobby.scss index bbe9883..2a9f080 100644 --- a/client/src/scss/pages/lobby.scss +++ b/client/src/scss/pages/lobby.scss @@ -163,7 +163,7 @@ left: 0; bottom: 0; list-style: none; - z-index: 100; + z-index: 500; } .notification { @@ -177,6 +177,11 @@ --card-bg: #{$call-background}; --card-color: #{$call-color}; + &.error { + --card-bg: #{$error}; + --card-color: #{$on-error}; + } + &.entering { transform: translateY(0%); }