Skip to content

Commit

Permalink
Merge pull request #20 from PanoramicPanda/feature/banner
Browse files Browse the repository at this point in the history 
Feature/banner
  • Loading branch information
@PanoramicPanda
PanoramicPanda committed Jul 16, 2023
2 parents a243c96 + 4f6cc99 commit a3da642
Show file tree
Hide file tree
Showing 8 changed files with 245 additions and 59 deletions.
23 changes: 23 additions & 0 deletions banner.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@

.body2 {
height: 100%;
width: 100%;
margin: 0;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 100%;
border: 5px white;
}

.div_banner_text {
color: #e1e8ef;
margin: 0;
height: 100%;
font-family: "OptimusPrinceps", sans-serif;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
max-height: 60px;
}
17 changes: 17 additions & 0 deletions banner.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@

<!DOCTYPE html>
<html style="height: 100%; margin: 0;" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>D&D Beyond Log Observer</title>
</head>
<body class="body2">
<link rel="stylesheet" href="banner.css">
<div class="div_banner_text">
<span style="width: 15%; align-items: center;"><img src="ddbo_no_bg.png" height="48" width="48"/></span>
<span style="width: 70%;">Now observing log. . .</span>
<span style="width: 15%;"> </span>
</div>
</body>
</html>
Binary file added ddbo_no_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example_images/108_both.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
171 changes: 126 additions & 45 deletions fullscreen_log.js
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,83 @@
// When you open the page for a campaign, add an event listener to the Game Log button click.
// When the Game Log button is clicked, move the Game Log list, duplicate the necessary CSS
// references,

