Shortcut toolbar for Dragonrip.com
目前為
// ==UserScript==
// @name Dragonrip toolbar
// @namespace http://tampermonkey.net/
// @version 1.0.0
// @description Shortcut toolbar for Dragonrip.com
// @author paxu
// @match *://*.dragonrip.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @license GPLv3
// ==/UserScript==
(() => {
'use strict';
const settings = {
removeVanillaNavbar: true, // Remove game's original navbar element
}
const data = {
// Order of items in the toolbar, '|' creates a separator element
linkOrder: [
'home',
'bank',
'prof',
'shop',
'combat',
'|',
'mining',
'smithing',
'fishing',
'hunter',
'herb',
'cooking',
'crafting',
'alchemy',
'woodwork',
'beastmastery',
'|',
'market',
'quests',
],
// Data for link items
links: {
'bank': {
label:'Bank',
url:'https://dragonrip.com/game/bank.php',
icon:'/game/images/icons/bank.png'
},
'prof': { //professions
label:'Skills',
url:'https://dragonrip.com/game/prof.php',
icon:'/game/images/icons/prof.png'
},
'mining': {
label:'Mining',
url:'https://dragonrip.com/game/miningter.php',
icon:'/game/images/bigicons/pick.png'
},
'smithing': {
label:'Smith',
url:'https://dragonrip.com/game/blacksm.php',
icon:'/game/images/bigicons/anvil.png'
},
'fishing': {
label:'Fish',
url:'https://dragonrip.com/game/fish.php',
icon:'/game/images/bigicons/fish.png'
},
'hunter': {
label:'Hunter',
url:'https://dragonrip.com/game/hunter.php',
icon:'/game/images/bigicons/hunter.png'
},
'herb': {
label:'Herbs',
url:'https://dragonrip.com/game/herbalism.php',
icon:'/game/images/bigicons/herb.png'
},
'cooking': {
label:'Cook',
url:'https://dragonrip.com/game/cook.php',
icon:'/game/images/bigicons/cook.png'
},
'crafting': {
label:'Craft',
url:'https://dragonrip.com/game/crafting.php',
icon:'/game/images/bigicons/crafting.png'
},
'alchemy': {
label:'Alch',
url:'https://dragonrip.com/game/alchemy.php',
icon:'/game/images/bigicons/poto.png'
},
'woodwork': {
label:'Wood<br>work',
url:'https://dragonrip.com/game/woodwork.php',
icon:'/game/images/bigicons/wood.png'
},
'shop': { //general store
label:'Shop',
url:'https://dragonrip.com/game/shop.php',
icon:'/game/images/icons/shop.png'
},
'beastmastery': {
label:'Pets',
url:'https://dragonrip.com/game/bmastery.php',
icon:'/game/images/bigicons/petb.png'
},
'combat': {
label:'Combat',
url:'https://dragonrip.com/game/fighting.php',
icon:'/game/images/icons/kova.png'
},
'home': {
label:'Home',
url:'https://dragonrip.com/game/play.php',
icon:'https://i.imgur.com/Vn0ku7D.png'
},
'quests': {
label:'Quests',
url:'https://dragonrip.com/game/quest.php',
icon:'/game/images/icons/quest.png'
},
'market': {
label:'Market',
url:'https://dragonrip.com/game/market.php',
icon:'/game/images/icons/market.png'
},
}
}
const toolbarCss = `
.dragonrip-toolbar-cont > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dragonrip-toolbar-cont {
border-color: rgba(255,255,255,0.15);
border-width:0px 1px;
border-style:solid;
width:100%;
height:100px;
display:flex;
xflex-wrap:wrap;
align-items:center;
justify-content:center;
background-image: url('https://i.imgur.com/vjJ8ugC.jpeg');
background-size:contain;
xpadding: 2px 2px 2px 2px;
padding:5px;
box-shadow:inset 0px 0px 5px 3px rgba(0,0,0,0.99);
}
.dragonrip-toolbar-separator {
width: 20px;
height:100%;
xmargin: 0px 15px 0px 15px;
xbackground-color: rgba(0,0,0,0.5);
}
.dragonrip-toolbar-link-item {
position:relative;
width:50px;
aspect-ratio:1/1;
margin: 2px;
display:flex;
align-items: end;
justify-content: center;
cursor:pointer;
border-style: solid;
border-image-source: url('https://i.imgur.com/c7Oeu0F.png');
border-image-slice: 70;
border-image-width: 1em 1em;
border-image-outset: 0;
border-image-repeat: stretch;
background-color:rgb(24, 24, 31);
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.99);
transition: all 0.05s;
border-radius:2px;
}
.dragonrip-toolbar-link-item:hover {
background-color:#0b0b2d;
outline: 1px solid #00c867;
}
.dragonrip-toolbar-link-item > .image-cont {
position:absolute;
width:100%;
height:100%;
padding:5px;
}
.dragonrip-toolbar-link-item > .image-cont > .image {
xwidth:100%;
height:70%;
aspect-ratio:1/1;
filter: drop-shadow(0px 0px 2px aqua) drop-shadow(0px 0px 1px rgba(255,255,255, 0.0));
}
.dragonrip-toolbar-link-item > .label {
width:100%;
padding:1px 0px 3px 0px;
text-align:center;
color:white;
text-shadow:
0px 0px 3px black,
0px 0px 3px black,
0px 0px 3px black,
0px 0px 3px black,
0px 0px 3px black,
0px 0px 3px black,
0px 0px 3px black
;
z-index:1;
font-size:0.7em;
font-family:consolas,monospace;
line-height:0.8;
}
`;
const removeVanillaNavbarCss = `
ul.navbar {
display:none;
}
`;
const log = console.log;
const createToolbarItem = id => {
const item = document.createElement('a');
item.classList.add('dragonrip-toolbar-link-item');
item.href = data.links[id].url;
// Create image elem
const imageCont = document.createElement('div');
imageCont.classList.add('image-cont');
const image = document.createElement('img');
image.classList.add('image');
image.src = data.links[id].icon;
imageCont.append(image);
// Create text label
const label = document.createElement('div');
label.classList.add('label');
label.innerHTML = data.links[id].label;
item.append(imageCont);
item.append(label);
return item;
}
const createSeparatorElem = () => {
const elem = document.createElement('div');
elem.classList.add('dragonrip-toolbar-separator');
return elem;
}
const createToolbar = () => {
const toolbarCont = document.createElement('div');
toolbarCont.classList.add('dragonrip-toolbar-cont');
// Insert toolbar after the vanilla navbar
const refNode = document.querySelector('body > ul.navbar');
refNode.parentNode.insertBefore(toolbarCont, refNode.nextSibling);
// Add link items based on the ordering specified in data.linkOrder
for (const id of data.linkOrder) {
let item;
(id === '|') ? item=createSeparatorElem() : item=createToolbarItem(id);
toolbarCont.append(item);
}
}
// Wait for game UI to load, then insert toolbar elem
const waitForElem = () => {
const checkElem = setInterval( () => {
if (document.querySelector('ul.navbar') !== null) {
clearInterval(checkElem);
createToolbar();
}
}, 5);
}
const setCustomCss = str => {
const styleElem = document.createElement("style");
styleElem.textContent = str;
document.body.appendChild(styleElem);
}
setCustomCss(toolbarCss);
if (settings.removeVanillaNavbar) { setCustomCss(removeVanillaNavbarCss); }
waitForElem();
})();