up styles

modules/time-module.R

@@ -5,9 +5,9 @@
 time_UI <- function(id) {
   ns <- NS(id)
   tags$div(
-    style = "width: 100%; text-align: right;",
+    style = "width: 100%; text-align: center;",
     "Time elapsed:",
-    uiOutput(outputId = ns("timer_ui"), style = "font-size: 180%; font-weight: bold;", inline = TRUE)
+    uiOutput(outputId = ns("timer_ui"), style = "font-size: 200%; font-weight: bold;", inline = TRUE)
   )
 }
 

resize_imgs.R

@@ -11,3 +11,9 @@ for (i in imgs) {
   img <- image_scale(img, "120x139")
   image_write(image = img, path = i)
 }
+
+
+img <- image_read("www/rstats-hex.png")
+img <- image_scale(img, "120x139")
+image_write(image = img, path = "www/rstats-hex.png")
+

restart.txt

@@ -1 +1 @@
-2019-02-12 15:32:25
+2019-02-26 15:25:56

server.R

@@ -51,6 +51,16 @@ function(input, output, session) {
     hex2 <- which_hex(results_mods_parse$all, results_mods_parse$show2)
     if (identical(hex1, hex2)) {
       block$x <- hex1
+      showNotification(
+        ui = tags$div(
+          style = "font-size: 160%; font-weight: bold;",
+          sample(
+            x = c("Well done!", "Bravo!", "Great!", "Good job!", 
+                  "Amazing!", "That's a match!", "Hooray!"),
+            size = 1
+          )
+        ), type = "message"
+      )
     }
   })
 

ui.R

@@ -11,13 +11,16 @@ library("shiny")
 
 fluidPage(
 
+  tags$head(
+    tags$link(href="styles.css", rel="stylesheet", type="text/css")
+  ),
+
   tags$div(
-    style = "text-align: center; width: 100%; margin-top: 60px;",
-    tags$h2("Hex memory game"),
+    class = "title-app",
+    tags$h1("Hex memory game"),
     tags$h4("Find mathing hex!")
   ),
   tags$br(),
-  tags$hr(),
 
   # verbatimTextOutput("test_res_show"),
 

www/styles.css

@@ -0,0 +1,35 @@
+body {
+  min-height: 100%; 
+  width:100%; 
+  position: absolute;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background: -moz-radial-gradient(circle at center, #F7FBFF, #428bca) fixed;
+  background: -webkit-radial-gradient(circle at center, #F7FBFF, #428bca) fixed;
+  background: -ms-radial-gradient(circle at center, #F7FBFF, #428bca) fixed;
+  background: -o-radial-gradient(circle at center, #F7FBFF, #428bca) fixed;
+  background: radial-gradient(circle at center, #F7FBFF, #428bca) fixed;
+}
+
+.title-app {
+  text-align: center;
+  width: 100%;
+  margin-top: 60px;
+}
+
+h1 {
+  font-weight: bold;
+}
+
+.shiny-notification-message {
+  color: #fff !important;
+  background-color: #5cb85c !important;
+  border: 1px solid #5cb85c !important;
+}
+
+#shiny-notification-panel {
+  width: 350px !important;
+  text-align: center !important;
+}