window.addEventListener("load", function () {
console.log("D&D Beyond Game Log Symbiote: page loaded, ",this.window.location.href);

// Create regex that looks for a campaign page
const re = new RegExp("https:\/\/www.dndbeyond.com\/campaigns\/.*");
const current_url = this.window.location.href;

// If we are on a campaign page
if (current_url.match(re)) {
console.log("D&D Beyond Game Log Symbiote: Campaign Page Loaded")

// Find buttons on campaigns page
const button_arr = document.querySelectorAll("button");
const button_arr_len = button_arr.length;

// Find the game log button and add an event listener that waits for it to be clicked
for (var i = 0; i < button_arr_len; i++) {
var element = button_arr[i];
if (element.className == "gamelog-button") {
// element.addEventListener("click", destroy_page);
element.addEventListener("mousedown", destroy_page);
console.log("D&D Beyond Game Log Symbiote: Game Log button event listener added");
break;
};
// references, inject the modified ones, and remove the unused page elements.

var isGameLogExpanded = false;
var noisey_logs = false;

async function onStateChangeEvent(msg) {
if (msg.kind === "hasInitialized") {
// API finished loading, which means the page is also finished loading

// Get host and page file name
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Getting host and page data") : null;
const host_name = window.location.hostname;
const page_name = window.location.pathname.split("/").pop();

// If we are on the landing page
if (host_name === 'localhost' && page_name === 'index.html') {
// Extract the data path to the local symbiote files
const local_path = window.location.href.replace('index.html', '');

// Store the path somewhere that won't get wiped
await TS.localStorage.global.setBlob(local_path);
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Local data path stored") : null;
};

// Create the CSS reference for the game log formatting
const css_ref = document.createElement("link");
css_ref.rel = "stylesheet";
css_ref.href = "/content/1-0-2528-0/skins/waterdeep/css/compiled.css";
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Page loaded, ", this.window.location.href) : null;

// Create regex that looks for a campaign page
const re = new RegExp("https:\/\/www.dndbeyond.com\/campaigns\/.*");
const current_url = this.window.location.href;

// Find the html tag and place the new CSS reference into it
const html_tag = document.querySelector("html");
html_tag.insertAdjacentElement("afterbegin", css_ref);
// If we are on a campaign page
if (current_url.match(re)) {
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Campaign Page Loaded") : null;

// Function that removes page elements
function destroy_page() {
// Lets wait a short time to allow the pop-up game log element to load
setTimeout(() => {
// Find buttons on campaigns page
const button_arr = document.querySelectorAll("button");
const button_arr_len = button_arr.length;

// Find the game log button and add an event listener that waits for it to be clicked
for (var i = 0; i < button_arr_len; i++) {
var element = button_arr[i];
if (element.className == "gamelog-button") {
element.addEventListener("mousedown", destroy_page);
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Game Log button event listener added") : null;
break;
};
};

// Create the CSS reference for the game log formatting
const css_ref = document.createElement("link");
css_ref.rel = "stylesheet";
css_ref.href = "/content/1-0-2528-0/skins/waterdeep/css/compiled.css";

// Find the html tag and place the new CSS reference into it
const html_tag = document.querySelector("html");
html_tag.insertAdjacentElement("afterbegin", css_ref);


// Function that removes page elements
async function destroy_page() {

// Lets wait for the log element to load before we do anything
var isLogLoaded = false;
let getLog = null;
while (!isLogLoaded) {
// Must add delay or you crash. Ask me how I know
await new Promise(resolve => setTimeout(resolve, 1));
getLog = document.querySelector('ol');
if ((getLog != null) && (getLog.className === "GameLog_GameLogEntries__3oNPD")) {
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Log loaded") : null;
isLogLoaded = true;
};
};

console.log("D&D Beyond Game Log Symbiote: Decimating page");
// DESTROY THE PAGE //
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Decimating page") : null;

const log_div = document.querySelector("ol").parentNode;
const log_div = await document.querySelector("ol").parentNode;
html_tag.insertAdjacentElement("beforeend", log_div);

// Remove document body
Expand All @@ -60,11 +93,59 @@ window.addEventListener("load", function () {

// Scroll to end of game log
log_div.scrollTop = log_div.scrollHeight;

console.log("D&D Beyond Game Log Symbiote: Cleanup complete");

}, 200);
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Cleanup complete") : null;

// CREATE THE OBSERVER BANNER //

// Create flexing box
const flex_div = document.createElement("div");
flex_div.className = 'box';
html_tag.insertAdjacentElement('afterbegin', flex_div);
flex_div.insertAdjacentElement('afterbegin', log_div);

// Get stored path
const local_path = await TS.localStorage.global.getBlob();
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Retrieved local data") : null;

// Create new div to hold/format iframe
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Creating banner container") : null;
const iframe_div = document.createElement("div");
iframe_div.className = 'observer_banner';
iframe_div.style.height = '0px';
flex_div.insertAdjacentElement('afterbegin', iframe_div);

// Make iframe for embedded page
const new_iframe = document.createElement("iframe");
new_iframe.src = local_path + 'banner.html';
new_iframe.className = 'observer_iframe';
iframe_div.insertAdjacentElement("afterbegin", new_iframe);
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Now observing log...") : null;

// Mark the flag that we finished loading and expanding the log
isGameLogExpanded = true;
};
};
};
};

function set_banner_state() {
let banner_div = document.getElementsByClassName('observer_banner')[0];
let show_banner = isGameLogExpanded && isObservingGameLog;
if (!(banner_div === undefined) && !(banner_div === null)) {
if (show_banner) {
if (banner_div.style.height === '0px') {
banner_div.style.height = '60px';
banner_div.style.border = '1px solid #5c7080';
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Showing banner") : null;
};
} else {
if (banner_div.style.height === '60px') {
banner_div.style.height = '0px';
banner_div.style.border = '';
noisey_logs ? console.log("D&D Beyond Game Log Observer Symbiote: Hiding banner") : null;
};
};
};
};

}
});
setInterval(set_banner_state, 5000);
76 changes: 65 additions & 11 deletions fullscreen_style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900); .dice-icon-die {
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700,900);
.dice-icon-die {
height: 32px;
width: 32px;
display: inline-block;
Expand Down Expand Up @@ -362,7 +363,7 @@
opacity: 1
}

html,body,body>div:first-child {
html,body>div:first-child {
width: 100%;
height: 100%
}
Expand Down Expand Up @@ -883,7 +884,7 @@ a.DiceThumbnails_SetPreviewCallToAction__3MdHE {
color: #6f7478
}

.GameLog_GameLogContainer__2YlSC,.GameLog_GameLog__2z_HZ {
.GameLog_GameLogContainer__2YlSC {
width: 100%;
height: 100%;
color: #5c7080;
Expand All @@ -895,20 +896,15 @@ a.DiceThumbnails_SetPreviewCallToAction__3MdHE {
max-width: 512px
}

.GameLog_GameLog__2z_HZ {
display: flex;
flex-flow: column-reverse nowrap;
overscroll-behavior: contain;
overflow: auto
}

.GameLog_GameLogEntries__3oNPD {
display: flex;
align-items: center;
flex-flow: column-reverse nowrap;
transform: translateZ(0);
padding: 0 10px;
list-style-type: none
padding-right: 0 5px;
list-style-type: none;
width: 100%;
}

.GameLog_GameLogEntries__3oNPD>li:last-child {
Expand Down Expand Up @@ -938,3 +934,61 @@ a.DiceThumbnails_SetPreviewCallToAction__3MdHE {
line-height: 1.57;
text-align: center
}

.GameLog_GameLog__2z_HZ {
width: 100%;
flex: auto;
color: #5c7080;
background: #191919;
display: flex;
flex-flow: column-reverse nowrap;
overscroll-behavior: contain;
overflow: auto;

}


.GameLog_GameLog__2z_HZ::-webkit-scrollbar {
width: 18px;
}

.GameLog_GameLog__2z_HZ::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 12px rgba(0,0,0,0.3); */
border-radius: 6px;
}

.GameLog_GameLog__2z_HZ::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
background-color: #28292c;
border: 1px solid #5c7080;
}


/* ############### BANNER STYLE ############### */

.box {
background: #191919;
display: flex;
flex-flow: column;
height: 100%;
margin: 0;
}

.observer_banner {
background: #191919;
flex: auto;
width: 100%;
max-height: 60px;
transition: height 0.15s;
border: 0px solid #5c7080;
border-radius: 10px;

}

.observer_iframe {
text-align: center;
width: 100%;
max-height: 60px;
margin: 0;
}
6 changes: 5 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
body {
color: white;
background: black;
padding-left: 10px;
padding-right: 10px;
}
h2{
color: var(--ts-accent-hover);
Expand Down Expand Up @@ -61,7 +63,7 @@
</head>
<body>
<div id="textDiv">
<sub>v1.0.7</sub>
<sub>v1.0.8</sub>
<h1>Utilizing the Symbiote</h1>
After logging in and navigating to the My Campaigns page, you'll need to go to the campaign in question and open up the Game Log.
<br/>
Expand Down Expand Up @@ -94,6 +96,7 @@ <h3>I accidentally clicked on the wrong campaign page Game Log and now there are
<details>
<summary>Changelog</summary>
<ul>
<li><b>v1.0.8</b> - Added banner to signal when observer is working</li>
<li><b>v1.0.7</b> - Added Changelog and Redid Landing Page/Readme</li>
<li><b>v1.0.6</b> - Fix Adv/Dis 20/1 highlighting</li>
<li><b>v1.0.5</b> - Don't Populate Old Rolls</li>
Expand All @@ -106,5 +109,6 @@ <h3>I accidentally clicked on the wrong campaign page Game Log and now there are
</details>

</div>
<img class='ddbo_icon' src='ddbo.png'/>
</body>
</html>
Loading

0 comments on commit a3da642

Please sign in to comment.