improve

inst/showcase/app.R

@@ -16,30 +16,25 @@ ui <- nextui_page(
   mod_poke_select_ui("poke_select_1"),
   spacer(y = 5),
   card(
+    shadow = "sm",
     card_header(
       mod_poke_info_ui("poke_info_1")
     ),
     divider(),
     card_body(
       class = "flex flex-col gap-4",
       mod_poke_stats_ui("poke_stats_1"),
+      p(class = "font-extrabold text-2xl uppercase", "Moves"),
       accordion(
         "accordion",
         variant = "bordered",
         selectionMode = "multiple",
         isCompact = TRUE,
-        value = c(1, 2),
+        value = JS("['1']"),
         accordion_item(
           key = 1,
-          title = "Moves",
-          subtitle = "What the pokemon can learn.",
+          subtitle = "What the pokemon can learn during its growth.",
           mod_poke_move_ui("poke_move_1")
-        ),
-        accordion_item(
-          key = 2,
-          title = "Locations",
-          subtitle = "Where I can find it.",
-          mod_poke_location_ui("poke_location_1")
         )
       )
     )
@@ -50,7 +45,6 @@ server <- function(input, output, session) {
   main <- mod_poke_select_server("poke_select_1")
   mod_poke_info_server("poke_info_1", main$selected, main$is_shiny)
   mod_poke_stats_server("poke_stats_1", main$selected)
-  mod_poke_location_server("poke_location_1", main$selected)
   mod_poke_move_server("poke_move_1", main$selected)
 }
 

inst/showcase/modules/mod_poke_info.R

@@ -6,6 +6,7 @@ mod_poke_info_ui <- function(id) {
 mod_poke_info_server <- function(id, selected, is_shiny) {
   moduleServer(id, function(input, output, session) {
     ns <- session$ns
+
     mod_poke_evolve_server("poke_evolve_1", selected, is_shiny)
 
     # generate the profile cards (as many as the number of selected pokemons)
@@ -15,22 +16,34 @@ mod_poke_info_server <- function(id, selected, is_shiny) {
       pokemon <- selected()
 
       div(
-        class = "flex flex-row gap-4 content-center",
+        class = "flex flex-row gap-4 justify-evenly",
         div(
-          class = "flex flex-col gap-2 justify-center",
+          class = "flex flex-col gap-2 justify-center basis-1/3",
           chip(startContent = icon("paw"), sprintf("Shape: %s", pokemon$shape)),
           chip(startContent = icon("house"), sprintf("Habitat: %s", pokemon$habitat))
         ),
-        mod_poke_evolve_ui(ns("poke_evolve_1")),
-        avatar(
-          isBordered = TRUE,
-          src = if (!is_shiny()) {
-            pokemon$sprites$front_default
-          } else {
-            pokemon$sprites$front_shiny
-          },
-          className = "w-40 h-40 text-large",
-          size = "lg"
+        div(
+          class = "flex flex-col basis-1/3",
+          mod_poke_evolve_ui(ns("poke_evolve_1")),
+          avatar(
+            isBordered = TRUE,
+            src = if (!is_shiny()) {
+              pokemon$sprites$front_default
+            } else {
+              pokemon$sprites$front_shiny
+            },
+            className = "w-40 h-40 text-large",
+            size = "lg"
+          )
+        ),
+        div(
+          class = "flex flex-col gap-2  justify-center basis-1/3",
+          snippet(
+            variant = "bordered",
+            symbol = "",
+            lapply(strsplit(pokemon$description, "\n")[[1]], span),
+            hideCopyButton = TRUE
+          )
         )
       )
     })

inst/showcase/modules/mod_poke_location.R

@@ -16,7 +16,7 @@ mod_poke_location_server <- function(id, selected) {
         "This pokemon cannot be found in the wild."
       } else {
         div(
-          class = "flex flex-row gap-2",
+          class = "flex gap-2 flex-wrap",
           lapply(locations, \(loc) {
             chip(loc)
           })

inst/showcase/modules/mod_poke_move.R

@@ -14,9 +14,9 @@ mod_poke_move_server <- function(id, selected) {
       moves <- selected()$moves
 
       dat <- data.frame(
-        name = purrr::map(moves, `[`, 'name') |> unlist(),
-        power = purrr::map(moves, `[`, 'power') |> unlist(),
-        text = purrr::map(moves, `[`, 'text') |> unlist()
+        Name = purrr::map(moves, `[`, 'name') |> unlist(),
+        Power = purrr::map(moves, `[`, 'power') |> unlist(),
+        Description = purrr::map(moves, `[`, 'text') |> unlist()
       )
 
       table(dat, isStriped = TRUE, isHeaderSticky = TRUE, removeWrapper = TRUE)

inst/showcase/modules/mod_poke_stats.R

@@ -90,11 +90,32 @@ mod_poke_stats_ui <- function(id) {
       class = "flex flex-col gap-4 basis-1/3",
       p(class = "font-extrabold text-2xl uppercase my-2", "General"),
       uiOutput(ns("basic_stats")),
+      p(class = "font-extrabold text-2xl uppercase my-2", icon("location-dot"), " Location"),
+      mod_poke_location_ui(ns("poke_location_1")),
+      spacer(y = 5),
       mod_poke_type_ui(ns("poke_type_1"))
     ),
     div(
       class = "flex flex-col gap-4 basis-2/3",
-      p(class = "font-extrabold text-2xl uppercase my-2", "Stats"),
+      div(
+        class = "flex flex-row gap-4",
+        p(
+          class = "font-extrabold text-2xl uppercase",
+          badge(
+            color = "danger",
+            placement = "bottom-right", "Stats",
+            content = textOutput(ns("sum_stats"))
+          )
+        ),
+        tooltip(
+          tags$sup(icon("question", size = "0.75em")),
+          content = HTML("Sum of stats. <br/>
+            Mew is 500."),
+          color = "foreground",
+          placement = "right",
+          showArrow = TRUE
+        )
+      ),
       uiOutput(ns("poke_stats_card"))
     )
   )
@@ -105,6 +126,7 @@ mod_poke_stats_server <- function(id, selected) {
     ns <- session$ns
 
     mod_poke_type_server("poke_type_1", selected)
+    mod_poke_location_server("poke_location_1", selected)
 
     # Programmatically generate stat cards
     output$basic_stats <- renderUI({
@@ -117,11 +139,11 @@ mod_poke_stats_server <- function(id, selected) {
           listbox_item(
             key = stat,
             startContent = switch(stat,
-              "height" = icon("up-down"),
-              "weight" = icon("weight-scale"),
-              "base_happiness" = icon("face-smile"),
-              "capture_rate" = icon("house"),
-              "growth_rate" = icon("up-long")
+                                  "height" = icon("up-down"),
+                                  "weight" = icon("weight-scale"),
+                                  "base_happiness" = icon("face-smile"),
+                                  "capture_rate" = icon("house"),
+                                  "growth_rate" = icon("up-long")
             ),
             stat,
             endContent = selected()$other_stats[[stat]]
@@ -136,14 +158,14 @@ mod_poke_stats_server <- function(id, selected) {
       create_radar_stats(selected())
     })
 
+    output$sum_stats <- renderText({
+      selected()$sum_stats
+    })
+
     # card wrapper for the charts
     output$poke_stats_card <- renderUI({
       req(!is.null(selected()))
-
-      tagList(
-        echarts4rOutput(outputId = ns("poke_stats")),
-        tags$strong(sprintf("Sum of stats: %s (Mew is 500)", selected()$sum_stats))
-      )
+      echarts4rOutput(outputId = ns("poke_stats"), height = "700px")
     })
   })
 }

inst/showcase/modules/mod_poke_type.R

@@ -21,7 +21,19 @@ get_type_colors <- function(type) {
 mod_poke_type_ui <- function(id) {
   ns <- NS(id)
   tagList(
-    p(class = "font-extrabold text-2xl uppercase my-2", "Types"),
+    div(
+      class = "flex flex-row gap-2",
+      p(class = "font-extrabold text-2xl uppercase", "Types"),
+      tooltip(
+        tags$sup(icon("question", size = "0.75em")),
+        content = HTML("A pokemon has at least one type but may have several. <br/>
+        Each type has weakness/strength against another one. <br/>
+        For instance, fire is weak against water."),
+        color = "foreground",
+        placement = "right",
+        showArrow = TRUE
+      )
+    ),
     uiOutput(ns("poke_types"))
   )
 }
@@ -63,12 +75,21 @@ mod_poke_type_server <- function(id, selected) {
 
         poke_color <- get_type_colors(type_name)
 
-        damages_table <- data.frame(
-
-        )
-
         table(
-
+          removeWrapper = TRUE,
+          data.frame(
+            Damages = c("2X", "1/2", "0"),
+            `Damages from` = c(
+              paste(double_damage_from, collapse = ", "),
+              paste(half_damage_from, collapse = ", "),
+              paste(no_damage_from, collapse = ", ")
+            ),
+            `Damages to` = c(
+              paste(double_damage_to, collapse = ", "),
+              paste(half_damage_to, collapse = ", "),
+              paste(no_damage_to, collapse = ", ")
+            )
+          )
         )
 
       })

js/src/output.css

@@ -1607,10 +1607,6 @@ video {
   place-content: center;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .items-start {
   align-items: flex-start;
 }
@@ -1639,6 +1635,10 @@ video {
   justify-content: space-between;
 }
 
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
 .\!gap-0 {
   gap: 0px !important;
 }