Add splash screen body

t4c/app.R

@@ -4,6 +4,10 @@ library(shiny)
 library(dplyr)
 library(shinyjs)
 
+# ---- APP PARAMETERS ----
+APP_TITLE <- "App Title"
+HELP_TEXT <- "Some guidance text can go here"
+
 questions <- readxl::read_xlsx(here::here("docs/questions.xlsx")) %>%
   arrange(order)
 
@@ -47,24 +51,32 @@ ui <- fixedPage(
   includeCSS("animate.css"),
   shinyjs::useShinyjs(),
   tags$link(rel = "stylesheet", type = "text/css", href = "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i"),
+  tags$link(rel = "stylesheet", type = "text/css", href = "https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Coming+Soon"),
 
   # h1("A Good Name and Logo"),
   # p("This is a simple demo app..."),
   # hr(),
   p(),
   phone_container(
-    div(class = "overlay splash animated", id = "splash-overlay"),
+    div(
+      class = "overlay splash animated", id = "splash-overlay",
+      div(
+        class = "splash-body",
+        h1("Welcome!"),
+        p("Talking about cancer treatment options is hard, but we're here to help."),
+        actionButton("splash_next_screen", "Get Started", class = "btn-bottom-right btn-primary")
+      )
+    ),
     div(
         id = "app-main",
         class = "app-main animated",
-        h1("App Title", class = "app-title"),
-        p("Help Text", class = "help-text"),
+        h1(APP_TITLE, class = "app-title"),
+        p(HELP_TEXT, class = "help-text"),
         shinyswiprUI(
             "card_swipe_ui",
             div(class = "swiperCard-header",
                 h4(class = "card-title",
                    textOutput("question_category")
-                   # "Card Title",
                 )
             ),
             div(class = "swiperCard-body",
@@ -89,11 +101,24 @@ ui <- fixedPage(
 
 
 server <- function(input, output, session) {
+  app_data <- reactiveValues(
+    init = 1L,
+    iter = 1L,
+    results = data_frame(question_id = integer(), swipe = character()),
+    complete = FALSE,
+    splash = TRUE
+  )
+
+  question <- reactive({
+    if (app_data$iter > length(question_ids)) return(NULL)
+    questions %>%
+      filter(id == question_ids[[app_data$iter]])
+  })
+
   card_swipe <- callModule(shinyswipr, "card_swipe_ui")
 
   question_ids <- arrange(questions, order) %>% pull(id)
 
-  # Init outputs
   output$question_text <- renderText({
     if (!app_data$complete) {
       question()$`Question Text`
@@ -102,35 +127,15 @@ server <- function(input, output, session) {
     }
   })
   output$question_category <- renderText({
-      if (!app_data$complete) {
-          question()$Category
-      } else {
-          "Thank You!"
-      }
+      if (!app_data$complete) question()$Category else "Thank You!"
   })
   output$question_topic <- renderText({
-      if (!app_data$complete) {
-          question()$Topic
-      } else {
-          "All Done!"
-      }
+      if (!app_data$complete) question()$Topic else "All Done!"
   })
   output$results_table <- renderDataTable({
     app_data$results
   })
 
-  app_data <- reactiveValues(
-    iter = 1L,
-    results = data_frame(question_id = integer(), swipe = character()),
-    complete = FALSE,
-    splash = FALSE
-  )
-
-  question <- reactive({
-    if (app_data$iter > length(question_ids)) return(NULL)
-    questions %>%
-      filter(id == question_ids[[app_data$iter]])
-  })
 
   observe({
     cat("iter:", app_data$iter, "\n")
@@ -167,20 +172,33 @@ server <- function(input, output, session) {
     # output$results_table <- renderDataTable({app_data$results})
   })
 
+  observeEvent(input$splash_next_screen, {
+    if (app_data$splash) app_data$splash <- FALSE
+  })
+
   observeEvent(input$toggle_splash, {
       app_data$splash <- !app_data$splash
-      if (app_data$splash) {
+  })
+
+  observeEvent(app_data$splash, {
+    if (app_data$init) {
+      app_data$init <- app_data$init - 1L
+      return()
+    }
+    if (!app_data$splash) {
+          # cli::cat_line(strftime(Sys.time(), "%F %T"), " splash out")
           shinyjs::removeClass("splash-overlay", "slideInLeft")
           shinyjs::removeClass("app-main", "slideOutRight")
           shinyjs::addClass("app-main", "slideInRight")
           shinyjs::addClass("splash-overlay", "slideOutLeft")
       } else {
+          # cli::cat_line(strftime(Sys.time(), "%F %T"), " splash in")
           shinyjs::removeClass("splash-overlay", "slideOutLeft")
           shinyjs::removeClass("app-main", "slideInRight")
           shinyjs::addClass("app-main", "slideOutRight")
           shinyjs::addClass("splash-overlay", "slideInLeft")
       }
-  })
+  }, priority = -100)
 }
 
 shinyApp(ui = ui, server = server)

t4c/t4c.css

@@ -116,3 +116,34 @@
   background-image: url("/images/splash-bg.png");
   background-size: cover;
 }
+
+.splash-body {
+  font-family: Amatic SC;
+  color: black;
+  font-size: 2.5em;
+}
+.splash-body h1 {
+  font-size: 2.5em;
+  margin-top: 44%;
+  font-weight: 600;
+}
+.splash-body p {
+  padding-left: 40px;
+  padding-right: 40px;
+  padding-top: 10px;
+}
+.btn-bottom-right {
+    display: block;
+    position: absolute;
+    bottom: 25px;
+    right: 25px;
+    font-size: 0.6em;
+    width: 125px;
+}
+.btn-moffitt {
+    background-color: #00589a;
+    color: white;
+    font-weight: 600;
+    border-color: white;
+    font-family: IBM Plex Sans;
+}