inst/app/ui.R

In KrystynaGrzesiak/NameThatTune: Spotify Compatible App For Playing Name That Tune?

ui <- navbarPage("Name That Tune!",
                 id = "general_tab",
                 ###############################################################
                 tabPanel("Start",
                          includeCSS("./www/style.css"),
                          column(10,
                                 h1("Let's play Name That Tune!", icon("spotify")),
                                 br(),
                                 h3("What do you need?"),
                                 br(),
                                 h3("1. Spotify playlist."),
                                 h4("You can make your own playlist or follow a playlist
                             created by someone else. The first 30 playlists from
                             your library are loaded in the app."),
                                 br(),
                                 h3("2. Two or more people."),
                                 h4("Someone in the group needs to be selected as a game master.
                             He picks a playlist and starts playing it, song by song.
                             For all the others, it is their job to guess which song
                             it is (title and/or performer). Game master validates the answers
                             and assign the points."),
                                 br(),
                                 h3("3. The device connected to your Spotify account."),
                                 h4("The open and active (any song must be played)
                             Spotify session is requaired.")
                          ),
                          column(2,
                                 actionButton("left_Start",
                                              label = icon("arrow-left"),
                                              style = 'padding:15px; font-size:300%'),
                                 actionButton("right_Start",
                                              label = icon("arrow-right"),
                                              style = 'padding:15px; font-size:300%')
                          ),
                          column(10),
                          column(2,
                                 br(),
                                 br(),
                                 br(),
                                 br(),
                                 br(),
                                 br(),
                                 br(),
                                 h5("Created by Krystyna Grzesiak."),
                                 h5("Contact me krygrz11atgmail.com"))
                 ),
                 tabPanel("Devices",
                          shinyjs::useShinyjs(),
                          column(10,
                                 h3("Select the device:"),
                                 selectInput("devices",
                                             label = " ",
                                             choices = " ",
                                             selected = NULL),
                                 actionButton("refresh", label = icon("sync"))),
                          column(2,
                                 actionButton("left_Devices",
                                              label = icon("arrow-left"),
                                              style = 'padding:15px; font-size:300%'),
                                 actionButton("right_Devices",
                                              label = icon("arrow-right"),
                                              style = 'padding:15px; font-size:300%')
                          ),
                 ),
                 ###############################################################
                 tabPanel("Players",
                          column(10,
                                 h3("Choose players and set their names:")
                          ),
                          column(2,
                                 actionButton("left_Players",
                                              label = icon("arrow-left"),
                                              style = 'padding:15px; font-size:300%'),
                                 actionButton("right_Players",
                                              label = icon("arrow-right"),
                                              style = 'padding:15px; font-size:300%')
                          ),
                          column(2,
                                 numericInput("n_players",
                                              label = "Number of players",
                                              value = 1,
                                              min = 1,
                                              max = 15,
                                              width = '150px')

                          ),
                          column(3,
                                 uiOutput("text_windows")
                          ),
                 ),


                 ###############################################################
                 tabPanel("Playlist",
                          column(10,
                                 h3("Choose playlist and press PLAY if you are ready!"),
                                 br(),
                                 br(),
                                 column(4,
                                        radioButtons("playlist_selection",
                                                     label = "You can either select your own playlist or generate one now.",
                                                     choices = c("Select from my playlists",
                                                                 "Generate"),
                                                     selected = "Select from my playlists",
                                                     width = '600px'),
                                        br(),
                                        br(),
                                        numericInput("playlist_size",
                                                     "Number of songs:",
                                                     min = 2,
                                                     max = 200,
                                                     value = 100,
                                                     step = 10),

                                        actionButton("generate", "Generate!"),
                                        selectInput("playlists",
                                                    label = "The first 30 playlists loaded below. If you can't find a playlist, please reorder and refresh.",
                                                    choices = c(),
                                                    selected = c(),
                                                    width = '500px'),
                                        actionButton("refresh_playlist", label = icon("sync")),
                                        br(),
                                        br(),
                                 ),
                          ),
                          column(2,
                                 actionButton("left_Playlist",
                                              label = icon("arrow-left"),
                                              style = 'padding:15px; font-size:300%'),
                                 actionButton("start",
                                              label = icon("play"),
                                              style = 'padding:15px; font-size:300%')
                          ),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          column(6,
                                 h4("Your choice:"),
                                 shinycssloaders::withSpinner(tableOutput("playlist_content"),
                                                              color = "#1c6e8c")
                          )
                 ),
                 ###############################################################
                 tabPanel("Game",
                          h3("Currently playing:"),
                          br(),
                          column(2, htmlOutput("album")),
                          column(10, verbatimTextOutput("current_song")),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          h3("Scores:"),
                          column(3, tableOutput("print_scores")),
                          column(3,
                                 checkboxGroupInput("author_point",
                                                    "Point for the author goes to:",
                                                    choices = c(""))
                          ),
                          column(3,
                                 checkboxGroupInput("title_point",
                                                    "Point for the title goes to:",
                                                    choices = c(""))
                          ),
                          column(3,
                                 checkboxGroupInput("extra_point",
                                                    "Point for a fun fact goes to:",
                                                    choices = c(""))
                          ),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          br(),
                          column(4),
                          column(1,
                                 shinyWidgets::circleButton("prev_button",
                                                            icon = icon("step-backward"),
                                                            size = "default"),
                          ),
                          column(1,
                                 shinyWidgets::circleButton("pause_button",
                                                            icon = icon("pause"),
                                                            size = "default"),
                          ),
                          column(1,
                                 shinyWidgets::circleButton("play_button",
                                                            icon = icon("play"),
                                                            size = "default"),
                          ),
                          column(1,
                                 shinyWidgets::circleButton("next_button",
                                                            icon = icon("step-forward"),
                                                            size = "default")),
                          column(4),
                          br(),
                          br(),
                          br(),
                          column(11),
                          column(1,
                                 actionButton("end_btn",
                                              label = icon("long-arrow-alt-right"),
                                              style = 'padding:10px; font-size:400%'),
                                 h6("End now and check the summary."),
                          )

                 ),
                 ###############################################################
                 tabPanel("Summary",
                          column(10,
                                 h3("Results:")
                          ),
                          column(2,
                                 actionButton("play_again",
                                              "Play again",
                                              style = 'padding:10px; font-size:210%'),
                          ),
                          column(12,
                                 tableOutput("overall_results"),
                                 downloadButton("download_scores")),
                          br(),
                          br(),
                          br(),
                          column(2,
                                 br(),
                                 br(),
                                 br(),
                                 checkboxGroupInput("category",
                                                    "Category:",
                                                    choices = c("author",
                                                                "title",
                                                                "fun fact"),
                                                    selected = c("author",
                                                                 "title",
                                                                 "fun fact")),
                                 checkboxGroupInput("players_plot",
                                                    "Players:",
                                                    choices = c(""))),
                          column(9, plotOutput("results_vis"))
                 )
)