BGA_dice

[WetDogIsHappy]

I want to work with the bga_dice tool that is available, but can’t seem to get it right.
Is there an existing game that is using this tool?
Somehow I am missing something in my code.

[edward_green]

Hello! I would recommend reading the code on the bga-dice wiki page, it gives you step by step how to get it up and running. I also found the demo hugely helpful, it has multiple examples focusing on different features and you can read the code behind it using your browser's developer tools. The documentation is great for getting into all the technical details.

Was there a specific error or issue you were having? Any specifics you can give might help identify the issue.

Wiki: https://en.doc.boardgamearena.com/BgaDice
Demo: https://x.boardgamearena.net/data/game- ... index.html
Documentation: https://x.boardgamearena.net/data/game- ... index.html

[WetDogIsHappy]

Good advice with the demo/browser exam.

There appears to be a difference in the css created/used by the demo and what you get in Studio.


Here is my css

/* define 6d dice location and colored rows of 1-6 die*/
.colored-die .bga-dice_die-face {
background: url(img/dice.jpg);
background-size: 600% 600%;
border-radius: 5px;
}

/* next bit is supplied by the production demo page
but not in studio
I copied the demo page css bits into my studio project and it
works great
*/
.colored-die[data-color="red"] .bga-dice_die-face {
background-position-y: 0%;
}

.colored-die[data-color="yellow"] .bga-dice_die-face {
background-position-y: 20%;
}

.colored-die[data-color="green"] .bga-dice_die-face {
background-position-y: 40%;
}

.colored-die[data-color="blue"] .bga-dice_die-face {
background-position-y: 60%;
}

.colored-die[data-color="pink"] .bga-dice_die-face {
background-position-y: 80%;
}

.colored-die[data-color="white"] .bga-dice_die-face {
background-position-y: 100%;
}


.bga-dice_die .bga-dice_die-face[data-face="1"] {
background-position-x: 0% !important;
}

.bga-dice_die .bga-dice_die-face[data-face="2"] {
background-position-x: 20% !important;
}

.bga-dice_die .bga-dice_die-face[data-face="3"] {
background-position-x: 40% !important;
}

.bga-dice_die .bga-dice_die-face[data-face="4"] {
background-position-x: 60% !important;
}

.bga-dice_die .bga-dice_die-face[data-face="5"] {
background-position-x: 80% !important;
}

.bga-dice_die .bga-dice_die-face[data-face="6"] {
background-position-x: 100% !important;
}