Show Corona Game when shiny disconnects

Introduction
Are you bored or annoyed of shinyapps.io message "Disconnected from the server"? This message occurs because of inactivity in the app (idle state) for a long period of time or some programming error which may cause R session to shut down. If your app is in production you may also get escalation or stinkers from your client. At that time it is important to improve user experience via some creative methods. If you would be lucky you may get appreciation instead of escalation :-)

You can make the error message more fun by showing game in the screen when app is down (How about corona game?). This also works on your local machine or shiny server (not just shinyapps.io). Check out the demo app hosted on shinyapps.io

You can checkout the package named shinyGames which shows you how you can add and play games in your shiny app
Steps to show game
Follow the steps below how to implement it in shiny.
Step 1
Copy the following program and paste it in R editor and save it as app.R
library(shiny)

# Define UI ----
ui <- fluidPage(

tags$head(tags$style("#shiny-disconnected-overlay {display: none !important}
                     #ss-overlay {display: none !important}
                     #ss-connect-dialog {display: none !important}")),
tags$script("

  $(function() {$(document).on('shiny:disconnected shiny:error', function(event) {
    $('.container-fluid').load('./game2.html');
  }) });
  
"),

actionButton("disconnect", "Disconnect the app")

)

server <- function(input, output, session) {
  observeEvent(input$disconnect, {
    session$close()
  })
}

shinyApp(ui, server)
Step 2
Download supporting files from here and create www folder in the same location where app.R file is stored. Maintain the below folder structure.
├── app.R
└── www
    └── 100-error-offline.png
    └── 100-offline-sprite.png
    └── 200-error-offline.png
    └── 200-offline-sprite.png
    └── game2.html   
Once you are done with the above two steps, just run the app.R. In the app screen, click on Disconnect the app button to see game.
How to play game
Press "Space" to start the game and jump your corona icon. Use down arrow (↓) to duck.
Spread the Word!
Share
Related Posts
About Author:

Deepanshu founded ListenData with a simple objective - Make analytics easy to understand and follow. He has over 10 years of experience in data science. During his tenure, he has worked with global clients in various domains like Banking, Insurance, Private Equity, Telecom and Human Resource.

3 Responses to "Show Corona Game when shiny disconnects"
  1. Thanks for the code snippet! However this doesn't work under a dashboardBody(). Any suggestions?

    ReplyDelete
  2. Example of what's not working under shinydashboard:
    library(shiny)

    library(shinydashboard)

    ui <- dashboardPage(

    dashboardHeader(),

    dashboardSidebar(),

    dashboardBody(

    tags$script("

    $(function() {$(document).on('shiny:disconnected shiny:error', function(event) {

    $('.container-fluid').load('./test.html');

    }) });

    "),

    actionButton("disconnect", "Disconnect the app")

    )

    )

    server <- function(input, output, session) {

    observeEvent(input$disconnect, {

    session$close()

    })

    }

    shinyApp(ui, server)

    ReplyDelete
  3. Thanks. Where are style tags in your code to include CSS?

    ReplyDelete

Next → ← Prev