diff --git a/.github/workflows/github-action-pages.yml b/.github/workflows/github-action-pages.yml index fcc5fc5..1c947c8 100644 --- a/.github/workflows/github-action-pages.yml +++ b/.github/workflows/github-action-pages.yml @@ -39,6 +39,8 @@ jobs: install.packages("knitr", dependencies=TRUE) install.packages("kableExtra", dependencies=TRUE) install.packages("jsonlite", dependencies=TRUE) + install.packages("ggplot2", dependencies=TRUE) + install.packages("shiny", dependencies=TRUE) shell: Rscript {0} - name: Render Site run: Rscript -e 'rmarkdown::render_site(input = "webBuild", output_format = "all", envir = parent.frame(), quiet = FALSE, encoding = "UTF-8")' diff --git a/webBuild/_navbar.yml b/webBuild/_navbar.yml index 9dab69d..89d6128 100644 --- a/webBuild/_navbar.yml +++ b/webBuild/_navbar.yml @@ -4,16 +4,16 @@ type: inverse left: - text: "Design Document" menu: - - text: "Gameplay" - href: ./gameplay.html - - text: "Moodboard" - href: ./moodboard.html + - text: "Gameplay" + href: ./gameplay.html + - text: "Concept Art" + href: ./conceptart.html - text: "Math" menu: - - text: "Game Logic" - href: ./gamelogic.html - - text: "Simulations" - href: ./simulations.html + - text: "Game Logic" + href: ./gamelogic.html + - text: "Simulations" + href: ./simulations.html - text: "Jelle's Test" href: ./jelle-test/index.html right: diff --git a/webBuild/conceptart.Rmd b/webBuild/conceptart.Rmd new file mode 100644 index 0000000..713cfe1 --- /dev/null +++ b/webBuild/conceptart.Rmd @@ -0,0 +1,15 @@ +--- +title: "Concept Art" +output: html_document +runtime: shiny +--- +```{r setup, include=FALSE} +knitr::opts_chunk$set(echo = FALSE) +``` +
+ +## Gallery +```{r, results='asis'} +source("functions.R") +createImageGalery('./images/conceptart') +``` \ No newline at end of file diff --git a/webBuild/data/gamelogic-pointstbl.csv b/webBuild/data/gamelogic-pointstbl.csv index e8ab0f0..46d50f0 100644 --- a/webBuild/data/gamelogic-pointstbl.csv +++ b/webBuild/data/gamelogic-pointstbl.csv @@ -1,14 +1,14 @@ "Image","Symbol","Points","Notes" -![](./images/die1.png),"1","20"," " -![](./images/die2.png),"2","20"," " -![](./images/die3.png),"3","20"," " -![](./images/die4.png),"4","40"," " -![](./images/die5.png),"5","40"," " -![](./images/die6.png),"6","60"," " -![](./images/die7.png),"7","60"," " -![](./images/die8.png),"8","60"," " -![](./images/die9.png),"9","120"," " -![](./images/die10.png),"10","0","Only appears in dice string" -![](./images/die11.png),"11","0","Only appears in reel string" -![](./images/die12.png),"12","0","Only appears in reel string" -![](./images/die13.png),"13","0","Only appears in reel string" +![](./images/symbols/die1.png),"1","20"," " +![](./images/symbols/die2.png),"2","20"," " +![](./images/symbols/die3.png),"3","20"," " +![](./images/symbols/die4.png),"4","40"," " +![](./images/symbols/die5.png),"5","40"," " +![](./images/symbols/die6.png),"6","60"," " +![](./images/symbols/die7.png),"7","60"," " +![](./images/symbols/die8.png),"8","60"," " +![](./images/symbols/die9.png),"9","120"," " +![](./images/symbols/die10.png),"10","0","Only appears in dice string" +![](./images/symbols/die11.png),"11","0","Only appears in reel string" +![](./images/symbols/die12.png),"12","0","Only appears in reel string" +![](./images/symbols/die13.png),"13","0","Only appears in reel string" diff --git a/webBuild/data/simulations-round-100.csv b/webBuild/data/simulations-round-100.csv index 9ffa1f6..a903b04 100644 --- a/webBuild/data/simulations-round-100.csv +++ b/webBuild/data/simulations-round-100.csv @@ -1,4 +1,4 @@ -,session_id,round_id,round_index,stake,running_rtp,totalWon,totalPoints,compensator_value,compensator_mode,freespin_color,freespin_round,freespin_chain_counter +count,session_id,round_id,round_index,stake,running_rtp,totalWon,totalPoints,compensator_value,compensator_mode,freespin_color,freespin_round,freespin_chain_counter 0,1,0,,100.0,0.0,0.0,20.0,96.0,normal,,False,0 1,1,1,,100.0,0.0,0.0,60.0,192.0,normal,,False,0 2,1,2,,100.0,0.0,0.0,60.0,288.0,normal,,False,0 diff --git a/webBuild/data/simulations-round-example.csv b/webBuild/data/simulations-round-example.csv index d369e63..d0d0ee3 100644 --- a/webBuild/data/simulations-round-example.csv +++ b/webBuild/data/simulations-round-example.csv @@ -1,4 +1,4 @@ -,session_id,round_id,round_index,stake,running_rtp,totalWon,totalPoints,compensator_value,compensator_mode,freespin_color,freespin_round,freespin_chain_counter +count,session_id,round_id,round_index,stake,running_rtp,totalWon,totalPoints,compensator_value,compensator_mode,freespin_color,freespin_round,freespin_chain_counter 0,1,0,,100.0,0.0,0.0,20.0,96.0,normal,,False,0 1,1,1,,100.0,0.0,0.0,60.0,192.0,normal,,False,0 2,1,2,,100.0,0.0,0.0,60.0,288.0,normal,,False,0 diff --git a/webBuild/functions.R b/webBuild/functions.R index bf26774..bf9dbc2 100644 --- a/webBuild/functions.R +++ b/webBuild/functions.R @@ -35,14 +35,53 @@ printJson <- function(path) { cat("```", file_content, "\n```", sep = "\n") } -createGraph <- function(path, title_name, column_names, column_types, x_value, y_value) { - library(readr) +createCsvGraph <- function(path, title_name, x_name, y_name, y_value, line_color) { library(ggplot2) - data <- read_csv(path, col_types = column_types) - ggplot(data, aes(x = 1:nrow(data), y = y_value)) + - geom_point() + - labs(title = title_name, - x = "Rounds", - y = "Compensator Value") + data <- read.csv(path) + ggplot(data, aes(x = 1:nrow(data), y = !!as.name(y_value), color = line_color)) + + geom_line() + + labs(title = title_name, x = x_name, y = y_name) + + scale_color_manual(values = line_color) + # Set the line color manually + theme(legend.position = "none") # Remove the legend for color +} + +createImageGalery <- function(path) { + library(shiny) + + image_files <- list.files(path, pattern = "\\.(jpg|jpeg|png|gif)$", full.names = TRUE) + + # Generate HTML code for the table dynamically + htmlTable <- "" + for (i in seq_along(image_files)) { + if ((i - 1) %% 3 == 0) { + htmlTable <- paste0(htmlTable, "\n") + } + htmlTable <- paste0( + htmlTable,"\n" + ) + if (i %% 3 == 0 || i == length(image_files)) { + htmlTable <- paste0(htmlTable, "\n") + } + } + htmlTable <- paste0(htmlTable, "\n") + + # Create JavaScript code for opening popup + jsCode <- " + + " + + # Combine HTML and JavaScript code + combinedCode <- paste0(jsCode, htmlTable) + + # Create Shiny tags$div with HTML code + shiny::tags$div( + HTML(combinedCode) + ) } diff --git a/webBuild/images/conceptart/Dragon dice bonus.jpg b/webBuild/images/conceptart/Dragon dice bonus.jpg new file mode 100644 index 0000000..a580a1b Binary files /dev/null and b/webBuild/images/conceptart/Dragon dice bonus.jpg differ diff --git a/webBuild/images/conceptart/DragonDicePortraitSketch_1_1.jpg b/webBuild/images/conceptart/DragonDicePortraitSketch_1_1.jpg new file mode 100644 index 0000000..ab3a796 Binary files /dev/null and b/webBuild/images/conceptart/DragonDicePortraitSketch_1_1.jpg differ diff --git a/webBuild/images/conceptart/Dragon_Dice_Character_Design_.jpg b/webBuild/images/conceptart/Dragon_Dice_Character_Design_.jpg new file mode 100644 index 0000000..c3d5472 Binary files /dev/null and b/webBuild/images/conceptart/Dragon_Dice_Character_Design_.jpg differ diff --git a/webBuild/images/conceptart/White_Dragon_CharacterDesign.jpg b/webBuild/images/conceptart/White_Dragon_CharacterDesign.jpg new file mode 100644 index 0000000..a9a056f Binary files /dev/null and b/webBuild/images/conceptart/White_Dragon_CharacterDesign.jpg differ diff --git a/webBuild/images/conceptart/chanchuBonus.jpg b/webBuild/images/conceptart/chanchuBonus.jpg new file mode 100644 index 0000000..bd1c207 Binary files /dev/null and b/webBuild/images/conceptart/chanchuBonus.jpg differ diff --git a/webBuild/images/conceptart/chanchuBonusPortrait.jpg b/webBuild/images/conceptart/chanchuBonusPortrait.jpg new file mode 100644 index 0000000..ff9e3ef Binary files /dev/null and b/webBuild/images/conceptart/chanchuBonusPortrait.jpg differ diff --git a/webBuild/images/conceptart/dragonBonus1Landscape.jpg b/webBuild/images/conceptart/dragonBonus1Landscape.jpg new file mode 100644 index 0000000..c040308 Binary files /dev/null and b/webBuild/images/conceptart/dragonBonus1Landscape.jpg differ diff --git a/webBuild/images/conceptart/dragonBonus1Portrait.jpg b/webBuild/images/conceptart/dragonBonus1Portrait.jpg new file mode 100644 index 0000000..c917513 Binary files /dev/null and b/webBuild/images/conceptart/dragonBonus1Portrait.jpg differ diff --git a/webBuild/images/conceptart/dragonBonus2Landscape.jpg b/webBuild/images/conceptart/dragonBonus2Landscape.jpg new file mode 100644 index 0000000..e5a04da Binary files /dev/null and b/webBuild/images/conceptart/dragonBonus2Landscape.jpg differ diff --git a/webBuild/images/conceptart/dragonBonus2Portrait.jpg b/webBuild/images/conceptart/dragonBonus2Portrait.jpg new file mode 100644 index 0000000..f504d1b Binary files /dev/null and b/webBuild/images/conceptart/dragonBonus2Portrait.jpg differ diff --git a/webBuild/images/conceptart/dragonDiceLandscapeSketch1_1.jpg b/webBuild/images/conceptart/dragonDiceLandscapeSketch1_1.jpg new file mode 100644 index 0000000..4f90e1e Binary files /dev/null and b/webBuild/images/conceptart/dragonDiceLandscapeSketch1_1.jpg differ diff --git a/webBuild/images/conceptart/dragonDiceLandscapeSketch1_2.jpg b/webBuild/images/conceptart/dragonDiceLandscapeSketch1_2.jpg new file mode 100644 index 0000000..ca30c87 Binary files /dev/null and b/webBuild/images/conceptart/dragonDiceLandscapeSketch1_2.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusBlue1.jpg b/webBuild/images/conceptart/freespinBonusBlue1.jpg new file mode 100644 index 0000000..133173e Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusBlue1.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusBlue2.jpg b/webBuild/images/conceptart/freespinBonusBlue2.jpg new file mode 100644 index 0000000..c377534 Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusBlue2.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusBluePortrait.jpg b/webBuild/images/conceptart/freespinBonusBluePortrait.jpg new file mode 100644 index 0000000..697635d Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusBluePortrait.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusGreen.jpg b/webBuild/images/conceptart/freespinBonusGreen.jpg new file mode 100644 index 0000000..c2b6fe4 Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusGreen.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusGreenPortrait.jpg b/webBuild/images/conceptart/freespinBonusGreenPortrait.jpg new file mode 100644 index 0000000..aee2d1c Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusGreenPortrait.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusRed.jpg b/webBuild/images/conceptart/freespinBonusRed.jpg new file mode 100644 index 0000000..0b32a64 Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusRed.jpg differ diff --git a/webBuild/images/conceptart/freespinBonusRedPortrait.jpg b/webBuild/images/conceptart/freespinBonusRedPortrait.jpg new file mode 100644 index 0000000..7964141 Binary files /dev/null and b/webBuild/images/conceptart/freespinBonusRedPortrait.jpg differ diff --git a/webBuild/images/conceptart/terracottaBonuLandscape.jpg b/webBuild/images/conceptart/terracottaBonuLandscape.jpg new file mode 100644 index 0000000..e9c212b Binary files /dev/null and b/webBuild/images/conceptart/terracottaBonuLandscape.jpg differ diff --git a/webBuild/images/conceptart/terracottaBonus2Landscape.jpg b/webBuild/images/conceptart/terracottaBonus2Landscape.jpg new file mode 100644 index 0000000..3b0f3cb Binary files /dev/null and b/webBuild/images/conceptart/terracottaBonus2Landscape.jpg differ diff --git a/webBuild/images/conceptart/terracottaBonus2Portrait.jpg b/webBuild/images/conceptart/terracottaBonus2Portrait.jpg new file mode 100644 index 0000000..ca8d87e Binary files /dev/null and b/webBuild/images/conceptart/terracottaBonus2Portrait.jpg differ diff --git a/webBuild/images/conceptart/terracottaBonusPortrait.jpg b/webBuild/images/conceptart/terracottaBonusPortrait.jpg new file mode 100644 index 0000000..fc60b38 Binary files /dev/null and b/webBuild/images/conceptart/terracottaBonusPortrait.jpg differ diff --git a/webBuild/images/die1.png b/webBuild/images/symbols/die1.png similarity index 100% rename from webBuild/images/die1.png rename to webBuild/images/symbols/die1.png diff --git a/webBuild/images/die10.png b/webBuild/images/symbols/die10.png similarity index 100% rename from webBuild/images/die10.png rename to webBuild/images/symbols/die10.png diff --git a/webBuild/images/die11.png b/webBuild/images/symbols/die11.png similarity index 100% rename from webBuild/images/die11.png rename to webBuild/images/symbols/die11.png diff --git a/webBuild/images/die12.png b/webBuild/images/symbols/die12.png similarity index 100% rename from webBuild/images/die12.png rename to webBuild/images/symbols/die12.png diff --git a/webBuild/images/die13.png b/webBuild/images/symbols/die13.png similarity index 100% rename from webBuild/images/die13.png rename to webBuild/images/symbols/die13.png diff --git a/webBuild/images/die2.png b/webBuild/images/symbols/die2.png similarity index 100% rename from webBuild/images/die2.png rename to webBuild/images/symbols/die2.png diff --git a/webBuild/images/die3.png b/webBuild/images/symbols/die3.png similarity index 100% rename from webBuild/images/die3.png rename to webBuild/images/symbols/die3.png diff --git a/webBuild/images/die4.png b/webBuild/images/symbols/die4.png similarity index 100% rename from webBuild/images/die4.png rename to webBuild/images/symbols/die4.png diff --git a/webBuild/images/die5.png b/webBuild/images/symbols/die5.png similarity index 100% rename from webBuild/images/die5.png rename to webBuild/images/symbols/die5.png diff --git a/webBuild/images/die6.png b/webBuild/images/symbols/die6.png similarity index 100% rename from webBuild/images/die6.png rename to webBuild/images/symbols/die6.png diff --git a/webBuild/images/die7.png b/webBuild/images/symbols/die7.png similarity index 100% rename from webBuild/images/die7.png rename to webBuild/images/symbols/die7.png diff --git a/webBuild/images/die8.png b/webBuild/images/symbols/die8.png similarity index 100% rename from webBuild/images/die8.png rename to webBuild/images/symbols/die8.png diff --git a/webBuild/images/die9.png b/webBuild/images/symbols/die9.png similarity index 100% rename from webBuild/images/die9.png rename to webBuild/images/symbols/die9.png diff --git a/webBuild/moodboard.Rmd b/webBuild/moodboard.Rmd index 88fc670..f7a3435 100644 --- a/webBuild/moodboard.Rmd +++ b/webBuild/moodboard.Rmd @@ -7,7 +7,7 @@ knitr::opts_chunk$set(echo = FALSE) ```
-## Explanation +## Gallery ```{r child = './data/gameplay-expl.md'} ``` diff --git a/webBuild/scripts/conceptart.css b/webBuild/scripts/conceptart.css new file mode 100644 index 0000000..20d40e9 --- /dev/null +++ b/webBuild/scripts/conceptart.css @@ -0,0 +1,98 @@ +@import url( +'https://fonts.googleapis.com/css2?family=Yaldevi:wght@200;300;400;500; +600;700&display=swap'); + +.my-body { + all: initial; + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} +/* Styline the Heading of Image Gallery */ +.my-body .heading{ + display: flex; + justify-content: center; + align-items: center; + font-size: 30px; + background: #121FCF; + background: linear-gradient(to right, #0e85e0 0%, #26ff1a 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +/* Styling gallery section where all images are */ +.my-body .gallery { + width: 90%; + margin:0 auto; + display:grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-gap: 20px; + justify-content:center; + align-items: center; +} + +/* Styling Particular Image */ +.my-body .gallery-img { + width: 200px; + height: 200px; + cursor: pointer; + transition: transform 0.2s; +} +/* onHover image will expand little bit */ +.my-body .gallery-img:hover { + transform: scale(1.1); + cursor: zoom-in; +} +/* This section will be seen when we click on image */ +.my-body .image-popup-container { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); +} + +/* close button when we want to close the bigger image */ +.my-body .close-button { + position: absolute; + top: 20px; + right: 50px; + font-size:60px; + color: #fff; + cursor: pointer; +} + +.my-body .close-button:hover{ + color: red; +} + +/* when we click on the image it will expand in bigger size and will displayed +at middle of screen */ +.my-body #popupImage { + display: block; + max-width: 80%; + max-height: 80%; + margin: 0 auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* Making images more responsive for smaller size device */ +.my-body @media (max-width:670px) { + .gallery{ + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + grid-gap: 10px; + } + .gallery-img{ + width:150px; + height: 150px; + } + + .heading{ + font-size: 20px; + } +} \ No newline at end of file diff --git a/webBuild/scripts/gallery.js b/webBuild/scripts/gallery.js new file mode 100644 index 0000000..f17e20c --- /dev/null +++ b/webBuild/scripts/gallery.js @@ -0,0 +1,31 @@ + +function addImages() { + images.forEach((image) => { + let container = document.getElementById('imagesContainer'); + let img = document.createElement('img'); + img.src = image; + img.classList.add('gallery-img'); + img.onclick = function() { + showImage(img.src); + }; + container.appendChild(img); + }); +} + +function showImage(imageSrc) { + let popupImage = document.getElementById("popupImage"); + popupImage.src = imageSrc; + + let imagePopup = document.getElementById("imagePopupContainer"); + imagePopup.style.display = "block"; + document.body.style.overflow = "hidden"; +} + +// function to hide the image when we click on cross button +function closeImage() { + let imagePopup = document.getElementById("imagePopupContainer"); + imagePopup.style.display = "none"; + document.body.style.overflow = "auto"; +} + +addImages(); \ No newline at end of file diff --git a/webBuild/simulations.Rmd b/webBuild/simulations.Rmd index 8293c89..cdc474d 100644 --- a/webBuild/simulations.Rmd +++ b/webBuild/simulations.Rmd @@ -3,48 +3,14 @@ title: "Simulations" output: html_document --- ```{r setup, include=FALSE} -knitr::opts_chunk$set(echo = TRUE) +knitr::opts_chunk$set(echo = FALSE) ```
## Compensator -### Round Data - Stake €1 +### Round Data ```{r, results='asis'} source("functions.R") -library(cols) -col_names = c( - "", - "session_id", - "round_id", - "round_index", - "stake", - "running_rtp", - "totalWon", - "totalPoints", - "compensator_value", - "compensator_mode", - "freespin_color", - "freespin_round", - "freespin_chain_counter" -) - -# use col_double(), col_logical() (boolean), col_logical() (string) or col_skip() (don't check) -col_types = cols( - ...1 = col_double(), - session_id = col_double(), - round_id = col_double(), - round_index = col_logical(), - stake = col_double(), - running_rtp = col_double(), - totalWon = col_double(), - totalPoints = col_double(), - compensator_value = col_double(), - compensator_mode = col_character(), - freespin_color = col_logical(), - freespin_round = col_logical(), - freespin_chain_counter = col_double() -) - -createGraph('./data/simulations-round-example.csv', 'Round Data Graph', col_names, col_types, row_number(), "compensator_value") +createCsvGraph('./data/simulations-round-100.csv', 'Stake €1.00', "Rounds", "Compensator Value", "compensator_value", "#158CBA") ``` \ No newline at end of file