NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Roll20 Custom scripts
// @namespace http://tampermonkey.net/
// @version 2019.12.03.0
// @description Sent direct file by URL in chat + Theme choice menu
// @author Ulyrion
// @include https://app.roll20.net/editor*
// @include https://app.roll20.net/campaigns/chatarchive*
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// @license GPL-3.0-or-later
// ==/UserScript==
(function() {
'use strict';
//------------------------------------------//
//------------- Inject CSS -----------------//
//------------------------------------------//
/*
(function(){
const el = document.createElement("link");
el.rel = "stylesheet";
el.href = "http://sda-campagne.fr/misc/roll20-strahd.css";
document.head.appendChild(el)
})();
*/
var css =`
@font-face {
font-family: "greek";
src: url('http://sda-campagne.fr/misc/greek_theme/dalek.ttf');
font-weight: normal;
font-style: normal;
}
#hand, #hand-right, #details-img {
display: none;
}
#loading-overlay {
background: url('http://sda-campagne.fr/misc/loader.gif');
background-repeat: no-repeat;
background-position: center center;
background-color: #18191b;
width: 100% !important;
z-index: 99999;
color: black;
}
#loading-overlay::after {
content: '';
background: url('http://sda-campagne.fr/misc/loading_logo.png');
background-repeat: no-repeat;
background-position: center 50px;
background-color: transparent;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#loading-overlay * {
display: none;
}
#loading-overlay > h1 {
margin-top: 150px !important;
display: block;
margin: auto;
}
#themeTool img {
opacity: 0.6;
}
#macrobar {
height: unset;
margin-bottom: 0;
opacity: 0;
transition: all ease-in-out 0.3s;
width: 100%;
box-shadow: 0 -5px 8px -5px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4F5052), to(#4F5052), color-stop(0.97, #111));
background-image: -moz-linear-gradient(-90deg, #4F5052, #111 97%, #4F5052);
background-image: -o-linear-gradient(top, #4F5052 0%, #111 100%);
background-image: -ms-linear-gradient(top, #4F5052 0%, #111 100%);
}
#macrobar:hover {
opacity: 1;
}
#durationTooltip {
transform: translateX(-10px);
}
.tokenselected #secondary-toolbar {
display: block !important;
opacity: 1;
}
.tokenselected #secondary-toolbar .mode.tokenactions:hover {
right: 0;
opacity: 1;
}
.tokenselected #secondary-toolbar .mode.tokenactions {
right: -299px;
opacity: 1;
}
#secondary-toolbar .mode.tokenactions {
padding: 0;
margin: 0;
transition: all ease-in-out 0.8s;
display: block !important;
opacity: 0;
position: fixed;
width: 300px;
bottom: 0;
top: 34px;
background: #2f271f;
overflow: auto;
}
#secondary-toolbar .mode.tokenactions li {
padding: 10px;
margin: 0;
border-right: 0;
display: inline-block;
text-align: center;
line-height: 22px;
font-size: 22px;
color: #999;
height: 30px;
width: calc(100% - 20px);
height: calc(100% - 24px);
}
#secondary-toolbar .mode.tokenactions li .btn {
display: block;
width: calc(100% - 20px);
background: #3c3b3b;
border: none;
color: white;
text-shadow: none;
background: url('http://sda-campagne.fr/misc/button_dark.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#secondary-toolbar .mode.tokenactions li .btn:hover {
background: url('http://sda-campagne.fr/misc/button_dark_on.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#editor-deco-left, #editor-deco-right, #editor-deco-left-2, #editor-deco-right-2, #circle-container, #wide-view {
display: none;
}
div#editor-wrapper.undisplayed > * {
display: none;
}
div#editor-wrapper.undisplayed > img {
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
margin-top: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 50%;
left: 50%;
margin: 0;
}
div#editor-wrapper > div#advancedJournal {
display: none;
width: calc(100% - 120px);
height: calc(100% - 120px);
position: absolute;
top: 0;
left: 0;
padding: 60px;
}
div#editor-wrapper.openAdvJournal > * {
display: none;
}
div#editor-wrapper.openAdvJournal > div#advancedJournal {
display: block;
}
div#editor-wrapper > div#advancedJournal li.journalitem,
div#editor-wrapper > div#advancedJournal .token,
div#editor-wrapper > div#advancedJournal .name,
div#editor-wrapper > div#advancedJournal .namecontainer{
position: initial;
}
div#editor-wrapper > div#advancedJournal > ol.dd-list > li.journalitem {
display: inline-block;
margin-top: 20px;
}
div#editor-wrapper > div#advancedJournal > ol.dd-list > li.dd-folder {
display: block;
width: 100%;
}
div#editor-wrapper > div#advancedJournal > ol.dd-list > li.dd-folder:nth-child(2n+1) {
background: #dedede;
}
div#editor-wrapper > div#advancedJournal li.dd-folder ol.dd-list {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
div#editor-wrapper > div#advancedJournal .token,
div#editor-wrapper > div#advancedJournal .name {
width: 100%;
text-align: center;
}
div#editor-wrapper > div#advancedJournal .namecontainer {
width: 100%;
text-align: center;
}
div#editor-wrapper > div#advancedJournal .dd-content {
-ms-box-orient: vertical;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: end;
height: 100%;
}
div#editor-wrapper > div#advancedJournal img {
max-width: none;
max-height: none;
}
div#editor-wrapper > div#advancedJournal li.dd-folder {
border-bottom: 1px solid rgb(221, 221, 221);;
}
div#editor-wrapper > div#advancedJournal li > button {
display: none;
}
.theme-strahd #themeTool img {
opacity: 1;
}
.theme-strahd #initiativedialog {
border: none;
background: transparent;
width: 180px !important;
overflow: visible;
}
.theme-strahd #initiativedialog > div.ui-resizable-handle {
display: none !important;
}
.theme-strahd #initiativedialog .ui-dialog-titlebar {
background: url('http://sda-campagne.fr/misc/title_bar_init.png');
background-repeat: no-repeat;
background-size: 100% 100%;
border: none;
text-align: center;
margin: auto;
}
.theme-strahd #initiativedialog .ui-dialog-title {
float: unset;
color: #b8b4ae;
font-weight: normal;
}
.theme-strahd #initiativedialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
background: #bfbbb4;
opacity: 1;
right: 0;
margin: 0;
top: 7px;
border-radius: 50%;
border: 1px solid #000;
box-shadow: 0.5px 0.5px 0 1px #716f6c;
padding: 0;
color: black;
}
.theme-strahd #initiativedialog .ui-dialog-buttonpane {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
right: 0;
transform: translateX(100%);
background: none;
border: none;
box-shadow: none;
display: none;
}
.theme-strahd #initiativedialog:hover .ui-dialog-buttonpane {
display: block;
}
.theme-strahd #initiativedialog .ui-dialog-buttonset {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.theme-strahd #initiativedialog .ui-dialog-buttonpane button {
display: block;
margin: 0;
padding: 3px;
background: white;
border: 0;
font-size: initial;
box-shadow: none;
border-radius: 0;
color: #8F0A0A;
width: 22px;
height: 22px;
opacity: 0.8;
}
.theme-strahd #initiativedialog #initiativewindow ul p {
display: none;
}
.theme-strahd #initiativedialog:hover #initiativewindow ul p {
display: block;
color: whitesmoke;
margin: 10px;
}
.theme-strahd #initiativewindow {
padding: 5px 2px;
overflow-x: auto;
border: none;
margin: 0;
padding: 0;
width: 100% !important;
height: unset !important;
display: block !important;
}
.theme-strahd div:hover > #initiativewindow {
background: url('http://sda-campagne.fr/misc/initiative_main_pane.png');
background-size: calc(100% + 15px) calc(100% + 30px);
background-repeat: no-repeat;
box-shadow: 10px 10px 10px -8px black;
}
.theme-strahd #initiativewindow ul {
margin: 0;
padding: 0;
}
.theme-strahd #initiativewindow ul li.token {
min-height: 30px;
background: transparent;
border: none;
line-height: 20px;
color: #6f6f6f;
display: none !important;
}
.theme-strahd div:hover > #initiativewindow ul li.token {
display: block !important;
}
.theme-strahd #initiativewindow ul li.token span.name {
font-size: 16px;
padding-top: 4px;
text-shadow: 1px 1px 5px black;
position: absolute;
left: 50px;
width: calc(100% - 90px);
text-align: center;
line-height: 30px;
z-index: 0;
overflow: hidden;
white-space: nowrap;
}
.theme-strahd #initiativewindow ul li.token span.initiative {
background: black;
border-radius: 20px;
font-size: 16px;
text-align: center;
box-shadow: 0 0 5px;
margin-top: 5px;
}
.theme-strahd #initiativewindow ul li.token span.initiative input {
width: 20px;
font-size: 16px;
height: 20px;
position: relative;
top: -3px;
margin: 0;
background: transparent;
padding: 0;
border: none;
margin: 0;
font-weight: bold;
transform: translateY(3px);
text-align: center;
border-radius: 50%;
}
.theme-strahd #initiativewindow ul li.token:first-child {
background-color: transparent;
color: white;
display: block !important;
background: url('http://sda-campagne.fr/misc/initiative_single_pane.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.theme-strahd #initiativewindow ul li.token img {
max-width: 40px;
max-height: 40px;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
box-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
}
.theme-strahd #advancedJournal * {
color: white;
}
.theme-strahd #advancedJournal *:hover {
color: #b9711e;
}
.theme-strahd #editor-wrapper {
background: url("http://sda-campagne.fr/misc/greek_theme/brown-background-9.jpg") repeat scroll 0% 0%;
overflow: hidden;
}
.theme-strahd #rightsidebar {
background: url('https://3.bp.blogspot.com/-os_Owgatz4s/UzMNXHD7--I/AAAAAAAAF84/zs_KkMFmjDo/s1600/repeating-gothic-background.jpg');
border-radius: 0;
box-shadow: 0 0 0 5px #742d2d, 2px 2px 10px 0 black, 2px 2px 10px 0 black, inset 0 0 10px -1px black;
}
.theme-strahd #rightsidebar > div {
background: transparent url("http://sda-campagne.fr/misc/white-paper-background.jpg") !important;
}
.theme-strahd #rightsidebar .ui-tabs-panel {
top: 37px;
}
.theme-strahd #rightsidebar #textchat .content {
background: transparent url("http://sda-campagne.fr/misc/white-paper-background.jpg") !important;
box-shadow: 25px 0px 10px -20px #1a1816 inset, -25px 0px 10px -20px #1a1816 inset;
padding: 0;
}
.theme-strahd #rightsidebar ul.tabmenu {
position: absolute;
width: calc(100% - 5.2px);
border-radius:0;
box-shadow: inset 0 -5px 9px -5px #2e2e2e;
overflow: hidden;
border: 2px solid rgb(42, 42, 42);
background: #3b2d24;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4F5052), to(#4F5052), color-stop(0.97, #111));
background-image: -moz-linear-gradient(-90deg, #4F5052, #111 97%, #4F5052);
background-image: -o-linear-gradient(top, #4F5052 0%, #111 100%);
background-image: -ms-linear-gradient(top, #4F5052 0%, #111 100%);
}
.theme-strahd #rightsidebar .ui-tabs-nav li {
border-radius: 0;
}
.theme-strahd #rightsidebar .ui-tabs-nav li a {
color: #dadada;
}
.theme-strahd #rightsidebar .ui-tabs-nav li.ui-state-active a {
color: #272039;
}
.theme-strahd #rightsidebar .ui-tabs .ui-tabs-nav {
border-bottom: 0;
}
.theme-strahd #rightsidebar #textchat div.chatlogmessage.message.system {
color: #e9ddd9;
background: none;
box-shadow: 25px 0px 10px -20px #1a1816 inset, -25px 0px 10px -20px #1a1816 inset;
}
.theme-strahd #textchat {
box-shadow: 0 0 10px white;
}
.theme-strahd #textchat .message.you {
background: none !important;
}
.theme-strahd #textchat .message{
background: none !important;
}
.theme-strahd #textchat .message.system {
background: none !important;
}
.theme-strahd #textchat-input {
background: none;
width: 296px;
border: none;
}
.theme-strahd #textchat-input textarea {
resize: none;
background: rgb(203, 191, 191) url('http://sda-campagne.fr/misc/DandD-mini.png') no-repeat right;
box-shadow: 15px 15px 50px -10px rgb(83, 77, 77) inset, 1px 1px 10px rgb(84, 84, 84) inset;
border-width: 3px;
border-style: solid;
border-color: rgb(53, 52, 52) rgb(87, 85, 84) rgb(87, 85, 84) rgb(53, 52, 52);
color: #201f1f;
background-size: 50px;
}
.theme-strahd #floatingtoolbar {
border-radius: none;
border: none;
box-shadow: none;
background: transparent;
width: 50px;
background: #303030;
padding: 4px 0 0 0;
}
.theme-strahd #floatingtoolbar li {
border-bottom: none;
color: #444444;
}
.theme-strahd #floatingtoolbar li:hover,
.theme-strahd #floatingtoolbar li.activebutton {
color: #333;
background-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
border-radius: 50%;
}
.theme-greek #editor-wrapper::after {
content: '';
display: block;
width: 100%;
height: 51px;
position: fixed;
top: 0;
left: 0;
background-image: url('http://sda-campagne.fr/misc/frise.jpg');
background-repeat: repeat-x;
background-size: contain;
z-index: 20;
border-bottom: 2px solid #36555d;
box-shadow: 115px 45px 40px -40px black inset, -360px 20px 40px -40px black inset;
}
.theme-strahd div.ui-resizable-handle.ui-resizable-w{
display: none !important;
}
.theme-strahd #sidebarcontrol {
display: none;
}
.theme-strahd .av-controls .av-reconnect {
background-color: rgba(255,255,255,0.50);
line-height: 1.5em;
font-size: 20px;
border-radius: 50%;
}
.theme-strahd .av-controls .av-reconnect {
background-color: rgba(255,255,255,0.50);
line-height: 1.5em;
font-size: 20px;
border-radius: 50%;
}
.theme-strahd .av-controls .volume-controls {
background: none;
}
.theme-strahd .av-controls .volume-controls .vol-min,
.av-controls .volume-controls .mute-audio,
.av-controls .volume-controls .vol-max,
.av-controls .volume-controls .pause-video {
cursor: pointer;
height: 100%;
width: 30px;
display: inline-block;
background: #ffffffb3;
text-align: center;
border-radius: 50%;
}
.theme-strahd #menu-custom {
position: absolute;
width: 200px;
height: 40px;
top: 0;
left: calc(50% - 286px);
z-index: 1000;
display: block !important;
}
.theme-strahd #menu-custom #menu-custom-button {
cursor: pointer;
position: absolute;
width: 40px;
height: 40px;
top: -12px;
left: 90px;
z-index: 1000;
background-color: white;
background-image: url('http://sda-campagne.fr/misc/DandD-mini.png');
background-size: 40px;
background-position: center center;
background-repeat: no-repeat;
border-radius: 0 0 30px 30px;
padding: 10px 5px;
box-shadow: 0 0 0 5px #742d2d, 2px 2px 10px 0 black, 2px 2px 10px 0 black, inset 0 0 10px -1px black;
transition: all 0.4s ease-in-out;
border: 2px solid #531a1a;
}
.theme-strahd #menu-custom:hover #menu-custom-button {
opacity: 1;
top: 0;
background-image: url('http://sda-campagne.fr/misc/book.png');
background-size: 34px 32px;
}
.theme-strahd #menu-custom #menu-custom-content {
position: absolute;
top: 40px;
left: calc(50% - 280px);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.59), inset 0 0 40px rgba(0, 0, 0, 0.77), inset 0 10px 10px -8px black;
opacity: 0.4;
background: url('http://sda-campagne.fr/misc/journal.png');
background-position: bottom center;
width: 600px;
height: 0;
padding: 0;
background-size: cover;
transition: all 0.4s ease-in-out;
}
.theme-strahd #menu-custom #menu-custom-content * {
visibility: hidden;
}
.theme-strahd #menu-custom:hover #menu-custom-content *,
.theme-strahd #menu-custom.activated #menu-custom-content * {
visibility: initial;
}
.theme-strahd #menu-custom:hover #menu-custom-content {
height: 40px;
opacity: 1;
}
.theme-strahd #menu-custom.activated #menu-custom-content {
height: 80vh;
opacity: 1;
}
.theme-strahd #menu-custom #myNotes {
display: block;
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 60px);
padding: 0;
border: none;
left: 50px;
top: 30px;
background: transparent;
overflow: auto;
right: 50px;
color: #63451e;
font-style: oblique;
font-size: 14px;
}
.theme-strahd #link-rules {
display: block;
position: absolute;
width: 34px;
height: 32px;
bottom: 10px;
right: 14px;
z-index: 100;
opacity: 0;
background-color: #dbdbdb;
border-radius: 50%;
padding: 10px;
background-origin: content-box;
box-shadow: 2px 2px 10px #000000b3;
transition: all 0.4s ease-in-out;
}
.theme-strahd #menu-custom.activated #link-rules {
opacity: 1;
}
.theme-strahd .ui-dialog {
position: fixed !important;
background: url("http://sda-campagne.fr/misc/white-paper-background.jpg");
background-size: 100% 100%;
}
.theme-strahd #floatingtoolbar {
border: 2px solid #2a2a2a;
box-shadow: inset 0 0 10px black, inset -10px -10px 44px -10px black, 0 0 10px -3px white;
left: 0;
top: 0;
border-radius: 0 0 16px 0;
transition: all 0.3s ease-in-out;
}
.theme-strahd #floatingtoolbar div.submenu {
top: -10px;
}
.theme-strahd #floatingtoolbar > ul > li {
display: none;
border: none;
border-radius: 50%;
margin-bottom: 5px;
width: 30px;
height: 30px;
line-height: 27px;
background: black;
box-shadow: 1px 1px 9px, 5px 5px 5px -5px;
margin-left: 5px;
padding: 4px !important;
}
.theme-strahd #floatingtoolbar:hover > ul > li {
display: block;
}
.theme-strahd #floatingtoolbar > ul > li.activebutton {
display: block;
background: #b6b6b6;
}
.theme-strahd #tdviewport.custom {
width: 280px !important;
height: 280px !important;
top: 37px;
right: 20px;
left: initial;
z-index: 9999;
background-image: url("https://ns328286.ip-37-187-113.eu/ew/wallpapers/800x480/06308_800x480.jpg") !important;
background-size: 100% 100%;
box-shadow: 25px 0px 10px -20px #1a1816 inset, -25px 0px 10px -20px #1a1816 inset, 0px 25px 10px -20px #1a1816 inset, 0px -25px 10px -20px #1a1816 inset, 0 25px 25px black;
}
.theme-strahd #tdviewport.custom canvas {
width: 280px !important;
height: 280px !important;
}
.theme-strahd #page-toolbar .activepage {
background: #e0a970 !important;
}
.theme-strahd #page-toolbar .availablepage:hover {
background-color: rgba(221, 76, 29, 0.5) !important;
}
.theme-strahd #page-toolbar .handle {
background: #3b2d24 !important;
}
.theme-strahd .ui-tabs .ui-tabs-nav li:hover,
.theme-strahd .ui-tabs .ui-tabs-nav li a:hover {
background-color: #804705 !important;
}
.theme-strahd #splashScreen {
content: 'http://sda-campagne.fr/misc/wolf_wind.mp3';
}
.theme-greek #themeTool img {
opacity: 1;
}
.theme-greek #initiativedialog {
border: none;
background: transparent;
width: 180px !important;
overflow: visible;
}
.theme-greek #initiativedialog > div.ui-resizable-handle {
display: none !important;
}
.theme-greek #initiativedialog .ui-dialog-titlebar {
background: url('http://sda-campagne.fr/misc/title_bar_init.png');
background-repeat: no-repeat;
background-size: 100% 100%;
border: none;
text-align: center;
margin: auto;
}
.theme-greek #initiativedialog .ui-dialog-title {
float: unset;
color: #b8b4ae;
font-weight: normal;
}
.theme-greek #initiativedialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
background: #bfbbb4;
opacity: 1;
right: 0;
margin: 0;
top: 7px;
border-radius: 50%;
border: 1px solid #000;
box-shadow: 0.5px 0.5px 0 1px #716f6c;
padding: 0;
color: black;
}
.theme-greek #initiativedialog .ui-dialog-buttonpane {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
right: 0;
transform: translateX(100%);
background: none;
border: none;
box-shadow: none;
display: none;
}
.theme-greek #initiativedialog:hover .ui-dialog-buttonpane {
display: block;
}
.theme-greek #initiativedialog .ui-dialog-buttonset {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.theme-greek #initiativedialog .ui-dialog-buttonpane button {
display: block;
margin: 0;
padding: 3px;
background: white;
border: 0;
font-size: initial;
box-shadow: none;
border-radius: 0;
color: #8F0A0A;
width: 22px;
height: 22px;
opacity: 0.8;
}
.theme-greek #initiativedialog #initiativewindow ul p {
display: none;
}
.theme-greek #initiativedialog:hover #initiativewindow ul p {
display: block;
color: whitesmoke;
margin: 10px;
}
.theme-greek #initiativewindow {
padding: 5px 2px;
overflow-x: auto;
border: none;
margin: 0;
padding: 0;
width: 100% !important;
height: unset !important;
display: block !important;
}
.theme-greek div:hover > #initiativewindow {
background: url('http://sda-campagne.fr/misc/initiative_main_pane.png');
background-size: calc(100% + 15px) calc(100% + 30px);
background-repeat: no-repeat;
box-shadow: 10px 10px 10px -8px black;
}
.theme-greek #initiativewindow ul {
margin: 0;
padding: 0;
}
.theme-greek #initiativewindow ul li.token {
min-height: 30px;
background: transparent;
border: none;
line-height: 20px;
color: #6f6f6f;
display: none !important;
}
.theme-greek div:hover > #initiativewindow ul li.token {
display: block !important;
}
.theme-greek #initiativewindow ul li.token span.name {
font-size: 16px;
padding-top: 4px;
text-shadow: 1px 1px 5px black;
position: absolute;
left: 50px;
width: calc(100% - 90px);
text-align: center;
line-height: 30px;
z-index: 0;
overflow: hidden;
white-space: nowrap;
}
.theme-greek #initiativewindow ul li.token span.initiative {
background: black;
border-radius: 20px;
font-size: 16px;
text-align: center;
box-shadow: 0 0 5px;
margin-top: 5px;
}
.theme-greek #initiativewindow ul li.token span.initiative input {
width: 20px;
font-size: 16px;
height: 20px;
position: relative;
top: -3px;
margin: 0;
background: transparent;
padding: 0;
border: none;
margin: 0;
font-weight: bold;
transform: translateY(3px);
text-align: center;
border-radius: 50%;
}
.theme-greek #initiativewindow ul li.token:first-child {
background-color: transparent;
color: white;
display: block !important;
background: url('http://sda-campagne.fr/misc/initiative_single_pane.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.theme-greek #initiativewindow ul li.token img {
max-width: 40px;
max-height: 40px;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
box-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
}
.theme-greek #advancedJournal * {
color: white;
}
.theme-greek #advancedJournal *:hover {
color: #b9711e;
}
.theme-greek #editor-wrapper {
background: url("http://sda-campagne.fr/misc/greek_theme/seamless_marble_2.jpg") repeat scroll 0% 0%;
overflow: hidden;
box-shadow: 0 0 700px black inset, 0 0 700px black inset, 0 0 700px black inset;
}
.theme-greek #rightsidebar {
background: url('https://3.bp.blogspot.com/-os_Owgatz4s/UzMNXHD7--I/AAAAAAAAF84/zs_KkMFmjDo/s1600/repeating-gothic-background.jpg');
border-radius: 0;
box-shadow: 0 0 0 5px #742d2d, 2px 2px 10px 0 black, 2px 2px 10px 0 black, inset 0 0 10px -1px black;
}
.theme-greek #rightsidebar > div {
background: transparent url("http://sda-campagne.fr/misc/white-paper-background.jpg") !important;
}
.theme-greek #rightsidebar .ui-tabs-panel {
top: 37px;
}
.theme-greek #rightsidebar #textchat .content {
background: transparent url("http://sda-campagne.fr/misc/white-paper-background.jpg") !important;
box-shadow: 25px 0px 10px -20px #1a1816 inset, -25px 0px 10px -20px #1a1816 inset;
padding: 0;
}
.theme-greek #rightsidebar ul.tabmenu {
position: absolute;
width: calc(100% - 5.2px);
border-radius:0;
box-shadow: inset 0 -5px 9px -5px #2e2e2e;
overflow: hidden;
border: 2px solid rgb(42, 42, 42);
background: #3b2d24;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4F5052), to(#4F5052), color-stop(0.97, #111));
background-image: -moz-linear-gradient(-90deg, #4F5052, #111 97%, #4F5052);
background-image: -o-linear-gradient(top, #4F5052 0%, #111 100%);
background-image: -ms-linear-gradient(top, #4F5052 0%, #111 100%);
}
.theme-greek #rightsidebar .ui-tabs-nav li {
border-radius: 0;
}
.theme-greek #rightsidebar .ui-tabs-nav li a {
color: #dadada;
}
.theme-greek #rightsidebar .ui-tabs-nav li.ui-state-active a {
color: #272039;
}
.theme-greek #rightsidebar .ui-tabs .ui-tabs-nav {
border-bottom: 0;
}
.theme-greek #rightsidebar #textchat div.chatlogmessage.message.system {
color: #e9ddd9;
background: none;
box-shadow: 25px 0px 10px -20px #1a1816 inset, -25px 0px 10px -20px #1a1816 inset;
}
.theme-greek #textchat {
box-shadow: 0 0 10px white;
}
.theme-greek #textchat .message.you {
background: none !important;
}
.theme-greek #textchat .message{
background: none !important;
}
.theme-greek #textchat .message.system {
background: none !important;
}
.theme-greek #textchat-input {
background: none;
width: 296px;
border: none;
}
.theme-greek #textchat-input textarea {
resize: none;
background: rgb(203, 191, 191) url('http://sda-campagne.fr/misc/DandD-mini.png') no-repeat right;
box-shadow: 15px 15px 50px -10px rgb(83, 77, 77) inset, 1px 1px 10px rgb(84, 84, 84) inset;
border-width: 3px;
border-style: solid;
border-color: rgb(53, 52, 52) rgb(87, 85, 84) rgb(87, 85, 84) rgb(53, 52, 52);
color: #201f1f;
background-size: 50px;
}
.theme-greek #rightsidebar::after {
position: fixed;
top: 50px;
bottom: 0;
left: -100px;
width: 200px;
background: url('http://sda-campagne.fr/misc/greek_theme/column.png');
z-index: 6;
background-size: cover;
}
.theme-greek #editor-deco-left {
display: block;
position: fixed;
top: 50px;
bottom: 0;
left: -100px;
width: 200px;
background: url('http://sda-campagne.fr/misc/greek_theme/column.png');
z-index: 10;
background-size: cover;
}
.theme-greek #editor-deco-left-2 {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 200px;
background: url('http://sda-campagne.fr/misc/greek_theme/vase_deco_1.png');
z-index: 5;
background-size: 130px;
background-position: center bottom;
background-repeat: no-repeat;
opacity: 0.9;
}
.theme-greek #editor-deco-right {
display: block;
position: fixed;
top: 50px;
bottom: 0;
right: 210px;
width: 200px;
background: url('http://sda-campagne.fr/misc/greek_theme/column.png');
z-index: 10;
background-size: cover;
}
.theme-greek #editor-deco-right-2 {
display: block;
position: fixed;
top: 0;
bottom: 0;
right: 310px;
width: 200px;
background: url('http://sda-campagne.fr/misc/greek_theme/vase_deco_2.png');
z-index: 5;
background-size: 130px;
background-position: center bottom;
background-repeat: no-repeat;
opacity: 0.9;
}
.theme-greek #editor-wrapper::after {
content: '';
display: block;
width: 100%;
height: 51px;
position: fixed;
top: 0;
left: 0;
background-image: url('http://sda-campagne.fr/misc/frise.jpg');
background-repeat: repeat-x;
z-index: 10;
box-shadow: 0 5px 10px;
border-bottom: 2px solid #36555d;
}
.theme-greek div.ui-resizable-handle.ui-resizable-w{
display: none !important;
}
.theme-greek #sidebarcontrol {
display: none;
}
.theme-greek .av-controls .av-reconnect {
background-color: rgba(255,255,255,0.50);
line-height: 1.5em;
font-size: 20px;
border-radius: 50%;
}
.theme-greek .av-controls .av-reconnect {
background-color: rgba(255,255,255,0.50);
line-height: 1.5em;
font-size: 20px;
border-radius: 50%;
}
.theme-greek .av-controls .volume-controls {
background: none;
}
.theme-greek .av-controls .volume-controls .vol-min,
.av-controls .volume-controls .mute-audio,
.av-controls .volume-controls .vol-max,
.av-controls .volume-controls .pause-video {
cursor: pointer;
height: 100%;
width: 30px;
display: inline-block;
background: #ffffffb3;
text-align: center;
border-radius: 50%;
}
.theme-greek #menu-custom {
position: absolute;
width: 200px;
height: 40px;
top: 0;
left: calc(50% - 286px);
z-index: 1000;
display: block !important;
}
.theme-greek #menu-custom #menu-custom-button {
cursor: pointer;
position: absolute;
width: 80px;
height: 80px;
top: -12px;
left: 90px;
z-index: 1000;
border-radius: 50%;
box-shadow: 0 0 0 5px #742d2d, 2px 2px 10px 0 black, 2px 2px 10px 0 black, inset 0 0 10px -1px black;
transition: all 0.4s ease-in-out;
border: 2px solid #531a1a;
background: url('http://www.sda-campagne.fr/misc/greek_theme/lyre_shield.png');
background-size: cover;
background-position: center center;
}
.theme-greek #menu-custom #menu-custom-content {
position: absolute;
top: 50px;
left: calc(50% - 280px);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.59), inset 0 0 40px rgba(0, 0, 0, 0.77), inset 0 10px 10px -8px black;
opacity: 0.4;
background: url('http://sda-campagne.fr/misc/journal.png');
background-position: bottom center;
width: 600px;
height: 0;
padding: 0;
background-size: cover;
transition: all 0.4s ease-in-out;
}
.theme-greek #menu-custom #menu-custom-content * {
visibility: hidden;
}
.theme-greek #menu-custom:hover #menu-custom-content *,
.theme-greek #menu-custom.activated #menu-custom-content * {
visibility: initial;
}
.theme-greek #menu-custom:hover #menu-custom-content {
height: 40px;
opacity: 1;
}
.theme-greek #menu-custom.activated #menu-custom-content {
height: 80vh;
opacity: 1;
}
.theme-greek #menu-custom #myNotes {
display: block;
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 60px);
padding: 0;
border: none;
left: 50px;
top: 30px;
background: transparent;
overflow: auto;
right: 50px;
color: #63451e;
font-style: oblique;
font-size: 14px;
}
.theme-greek #link-rules {
display: block;
position: absolute;
width: 34px;
height: 32px;
bottom: 10px;
right: 14px;
z-index: 100;
opacity: 0;
background-color: #dbdbdb;
border-radius: 50%;
padding: 10px;
background-origin: content-box;
box-shadow: 2px 2px 10px #000000b3;
transition: all 0.4s ease-in-out;
}
.theme-greek #menu-custom.activated #link-rules {
opacity: 1;
}
.theme-greek .ui-dialog {
position: fixed !important;
background: url("http://sda-campagne.fr/misc/white-paper-background.jpg");
background-size: 100% 100%;
}
.theme-greek #floatingtoolbar {
width: 50px;
padding: 4px 0 0 0;
left: 0;
top: 0;
border-radius: 0 0 16px 0;
transition: all 0.3s ease-in-out;
background: #a28b79;
box-shadow: 10px 10px 12px -10px #000, inset -20px 0 20px #c1bdbd;
border-right: 6px solid #8b5433;
border-bottom: 6px solid #7b4b30;
border-left: 2px solid #4f3121;
border-top: 2px solid #4f3121;
}
.theme-greek #floatingtoolbar li {
border-bottom: none;
color: #75450f;
}
.theme-greek #floatingtoolbar li:hover,
.theme-greek #floatingtoolbar li.activebutton {
color: #333;
background-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
border-radius: 50%;
}
.theme-greek #floatingtoolbar div.submenu {
top: -10px;
}
.theme-greek #floatingtoolbar > ul > li {
display: none;
border: none;
border-radius: 50%;
margin-bottom: 5px;
width: 34px;
height: 34px;
line-height: 27px;
background: url('http://sda-campagne.fr/misc/greek_theme/button_greek.png');
background-size: cover;
box-shadow: 1px 1px 9px inset, 5px 5px 5px -5px inset;
margin-left: 5px;
padding: 4px !important;
}
.theme-greek #floatingtoolbar:hover > ul > li {
display: block;
}
.theme-greek #floatingtoolbar > ul > li.activebutton {
display: block;
background: url('http://sda-campagne.fr/misc/greek_theme/button_greek.png');
background-size: cover;
color: #75450f;
}
.theme-greek #tdviewport.custom {
width: 280px !important;
height: 280px !important;
top: 37px;
right: 20px;
left: initial;
z-index: 9999;
background-image: url("https://ns328286.ip-37-187-113.eu/ew/wallpapers/800x480/06308_800x480.jpg") !important;
background-size: 100% 100%;
box-shadow: 25px 0px 10px -20px #1a1816 inset, -25px 0px 10px -20px #1a1816 inset, 0px 25px 10px -20px #1a1816 inset, 0px -25px 10px -20px #1a1816 inset, 0 25px 25px black;
}
.theme-greek #tdviewport.custom canvas {
width: 280px !important;
height: 280px !important;
}
.theme-greek #page-toolbar .activepage {
background: #e0a970 !important;
}
.theme-greek #page-toolbar .availablepage:hover {
background-color: rgba(221, 76, 29, 0.5) !important;
}
.theme-greek #page-toolbar .handle {
background: #3b2d24 !important;
}
.theme-greek .ui-tabs .ui-tabs-nav li:hover,
.theme-greek .ui-tabs .ui-tabs-nav li a:hover {
background-color: #804705 !important;
}
.theme-greek #splashScreen {
content: 'http://sda-campagne.fr/misc/wolf_wind.mp3';
}
.theme-greek #hand {
display: block;
position: fixed;
bottom: 0;
left: 3%;
right: calc(3% + 310px);
width: calc(94% - 310px);
height: 120px;
z-index: 50;
transform: perspective(200px) rotateX(15deg) translateY(70px);
background: url("http://sda-campagne.fr/misc/greek_theme/brown-background-9.jpg");
border-radius: 10px;
border-top: 0;
border-bottom: 0;
box-shadow: -10px 0 0 #00000047, -5px 5px 5px 5px #8e8e8e40, -10px 0 0 black, 10px 0 0 #00000047, 5px 5px 5px 5px #8e8e8e40, 10px 0 0 black, 0 40px 40px 20px black inset;
transition: all 1s;
}
.theme-greek #hand:hover {
transform: perspective(200px) rotateX(15deg) translateY(70px);
}
.theme-greek #hand-right {
display: block;
position: fixed;
bottom: -44px;
right: 238px;
width: 210px;
height: 260px;
background: red;
z-index: 60;
background: url('http://sda-campagne.fr/misc/greek_theme/bouclier_centaure.png');
background-size: contain;
background-repeat: no-repeat;
}
.theme-greek #details-custom {
display: block;
position: fixed;
bottom: 0;
top: 37px;
right: 0;
width: 300px;
height: calc(100vh - 37px);
background: blue;
z-index: 700;
background: url('http://sda-campagne.fr/misc/greek_theme/bg_frise_grec.jpg');
box-shadow: 0 0 126px black inset;
display: none;
}
.theme-greek #details-img {
display: block;
margin: auto;
width: 200px;
background: #f000;
height: 200px;
margin-top: 20px;
border-radius: 50%;
box-shadow: 16px 22px 41px 0 black inset, 0 0 2px 2px black inset;
border: 4px solid #020000;
}
.theme-greek #details-title {
width: 100%;
height: 30px;
font-size: 20px;
color: white;
font-family: "greek";
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.theme-greek #details-txt {
width: calc(100% - 70px);
padding: 4px 35px;
color: black;
text-align: justify;
}
.theme-greek #hand > #table-cards > li {
height: 120px;
width: 120px;
display: inline-block;
background-color: black;
margin: 50px 5px;
border-radius: 5px;
border: 5px solid black;
text-align: center;
font-weight: bold;
background-repeat: no-repeat;
background-size: cover;
background-position: center 20px;
transition: all 0.3s ease-in-out;
cursor: pointer;
box-shadow: 0 0px 30px black inset, 0px 20px 0 #e3c49d inset, 0px 23px 10px #040404 inset;
color: #000;
}
.theme-greek #hand > #table-cards > li:hover {
transform: translate3D(-4px, -8px, 0);
box-shadow: 0 0px 30px black inset, 0px 20px 0 #e3c49d inset, 0px 23px 10px #040404 inset, 4px 8px 20px 0 #000;
}
.theme-greek #context-cards-active {
position: fixed;
top: 50%;
left: 0;
width: calc(100vw - 410px);
display: block;
z-index: 14;
height: 240px;
text-align: center;
overflow: hidden;
transform: translateY(-50%);
padding : 0 50px;
margin: 0;
}
.theme-greek #context-cards-active > li {
height: 200px;
width: 140px;
display: inline-block;
background-color: black;
margin: 8px;
border-radius: 5px;
border: 5px solid black;
text-align: center;
font-weight: bold;
background-repeat: no-repeat;
background-size: cover;
background-position: center 20px;
transition: all 0.3s ease-in-out;
cursor: pointer;
box-shadow: 0 0px 30px black inset, 0px 20px 0 #e3c49d inset, 0px 23px 10px #040404 inset;
color: #000;
}
.theme-greek #hand > #context-cards {
position: absolute;
top: 0;
right: 0;
display: block;
z-index: -10000;
height: 80px;
width: 100%;
text-align: center;
overflow: hidden;
transform: translateY(-100%);
}
.theme-greek.dragging #hand > #context-cards {
box-shadow: inset 0 -25px 25px -25px #779fa4;
}
.theme-greek.dragging #hand > #context-cards:hover {
box-shadow: inset 0 -25px 25px -25px white;
}
.theme-greek #hand > #context-cards > li {
height: 120px;
width: 120px;
display: inline-block;
background-color: black;
margin: 50px 5px;
margin-top: 0;
border-radius: 10px;
border: 5px solid transparent;
text-align: center;
font-weight: bold;
background-repeat: no-repeat;
background-size: cover;
background-position: center 20px;
background-color: transparent;
transition: 1s all ease-in-out;
cursor: pointer;
color: #000;
transform: translate3D(0, calc(100% - 75px), 0);
box-shadow: 0 0px 30px black inset, 0px 20px 0 #ffffffaa inset, 0px 23px 10px #040404 inset;
}
.theme-greek #hand > #context-cards > li:hover {
box-shadow: 0 0px 30px black inset, 0px 20px 0 #e3c49d inset, 0px 23px 10px #040404 inset;
border: 5px solid black;
border-radius: 5px;
}
.theme-greek #hand > #context-cards > li.active {
transform: translate3D(0, 0, 0);
box-shadow: 0 0px 30px black inset, 0px 20px 0 #e3c49d inset, 0px 23px 10px #040404 inset;
border: 5px solid black;
border-radius: 5px;
}
.theme-greek #playerzone.showmacrobar #macrobar {
display: none;
}
.theme-greek #wide-view {
display: block;
position: fixed;
max-height: calc(100vh - 100px);
top: 50%;
left: calc(50% - 155px);
transform: translateX(-50%) translateY(-50%);
transition: 0.3s all ease-in-out;
z-index:4;
box-shadow: 0 0 0 1px black, 3px 0 2px #ae9f88, 0 3px 2px #807566, -3px 0 2px #201a14, 0 -3px 2px #514a41, 0 0 0 6px black;
}
.theme-greek #circle-container {
display: block;
position: fixed;
width: 50vh;
height: 50vh;
max-width: 350px;
max-height: 350px;
top: 50%;
left: calc(50% - 155px);
background-color: #ffffff91;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
box-shadow: 16px 22px 41px 0 black inset, 0 0 3px 12px #fff inset, 0 0 50px white, 0 0 50px white;
border: 20px solid #dddddd5e;
overflow: hidden;
transition: 0.3s all ease-in-out;
z-index:10;
}
.theme-greek #circle-view {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 10px);
height: calc(100% - 10px);
border-radius: 50%;
background: #91484878;
margin: 5px;
background: url('http://sda-campagne.fr/misc/greek_theme/macedonia.jpg');
background-position: center center;
background-size: cover;
}
.theme-greek #hand-expander-handler {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 30px;
height: 30px;
z-index: 1;
border-radius: 0;
border: 2px solid black;
box-shadow: 0 0 0 1px black inset, 3px 0 2px #ae9f88 inset, 0 3px 2px #807566 inset, -5px 0 2px #201a14 inset, 0 -5px 2px #514a41 inset, -1px -1px 0 9px black inset;
background: #343b3c;
cursor: pointer;
transition: 0.5s;
}
.theme-greek #hand-expander-handler:hover {
box-shadow: 0 0 5px white, 0 0 0 1px black inset, 3px 0 2px #ae9f88 inset, 0 3px 2px #807566 inset, -5px 0 2px #46392c inset, 0 -5px 2px #807566 inset, -1px -1px 0 9px black inset;
background: #789da8;
}
.theme-greek #hand-menubar-left {
list-style-type: none;
margin: 0;
padding: 0px;
display: flex;
flex-direction: row;
width: calc(50% - 32px);
height: 47px;
position: absolute;
top: 0;
right: 50%;
background: url("http://sda-campagne.fr/misc/greek_theme/frise_vague.jpg");
background-size: cover;
box-shadow: 0 -30px 20px -20px black inset, 0 10px 10px -10px #fefeff inset, 0 -10px 10px -10px #fefeff inset;
background-position: left;
justify-content: flex-end;
padding-right: 37px;
}
.theme-greek #hand-menubar-right {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
width: calc(50% - 33px);
height: 47px;
position: absolute;
top: 0;
left: 50%;
background: url("http://sda-campagne.fr/misc/greek_theme/frise_vague_inverse.jpg");
background-size: cover;
box-shadow: 0 -30px 20px -20px black inset, 0 10px 10px -10px #fefeff inset, 0 -10px 10px -10px #fefeff inset;
background-position: right;
padding-left: 37px;
}
.theme-greek #hand-menubar-left > li,
.theme-greek #hand-menubar-right > li {
color: #f0f0f0;
text-align: center;
margin: 15px 15px 10px 15px;
cursor: pointer;
background: #020106;
border-radius: 5px;
padding: 1px 8px;
width: 71px;
opacity: 0;
transition: 0.2s all ease-in-out;
}
.theme-greek #hand-menubar-left > li:hover,
.theme-greek #hand-menubar-right > li:hover {
color: #9edaec;
}
.theme-greek #hand-menubar-left > li.selected,
.theme-greek #hand-menubar-right > li.selected {
box-shadow: 0 0 8px #9edaec inset;
color: #9edaec;
}
.theme-greek #hand:hover > ul > li {
opacity: 1;
}
.theme-greek #table-cards {
margin: 8px 0 0 0;
justify-content: center;
display: flex;
}
.theme-greek #playerzone .player {
pointer-events: auto;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 0 1px black, 3px 0 2px #ae9f88, 0 3px 2px #807566, -3px 0 2px #201a14, 0 -3px 2px #514a41, 0 0 0 6px black;
}
body.theme-greek {
cursor: url(http://www.rw-designer.com/cursor-extern.php?id=88905);
}
#bol-dice-roller {
z-index: 40;
transition: all 0.8s ease-in-out, top 0.1s, left 0.1s;
position: fixed;
top: 50px;
left: calc(50% - 155px);
transform: translateX(-50%);
height: calc(100vh - 100px);
padding: 5px;
width: calc(80vh - 80px);
text-align: center;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
#bol-dice-roller::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: url('http://sda-campagne.fr/misc/greek_theme/ananke_wp.png');
top: 0;
left: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 20px 0;
transition: all 0.8s ease-in-out;
opacity: 0;
z-index: -100;
}
#bol-dice-roller.rolled::before {
opacity: 1;
}
#bol-dice-roller > #dice-roller-result {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -250px, 0);
width: 158px;
height: 158px;
z-index: 150;
background: url('http://sda-campagne.fr/misc/greek_theme/result_success2.png');
line-height: 158px;
text-align: center;
vertical-align: middle;
color: #35555a9e;
font-size: 35px;
transition: all 0s;
opacity: 0;
color: rgba(147, 33, 33, 0.53);
text-shadow: 3px 2px 3px white;
}
#bol-dice-roller.rolled > #dice-roller-result {
transition: all 0.8s ease-in-out;
opacity: 1;
}
#bol-dice-roller.heroic-success > #dice-roller-result {
background: url('http://sda-campagne.fr/misc/greek_theme/result_success2.png');
}
#bol-dice-roller.success > #dice-roller-result {
background: url('http://sda-campagne.fr/misc/greek_theme/result_success3.png');
}
#bol-dice-roller.fail > #dice-roller-result {
background: url('http://sda-campagne.fr/misc/greek_theme/result_fail.png');
}
#bol-dice-roller.fumble > #dice-roller-result {
background: url('http://sda-campagne.fr/misc/greek_theme/result_fumble.png');
}
#dice-roller-back-disk {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
width: calc(80vh - 180px);
height: calc(80vh - 180px);
border-radius: 50%;
z-index: -1;
box-shadow: 8px 0px 8px -8px #0000008a, -8px 0px 8px -8px #0000008a;
overflow: hidden;
cursor: pointer;
}
#dice-roller-back-disk .dice-menu-selector-item {
position: absolute;
width: 50%;
height: 50%;
z-index: 0;
transition: all 0.6s;
}
#dice-roller-back-disk:hover .dice-menu-selector-item {
background: #ffffff5c;
box-shadow: 0px 0px 8px 0px #0000008a inset, -8px 0px 8px -8px #0000008a;
}
#dice-roller-back-disk .dice-menu-selector-item:hover {
background: #53898e6b;
}
.dice-menu-selector-item-label {
width: 160px;
padding: 10px;
z-index: -5;
position: absolute;
top: 50%;
left: 50%;
font-size: 18px;
}
.dice-menu-selector-item-value {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
font-size: 18px;
background: #e8f2f2;
border-radius: 50%;
z-index: 200;
box-shadow: 3px 0 2px #8dadb1, 0 3px 2px #5c7c80, -3px 0 2px #75969b, 0 -3px 2px #5d7b7d, 0 0 0 6px #35555a, 0 0 5px -2px #38595d inset;
line-height: 40px;
text-align: center;
vertical-align: middle;
color: #35555a9e;
}
#dice-menu-selector-attribute {
left: 0;
top: 0;
}
#dice-menu-selector-attribute-label {
transform: translateX(-50%) translateY(-50%) rotateZ(-45deg) translateY(-170px) rotateZ(45deg) translateX(-30%) translateY(-50%);
padding-right: 40px;
}
#dice-menu-selector-attribute-value {
transform: translate3d(-50%, -50%, 0) rotateZ(45deg) translateX(-165px) rotateZ(-45deg);
}
#dice-menu-selector-skill {
right: 0;
top: 0;
}
#dice-menu-selector-skill-label {
transform: translateX(-50%) translateY(-50%) rotateZ(45deg) translateY(-170px) rotateZ(-45deg) translateX(30%) translateY(-50%);
padding-left: 40px;
}
#dice-menu-selector-skill-value {
transform: translate3d(-50%, -50%, 0) rotateZ(-45deg) translateX(165px) rotateZ(45deg);
}
#dice-menu-selector-modif {
right: 25%;
bottom: 0;
transform: rotateZ(45deg) translate3d(50px, 50px, 0);
}
#dice-menu-selector-modif-label {
transform: translateX(-50%) translateY(-50%) translateY(175px) translateY(100%);
width: 200px;
}
#dice-menu-selector-modif-value {
transform: translate3d(-50%, -50%, 0) translateY(150px);
}
#bol-dice-roller > #dice-roller-disk {
width: 350px;
height: 350px;
border: 5px solid #bdb8b8
padding: 5px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
background-size: 100% 100%;
background-image: url('http://sda-campagne.fr/misc/greek_theme/disque_meandre.png');
background-color: #50838a;
z-index: 100;
transition: all 0.8s ease-in-out, top 0.1s, left 0.1s;
position: fixed;
top: 49%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
cursor: pointer;
}
#bol-dice-roller > #dice-roller-disk.bonus {
box-shadow: 0 0 0 1px black, 3px 0 2px #ae9f88, 0 3px 2px #807566, -3px 0 2px #201a14, 0 -3px 2px #514a41, 0 0 0 6px black, 0 0 20px 5px inset black, 0 0 20px 20px #a0fba082 inset;
}
#bol-dice-roller > #dice-roller-disk.malus {
box-shadow: 0 0 0 1px black, 3px 0 2px #ae9f88, 0 3px 2px #807566, -3px 0 2px #201a14, 0 -3px 2px #514a41, 0 0 0 6px black, 0 0 20px 5px inset black, 0 0 20px 20px #fb797982 inset;
}
#dice-roller-back-disk > #btn-dice-malus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://sda-campagne.fr/misc/greek_theme/laurier_bonus3_on.png');
background-size: contain;
opacity: 0;
transition: all 0.3s;
}
#dice-roller-back-disk > #btn-dice-bonus {
position: absolute;
left: 50%;
top: 50%;
width: 70px;
height: 70px;
background: transparent;
transform: translateX(-50%) translateY(-50%) rotateZ(157.5deg) translateX(230px) rotateZ(-157.5deg);
background-image: url('http://sda-campagne.fr/misc/greek_theme/laurier_bonus3.png');
background-position: center center;
background-repeat: no-repeat;
z-index: 20;
cursor: pointer;
background-size: contain;
transform: translateX(-50%) translateY(-50%) rotateZ(22.5deg) translateX(230px) rotateZ(-22.5deg);
opacity: 0.7;
}
#dice-roller-back-disk > #btn-dice-bonus:hover {
background-image: url('http://sda-campagne.fr/misc/greek_theme/laurier_bonus3_on.png');
}
#dice-roller-back-disk > #btn-dice-malus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://sda-campagne.fr/misc/greek_theme/medusa7_on.png');
background-size: contain;
opacity: 0;
transition: all 0.3s;
}
#dice-roller-back-disk > #btn-dice-malus {
position: absolute;
left: 50%;
top: 50%;
width: 70px;
height: 70px;
background: transparent;
background-image: url('http://sda-campagne.fr/misc/greek_theme/medusa3.png');
background-position: center center;
background-repeat: no-repeat;
z-index: 20;
cursor: pointer;
background-size: contain;
transform: translateX(-50%) translateY(-50%) rotateZ(157.5deg) translateX(230px) rotateZ(-157.5deg);
opacity: 0.7;
}
#dice-roller-back-disk > #btn-dice-malus:hover {
background-image: url('http://sda-campagne.fr/misc/greek_theme/medusa7_on.png');
}
#dice-roller-back-disk > #btn-dice-bonus.reset,
#dice-roller-back-disk > #btn-dice-malus.reset {
background-image: url('http://sda-campagne.fr/misc/greek_theme/reset.png');
background-position: center center;
background-size: contain;
}
#dice-attribute-chooser {
width: 266px;
height: 266px;
padding: 10px;
top: 49%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: #eae4db;
position: absolute;
z-index: 120;
border-radius: 50%;
box-shadow: 0 0 15px 5px inset;
}
#dice-roller-chooser {
position: absolute;
border-radius: 50%;
background-image: url('http://sda-campagne.fr/misc/greek_theme/modificateur_choix2.png');
background-size: 100% 100%;
background-color: #2b2929;
transition: all 0.6s;
height: 350px;
width: 350px;
padding: 5px;
top: 49%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 250;
opacity: 0;
display: none;
}
#dice-roller-chooser > .dice-modif-mano {
position: absolute;
top: 49.2%;
left: 49.6%;
transform: translateX(-50%) translateY(-50%);
width: 20%;
height: 20%;
border-radius: 50%;
box-shadow: 0 0 10px 5px inset black, 0 0 5px black;
text-align: center;
background: #161a1e;
color: #fff;
font-weight: bold;
border: 1px solid black;
cursor: pointer;
}
#dice-roller-chooser > button.dice-modif-btn {
width: 7%;
height: 7%;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 100%;
font-size: large;
box-shadow: 0 0 5px 2px inset black, 0 0 5px black;
text-align: center;
background: #586773;
color: #2d2d2d;
border: 3px solid #000000bd;
display: none;
}
#dice-roller-chooser > button.dice-modif-btn:hover {
color: #fff;
}
#dice-roller-chooser > #dice-modif-minus {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-60%) translateX(-140%);
border-radius: 50% 5px 5px 50%;
}
#dice-roller-chooser > #dice-modif-plus {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-60%) translateX(140%);
border-radius: 5px 50% 50% 5px;
}
#dice-roller-chooser > div.dice-modif {
position: absolute;
top: 50%;
left: 50%;
height: 25%;
min-width: 20%;
cursor: pointer;
}
#dice-roller-chooser > .dice-modif:hover {
color: #fff;
text-shadow: 0 0 5px #db0e0e;
}
#dice-roller-chooser > .dice-modif > :nth-child(1) {
margin-bottom: 38px;
}
#dice-roller-chooser > :nth-child(n+5) > :nth-child(1) {
transform: rotateZ(180deg);
}
#dice-roller-chooser > :nth-child(1) {
transform: translateX(-50%) translateY(-50%) rotateZ(-67.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(1) > :nth-child(2) {
transform: rotateZ(67.5deg);
}
#dice-roller-chooser > :nth-child(2) {
transform: translateX(-50%) translateY(-50%) rotateZ(-22.5deg) translateY(-110%);
color: #cec5c5;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(2) > :nth-child(2) {
transform: rotateZ(22.5deg);
}
#dice-roller-chooser > :nth-child(3) {
transform: translateX(-50%) translateY(-50%) rotateZ(22.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(3) > :nth-child(2) {
transform: rotateZ(-22.5deg);
}
#dice-roller-chooser > :nth-child(4) {
transform: translateX(-50%) translateY(-50%) rotateZ(67.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(4) > :nth-child(2) {
transform: rotateZ(-67.5deg);
}
#dice-roller-chooser > :nth-child(5) {
transform: translateX(-50%) translateY(-50%) rotateZ(112.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(5) > :nth-child(2) {
transform: rotateZ(-112.5deg);
}
#dice-roller-chooser > :nth-child(6) {
transform: translateX(-50%) translateY(-50%) rotateZ(157.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(6) > :nth-child(2) {
transform: rotateZ(-157.5deg);
}
#dice-roller-chooser > :nth-child(7) {
transform: translateX(-50%) translateY(-50%) rotateZ(202.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(7) > :nth-child(2) {
transform: rotateZ(-202.5deg);
}
#dice-roller-chooser > :nth-child(8) {
transform: translateX(-50%) translateY(-50%) rotateZ(247.5deg) translateY(-110%);
color: #ccc2c2;
font-weight: bold;
text-align: center;
}
#dice-roller-chooser > :nth-child(8) > :nth-child(2) {
transform: rotateZ(-247.5deg);
}
.dice6-roller {
height: 200px;
display: grid;
align-items: center;
justify-content: center;
width: 100px;
flex-wrap: nowrap;
grid-template-columns: repeat(3, 1fr);
border-radius: 50%;
grid-gap: 0px;
grid-auto-rows: minmax(50px, auto);
}
.dice6-roller:hover {
left: 0;
}
.dice {
width: 100px;
height: 100px;
position: relative;
margin: 0 auto 0px;
perspective: 1000px;
perspective-origin: 50% 100%;
transform: scale(0.5);
transition: box-shadow 0.8s;
display: inline-block;
}
.dice::before {
position: absolute;
content: '';
top: calc(50% - 5px);
left: calc(50% - 5px);
box-shadow: 5px 5px 80px 20px black, 5px 5px 70px 20px black, 5px 5px 60px 20px black, 5px 5px 60px 20px black, 5px 5px 60px 20px black, 5px 5px 60px 20px black, 5px 5px 60px 20px black;
border-radius: 50%;
width: 10px;
height: 10px;
}
.dice-cube .dice-front {
transform:
translateZ(50px);
}
.dice-cube .dice-back {
transform:
rotateX(-180deg)
translateZ(50px);
}
.dice-cube .dice-right {
transform:
rotateY(90deg)
translateZ(50px);
}
.dice-cube .dice-left {
transform:
rotateY(-90deg)
translateZ(50px);
}
.dice-cube .dice-top {
transform:
rotateX(90deg)
translateZ(50px);
}
.dice-cube .dice-bottom {
transform:
rotateX(-90deg)
translateZ(50px);
}
.dice-cube {
width: 100%;
height: 100%;
top: 0px;
position: absolute;
transform-style: preserve-3d;
transition: transform 3s;
}
.dice-cube:hover {
cursor: pointer;
}
.dice-cube div {
display: block;
position: absolute;
width: 100px;
height: 50px;
backface-visibility: visible;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 500%;
text-align: center;
padding: 25px 0;
background-image: url('http://sda-campagne.fr/misc/greek_theme/seamless_marble_2.jpg');
box-shadow: 0 0 20px 5px #69a0b1 inset;
background-size: cover;
transform-style: preserve-3d;
}
.dice-cube.dice-max div {
box-shadow: 0 0 20px inset black, 0 0 20px 20px #a0fba082 inset;
}
.dice-cube.dice-min div {
box-shadow: 0 0 20px inset black, 0 0 20px 20px #fb797982 inset;
}
.dot {
display: block;
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
border: 1px solid gray;
box-shadow: 0 0 3px 3px inset black;
}
.dice-front .dot1 { top: 42px; left: 42px; }
.dice-right .dot1 { top: 22px; left: 22px; }
.dice-right .dot2 { top: 42px; left: 42px; }
.dice-right .dot3 { top: 62px; left: 62px; }
.dice-left .dot1 { top: 22px; left: 22px; }
.dice-left .dot2 { top: 22px; left: 62px; }
.dice-left .dot3 { top: 62px; left: 22px; }
.dice-left .dot4 { top: 62px; left: 62px; }
.dice-top .dot1 { top: 22px; left: 22px; }
.dice-top .dot2 { top: 22px; left: 62px; }
.dice-top .dot3 { top: 42px; left: 42px; }
.dice-top .dot4 { top: 62px; left: 22px; }
.dice-top .dot5 { top: 62px; left: 62px; }
.dice-bottom .dot1 { top: 22px; left: 22px; }
.dice-bottom .dot2 { top: 62px; left: 62px; }
.dice-back .dot1 { top: 22px; left: 22px; }
.dice-back .dot2 { top: 42px; left: 22px; }
.dice-back .dot3 { top: 62px; left: 22px; }
.dice-back .dot4 { top: 22px; left: 62px; }
.dice-back .dot5 { top: 42px; left: 62px; }
.dice-back .dot6 { top: 62px; left: 62px; }
#character-sheet-ui {
z-index: 16;
position: absolute;
top: calc(40% - 123px);
left: calc(50vw - 517px);
width: 725px;
box-shadow: 5px 5px 7px -5px black, -5px -5px 7px -5px black;
padding: 0;
background: #000000ee;
border-radius: 10px;
transition: 0.5s all ease-in-out, left 0s, top 0s;
height: 272px;
background-image: url("http://sda-campagne.fr/misc/greek_theme/meandre-frise-light.png");
background-repeat: no-repeat;
background-position: 0px 246px;
}
li.dropped-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
li.dropped-card #character-sheet-ui.as-dropped-card {
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none;
border-radius: 0;
box-shadow: none;
}
#character-sheet-ui.as-dropped-card .character-sheet-row:first-child {
border-radius: 0;
box-shadow: none;
border: none;
}
#character-sheet-ui.as-dropped-card .character-sheet-column:first-child {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#character-sheet-ui.as-dropped-card .character-sheet-image {
height: 100% !important;
width: 100% !important;
border: none;
mask-image: none;
padding-top: 18px;
box-shadow: 0 0px 30px black inset, 0px 20px 0 #e3c49d inset, 0px 23px 10px #040404 inset;
background-origin: content-box;
background-position: top;
}
#character-sheet-ui.as-dropped-card .character-sheet-title {
bottom: unset;
top: 0;
opacity: 1 !important;
font-size: 13px;
background: none;
border: none;
box-shadow: none;
color: black;
line-height: 13px;
padding: 3px;
}
#character-sheet-ui.minimized {
width: 150px;
height: 210px;
transition: none;
}
#character-sheet-ui.minimized .character-sheet-column:nth-child(2),
#character-sheet-ui.minimized .character-sheet-column:nth-child(3),
#character-sheet-ui.minimized .character-sheet-column:nth-child(4),
#character-sheet-ui.minimized .btn-open-dice-roller {
opacity: 0;
}
#character-sheet-ui.minimized:hover .character-sheet-title {
opacity: 1;
}
#character-sheet-ui.minimized .character-sheet-title {
opacity: 0;
}
#character-sheet-ui.minimized .character-sheet-image {
height: 208px;
}
#character-sheet-ui.minimized .character-sheet-adv-row {
display: none;
}
.char-sheet-selectable {
cursor: pointer;
margin: 5px 0;
}
.char-sheet-selectable:hover {
background: #4848483d;
}
.char-sheet-selectable.selected {
box-shadow: inset 100px 0 40px -16px #abc4c8e8, 0 0 5px #19454f;
background: #19444f;
color: #3e3e3e;
}
.char-sheet-selectable > div {
display: inline-block;
font-size: 1.2em;
padding: 2px;
position: relative;
}
.char-sheet-selectable .char-sheet-value {
width: 16px;
text-align: center;
}
.char-sheet-selectable.selected .char-sheet-value {
background: #19444f;
color: beige;
}
.char-sheet-selectable .char-sheet-value::before {
content: '';
top: 50%;
left: 50%;
width: 46px;
position: absolute;
height: 46px;
background-image: url("http://sda-campagne.fr/misc/greek_theme/meandre-mini-select.png");
transform: translate3d(-50%, -50%, 0);
background-size: contain;
box-shadow: 0 0 5px #000;
border-radius: 50%;
opacity: 0;
}
.char-sheet-selectable.selected .char-sheet-value::before {
opacity: 1;
}
.char-sheet-selectable .char-sheet-title {
width: 100px;
padding-left: 20px !important;
}
.character-sheet-row {
display: flex;
width: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
height: 100%;
border: solid 1px #333;
box-shadow: inset 1px 1px 3px 1px #444, inset -1px -1px 3px 1px #222;
border-right: none;
border-bottom: none;
}
.character-sheet-column {
display: flex;
flex-direction: column;
flex: 1;
margin: 25px 25px 25px 0px;
background: #d1d8db;
opacity: 0.9;
position: absolute;
top: 0;
left: 0;
width: 160px;
padding-bottom: 9px;
box-shadow: 5px 5px 5px 5px #000;
}
.character-sheet-column:hover {
opacity: 1;
}
.character-sheet-column:first-child {
cursor: pointer;
background: transparent;
box-shadow: none;
margin: 0;
padding: 0;
margin-right: 5px;
}
.character-sheet-column:first-child:hover .character-sheet-image {
opacity: 1;
}
.character-sheet-column:nth-child(2) {
left: 170px;
}
.character-sheet-column:nth-child(3) {
left: 355px;
}
.character-sheet-column:nth-child(4) {
left: 540px;
}
.character-sheet-image {
margin: auto;
width: 100%;
background-size: cover;
background-position: center center;
position: relative;
-webkit-mask-image: linear-gradient(to right, black 75%, transparent 95%);
mask-image: linear-gradient(to right, black 75%, transparent 95%);
opacity: 0.8;
border: solid 1px #666;
height: 243px;
}
.character-sheet-column:first-child:hover .character-sheet-title {
color: white;
}
.character-sheet-title {
height: 16px;
padding: 6px;
text-align: center;
font-size: 18px;
margin: 0;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
background: #000c;
width: 100%;
color: #acacac;
line-height: 16px;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 0 2px #bdc3c6;
}
.character-sheet-subtitle {
text-align: center;
padding: 10px 0 10px 0;
font-size: 17px;
border-bottom: 3px solid #122d31;
text-shadow: 1px 1px 8px #000;
color: #b2b9b8;
background: #1b4b57;
margin-bottom: 0;
box-shadow: black 0px 0px 12px inset, black 0px 0px 5px inset;
}
.character-sheet-column:hover .character-sheet-subtitle {
background: #275b68;
}
.character-sheet-adv-row {
position: absolute;
top: 245px;
left: 170px;
width: 530px;
height: 40px;
opacity: 1;
border-radius: 0 0 10px 10px;
box-shadow: 5px 5px 7px -5px black, -5px -5px 7px -5px black, inset 0 10px 10px -2px;
display: flex;
max-height: 0;
z-index: -1;
}
.modif-ready .character-sheet-adv-row {
max-height: 100%;
border-top: 3px solid #95684e;
z-index: 5;
}
.minized .character-sheet-adv-row {
display: none;
}
.character-sheet-adv-column {
display: inline-block;
box-shadow: inset 0 0 10px;
margin: 0;
text-align: center;
position: relative;
cursor: pointer;
padding: 0 8px;
background: #ac9a90;
}
.modif-ready .character-sheet-adv-column {
padding: 12px 8px;
opacity: 1;
}
.character-sheet-adv-column:first-child {
flex: 1;
border-radius: 0 0 0 10px;
}
.character-sheet-adv-column:last-child {
border-radius: 0 0 10px 0;
}
.character-sheet-adv-column:hover {
background: #b0b6b8;
box-shadow: inset 1px 0 10px -4px black, 3px 0 10px -4px black, -3px 0 10px -4px black;
}
.character-sheet-adv-column.selected {
background: #8fa6ab;
color: #3e3e3e;
box-shadow: inset 1px 0 10px -4px black, 3px 0 10px -4px black, -3px 0 10px -4px black;
}
.character-sheet-adv-column-value {
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%, -50%, 0);
border-radius: 50%;
background: #95684e;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
box-shadow: 0 0 4px black, inset 0 0 4px black;
opacity: 0;
}
.modif-ready .character-sheet-adv-column-value {
opacity: 1;
}
.selected .character-sheet-adv-column-value {
background: #19444f;
color: beige;
border: 2px solid #95684e;
}
.character-sheet-adv-column-label {
opacity: 0;
}
.modif-ready .character-sheet-adv-column-label {
opacity: 1;
}
.btn-open-dice-roller {
position: absolute;
z-index: 10;
top: 245px;
left: 100%;
transform: translate3d(-50%, -50%, 0px);
width: 88px;
height: 88px;
padding: 0;
border-radius: 50%;
box-shadow: 3px 3px 5px -3px, inset 0 0 16px -8px black, inset 0px 2px 2px -1px #938181;
background-color: #444;
background-image: url("http://sda-campagne.fr/misc/greek_theme/btn-roll-OFF.png");
background-position: center center;
cursor: pointer;
transition: all 0.2s ease-in-out;
display: none;
}
.btn-open-dice-roller:hover {
box-shadow: 5px 5px 5px -3px, inset 0 0 16px -8px black, inset 0px 2px 2px -1px #938181;
background-color: #1a4550;
background-image: url("http://sda-campagne.fr/misc/greek_theme/btn-roll-ON.png");
}
.roll-ready .btn-open-dice-roller {
display: block;
}
.character-sheet-image .btn-close-sheet {
position: absolute;
top: 6px;
left: 6px;
width: 22px;
height: 22px;
background-image: url("http://sda-campagne.fr/misc/greek_theme/close-btn.png");
opacity: 0.6;
border-radius: 50%;
box-shadow: 2px 2px 4px 3px black inset;
cursor: pointer;
display: none;
background-color: #4d4d4d;
background-size: contain;
}
.character-sheet-image:hover .btn-close-sheet {
display: block;
}
.character-sheet-image .btn-close-sheet:hover {
opacity: 0.8;
}
.sheet-expander {
position: absolute;
left: 0;
top: 246px;
width: 100%;
height: 28px;
cursor: pointer;
border-radius: 0 0 10px 10px;
transition: all 0.3s ease-in-out;
opacity: 0.3;
}
.sheet-expander:hover {
background: #4fc1dd;
box-shadow: black 0px 0px 12px inset, black 0px 0px 27px inset;
}
.adv-data {
max-height: 0;
position: absolute;
top: 267px;
left: 0;
width: 100%;
height: 231px;
overflow: hidden;
transition: all 0.4s ease-in-out;
box-shadow: 5px 5px 7px -5px black, -5px -5px 7px -5px black;
border-radius: 0 0 10px 10px;
background-color: #000e;
background-image: url("http://www.sda-campagne.fr/misc/greek_theme/pegase-fond.png");
background-position: 520px 50px;
background-repeat: no-repeat;
}
.expanded .adv-data {
max-height: 231px;
}
.adv-data-points {
position: absolute;
top: 0;
left: 1px;
width: 72px;
height: 231px;
background-color: #222222ad;
border-radius: 0 0 0 10px;
background-image: url("http://sda-campagne.fr/misc/greek_theme/symbol-adv.png");
background-position: center center;
background-repeat: no-repeat;
box-shadow: 5px 0 5px black,10px 0 40px black, 40px 0 0px #384036;
z-index: 1;
box-shadow: 5px 0 5px black,10px 0 40px black, 40px 0 0px #8ba1a6;
}
.adv-data-points-value {
position: absolute;
top: 0;
right: -40px;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
margin-top: 33px;
font-size: 18px;
color: #c5c5c5;
border-radius: 50%;
color: #111;
}
.adv-data-points-value:nth-child(2) {
transform: translateY(65px);
}
.adv-data-points-value:nth-child(3) {
transform: translateY(131px);
}
.adv-data-points-bar-right {
position: absolute;
top: 0;
right: -60px;
width: 20px;
height: 100%;
background: url("http://sda-campagne.fr/misc/greek_theme/meandre-bar-verticale.png");
z-index: -1;
}
.adv-data-menu {
position: absolute;
top: 0;
left: 110px;
height: 100%;
width: 615px;
background: #19444f;
box-shadow: inset 10px 0 5px -5px #19444f, inset 30px 30px 20px -20px black;
background: url("http://sda-campagne.fr/misc/greek_theme/brown-background-9.jpg");
}
.adv-data-menu-top {
height: 100%;
background: #1a1b1b;
box-shadow: inset 10px 0 5px -5px #19444f, inset 30px 30px 20px -20px black, 0 10px 10px -5px black;
display: flex;
flex-direction: column;
width: 150px;
}
.adv-data-menu-top-item {
flex: -moz-min-content;
text-align: center;
/* height: 100%; */
line-height: 46px;
font-size: 16px;
box-shadow: black 0px 0px 12px inset, black 0px 0px 5px inset;
color: #b2b9b8ab;
padding-left: 17px;
cursor: pointer;
}
.adv-data-menu-top-item:hover {
background: #3b3e3e;
}
.adv-data-menu-top-item.selected {
background: #19434e;
}
.adv-data-container {
position: absolute;
bottom: 20px;
right: 20px;
width: 425px;
height: calc(100% - 40px);
background: #00000070;
background: #ffffff70;
border-radius: 10px;
box-shadow: inset 3px 3px 0 #281e16, inset -3px -3px 0 #7e6958, inset 10px 10px 10px -2px black, inset -5px -5px 15px -2px black;
}
.dice-roll-bol {
width: calc(100% - 10px);
margin-right: 5px;
margin-top: 10px;
box-shadow: 0 0 8px, 0 8px 5px -5px;
border: 2px solid #b5930d;
border-radius: 13px 13px 0 0;
}
.dice-roll-bol .roll-auth {
text-align: center;
padding: 5px;
background: white;
border-radius: 10px 10px 0 0;
box-shadow: 0 6px 5px -5px, inset 0 0 16px -8px black, inset 0px 2px 2px -1px #938181;
font-size: 16px;
font-weight: bold;
color: black;
}
.dice-roll-bol .roll-type {
text-align: center;
padding: 5px;
background: #bdbdbd;
box-shadow: 0 6px 5px -5px, inset 0 0 16px -8px black, inset 0px 2px 2px -1px #938181;
font-size: 14px;
font-weight: bold;
position: relative;
}
.dice-roll-bol .roll-res {
color: #444;
background: #8bb5b7;
padding: 14px;
text-align: center;
font-size: 20px;
font-weight: bold;
box-shadow: inset 0 0 19px -5px black;
}
.dice-roll-bol.fail .roll-res {
background: #b79b8b;
}
.dice-roll-bol.fumble .roll-res {
background: #642d0e;
background-image: url('http://sda-campagne.fr/misc/greek_theme/medusa7_on.png');
background-position: center center;
background-repeat: no-repeat;
color: transparent;
}
.dice-roll-bol.heroic .roll-res {
background: #baddaa;
background-image: url('http://sda-campagne.fr/misc/greek_theme/laurier_bonus3_on.png');
background-position: center center;
background-repeat: no-repeat;
color: transparent;
}
.dice-roll-bol .roll-modif {
text-align: center;
padding: 5px;
background: #444;
box-shadow: 0 6px 5px -5px, inset 0 0 16px -8px black, inset 0px 2px 2px -1px #938181;
font-size: 14px;
color: #bdbdbd;
}
.dice-roll-bol .roll-details {
padding: 5px;
background: #bdbdbd;
box-shadow: 0 6px 5px -5px, inset 0 0 16px -8px black, inset 0px 2px 2px -1px #938181;
font-size: 14px;
text-align: center;
}
.dice-roll-bol .dice-res {
width: 20px;
height: 20px;
display: inline-block;
background: white;
margin-left: 8px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 4px -2px, inset 0 0 3px;
}
.dice-roll-bol .dice-res.malus {
background: pink;
}
.dice-roll-bol .dice-res.bonus {
background: #c1f2c1;
}
.dice-roll-bol .dice-res.ignored {
background: gray;
}
.dice-roll-bol .roll-attribute-value {
position: absolute;
top: 0;
left: 0;
height: 100%;
line-height: 28px;
width: 28px;
background: #44444470;
font-weight: normal;
}
.dice-roll-bol .roll-skill-value {
position: absolute;
top: 0;
right: 0;
height: 100%;
line-height: 28px;
width: 28px;
background: #44444470;
font-weight: normal;
}
.canvas-container {
display: none;
}
`;
function applyCSS(style) {
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
const node = document.createElement("style");
node.type = "text/css";
node.innerHTML = css;
// Note: wait for document.head to be available
const interval = 10;
const waitForDepts = () => {
if(!document.head) {
setTimeout(waitForDepts, 10);
return;
}
document.head.appendChild(node);
}
setTimeout(waitForDepts, 10);
}
};
applyCSS(css);
var isChatInit = false;
//------------------------------------------//
//----------- common function --------------//
//------------------------------------------//
function applyForEach(query, callback) {
var list = document.querySelectorAll(query);
for (var e of list) {
callback(e);
}
}
//------------------------------------------//
//-------------- Menu D&D ------------------//
//------------------------------------------//
var menu = document.createElement('div');
menu.id = 'menu-custom';
var menu_button = document.createElement('div');
menu_button.id = 'menu-custom-button';
menu_button.onclick = function() {
/*
var wrapper = document.getElementById('editor-wrapper');
if(menu.classList.contains("activated")) {
menu.classList.remove("activated");
wrapper.classList.remove('undisplayed');
} else {
menu.classList.add("activated");
wrapper.classList.add('undisplayed');
}
*/
toogleCharSheets();
};
var menu_content = document.createElement('div');
menu_content.id = 'menu-custom-content';
var linkRules = document.createElement('a');
linkRules.id = 'link-rules';
linkRules.title="Regles"
linkRules.href="https://www.aidedd.org/regles"
linkRules.target="_blank";
linkRules.innerHTML = '<span class="pictos">s</span>';
var notes = document.createElement('textarea');
notes.id = 'myNotes';
notes.setAttribute("spellcheck", "false");
var isGM = false;
var gameData = null;
const manageNotesStorage = () => {
if(!isChatInit) {
setTimeout(manageNotesStorage, 3000);
return;
}
// search campaign ID from roll20 local storage
var storageKeys = Object.keys(localStorage);
var campaignID = 'all';
for(var key of storageKeys) {
var data = localStorage.getItem(key);
if (!data.startsWith('{')) {
continue;
}
data = JSON.parse(data);
if(data
&& data.hasOwnProperty('auth')
&& data.auth.hasOwnProperty('playerid')
&& data.auth.hasOwnProperty('currentcampaign')) {
var playerDiv = document.getElementById('player_' + data.auth.playerid);
if(playerDiv) {
campaignID = data.auth.currentcampaign;
isGM = data.auth.is_gm;
onUserStatusKnown();
break;
}
}
}
// retrieve stored notes if exists
var storageKey = 'myNotes[' + campaignID + ']';
var storedNotes = localStorage.getItem(storageKey);
if(storedNotes) {
notes.value = storedNotes;
}
// text area notes storage
if(notes.addEventListener) {
notes.addEventListener('input', function() {
localStorage.setItem(storageKey, notes.value);
}, false);
} else if (notes.attachEvent) {
notes.attachEvent('onpropertychange', function() {
localStorage.setItem(storageKey, notes.value);
});
}
}
setTimeout(manageNotesStorage, 3000);
menu.style.display = 'none';
document.body.appendChild(menu);
menu.appendChild(menu_button);
menu.appendChild(menu_content);
// menu_content.appendChild(linkRules);
menu_content.appendChild(notes);
//------------------------------------------//
//--------- Splash Screen Strahd -----------//
//------------------------------------------//
var splashScreen = document.createElement('div');
splashScreen.id = 'splashScreen';
splashScreen.style.display = 'block';
splashScreen.style.position = 'absolute';
splashScreen.style.top = '-100vh';
splashScreen.style.left = '0';
splashScreen.style.width = '100%';
splashScreen.style.height = '100%';
splashScreen.style.zIndex = '999999';
splashScreen.style.backgroundImage = 'url("https://i.pinimg.com/originals/ae/52/85/ae52850e2f246ce98220bb222ae97dfc.jpg")';
splashScreen.style.backgroundSize = 'contain';
splashScreen.style.backgroundRepeat = 'no-repeat';
splashScreen.style.backgroundPosition = 'center center';
splashScreen.style.backgroundColor = '#18191b';
splashScreen.style.opacity = '0';
splashScreen.style.transition = 'opacity 3.5s ease-in-out';
splashScreen.style.WebkitTransition = 'opacity 3.5s ease-in-out';
splashScreen.style.MozTransition = 'opacity 3.5s ease-in-out';
splashScreen.style.setProperty('-webkit-transition', 'opacity 3.5s ease-in-out');
splashScreen.style.setProperty('transition', 'opacity 3.5s ease-in-out');
document.body.appendChild(splashScreen);
function displaySplashScreen(imgURL, soundURL, time) {
splashScreen.style.display = 'block';
splashScreen.style.top = '0';
splashScreen.style.opacity = '1';
splashScreen.style.backgroundImage = 'url("'+ imgURL +'")';
setTimeout(function(){
hideSplashScreen();
}, time);
new Audio(soundURL).play();
}
function hideSplashScreen() {
splashScreen.style.transition = 'opacity 1.0s ease-in-out';
splashScreen.style.WebkitTransition = 'opacity 1.0s ease-in-out';
splashScreen.style.MozTransition = 'opacity 1.0s ease-in-out';
splashScreen.style.opacity = '0';
setTimeout(function(){
splashScreen.style.top = '-100vh';
}, 1000);
}
//-----------------------------------------------//
//--------- Chat sound & images messages --------//
//-----------------------------------------------//
function createAudio(node, src, hasToPlay) {
// create audio HTML element
var audio = document.createElement("audio");
audio.controls = 'controls';
audio.autoplay = hasToPlay;
audio.className='audio_msg';
audio.style.width='100%';
audio.load();
audio.addEventListener("error", function() {
node.parentElement.removeChild(audio);
}, true);
audio.onended = function() {
node.parentElement.removeChild(audio);
};
node.parentElement.appendChild(audio);
var elemChat = document.getElementById('textchat');
elemChat.scrollTo(0,elemChat.scrollHeight);
// add source
audio.innerHTML = '<source src="' + src + '">';
}
function checkAndPlaySound(node, hasToPlay) {
var message = node.innerHTML;
var idx = message.indexOf('sound=');
if(idx >= 0) {
if (!isLoaded) {
// loading page => remove node in chat
node.parentNode.removeChild(node);
return true;
} else {
let src = message.substring(idx + 6).trim();
if (src.indexOf('http') != 0) {
src = 'http://sda-campagne.fr/misc/' + src;
}
node.innerHTML = node.innerHTML.substring(0, idx);
var soundIcon = document.createElement('span');
soundIcon.className = 'pictos';
soundIcon.style = 'font-size:18px; cursor: pointer!important; color:#742d2d';
soundIcon.title = src;
soundIcon.onclick = function() {
createAudio(node, src, true);
};
soundIcon.innerHTML = '>';
node.appendChild(soundIcon);
// parse URL
createAudio(node, src, hasToPlay);
}
return true;
}
}
function checkAndDisplayImageCircle(node) {
// display image in circle (greek theme only)
var message = node.innerHTML;
var idx = message.indexOf('img-circle=');
if(idx >= 0) {
if (!isLoaded) {
// loading page => remove node in chat
node.parentNode.removeChild(node);
} else {
console.log('---------------- img-circle');
// parse background-image
var url = message.substring(idx + 11).trim();
console.log('---------------- img-circle URL : ' + url);
console.log('---------------- img-circle HTML:' + node.innerHTML);
console.log('---------------- img-circle : ' + node);
node.parentNode.removeChild(node);
var circleToggleBtn = document.getElementById('circle-toggle-btn');
var circleContainer = document.getElementById('circle-container');
switch(url) {
case 'on':
// set circle visibility as ON
circleContainer.style.opacity = 1;
circleToggleBtn.innerHTML = 'Hide Circle';
circleToggleBtn.style.boxShadow = '0 0 25px black inset, 0 0 25px black inset';
break;
case 'off':
// set circle visibility as OFF
circleContainer.style.opacity = 0;
circleToggleBtn.innerHTML = 'Show Circle';
circleToggleBtn.style.boxShadow = '0 0 25px white inset, 0 0 25px white inset';
break;
default:
// change image in circle
var circleView = document.getElementById('circle-view');
circleView.style.backgroundImage = 'url("' + url + '")';
circleToggleBtn.style.backgroundImage = 'url("' + url + '")';
break;
}
}
return true;
}
return false;
}
function checkAndDisplayImageWide(node) {
// display image as background (greek theme only)
var message = node.innerHTML;
var idx = message.indexOf('img-wide=');
if(idx >= 0) {
if (!isLoaded) {
// loading page => remove node in chat
node.parentNode.removeChild(node);
} else {
console.log('---------------- img-wide');
// parse background-image
var url = message.substring(idx + 9).trim();
console.log('---------------- img-wide URL : ' + url);
console.log('---------------- img-wide HTML:' + node.innerHTML);
console.log('---------------- img-wide : ' + node);
node.parentNode.removeChild(node);
// change image in background
var wideView = document.getElementById('wide-view');
var wideHideBtn = document.getElementById('wide-hide-btn');
switch(url) {
case 'off':
// set circle visibility as OFF
wideView.style.opacity = 0;
wideHideBtn.style.backgroundImage = 'none';
break;
default:
// change image in circle
wideHideBtn.style.backgroundImage = 'url("' + url + '")';
wideView.style.opacity = '0';
setTimeout(() => {
wideView.src = url;
wideView.style.opacity = '1';
}, 300);
break;
}
}
return true;
}
return false;
}
function displayImg(src) {
// display image
var wrapper = document.getElementById('editor-wrapper');
wrapper.classList.add('undisplayed');
var img = document.createElement('IMG');
img.src = src;
img.style.transition = 'all 0.5s ease-in-out';
img.style.cursor = 'pointer';
img.style.opacity = '0';
img.onclick = function() {
img.style.opacity = '0';
setTimeout(function(){
wrapper.removeChild(img);
wrapper.classList.remove('undisplayed');
}, 500);
}
for(var child of wrapper.children) {
if(child.tagName && child.tagName == 'IMG'){
wrapper.removeChild(child);
}
}
wrapper.appendChild(img);
setTimeout(function(){
img.style.opacity = '1';
}, 100);
}
function checkAndDisplayImage(node, hasToDisplay) {
// display image by chat
var message = node.innerHTML;
var idx = message.indexOf('img=');
if(idx >= 0) {
if (!isLoaded) {
// loading page => remove node in chat
node.parentNode.removeChild(node);
} else {
// parse URL
var url = message.substring(idx + 4).trim();
if(url.indexOf('http') != 0){
url = 'http://sda-campagne.fr/misc/' + url;
}
node.innerHTML = node.innerHTML.substring(0, idx);
// build image icon in chat
var imgIcon = document.createElement('span');
imgIcon.className = 'pictos';
imgIcon.style = 'font-size:18px; cursor: pointer!important; color:#742d2d';
imgIcon.title = url;
imgIcon.onclick = function() {
displayImg(url);
};
imgIcon.innerHTML = 'P';
node.appendChild(imgIcon);
// build mini img
var imgChat = document.createElement('img');
imgChat.src = url;
imgChat.style.cursor = 'pointer';
imgChat.onclick = function() {
displayImg(url);
};
node.appendChild(imgChat);
// display image
if(hasToDisplay) {
displayImg(url);
}
}
return true;
}
return false;
}
function createAudioYT(node, src, hasToPlay) {
var idx = src.indexOf('watch?v=');
if (idx >= 0) {
var substr = src.substring(idx + 8);
if (substr.indexOf('&') > 0) {
substr = substr.substring(0, substr.indexOf('&'));
}
src = src.substring(0, idx) + 'embed/' + substr + '?enablejsapi=1&autoplay=1&color=white&fs=0&modestbranding=1&version=3&showinfo=0';
} else {
alert('url synthax error! (missing watch?v=)');
return;
}
node.remove();
var jukebox = document.getElementById('jukebox');
var jukeboxContentFirstChild = jukebox.children[0].children[0];
if (jukeboxContentFirstChild.id != 'ytContainer') {
// create audio HTML element
var audioYT = document.createElement("iframe");
audioYT.id = "ytPlayer";
audioYT.style.width = "100%";
audioYT.style.height = "100%";
audioYT.style.position= 'absolute';
audioYT.style.top= '0';
audioYT.style.left= '0';
audioYT.style.border= 'none';
audioYT.src = src;
audioYT.frameborder = "0";
audioYT.type = "text/html";
var container = document.createElement("div");
container.id = 'ytContainer';
container.style = 'position: absolute; width: 400px; height: 226px; left: -462px; top: 0px; border: 5px solid white; border-radius: 25px;overflow: hidden; box-shadow: 0 1px 16px rgba(0, 0, 0, 0.46), 0 15px 15px -12px;';
container.appendChild(audioYT);
// add youtube player to jukebox container
jukebox.children[0].prepend(container);
jukebox.style.overflow = 'visible';
document.getElementById('rightsidebar').style.overflow = 'visible';
} else {
jukeboxContentFirstChild.children[0].src = src;
}
}
function checkAndPlayYT(node, hasToPlay) {
var message = node.innerHTML;
var idx = message.indexOf('yt=');
if(idx >= 0) {
let src = message.substring(idx + 3).trim();
node.innerHTML = node.innerHTML.substring(0, idx);
var soundIcon = document.createElement('span');
soundIcon.className = 'pictos';
soundIcon.style = 'font-size:18px; cursor: pointer!important; color:#742d2d';
soundIcon.title = src;
soundIcon.innerHTML = '>';
node.appendChild(soundIcon);
// parse URL
createAudioYT(node, src, hasToPlay);
}
}
function checkAndDisplayDiceRollBol(node) {
var message = node.innerHTML;
var idx = message.indexOf('[dice-roll-bol]:');
if(idx >= 0) {
const dataStr = message.substring(idx + 16).trim();
const data = JSON.parse(dataStr);
var rollDetails = document.createElement('div');
rollDetails.className = 'dice-roll-bol ' + data.type;
var innerHTML = '<div class="roll-auth">' + data.auth + '</div>';
innerHTML += '<div class="roll-type">';
innerHTML += '<span class="roll-attribute-value">' + (data.attribute.value >= 0 ? ('+' + data.attribute.value) : data.attribute.value) + '</span>';
innerHTML += data.attribute.name + ' + ' + data.skill.name;
innerHTML += '<span class="roll-skill-value">' + (data.skill.value >= 0 ? ('+' + data.skill.value) : data.skill.value) + '</span>';
innerHTML += '</div>';
innerHTML += '<div class="roll-res">' + data.result + '</div>';
innerHTML += '<div class="roll-modif">' + data.diff + '</div>';
innerHTML += '<div class="roll-details">';
for (i in data.dices) {
if (data.diceRollLevel == 0) {
innerHTML += '<span class="dice-res">' + data.dices[i] + '</span>';
} else if (data.diceSelection[i]) {
innerHTML += '<span class="'+ (data.diceRollLevel > 0 ? 'dice-res bonus' : 'dice-res malus') + '">' + data.dices[i] + '</span>';
} else {
innerHTML += '<span class="dice-res ignored">' + data.dices[i] + '</span>';
}
}
innerHTML += '<span style="padding-left: 10px">' + (data.modif >= 0 ? ('+' + data.modif) : data.modif) + '</span>';
innerHTML += '</div>';
rollDetails.innerHTML = innerHTML;
node.innerHTML = '';
node.appendChild(rollDetails);
}
}
// observer on chat content -> parse to play sound or display image
var messageObserver = new MutationObserver(function (mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
// parse added node
for (var node of mutation.addedNodes) {
// check init to avoid play previous
if (node.nodeType === Node.ELEMENT_NODE) {
if (!isChatInit) {
isChatInit = node.className.indexOf('system') >= 0;
// play sound
if(checkAndPlaySound(node, false)) {
continue;
}
// display image
if(checkAndDisplayImage(node, false)) {
continue;
}
// display image circle
if(checkAndDisplayImageCircle(node, true)) {
continue;
}
// display image background
if(checkAndDisplayImageWide(node, true)) {
continue;
}
} else {
if(checkAndDisplayDiceRollBol(node)) {
continue;
}
// play sound
if(checkAndPlaySound(node, true)) {
continue;
}
// display image
if(checkAndPlayYT(node, true)) {
continue;
}
// display image
if(checkAndDisplayImage(node, true)) {
continue;
}
// display image circle
if(checkAndDisplayImageCircle(node, true)) {
continue;
}
// display image background
if(checkAndDisplayImageWide(node, true)) {
continue;
}
}
}
}
}
}
});
//--------------------------------------------------//
//---------- Add tool : image & sound --------------//
//--------------------------------------------------//
function sendDataByChat(url, mode) {
if(url) {
console.log('mode: ' + mode);
switch(mode) {
case 'circle':
chatTextArea.value = 'img-circle=' + url;
break;
case 'wide':
chatTextArea.value = 'img-wide=' + url;
break;
default:
// file type:
if(url.indexOf('.mp3') >= 0
|| url.indexOf('.wav') >= 0
|| url.indexOf('.ogg') >= 0) {
chatTextArea.value = 'sound=' + url;
} else if(url.indexOf('.jpg') >= 0
|| url.indexOf('.jpeg') >= 0
|| url.indexOf('.png') >= 0
|| url.indexOf('.bmp') >= 0) {
chatTextArea.value = 'img=' + url;
} else if(url.indexOf('www.youtube.com') >= 0) {
chatTextArea.value = 'yt=' + url;
}
break;
}
chatBtn.click();
}
};
var inputDiv = document.getElementById('textchat-input');
var chatTextArea = inputDiv.children[1];
var chatBtn = inputDiv.lastElementChild;
var sentFileImg = document.createElement('img');
sentFileImg.src = 'http://sda-campagne.fr/misc/file_attchment.png';
var sentFileBtn = document.createElement('div');
sentFileBtn.id = 'sentFileBtn';
sentFileBtn.style.display = 'inline-block';
sentFileBtn.style.paddingRight = '10px';
sentFileBtn.style.paddingLeft = '5px';
sentFileBtn.style.cursor = 'pointer';
sentFileBtn.onclick = function() {
var url = prompt("URL du fichier :", "");
sendDataByChat(url);
};
if (!document.getElementById('sentFileBtn')) {
sentFileBtn.appendChild(sentFileImg);
inputDiv.insertBefore(sentFileBtn, inputDiv.lastElementChild);
}
// add observer on chat content
var elemChat = document.getElementById('textchat');
for (var i = 0; i < elemChat.children.length; i++) {
var e = elemChat.children[i];
if (e.classList.contains('content')) {
messageObserver.observe(e, {
childList: true
});
break;
}
}
const intervalCtxtMenuTool = 1000;
const addCtxtMenuTool = () => {
if(!isChatInit) {
setTimeout(addCtxtMenuTool, intervalCtxtMenuTool);
return;
}
// add action into context menu
var selection;
var findTargetImgLib = (event) => {
var target = event.target;
while (target && target.tagName != 'OL') {
if (target.id && target.id == 'libraryfolderroot') {
break;
}
if (target.tagName == 'LI') {
selection = target;
return;
}
target = target.parentNode;
}
}
document.getElementById('libraryfolderroot').addEventListener("contextmenu", findTargetImgLib);
document.getElementById('recentuploads').addEventListener("contextmenu", findTargetImgLib);
var sendImgItemMenu = document.createElement('li');
sendImgItemMenu.innerHTML = 'Afficher pour tous';
var ctxtMenu1 = document.getElementById('libraryitemmenu');
sendImgItemMenu.addEventListener("mousedown", () => {
ctxtMenu1.style.display = 'none';
var src = selection.getAttribute('data-fullsizeurl');
chatTextArea.value = 'img=' + src;
chatBtn.click();
}, false);
ctxtMenu1.children[0].appendChild(sendImgItemMenu);
var ctxtMenu2 = document.getElementById('librarycopymenu');
sendImgItemMenu = sendImgItemMenu.cloneNode(true);
sendImgItemMenu.addEventListener("mousedown", () => {
ctxtMenu2.style.display = 'none';
var src = selection.getAttribute('data-fullsizeurl');
chatTextArea.value = 'img=' + src;
chatBtn.click();
}, false);
ctxtMenu2.children[0].appendChild(sendImgItemMenu);
// add observer on chat content
}
setTimeout(addCtxtMenuTool, intervalCtxtMenuTool);
//------------------------------------------//
//---------- Add tool : Theme --------------//
//------------------------------------------//
var lastTool = document.getElementById('helpsite');
lastTool.insertAdjacentHTML('afterend', '<li id="themeTool" tip="Theme On/Off"><img style="opacity:0.4;" src="http://sda-campagne.fr/misc/palette.png"><div class="submenu"><ul><li id="themeDefault">Theme: Roll20</li><li id="themeStrahd">Theme: D&D Strahd</li><li id="themeGreek">Theme: Greek Myth</li></ul></div></li>');
var favIconLink = document.querySelector("link[rel*='icon']") || document.createElement('link');
favIconLink.type = 'image/x-icon';
favIconLink.rel = 'shortcut icon';
favIconLink.href = 'http://sda-campagne.fr/misc/favicon_roll20.png';
document.getElementsByTagName('head')[0].appendChild(favIconLink);
const themeList = ['theme-strahd', 'theme-greek'];
function unsetTheme() {
document.body.classList.remove(...themeList);
}
function setThemeStrahd(rollback) {
localStorage.setItem('theme', 'stradh');
displaySplashScreen('http://sda-campagne.fr/misc/castle.jpg', 'http://sda-campagne.fr/misc/wolf_wind.mp3', 5500);
setTimeout(function(){
setTheme(themeList[0], rollback);
}, 3500);
}
function setThemeGreek(rollback) {
localStorage.setItem('theme', 'greek');
displaySplashScreen('http://sda-campagne.fr/misc/greek_screen.jpg', 'http://sda-campagne.fr/misc/intro-sound-greek.mp3', 7000);
setTimeout(function(){
setTheme(themeList[1], rollback);
}, 3500);
}
function setTheme(theme, rollback) {
if(!document.body.classList.contains(theme)) {
document.body.classList.remove(...themeList);
document.body.classList.add(theme);
rollback();
}
}
var themeDefault = document.getElementById('themeDefault');
themeDefault.addEventListener('click', unsetTheme, false);
var themeStrahd = document.getElementById('themeStrahd');
themeStrahd.addEventListener('click', setThemeStrahd, false);
var themeGreek = document.getElementById('themeGreek');
themeGreek.addEventListener('click', setThemeGreek, false);
// listen loading overlay to set theme upon loading end
var isLoaded = false;
var loadingRollback = () => {
blackScreen.style.display = 'none';
};
var observerLoading = new MutationObserver(function (mutationsList) {
for(var mutation of mutationsList) {
var e = mutation.target;
if (e.style.display == 'none') {
if(isLoaded) {
return;
}
const theme = localStorage.getItem('theme');
switch(theme) {
case 'stradh':
setThemeStrahd(loadingRollback);
break;
case 'greek':
setThemeGreek(loadingRollback);
break;
default:
loadingRollback();
break;
}
isLoaded = true;
}
}
});
observerLoading.observe(document.getElementById('loading-overlay'), {
attributes: true,
attributeOldValue: false,
attributeFilter: ['style'],
characterData: false,
characterDataOldValue: false,
childList: false,
subtree: false
});
var blackScreen = document.createElement('div');
blackScreen.id = 'blackScreen';
blackScreen.style.position = 'fixed';
blackScreen.style.top = '0';
blackScreen.style.left = '0';
blackScreen.style.width = '100%';
blackScreen.style.height = '100%';
blackScreen.style.zIndex = '99998';
blackScreen.style.backgroundColor = '#18191b';
document.body.appendChild(blackScreen);
//-----------------------------------------------//
//------- Custom: dice roll animation -----------//
//-----------------------------------------------//
var observer = new MutationObserver(function (mutationsList) {
var e = document.getElementById('tdviewport');
if (e.classList.contains('open') && !e.classList.contains('custom')) {
e.className = 'open custom';
}
});
var tdviewport = document.getElementById('tdviewport');
observer.observe(tdviewport, {
attributes: true,
attributeFilter: ['class'],
childList: true,
characterData: true
});
function closeTdviewport(theme) {
tdviewport.className = '';
}
document.body.addEventListener("click", closeTdviewport, false);
//---------------------------------------------//
//------- Identify initiative panel -----------//
//---------------------------------------------//
// observe initiative panel adding
var initiativePanelObserver = new MutationObserver(function (mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
// parse added node
for (var node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.className.indexOf('ui-dialog') >= 0) {
// this is the initiative panel opening
for (var child of node.childNodes) {
if(child.id === 'initiativewindow') {
node.id = 'initiativedialog';
}
}
}
}
}
}
}
});
initiativePanelObserver.observe(document.body, {
childList: true
});
//------------------------------------------//
//---------- build deco custom -------------//
//------------------------------------------//
var decoLeft = document.createElement('div');
decoLeft.id = 'editor-deco-left';
document.body.appendChild(decoLeft);
var decoLeft2 = document.createElement('div');
decoLeft2.id = 'editor-deco-left-2';
document.body.appendChild(decoLeft2);
var decoRight = document.createElement('div');
decoRight.id = 'editor-deco-right';
document.body.appendChild(decoRight);
var decoRight2 = document.createElement('div');
decoRight2.id = 'editor-deco-right-2';
document.body.appendChild(decoRight2);
var circleContainer = document.createElement('div');
circleContainer.id = 'circle-container';
document.body.appendChild(circleContainer);
var circleView = document.createElement('div');
circleView.id = 'circle-view';
circleContainer.appendChild(circleView);
var wideView = document.createElement('img');
wideView.id = 'wide-view';
document.body.appendChild(wideView);
var hand = document.createElement('div');
hand.id = 'hand';
document.body.appendChild(hand);
var handExpanderHandler = document.createElement('div');
handExpanderHandler.id = 'hand-expander-handler';
hand.appendChild(handExpanderHandler);
var handRight = document.createElement('div');
handRight.id = 'hand-right';
document.body.appendChild(handRight);
var tabmenu = document.getElementById('rightsidebar').children[0];
var expanded = false;
function expandTable(expand) {
if(expand) {
hand.style.height = '280px';
} else {
hand.style.height = '120px';
}
expanded = expand;
}
handExpanderHandler.onclick = () => {
expandTable(!expanded);
}
var greekButton = document.createElement('li');
greekButton.className = 'tipme-delayed ui-state-default ui-corner-top';
var greekButtonLink = document.createElement('a');
greekButtonLink.className = 'pictos ui-tabs-anchor';
greekButtonLink.id = 'ui-id-00';
greekButtonLink.innerHTML = 'e';
greekButton.appendChild(greekButtonLink);
tabmenu.appendChild(greekButton);
var detailsCustom = document.createElement('div');
detailsCustom.id = 'details-custom';
document.body.appendChild(detailsCustom);
var detailsImg = document.createElement('div');
detailsImg.id = 'details-img';
detailsImg.style.backgroundSize = 'cover';
detailsImg.style.backgroundPosition = 'top center';
detailsCustom.appendChild(detailsImg);
var detailsTitle = document.createElement('div');
detailsTitle.id = 'details-title';
detailsCustom.appendChild(detailsTitle);
var detailsTxt = document.createElement('div');
detailsTxt.id = 'details-txt';
detailsCustom.appendChild(detailsTxt);
function displayDetailsData(cardData) {
if(cardData.type === 'Personnages') {
for(var pj of gameData.players) {
if(pj.nom === cardData.title) {
setCurrentPJ(pj);
displayCharSheets();
}
};
} else {
if(cardData.img) {
detailsImg.style.backgroundImage = 'url("'+cardData.img+'")';
} else {
detailsImg.style.backgroundImage = 'url("http://www.sda-campagne.fr/misc/greek_theme/data/default_card.jpg")';
}
detailsTitle.innerHTML = cardData.title;
detailsTxt.innerHTML = cardData.desc;
}
}
function displayDetails(detailsId) {
var details = localStorage.getItem("details");
console.log('displayDetails: ' + details);
if (details) {
console.log('parse data...');
details = JSON.parse(details);
for (var data of details) {
if(data.id === detailsId) {
console.log('parse res: ' + data);
displayDetailsData(data);
break;
}
}
} else {
console.log('no data');
}
}
//------------------------------------------------//
//---------- Image screen MJ control -------------//
//------------------------------------------------//
function onUserStatusKnown() {
menu_content.innerHTML = '';
if (!isGM) {
menu_content.style.display = 'none';
} else {
const screenItemCtrlPanel = document.createElement('div');
screenItemCtrlPanel.id = 'screen-item-control-panel';
screenItemCtrlPanel.style.background = '#333';
screenItemCtrlPanel.style.height = 'calc(100vh - 100px)';
screenItemCtrlPanel.style.opacity = '0.9';
menu_content.appendChild(screenItemCtrlPanel);
var circleToggleBtn = document.createElement('button');
circleToggleBtn.id = 'circle-toggle-btn';
var wideHideBtn = document.createElement('button');
wideHideBtn.id = 'wide-hide-btn';
var addBtn = document.createElement('button');
// retrieve stored images
var screenImages = localStorage.getItem("screenImages");
if (!screenImages) {
screenImages=`[]`;
}
screenImages = JSON.parse(screenImages);
function addImageControl(url) {
const imgDiv = document.createElement('div');
imgDiv.style.display = 'inline-block';
imgDiv.style.height = '120px';
imgDiv.style.position = 'relative';
imgDiv.padding = '0';
imgDiv.margin = '0';
const img = document.createElement('img');
img.className = "screen-item-img";
img.src = url;
img.style.height = "100%";
img.style.cursor = 'pointer';
img.ondblclick = () => {
sendDataByChat(url, 'circle');
};
// remove image button
const removeBtn = document.createElement('img');
removeBtn.src = 'http://www.sda-campagne.fr/misc/greek_theme/remove_cross.png';
removeBtn.style.position = 'absolute';
removeBtn.style.left = '2px';
removeBtn.style.bottom = '2px';
removeBtn.style.opacity = '0';
removeBtn.style.cursor = 'pointer';
removeBtn.style.background = '#333';
removeBtn.style.borderRadius = '50%';
removeBtn.onmouseenter = () => {
removeBtn.style.background = '#111';
};
removeBtn.onmouseleave = () => {
removeBtn.style.background = '#333';
};
removeBtn.onclick = () => {
if(confirm("Are you want remove this image ?")) {
screenItemCtrlPanel.removeChild(imgDiv);
screenImages = screenImages.filter((e) => {
console.log(e+' ? '+ (e != url));
return e != url;
});
// save data
localStorage.setItem("screenImages", JSON.stringify(screenImages));
}
};
// show large image button
const widerBtn = document.createElement('img');
widerBtn.src = 'http://www.sda-campagne.fr/misc/greek_theme/expand_icon.png';
widerBtn.style.position = 'absolute';
widerBtn.style.right = '2px';
widerBtn.style.bottom = '2px';
widerBtn.style.opacity = '0';
widerBtn.style.cursor = 'pointer';
widerBtn.style.background = '#333';
widerBtn.onmouseenter = () => {
widerBtn.style.background = '#111';
};
widerBtn.onmouseleave = () => {
widerBtn.style.background = '#333';
};
widerBtn.onclick = () => {
sendDataByChat(url, 'wide');
};
// show large image button
const asContextBtn = document.createElement('img');
asContextBtn.src = 'http://www.sda-campagne.fr/misc/greek_theme/pin_icon.png';
asContextBtn.style.position = 'absolute';
asContextBtn.style.right = '2px';
asContextBtn.style.top = '2px';
asContextBtn.style.opacity = '0';
asContextBtn.style.cursor = 'pointer';
asContextBtn.style.background = '#333';
asContextBtn.onmouseenter = () => {
widerBtn.style.background = '#111';
};
asContextBtn.onmouseleave = () => {
widerBtn.style.background = '#333';
};
asContextBtn.onclick = () => {
var data ={};
data.id = prompt("Give a context data name:");
if (!data.id) {
data.id = '?';
}
data.img = url;
//sendSimpleImgContext(data);
addContextCard(data, true);
};
imgDiv.onmouseover = () => {
removeBtn.style.opacity = '0.8';
widerBtn.style.opacity = '0.8';
asContextBtn.style.opacity = '0.8';
};
imgDiv.onmouseout = () => {
removeBtn.style.opacity = '0';
widerBtn.style.opacity = '0';
asContextBtn.style.opacity = '0';
};
imgDiv.appendChild(img);
imgDiv.appendChild(removeBtn);
imgDiv.appendChild(widerBtn);
imgDiv.appendChild(asContextBtn);
screenItemCtrlPanel.appendChild(imgDiv);
}
// 'circle toggle' button settings
var isCircleDisplayed = true;
circleToggleBtn.style.height = '90px';
circleToggleBtn.style.width = '70px';
circleToggleBtn.style.borderRadius = '40%';
circleToggleBtn.style.background = '#333';
circleToggleBtn.style.backgroundSize = 'cover';
circleToggleBtn.style.backgroundPosition = 'center center';
circleToggleBtn.style.backgroundImage = circleView.style.backgroundImage;
circleToggleBtn.style.borderWidth = '5px';
circleToggleBtn.style.color = '#ddd';
circleToggleBtn.style.position = 'absolute';
circleToggleBtn.style.top = '0';
circleToggleBtn.style.left = '0';
circleToggleBtn.style.transform = 'translateX(-100%) translateY(70px)';
circleToggleBtn.style.textShadow = '2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000';
circleToggleBtn.style.boxShadow = '0 0 25px black inset, 0 0 25px black inset';
circleToggleBtn.style.zIndex = '5';
circleToggleBtn.innerHTML = 'Hide Circle';
circleToggleBtn.onclick = () => {
isCircleDisplayed = !isCircleDisplayed;
sendDataByChat(isCircleDisplayed ? 'on' : 'off', 'circle');
};
screenItemCtrlPanel.appendChild(circleToggleBtn);
// 'hide wide-image' button settings
wideHideBtn.style.height = '90px';
wideHideBtn.style.width = '70px';
wideHideBtn.style.background = '#333';
wideHideBtn.style.backgroundSize = 'cover';
wideHideBtn.style.backgroundPosition = 'center center';
wideHideBtn.style.backgroundImage = circleView.style.backgroundImage;
wideHideBtn.style.borderWidth = '5px';
wideHideBtn.style.color = '#ddd';
wideHideBtn.style.position = 'absolute';
wideHideBtn.style.top = '0';
wideHideBtn.style.left = '0';
wideHideBtn.style.transform = 'translateX(-100%)';
wideHideBtn.style.textShadow = '2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000';
wideHideBtn.style.boxShadow = '0 0 25px black inset, 0 0 25px black inset';
wideHideBtn.innerHTML = 'Hide Back';
wideHideBtn.onclick = () => {
sendDataByChat('off', 'wide');
};
screenItemCtrlPanel.appendChild(wideHideBtn);
// 'add image' button settings
addBtn.style.height = '70px';
addBtn.style.width = '70px';
addBtn.style.background = 'rgb(36, 84, 100)';
addBtn.style.borderWidth = '5px';
addBtn.style.color = '#ddd';
addBtn.style.position = 'absolute';
addBtn.style.top = '0';
addBtn.style.right = '0';
addBtn.style.transform = 'translateX(100%)';
addBtn.style.boxShadow = '0 0 25px black inset, 0 0 25px black inset';
addBtn.innerHTML = 'Add';
addBtn.onclick = () => {
var url = prompt("URL de l'image :", "");
// add img
addImageControl(url);
// save data
screenImages.push(url);
localStorage.setItem("screenImages", JSON.stringify(screenImages));
};
screenItemCtrlPanel.appendChild(addBtn);
// add images to control panel
for(const screenImg of screenImages) {
addImageControl(screenImg);
}
}
}
//-----------------------------------
//---------- cards data -------------
//-----------------------------------
const cardsStr=`[
{
"id":"adonis",
"type":"Personnages",
"title":"Adonis",
"desc":"Adonis, enfant d'Appolon. ",
"img":"http://www.sda-campagne.fr/misc/greek_theme/data/Adonis.jpg"
},
{
"id":"nikos",
"type":"Personnages",
"title":"Nikos",
"desc":"Nikos... ",
"img":"http://www.sda-campagne.fr/misc/greek_theme/data/Nikos.jpg"
},
{
"id":"argurios",
"type":"Personnages",
"title":"Argurios",
"desc":"Argurios, protégé d'Athéna. ",
"img":"http://www.sda-campagne.fr/misc/greek_theme/data/Argurios.jpg"
},
{
"id":"athena",
"type":"Panthéon",
"title":"Athena",
"desc":"Athéna est la déesse grecque de la sagesse, de la stratégie guerrière, de la justice et du combat mais aussi la déesse protectrice des artisans et de la cité d'Athènes. C'est la fille de Zeus et de Métis. ",
"img":"http://www.sda-campagne.fr/misc/greek_theme/data/Athena.jpg"
},
{
"id":"hecate",
"type":"Panthéon",
"title":"Hécate",
"desc":"<p>Fille de <b>Persès</b> et <b>Astéria</b>, la titanide Hécate appartient à la première génération des dieux. Crainte et respectée par tous, elle dispense richesses et victoires aux mortelles comme aux immortels. </p><p>Hécate fait partie de la Triade Lunaire, avec <b>Séléné</b> et <b>Artémis</b> : Hécate représente la nouvelle lune ou lune noire, qui symbolise la mort. </p><p>Hécate présente deux aspects opposés : déesse protectrice liée aux cultes de la fertilité, accordant richesse matérielle et spirituelle, honneurs et sagesse, conductrice des âmes emportées par la tempête; mais aussi déesse de l'ombre et des morts.</p><p>Déesse nocturne et magique, elle préside aux enchantements et aux incantations. Elle est une fidèle compagne de <b>Perséphone</b> depuis qu'elle aida sa mère <b>Déméter</b> à la retrouver.</p>",
"img":"http://www.sda-campagne.fr/misc/greek_theme/data/hecate.jpg"
},
{
"id":"hellen",
"type":"Héros",
"title":"Hellen",
"desc":"<p>Fils de <b>Deucalion</b> et de <b>Pyrrha</b>, seuls survivants du déluge de Zeus, Hellen fut roi de Phthie en Thessalie.</p>On lui attribue trois fils, <b>Doros</b>, <b>Eole</b> et <b>Xouthos</b>, nés de la nymphe <b>Orséis</b>. Il est regardé par tout les grecs comme leur père. De Doros et Eole sont issus les Doriens et les Eoliens. Quant aux deux fils de Xouthos, <b>Achaeos</b> et <b>Ion</b>, ils engendrèrent les Achéens et les Ioniens."
},
{
"id":"athenes",
"type":"Atlas",
"title":"Athènes",
"desc":"Ville sous la protection d'<b>Athéna</b>. ",
"img":"http://www.sda-campagne.fr/misc/greek_theme/data/athenes.jpg"
}
]`;
localStorage.setItem("data", cardsStr);
localStorage.setItem("cards", JSON.stringify([ "adonis", "nikos", "argurios", "athena", "hecate", "hellen", "athenes" ]));
//-----------------------------------------------//
//---------- cards menu & containers ------------//
//-----------------------------------------------//
// -- menu bottom left
var handMenubarLeft = document.createElement('ul');
handMenubarLeft.id = 'hand-menubar-left';
hand.appendChild(handMenubarLeft);
// -- menu bottom right
var handMenubarRight = document.createElement('ul');
handMenubarRight.id = 'hand-menubar-right';
hand.appendChild(handMenubarRight);
// -- table
var handContainer = document.createElement('ul');
handContainer.id = 'table-cards';
hand.appendChild(handContainer);
// -- context
var contextContainer = document.createElement('ul');
contextContainer.id = 'context-cards';
hand.appendChild(contextContainer);
var contextContainerActive = document.createElement('ul');
contextContainerActive.id = 'context-cards-active';
document.body.appendChild(contextContainerActive);
setAsDropContainer(hand, (droppedElt, onDropOut) => {
addCardDroppedCard(droppedElt, contextContainer, onDropOut);
});
//-----------------------------------
//---------- cards data -------------
//-----------------------------------
function addCardDroppedCard(droppedElt, destParent, onDropOut) {
const oldParent = droppedElt.parentNode;
const droppedClass = 'as-dropped-card';
// create new card
var card = document.createElement('li');
card.className = 'dropped-card';
card.style.position = 'relative';
card.appendChild(droppedElt);
card.onmouseenter = () => {
new Audio('http://sda-campagne.fr/assets/sound/page-turn.wav').play();
};
card.onclick = () => {
card.classList.toggle('active');
};
card.ondblclick = () => {
console.log('droppedElt: ' + droppedElt.id);
console.log('card: ' + card.tagName + '.' + card.id);
console.log('oldParent: ' + oldParent.tagName + '.' + oldParent.id);
console.log('destParent: ' + destParent.id);
// remove card & back to old parent
droppedElt.classList.remove(droppedClass);
oldParent.appendChild(droppedElt);
droppedElt.style.left = 'calc(50% - 155px)';
droppedElt.style.top = '40%';
destParent.removeChild(card);
if(onDropOut) {
onDropOut();
}
};
droppedElt.classList.add(droppedClass);
destParent.appendChild(card);
}
function addCard(data, parent) {
console.log('addCard ' + data.id);
var card = document.createElement('li');
if(data.img) {
card.style.backgroundImage = 'url("' + data.img + '")';
} else {
card.style.backgroundImage = 'url("http://www.sda-campagne.fr/misc/greek_theme/data/default_card.jpg")';
}
if(data.id) {
card.innerHTML = data.title ? data.title : data.id;
}
card.onmouseover = () => {
if(card.parentNode.id !== contextContainerActive.id) {
new Audio('http://sda-campagne.fr/assets/sound/page-turn.wav').play();
}
};
card.onclick = () => {
displayDetailsData(data);
if(card.parentNode.id === contextContainerActive.id) {
card.style.opacity = '0';
setTimeout(() => {
contextContainer.appendChild(card);
card.classList.toggle('active');
card.style.opacity = '';
setTimeout(() => {
card.classList.toggle('active');
}, 1000);
}, 100);
} else {
card.classList.toggle('active');
}
};
parent.appendChild(card);
}
function addContextCard(data, active) {
addCard(data, active ? contextContainerActive : contextContainer);
}
function addTableCard(data) {
console.log('addTableCard ' + data.id);
addCard(data, handContainer);
}
function cleanCardTable() {
handContainer.innerHTML='';
}
function displayTableCards(cardType) {
cleanCardTable();
console.log('cardType' + cardType);
// parse cards owned
var cards = localStorage.getItem("cards");
cards = JSON.parse(cards);
var dataCardList = localStorage.getItem("data");
dataCardList = JSON.parse(dataCardList);
dataCardList.filter(data => {
console.log(data.id + ' check ?' + data.type + ' => ' + ((cards.indexOf(data.id) >= 0) && (data.type === cardType)));
return (cards.indexOf(data.id) >= 0) && (data.type === cardType);
}).forEach(addTableCard);
}
//------------------------------------------
//---------- custom menu right -------------
//------------------------------------------
// TODO
//------------------------------------------
//------------ bottom menu bar -------------
//------------------------------------------
function selectMenuItem(selection) {
console.log('cleanMenuSelection BEGIN');
for (var menuItem1 of handMenubarLeft.children) {
console.log('menuItem:' + menuItem1);
menuItem1.classList.remove('selected');
}
for (var menuItem2 of handMenubarRight.children) {
console.log('menuItem:' + menuItem2);
menuItem2.classList.remove('selected');
}
selection.classList.add('selected');
expandTable(true);
console.log('cleanMenuSelection END');
}
// ---- Left: Personnages
var menuItemPersonnages = document.createElement('li');
menuItemPersonnages.id = 'menu-item-personnages';
menuItemPersonnages.innerHTML = 'Personnages';
menuItemPersonnages.onclick = () => {
selectMenuItem(menuItemPersonnages);
displayTableCards(menuItemPersonnages.innerHTML);
};
handMenubarLeft.appendChild(menuItemPersonnages);
// ---- Left: Notes
var menuItemNotes = document.createElement('li');
menuItemNotes.id = 'menu-item-notes';
menuItemNotes.innerHTML = 'Notes';
menuItemNotes.onclick = () => {
selectMenuItem(menuItemNotes);
displayTableCards(menuItemNotes.innerHTML);
};
handMenubarLeft.appendChild(menuItemNotes);
// ---- Left: Atlas
var menuItemAtlas = document.createElement('li');
menuItemAtlas.id = 'menu-item-atlas';
menuItemAtlas.innerHTML = 'Atlas';
menuItemAtlas.onclick = () => {
selectMenuItem(menuItemAtlas);
displayTableCards(menuItemAtlas.innerHTML);
};
handMenubarLeft.appendChild(menuItemAtlas);
// ---- Right: Panthéon
var menuItemPantheon = document.createElement('li');
menuItemPantheon.id = 'menu-item-pantheon';
menuItemPantheon.innerHTML = 'Panthéon';
menuItemPantheon.onclick = () => {
selectMenuItem(menuItemPantheon);
displayTableCards(menuItemPantheon.innerHTML);
};
handMenubarRight.appendChild(menuItemPantheon);
// ---- Right: Héros
var menuItemHeros = document.createElement('li');
menuItemHeros.id = 'menu-item-heros';
menuItemHeros.innerHTML = 'Héros';
menuItemHeros.onclick = () => {
selectMenuItem(menuItemHeros);
displayTableCards(menuItemHeros.innerHTML);
};
handMenubarRight.appendChild(menuItemHeros);
// ---- Right: Mythes
var menuItemMythes = document.createElement('li');
menuItemMythes.id = 'menu-item-heros';
menuItemMythes.innerHTML = 'Mythes';
menuItemMythes.onclick = () => {
selectMenuItem(menuItemMythes);
displayTableCards(menuItemMythes.innerHTML);
};
handMenubarRight.appendChild(menuItemMythes);
//---------------------------------------
//------------ dice 6 roller ------------
//---------------------------------------
var bolDiceRoller = document.createElement('div');
bolDiceRoller.id = 'bol-dice-roller';
document.body.appendChild(bolDiceRoller);
// -- build dice disk
//-------------------
var diceRollerDisk = document.createElement('div');
diceRollerDisk.id = 'dice-roller-disk';
bolDiceRoller.appendChild(diceRollerDisk);
var diceRollerBackDisk = document.createElement('div');
diceRollerBackDisk.id = 'dice-roller-back-disk';
bolDiceRoller.appendChild(diceRollerBackDisk);
// -- build circle menu:
//----------------------
var diceRollAuth;
function defineDiceRollAuth(charName) {
diceRollAuth = charName;
}
// ---- menu item Attribute :
var menuSelectorAttribute = document.createElement('div');
menuSelectorAttribute.id = 'dice-menu-selector-attribute';
menuSelectorAttribute.className = 'dice-menu-selector-item';
menuSelectorAttribute.onclick = displayCharSheets;
diceRollerBackDisk.appendChild(menuSelectorAttribute);
var menuSelectorAttributeLabel = document.createElement('div');
menuSelectorAttributeLabel.id = 'dice-menu-selector-attribute-label';
menuSelectorAttributeLabel.className = 'dice-menu-selector-item-label';
menuSelectorAttributeLabel.innerHTML = 'Attribut';
diceRollerBackDisk.appendChild(menuSelectorAttributeLabel);
var menuSelectorAttributeValue = document.createElement('div');
menuSelectorAttributeValue.id = 'dice-menu-selector-attribute-value';
menuSelectorAttributeValue.className = 'dice-menu-selector-item-value';
bolDiceRoller.appendChild(menuSelectorAttributeValue);
var attributeDiceValue;
var attributeDiceName;
function selectDiceAttributeModifier(name, value) {
if (name) {
attributeDiceName = name;
} else {
attributeDiceName = 'Attribut';
}
menuSelectorAttributeLabel.innerHTML = attributeDiceName;
attributeDiceValue = value;
menuSelectorAttributeValue.innerHTML = attributeDiceValue >= 0 ? ('+' + attributeDiceValue) : attributeDiceValue;
}
selectDiceAttributeModifier(0);
// ---- menu item Skill :
var menuSelectorSkill = document.createElement('div');
menuSelectorSkill.id = 'dice-menu-selector-skill';
menuSelectorSkill.className = 'dice-menu-selector-item';
menuSelectorSkill.onclick = displayCharSheets;
diceRollerBackDisk.appendChild(menuSelectorSkill);
var menuSelectorSkillLabel = document.createElement('div');
menuSelectorSkillLabel.id = 'dice-menu-selector-skill-label';
menuSelectorSkillLabel.className = 'dice-menu-selector-item-label';
menuSelectorSkillLabel.innerHTML = 'Compétence';
diceRollerBackDisk.appendChild(menuSelectorSkillLabel);
var menuSelectorSkillValue = document.createElement('div');
menuSelectorSkillValue.id = 'dice-menu-selector-skill-value';
menuSelectorSkillValue.className = 'dice-menu-selector-item-value';
bolDiceRoller.appendChild(menuSelectorSkillValue);
var skillDiceValue;
var skillDiceName;
function selectDiceSkillModifier(name, value) {
if (name) {
skillDiceName = name;
} else {
skillDiceName = 'Compétence';
}
menuSelectorSkillLabel.innerHTML = skillDiceName;
skillDiceValue = value;
menuSelectorSkillValue.innerHTML = skillDiceValue >= 0 ? ('+' + skillDiceValue) : skillDiceValue;
}
selectDiceSkillModifier(0);
// ---- menu item Modifier (difficulty / custom) :
var menuSelectorModif = document.createElement('div');
menuSelectorModif.id = 'dice-menu-selector-modif';
menuSelectorModif.className = 'dice-menu-selector-item';
menuSelectorModif.onclick = toggleModifChooser;
diceRollerBackDisk.appendChild(menuSelectorModif);
var menuSelectorModifLabel = document.createElement('div');
menuSelectorModifLabel.id = 'dice-menu-selector-modif-label';
menuSelectorModifLabel.className = 'dice-menu-selector-item-label';
menuSelectorModifLabel.innerHTML = 'Difficulté';
diceRollerBackDisk.appendChild(menuSelectorModifLabel);
var menuSelectorModifValue = document.createElement('div');
menuSelectorModifValue.id = 'dice-menu-selector-modif-value';
menuSelectorModifValue.className = 'dice-menu-selector-item-value';
bolDiceRoller.appendChild(menuSelectorModifValue);
var modifDiceValue;
var modifDiceName;
function selectDiceModifModifier(value, label) {
modifDiceValue = value;
if(label) {
modifDiceName = label + ' ('+ (value>=0 ? ('+'+value) : value) + ')';
} else {
modifDiceName = 'Difficulté ' + (value>=0 ? ('+'+value) : value);
}
menuSelectorModifValue.innerHTML = modifDiceValue >= 0 ? ('+' + modifDiceValue) : modifDiceValue;
menuSelectorModifLabel.innerHTML = label ? ('Difficulté : ' + label) : 'Difficulté';
}
selectDiceModifModifier(0);
// ----------- Bonus / Malus :
var btnDiceBonus = document.createElement('div');
btnDiceBonus.id = 'btn-dice-bonus';
btnDiceBonus.onclick = addDiceBonus;
diceRollerBackDisk.appendChild(btnDiceBonus);
var btnDiceMalus = document.createElement('div');
btnDiceMalus.id = 'btn-dice-malus';
btnDiceMalus.onclick = addDiceMalus;
diceRollerBackDisk.appendChild(btnDiceMalus);
var diceRollLevel = 0;
function resetDices(removeDices) {
while (diceRoller.firstChild) {
diceRoller.removeChild(diceRoller.firstChild);
}
diceRoller.appendChild(createDiceElement());
diceRoller.appendChild(createDiceElement());
if (removeDices) {
diceRollLevel = 0;
} else {
var n = Math.abs(diceRollLevel);
while(n > 0) {
diceRoller.appendChild(createDiceElement());
n--;
}
}
diceRollerDisk.classList.remove('bonus');
diceRollerDisk.classList.remove('malus');
btnDiceMalus.classList.remove('reset');
btnDiceBonus.classList.remove('reset');
bolDiceRoller.classList.remove('rolled');
bolDiceRoller.classList.remove('success');
bolDiceRoller.classList.remove('fail');
bolDiceRoller.classList.remove('heroic-success');
bolDiceRoller.classList.remove('fumble');
}
function addDiceBonus() {
if (diceRollLevel >= 0) {
resetDices(false);
if( diceRollLevel >= 4) {
return; // max nb of bonus dice
}
diceRollLevel++;
diceRoller.appendChild(createDiceElement());
diceRollerDisk.classList.add('bonus');
btnDiceMalus.classList.add('reset');
} else {
resetDices(true);
}
}
function addDiceMalus() {
if (diceRollLevel <= 0) {
resetDices(false);
if( diceRollLevel <= -4) {
return; // max nb of malus dice
}
diceRollLevel--;
diceRoller.appendChild(createDiceElement());
diceRollerDisk.classList.add('malus');
btnDiceBonus.classList.add('reset');
} else {
resetDices(true);
}
}
// --------- Dice roll result :
var diceRollerResult = document.createElement('div');
diceRollerResult.id = 'dice-roller-result';
bolDiceRoller.appendChild(diceRollerResult);
// -- build modificateur chooser (difficulty or custom):
//------------------------------------------------------
var diceRollerModifChooser = document.createElement('div');
diceRollerModifChooser.id = 'dice-roller-chooser';
bolDiceRoller.appendChild(diceRollerModifChooser);
function toggleModifChooser() {
if (diceRollerModifChooser.style.opacity === '1') {
hideModifChooser();
} else {
showModifChooser();
}
}
function showModifChooser() {
diceRollerModifChooser.style.display = 'block';
setTimeout(() => {
diceRollerModifChooser.style.opacity = '1';
}, 100);
menuSelectorModif.classList.add('active');
}
function hideModifChooser() {
diceRollerModifChooser.style.opacity = '0';
setTimeout(() => {
diceRollerModifChooser.style.display = 'none';
}, 600);
menuSelectorModif.classList.remove('active');
}
//-- dice modif Tres facile
var diceModif_TresFacile = document.createElement('div');
diceModif_TresFacile.className = 'dice-modif';
diceModif_TresFacile.innerHTML = '<div>Très Facile</div><div>+2</div>';
diceModif_TresFacile.onclick = () => {
selectDiceModifModifier(2, 'Très Facile');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_TresFacile);
//-- dice modif Facile
var diceModif_Facile = document.createElement('div');
diceModif_Facile.className = 'dice-modif';
diceModif_Facile.innerHTML = '<div>Facile</div><div>+1</div>';
diceModif_Facile.onclick = () => {
selectDiceModifModifier(1, 'Facile');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Facile);
//-- dice modif Moyen
var diceModif_Moyen = document.createElement('div');
diceModif_Moyen.className = 'dice-modif';
diceModif_Moyen.innerHTML = '<div>Moyen</div><div>0</div>';
diceModif_Moyen.onclick = () => {
selectDiceModifModifier(0, 'Moyen');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Moyen);
//-- dice modif Ardue
var diceModif_Ardue = document.createElement('div');
diceModif_Ardue.className = 'dice-modif';
diceModif_Ardue.innerHTML = '<div>Ardue</div><div>-1</div>';
diceModif_Ardue.onclick = () => {
selectDiceModifModifier(-1, 'Ardue');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Ardue);
//-- dice modif Difficile
var diceModif_Difficile = document.createElement('div');
diceModif_Difficile.className = 'dice-modif';
diceModif_Difficile.innerHTML = '<div>Difficile</div><div>-2</div>';
diceModif_Difficile.onclick = () => {
selectDiceModifModifier(-2, 'Difficile');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Difficile);
//-- dice modif Très Difficile
var diceModif_TresDifficile = document.createElement('div');
diceModif_TresDifficile.className = 'dice-modif';
diceModif_TresDifficile.innerHTML = '<div>Très Difficile</div><div>-4</div>';
diceModif_TresDifficile.onclick = () => {
selectDiceModifModifier(-4, 'Très Difficile');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_TresDifficile);
//-- dice modif Impossible
var diceModif_Impossible = document.createElement('div');
diceModif_Impossible.className = 'dice-modif';
diceModif_Impossible.innerHTML = '<div>Impossible</div><div>-6</div>';
diceModif_Impossible.onclick = () => {
selectDiceModifModifier(-6, 'Impossible');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Impossible);
//-- dice modif Heroïque
var diceModif_Heroique = document.createElement('div');
diceModif_Heroique.className = 'dice-modif';
diceModif_Heroique.innerHTML = '<div>Heroïque</div><div>-8</div>';
diceModif_Heroique.onclick = () => {
selectDiceModifModifier(-8, 'Heroïque');
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Heroique);
//-- dice modif custom
var diceModifCustonValue = 0;
var diceModif_Custom = document.createElement('button');
diceModif_Custom.className = 'dice-modif-mano dice-modif';
diceModif_Custom.innerHTML = 'Autre';
diceModif_Custom.onclick = () => {
selectDiceModifModifier(diceModifCustonValue);
hideModifChooser();
}
diceRollerModifChooser.appendChild(diceModif_Custom);
//-- dice modif custom button '+'
var diceModif_CustomPlus = document.createElement('button');
diceModif_CustomPlus.id = 'dice-modif-plus';
diceModif_CustomPlus.className = 'dice-modif-btn';
diceModif_CustomPlus.innerHTML = '+';
diceModif_CustomPlus.onclick = () => {
diceModifCustonValue++;
diceModif_Custom.innerHTML = diceModifCustonValue >= 0 ? ('+' + diceModifCustonValue) : diceModifCustonValue;
}
diceRollerModifChooser.appendChild(diceModif_CustomPlus);
//-- dice modif custom button '-'
var diceModif_CustomMinus = document.createElement('button');
diceModif_CustomMinus.id = 'dice-modif-minus';
diceModif_CustomMinus.className = 'dice-modif-btn';
diceModif_CustomMinus.innerHTML = '-';
diceModif_CustomMinus.onclick = () => {
diceModifCustonValue--;
diceModif_Custom.innerHTML = diceModifCustonValue >= 0 ? ('+' + diceModifCustonValue) : diceModifCustonValue;
}
diceRollerModifChooser.appendChild(diceModif_CustomMinus);
// setAsDraggable(diceRollerDisk);
// -- build roller (dice container):
//----------------------------------
var diceRoller = document.createElement('div');
diceRoller.className = 'dice6-roller';
diceRollerDisk.appendChild(diceRoller);
diceRoller.appendChild(createDiceElement());
diceRoller.appendChild(createDiceElement());
function createDiceElement() {
var dice = document.createElement('section');
dice.className = 'dice';
var cube = document.createElement('div');
cube.className = 'dice-cube';
dice.appendChild(cube);
var front = document.createElement('div');
front.className = 'dice-front';
front.innerHTML = '<span class="dot dot1"></span>'
cube.appendChild(front);
var bottom = document.createElement('div');
bottom.className = 'dice-bottom';
bottom.innerHTML = '<span class="dot dot1"></span><span class="dot dot2"></span>';
cube.appendChild(bottom);
var right = document.createElement('div');
right.className = 'dice-right';
right.innerHTML = '<span class="dot dot1"></span><span class="dot dot2"></span><span class="dot dot3"></span>';
cube.appendChild(right);
var left = document.createElement('div');
left.className = 'dice-left';
left.innerHTML = '<span class="dot dot1"></span><span class="dot dot2"></span><span class="dot dot3"></span><span class="dot dot4"></span>';
cube.appendChild(left);
var top = document.createElement('div');
top.className = 'dice-top';
top.innerHTML = '<span class="dot dot1"></span><span class="dot dot2"></span><span class="dot dot3"></span><span class="dot dot4"></span><span class="dot dot5"></span>';
cube.appendChild(top);
var back = document.createElement('div');
back.className = 'dice-back';
back.innerHTML = '<span class="dot dot1"></span><span class="dot dot2"></span><span class="dot dot3"></span><span class="dot dot4"></span><span class="dot dot5"></span><span class="dot dot6"></span>';
cube.appendChild(back);
return dice;
}
var reset = false;
diceRollerDisk.ondblclick = function() {
var resValues = [];
var resDices = [];
var cubes = document.getElementsByClassName('dice-cube');
var min = 4;
var max = 12;
if(!reset) {
setTimeout(() => {
var d1, d2;
var d1Idx, d2Idx;
var d1Elt, d2Elt;
if (diceRollLevel >= 0) {
d1 = 0;
d2 =0;
} else {
d1 = 6;
d2 = 6;
}
var diceSelection = [];
for(var idx in resValues) {
diceSelection.add(false);
const value = resValues[idx];
const elt = resDices[idx];
console.log('check value : ' + value);
// store dice value
if (diceRollLevel > 0) {
if (value > d1 || value > d2) {
if (d1 > d2) {
console.log('replace D1 '+d2+' by ' + value);
d2 = value;
d2Elt = elt;
d2Idx = idx;
} else {
console.log('replace D1 '+d1+' by ' + value);
d1 = value;
d1Elt = elt;
d1Idx = idx;
}
}
} else if (diceRollLevel < 0) {
if (value < d1 || value < d2) {
if (d1 < d2) {
console.log('replace D1 '+d2+' by ' + value);
d2 = value;
d2Elt = elt;
d2Idx = idx;
} else {
console.log('replace D1 '+d1+' by ' + value);
d1 = value;
d1Elt = elt;
d1Idx = idx;
}
}
} else {
if(d1 == 0) {
d1 = value;
d1Elt = elt;
d1Idx = idx;
} else {
d2 = value;
d2Elt = elt;
d2Idx = idx;
}
}
}
diceSelection[d1Idx] = true;
diceSelection[d2Idx] = true;
if (diceRollLevel > 0) {
d1Elt.classList.add('dice-max');
d2Elt.classList.add('dice-max');
} else if (diceRollLevel < 0) {
d1Elt.classList.add('dice-min');
d2Elt.classList.add('dice-min');
}
console.log('Resultat D1: ' + d1);
console.log('Resultat D2 : ' + d2);
bolDiceRoller.classList.add('rolled');
var result = d1+d2;
var type = null;
var modif = modifDiceValue + attributeDiceValue + skillDiceValue;
if(result == 12) {
// heroic success
bolDiceRoller.classList.add('heroic-success');
diceRollerResult.innerHTML = result;
type = 'heroic';
} else if(result == 2) {
// fumble
bolDiceRoller.classList.add('fumble');
diceRollerResult.innerHTML = '';
type = 'fumble';
} else {
// normal result
result += modif;
bolDiceRoller.classList.add(result > 8 ? 'success' : 'fail');
type = result > 8 ? 'success' : 'fail';
diceRollerResult.innerHTML = result;
}
var rollResult = {
auth: diceRollAuth,
attribute: {
name: attributeDiceName,
value: attributeDiceValue
},
skill: {
name: skillDiceName,
value: skillDiceValue
},
modif: modif,
diff: modifDiceName,
dices: resValues,
diceSelection: diceSelection,
result: result,
type: type,
diceRollLevel: diceRollLevel
};
sendBolDiceResult(rollResult);
}, 3000);
} else {
resetDices(true);
}
Array.from(cubes).forEach((cube) => {
if(!reset) {
var xRand = getRandom(max, min);
var yRand = getRandom(max, min);
var zRand = getRandom(0, 3);
var rollZXY = [
[ /*Z:0*/
[1, 4, 6, 3], /*X:0*/
[2, 4, 5, 3], /*X:1*/
[6, 4, 1, 3], /*X:2*/
[5, 4, 2, 3] /*X:3*/
],
[ /*Z:1*/
[1, 2, 6, 5],
[2, 6, 5, 1],
[6, 5, 1, 2],
[5, 1, 2, 6]
],
[ /*Z:2*/
[1, 3, 6, 4],
[2, 3, 5, 4],
[6, 3, 1, 4],
[5, 3, 2, 4]
]
];
//console.log('zRand:'+zRand + ' ; xRand:'+xRand+ ' ; yRand:' +yRand);
var x = (xRand / 90) % 4;
var y = (yRand / 90) % 4;
var z = (zRand / 90) % 4;
console.log('z:' + z + ' ; x:' + x + ' ; y:' + y);
console.log('EXPECTED : ' + rollZXY[z][x][y]);
cube.style.transition = 'transform 3s';
roll(cube, xRand, yRand, zRand);
resValues.add(rollZXY[z][x][y]);
resDices.add(cube);
}
});
reset = !reset;
};
function roll(cube, x, y, z) {
var transX = 'rotateX(' + x + 'deg) ';
var transY = 'rotateY(' + y + 'deg) ';
var transZ = 'rotateZ(' + z + 'deg) ';
cube.style.transform = transY + transZ + transX;
cube.style.webkitTransform = cube.style.transform;
}
function getRandom(max, min) {
return (Math.floor(Math.random() * (max-min)) + min) * 90;
}
function sendBolDiceResult(rollResult) {
var msg = '[dice-roll-bol]:' + JSON.stringify(rollResult);
chatTextArea.value = msg;
chatBtn.click();
}
// ------------- Character Sheet custom ------------ //
class SelectableWidget {
constructor(parent, name, value) {
this.model = { name: name, value: value };
this.buildUI(parent);
}
toggle() {
this.ui.classList.toggle('selected');
}
select() {
this.ui.classList.add('selected');
}
unselect() {
this.ui.classList.remove('selected');
}
update(value) {
this.model.value = value;
this.valueUI.innerHTML = this.model.value;
}
buildUI(parent) {
var ui = document.createElement('div');
var titleUI = document.createElement('div');
var valueUI = document.createElement('div');
ui.className = 'char-sheet-selectable';
titleUI.className = 'char-sheet-title';
valueUI.className = 'char-sheet-value';
titleUI.innerHTML = this.model.name;
valueUI.innerHTML = this.model.value;
ui.appendChild(titleUI);
ui.appendChild(valueUI);
parent.appendChild(ui);
this.ui = ui;
this.valueUI = valueUI;
}
dispose() {
if(this.ui.parentNode) {
this.ui.parentNode.removeChild(this.ui);
}
}
}
var sheetRegister = new Map();
class characterSheet {
constructor() {
this.uiSelectionModel = {}; // selection ui model
this.rollModel = {}; // dice roll model
this.storage = { ui: null, minimizedUI: null};
}
setCharacter(character) {
if (character) {
this.key = character.nom;
sheetRegister.set(this.key, this);
if(!this.character) {
this.character = character;
this.initUI();
} else {
this.character = character;
this.updateUI();
}
}
}
initUI() {
// container
const container = document.createElement('div');
container.id = 'character-sheet-ui';
container.setAttribute('draggable', true);
// row 1 : character data
const row1 = document.createElement('div');
row1.className = 'character-sheet-row';
// row 1 column 1 : Name + Image
const r1c1 = document.createElement('div');
const storage = this.storage;
r1c1.ondblclick = () => {
this.toggleMinimized();
};
//r1c1.onclick = displayPJChooser;
r1c1.classList.add('character-sheet-column');
// -- image
const r1c1Image = document.createElement('div');
r1c1Image.className = 'character-sheet-image';
if (this.character.image) {
r1c1Image.style.backgroundImage = 'url(\'' + this.character.image + '\')';
}
// -- name
const r1c1Title = document.createElement('div');
r1c1Title.className = 'character-sheet-title';
r1c1Title.innerHTML = this.character.nom;
r1c1Title.onclick = () => {
container.classList.remove("expanded");
this.toggleMinimized();
};
// -- close button
const closeBtn = document.createElement('div');
closeBtn.className = 'btn-close-sheet';
closeBtn.onclick = () => {
this.dispose();
};
this.nameUI = r1c1Title;
this.imageUI = r1c1Image;
r1c1Image.appendChild(r1c1Title);
r1c1Image.appendChild(closeBtn);
r1c1.appendChild(r1c1Image);
// row 1 column 2 : Attributs
const r1c2 = document.createElement('div');
r1c2.className = 'character-sheet-column';
// -- title : Attributs
const r1c2Title = document.createElement('p');
r1c2Title.className = 'character-sheet-subtitle';
r1c2Title.innerHTML = 'ATTRIBUTS';
r1c2.appendChild(r1c2Title);
// -- valeurs
this.vigueurUI = this.buildAttributUI(r1c2, 'Vigueur' , this.character.attributs.vigueur);
this.agiliteUI = this.buildAttributUI(r1c2, 'Agilité' , this.character.attributs.agilite);
this.espritUI = this.buildAttributUI(r1c2, 'Esprit' , this.character.attributs.esprit);
this.auraUI = this.buildAttributUI(r1c2, 'Aura' , this.character.attributs.aura);
// row 1 column 3 : Carrieres
const r1c3 = document.createElement('div');
r1c3.className = 'character-sheet-column';
// -- title : Carrieres
const r1c3Title = document.createElement('p');
r1c3Title.className = 'character-sheet-subtitle';
r1c3Title.innerHTML = 'CARRIERES';
r1c3.appendChild(r1c3Title);
// -- valeurs
this.carrieresUIList = [];
for (var carriere of this.character.carrieres) {
this.carrieresUIList.add(this.buildSkillUI(r1c3, carriere.nom , carriere.score));
}
this.carrieresUI = r1c3;
// row 1 column 4 : Combat
const r1c4 = document.createElement('div');
r1c4.className = 'character-sheet-column';
// -- title : Combat
const r1c4Title = document.createElement('p');
r1c4Title.className = 'character-sheet-subtitle';
r1c4Title.innerHTML = 'COMBAT';
r1c4.appendChild(r1c4Title);
this.initiativeUI = this.buildSkillUI(r1c4, 'Initiative' , this.character.combat.initiative);
this.meleeUI = this.buildSkillUI(r1c4, 'Mêlée' , this.character.combat.melee);
this.tirUI = this.buildSkillUI(r1c4, 'Tir' , this.character.combat.tir);
this.defenseUI = this.buildSkillUI(r1c4, 'Défense' , this.character.combat.defense);
// row 2 : difficulty dice roll
const row2 = document.createElement('div');
row2.className = 'character-sheet-adv-row';
this.modifUI = row2;
const r2c1 = this.buildDifficultyBtn('Très Facile', 2);
const r2c2 = this.buildDifficultyBtn('Facile', 1);
const r2c3 = this.buildDifficultyBtn('Normal', 0);
const r2c4 = this.buildDifficultyBtn('Ardue', -1);
const r2c5 = this.buildDifficultyBtn('Difficile', -2);
const r2c6 = this.buildDifficultyBtn('Très difficile', -4);
const r2c7 = this.buildDifficultyBtn('Impossible', -6);
const r2c8 = this.buildDifficultyBtn('Héroïque', -8);
// expander to see advanced data
const sheetExpander = document.createElement('div');
sheetExpander.className = 'sheet-expander';
sheetExpander.onclick = () => {
container.classList.remove("minimized");
container.classList.toggle("expanded");
};
// Advanced data
const advancedData = document.createElement('div');
advancedData.className = 'adv-data';
// 1: Health + Heoric points + Ubris
const advDataPoints = document.createElement('div');
advDataPoints.className = 'adv-data-points';
const healthUI = document.createElement('div');
healthUI.className = 'adv-data-points-value';
healthUI.innerHTML = this.character.vitalite;
const heroicUI = document.createElement('div');
heroicUI.className = 'adv-data-points-value';
heroicUI.innerHTML = this.character.heroisme;
const ubrisUI = document.createElement('div');
ubrisUI.className = 'adv-data-points-value';
ubrisUI.innerHTML = ('demesure' in this.character) ? this.character.demesure : '0';
const advancedDataBorder = document.createElement('div');
advancedDataBorder.className = 'adv-data-points-bar-right';
advDataPoints.appendChild(healthUI);
advDataPoints.appendChild(heroicUI);
advDataPoints.appendChild(ubrisUI);
advDataPoints.appendChild(advancedDataBorder);
// 2: Advanced menu
const advDataMenu = document.createElement('div');
advDataMenu.className = 'adv-data-menu';
const advDataMenuTop = document.createElement('div');
advDataMenuTop.className = 'adv-data-menu-top';
const advDataMenuEquipement = document.createElement('div');
advDataMenuEquipement.className = 'adv-data-menu-top-item';
advDataMenuEquipement.innerHTML = 'Equipement';
const advDataMenuAvantages = document.createElement('div');
advDataMenuAvantages.className = 'adv-data-menu-top-item';
advDataMenuAvantages.innerHTML = 'Avantages';
const advDataMenuDesavantages = document.createElement('div');
advDataMenuDesavantages.className = 'adv-data-menu-top-item';
advDataMenuDesavantages.innerHTML = 'Désavantages';
const advDataMenuPouvoir = document.createElement('div');
advDataMenuPouvoir.className = 'adv-data-menu-top-item';
advDataMenuPouvoir.innerHTML = 'Pouvoirs';
const advDataMenuHistoire = document.createElement('div');
advDataMenuHistoire.className = 'adv-data-menu-top-item';
advDataMenuHistoire.innerHTML = 'Histoire';
const advDataMenuContainer = document.createElement('div');
advDataMenuContainer.className = 'adv-data-container';
advDataMenuTop.appendChild(advDataMenuEquipement);
advDataMenuTop.appendChild(advDataMenuAvantages);
advDataMenuTop.appendChild(advDataMenuDesavantages);
advDataMenuTop.appendChild(advDataMenuPouvoir);
advDataMenuTop.appendChild(advDataMenuHistoire);
advDataMenu.appendChild(advDataMenuTop);
advDataMenu.appendChild(advDataMenuContainer);
// dice roll (bonus / malus / normal)
const rollDiceBtn = document.createElement('div');
rollDiceBtn.className = 'btn-open-dice-roller';
rollDiceBtn.onclick = () => {
this.playSelectionSound();
if(this.rollModel.attribute && this.rollModel.skill && this.rollModel.modif) {
defineDiceRollAuth(this.character.nom);
selectDiceAttributeModifier(this.rollModel.attribute.name, this.rollModel.attribute.value);
selectDiceSkillModifier(this.rollModel.skill.name, this.rollModel.skill.value);
selectDiceModifModifier(this.rollModel.modif.value, this.rollModel.modif.name);
//showModifChooser();
displayDiceRoller();
} else {
alert('Sélectionnez un \'Attribut\' et une \'Compétence\' (Carrière ou Combat)');
}
};
row1.appendChild(r1c1);
row1.appendChild(r1c2);
row1.appendChild(r1c3);
row1.appendChild(r1c4);
container.appendChild(row1);
row2.appendChild(r2c1);
row2.appendChild(r2c2);
row2.appendChild(r2c3);
row2.appendChild(r2c4);
row2.appendChild(r2c5);
row2.appendChild(r2c6);
row2.appendChild(r2c7);
row2.appendChild(r2c8);
container.appendChild(row2);
advancedData.appendChild(advDataPoints);
advancedData.appendChild(advDataMenu);
container.appendChild(sheetExpander);
container.appendChild(advancedData);
container.appendChild(rollDiceBtn);
document.body.appendChild(container);
setAsDraggable(container, r1c1, () => {
this.storeCurrentPosition();
}, () => {
this.loadStoredPosition();
});
this.ui = container;
setTimeout(() => {
this.storage.ui = { left: this.ui.style.left, top: this.ui.style.top };
this.storage.minimizedUI = { left: this.ui.style.left, top: this.ui.style.top };
});
}
storeCurrentPosition() {
if (this.ui.classList.contains('minimized')) {
this.storage.minimizedUI = { left: this.ui.style.left, top: this.ui.style.top };
} else {
this.storage.ui = { left: this.ui.style.left, top: this.ui.style.top };
}
}
loadStoredPosition() {
if (this.ui.classList.contains('minimized')) {
if(this.storage.minimizedUI) {
this.ui.style.left = this.storage.minimizedUI.left;
this.ui.style.top = this.storage.minimizedUI.top;
}
} else {
if(this.storage.ui) {
this.ui.style.left = this.storage.ui.left;
this.ui.style.top = this.storage.ui.top;
}
}
}
toggleMinimized() {
this.resetSelection();
this.ui.classList.remove('expanded');
this.storeCurrentPosition();
this.ui.classList.toggle('minimized');
this.loadStoredPosition();
}
show() {
this.ui.style.display = 'block';
}
hide() {
this.ui.style.display = 'none';
}
isVisible() {
return this.ui.style.display === 'none';
}
dispose() {
// carrieres UI dispose
for (var carrieresUI of this.carrieresUIList) {
carrieresUI.dispose();
}
// attributes UI dispose
this.vigueurUI.dispose();
this.agiliteUI.dispose();
this.espritUI.dispose();
this.auraUI.dispose();
// combat UI dispose
this.initiativeUI.dispose();
this.meleeUI.dispose();
this.tirUI.dispose();
this.defenseUI.dispose();
// ref model clean
this.carrieresUIList = [];
this.rollModel = {}; // dice roll model
this.uiSelectionModel = {}; // selection ui model
// remove main UI from parrent
if(this.ui.parentNode) {
this.ui.parentNode.removeChild(this.ui);
}
sheetRegister.delete(this.key);
}
buildAttributUI(parent, title, value) {
var selectable = new SelectableWidget(parent, title, value);
selectable.ui.onclick = this.onAttributeUIClick(selectable);
return selectable;
}
buildSkillUI(parent, title, value) {
var selectable = new SelectableWidget(parent, title, value);
selectable.ui.onclick = this.onSkillUIClick(selectable);
return selectable;
}
buildDifficultyBtn(label, value) {
var btnUI = document.createElement('div');
btnUI.classList.add('character-sheet-adv-column');
var labelUI = document.createElement('span');
labelUI.innerHTML = label;
labelUI.classList.add('character-sheet-adv-column-label');
var valueUI = document.createElement('div');
valueUI.innerHTML = '' + ((value && value>=0) ? ('+'+value) : value);
valueUI.classList.add('character-sheet-adv-column-value');
btnUI.appendChild(labelUI);
btnUI.appendChild(valueUI);
btnUI.onclick = () => {
const deselection = this.uiSelectionModel.modif;
const selection = this.uiSelectionModel.modif != btnUI;
if (deselection) {
// deselection
this.uiSelectionModel.modif.classList.remove('selected');
this.rollModel.modif = null;
this.uiSelectionModel.modif = null;
}
if (selection) {
// select current
this.rollModel.modif = { name: label, value: value };
this.uiSelectionModel.modif = btnUI;
this.uiSelectionModel.modif.classList.add('selected');
}
this.updateUIState();
};
return btnUI;
}
resetSelection() {
// ui deselection
if(this.uiSelectionModel.attribute) {
this.uiSelectionModel.attribute.unselect();
this.uiSelectionModel.attribute = null;
}
if(this.uiSelectionModel.skill) {
this.uiSelectionModel.skill.unselect();
this.uiSelectionModel.skill = null;
}
if(this.uiSelectionModel.modif) {
this.uiSelectionModel.modif.classList.remove('selected');
this.uiSelectionModel.modif = null;
}
// roll deselection
this.rollModel.attribute = null;
this.rollModel.skill = null;
this.rollModel.modif = null;
this.updateUIState();
}
playSelectionSound() {
const sound = new Audio('http://sda-campagne.fr/misc/greek_theme/sound/select.wav');
sound.volume = 0.1;
sound.play();
}
updateUIState() {
if(this.rollModel.attribute && this.rollModel.skill) {
if(this.rollModel.modif) {
this.ui.classList.add('modif-ready');
this.ui.classList.add('roll-ready');
} else {
this.ui.classList.add('modif-ready');
this.ui.classList.remove('roll-ready');
}
} else {
this.ui.classList.remove('modif-ready');
this.ui.classList.remove('roll-ready');
}
}
onAttributeUIClick(attributeUI) {
return () => {
this.playSelectionSound();
console.log('onAttributeUIClick');
console.log('onAttributeUIClick');
const deselection = this.uiSelectionModel.attribute;
const selection = this.uiSelectionModel.attribute != attributeUI;
if (deselection) {
// ui deselection
this.uiSelectionModel.attribute.unselect();
this.uiSelectionModel.attribute = null;
// roll deselection
this.rollModel.attribute = null;
}
if (selection) {
// ui selection
this.uiSelectionModel.attribute = attributeUI;
this.uiSelectionModel.attribute.select();
// roll selection
this.rollModel.attribute = JSON.parse(JSON.stringify(attributeUI.model)); // clone
}
this.updateUIState();
};
}
onSkillUIClick(skillUI) {
return () => {
this.playSelectionSound();
const deselection = this.uiSelectionModel.skill;
const selection = this.uiSelectionModel.skill != skillUI;
if (deselection) {
// ui deselection
this.uiSelectionModel.skill.unselect();
this.uiSelectionModel.skill = null;
// roll deselection
this.rollModel.skill = null;
}
if (selection) {
// ui selection
this.uiSelectionModel.skill = skillUI;
this.uiSelectionModel.skill.select();
// roll selection
this.rollModel.skill = JSON.parse(JSON.stringify(skillUI.model)); // clone
}
this.updateUIState();
};
}
updateUI() {
this.resetSelection();
// nom + image
this.nameUI.innerHTML = this.character.nom;
if (this.character.image) {
this.imageUI.style.backgroundImage = 'url(\'' + this.character.image + '\')';
} else {
this.imageUI.style.backgroundImage = 'none';
}
// carrieres
for (var carrieresUI of this.carrieresUIList) {
carrieresUI.dispose();
}
this.carrieresUIList = [];
for (var carriere of this.character.carrieres) {
this.carrieresUIList.add(this.buildSkillUI(this.carrieresUI, carriere.nom , carriere.score));
}
// models reset
this.rollModel = {}; // dice roll model
this.uiSelectionModel = {}; // selection ui model
this.vigueurUI.update(this.character.attributs.vigueur);
this.agiliteUI.update(this.character.attributs.agilite);
this.espritUI.update(this.character.attributs.esprit);
this.auraUI.update(this.character.attributs.aura);
// combat
this.initiativeUI.update(this.character.combat.initiative);
this.meleeUI.update(this.character.combat.melee);
this.tirUI.update(this.character.combat.tir);
this.defenseUI.update(this.character.combat.defense);
}
}
// ------------- retrieve data base ---------------- //
var file_url = "https://www.sda-campagne.fr/misc/greek_theme/data/data-09.txt";
GM_xmlhttpRequest ( {
method: "GET",
url: file_url,
responseType: "json",
onload: processJSON_Response,
onabort: reportAJAX_Error,
onerror: reportAJAX_Error,
ontimeout: reportAJAX_Error
} );
function processJSON_Response (rspObj) {
if (rspObj.status != 200 && rspObj.status != 304) {
reportAJAX_Error(rspObj);
return;
}
//-- The payload from the API will be in rspObj.response.
gameData = rspObj.response;
}
function reportAJAX_Error (rspObj) {
alert(`TM scrpt => Error ${rspObj.status}! ${rspObj.statusText}`);
}
var currentCharSheet = null;
function setCurrentPJ(pj) {
var sheet = sheetRegister.get(pj.nom)
if (!sheetRegister.get(pj.nom)) {
sheet = new characterSheet();
sheet.setCharacter(pj);
}
}
function displayCharSheets() {
var diceRoller = document.getElementById('bol-dice-roller');
diceRoller.style.display = 'none';
for (var sheet of sheetRegister.values()) {
sheet.show();
}
}
function displayDiceRoller() {
resetDices(true);
var diceRoller = document.getElementById('bol-dice-roller');
diceRoller.style.display = 'block';
for (var sheet of sheetRegister.values()) {
sheet.hide();
}
}
function toogleCharSheets() {
var diceRoller = document.getElementById('bol-dice-roller');
diceRoller.style.display = 'none';
for (var sheet of sheetRegister.values()) {
if(sheet.isVisible()) {
sheet.show();
} else {
sheet.hide();
}
}
}
// ------------------------------------------------- //
// ----------------- Drag and drop ----------------- //
// ------------------------------------------------- //
var droppableElt = null;
var dropDestElt = null;
var droppingAction = null;
var dropOutManager = null;
function setAsDraggable(elmnt, handler, onDragStart, onDropOut) {
// to manage the drop cancel
var beforeMoveX = 0, beforeMoveY = 0;
// to manage the dynamic drag move
var offsetX = 0, offsetY = 0, oldX = 0, oldY = 0, originX = 0, originY = 0;
if (handler) {
/* if present, the header is where you move the DIV from:*/
handler.onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
if(onDragStart) {
onDragStart();
}
// get the mouse cursor position at startup:
originX = elmnt.offsetLeft;
originY = elmnt.offsetTop;
oldX = e.clientX;
oldY = e.clientY;
console.log('!!! originX='+originX+ ' ; originY='+originY+ ' ; oldX='+oldX+ ' ; oldY='+oldY);
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
//to manage drop
document.body.classList.add('dragging');
droppableElt = elmnt;
dropDestElt = null;
console.log('drag:: ' + droppableElt.id);
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
offsetX = e.clientX - oldX;
offsetY = e.clientY - oldY;
originX = originX + offsetX;
originY = originY + offsetY;
oldX = e.clientX;
oldY = e.clientY;
// set the element's new position:
elmnt.style.left = originX + "px";
elmnt.style.top = originY + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
document.body.classList.remove('dragging');
if (dropDestElt) {
// perform drop
console.log('dropping...');
if (droppingAction) {
console.log('dropping action...');
console.log('drop:: ' + droppableElt.id);
droppingAction(droppableElt, onDropOut);
}
} else {
console.log('no drop');
}
droppableElt = null;
droppingAction = null;
}
}
function setAsDropContainer(container, droppingFct) {
container.onmouseover = () => {
if(droppableElt) {
droppingAction = droppingFct;
dropDestElt = container;
}
};
container.onmouseout = () => {
if(droppableElt && dropDestElt===container) {
droppingAction = null;
dropDestElt = null;
}
};
}
})();