Drop Table Tool - Charm Drops (#236)

* remove pastes (was for manual static html creation)

* Basics of adding charms into the drop table tool

* Charms + Break Vue into component files
This commit is contained in:
downthecrop 2023-09-20 08:00:45 -07:00 committed by GitHub
parent bf63ae6e73
commit f58c4c09f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 507 additions and 520 deletions

View File

@ -1,13 +0,0 @@
Find:
<li class="top">[/&"=.0-9'A-z<>\s\n]*<a id="community" class="tl" href="(./(../)*)404.html">[/&"=.0-9'A-z<>\s\n]*<li class="top">[/&"=.0-9'A-z<>\s\n]*<a id="help"
Replace:
<li class="top"><a id="community" class="tl" href="$1404.html"><span class="ts">Community</span></a>
<ul>
<li><a href="$1services/m=hiscore/hiscores.html" class="fly"><span>World 1 Hiscores</span></a></li>
<li><a href="$1services/m=hiscore/hiscores.html?world=2" class="fly"><span>World 2 Hiscores</span></a></li>
<li><a href="$1404.html" class="fly"><span>Contributors</span></a></li>
</ul>
</li>
<li class="top"><a id="help"

View File

@ -1,61 +0,0 @@
<div id="menubox">
<ul id="menus">
<li class="top"><a href="./../index.html" id="home" class="tl"><span class="ts">Home</span></a></li>
<li class="top"><a id="play" class="tl"
href="https://2009scape.org/site/game_guide/play.html"
onclick="if(!this.j){this.href+='?j=1';this.j=true;}"><span class="ts">Play Now</span></a>
<ul>
<li><a href="./../secure/m=create/index.html" class="fly"><span>New Users</span></a></li>
<li><a href="https://2009scape.org/site/game_guide/play.html"
onclick="if(!this.j){this.href+='?j=1';this.j=true;}" class="fly"><span>Existing
Users</span></a></li>
</ul>
</li>
<li class="top"><a id="account" class="tl" href="./../404.html"><span class="ts">Account</span></a>
<ul>
<li><a href="./../secure/m=create/index.html" class="fly"><span>Create New
Account</span></a></li>
<li><a href="./../404.html" class="fly"><span>Account Management</span></a></li>
</ul>
</li>
<li class="top"><a id="guide" class="tl" href="./../site/kbase/guid/manual.html"><span class="ts">Game
Guide</span></a>
<ul>
<li><a href="./../site/kbase/guid/manual.html" class="fly"><span>Manual</span></a></li>
<li><a href="./../site/kbase/guid/quests0.html" class="fly"><span>QuestHelp</span></a></li>
<li><a href="./../404.html" class="fly"><span>Grand Exchange</span></a></li>
<li><a href="./../404.html" class="fly"><span>Rules</span></a></li>
<li><a href="./../404.html" class="fly"><span>Lores</span></a></li>
<li><a href="./../404.html" class="fly"><span>What is 2009Scape?</span></a></li>
</ul>
</li>
<li class="top"><a id="community" class="tl" href="./../404.html"><span class="ts">Community</span></a>
<ul>
<li><a href="./../services/m=hiscore/hiscores.html" class="fly"><span>World 1 Hiscores</span></a></li>
<li><a href="./../services/m=hiscore/hiscores.html?world=2" class="fly"><span>World 2 Hiscores</span></a></li>
<li><a href="./../404.html" class="fly"><span>Contributors</span></a></li>
</ul>
</li>
<li class="top"><a id="help" class="tl" href="./../404.html"><span class="ts">Help</span></a>
<ul>
<li><a href="./../404.html" class="fly"><span>Customer Support</span></a></li>
<li><a href="./../404.html"
class="fly"><span>Password Recovery</span></a></li>
<li><a href="./../404.html"
class="fly"><span>Locked Account Recovery</span></a></li>
<li><a href="./../404.html" class="fly"><span>Appeal Bans & Mutes</span></a></li>
<li><a href="./.https://gitlab.com/2009scape/2009scape/-/issues/new" class="fly"><span>Submit a Bug Report</span></a></li>
<li><a href="./../404.html" class="fly"><span>Parents' Guide</span></a></li>
</ul>
</li>
<li class="top"><a href="https://github.com/2009scape/" id="login" class="tl"><span class="ts">Source
Code</span></a></li>
</ul>
<br class="clear" />
</div>

View File

@ -1,23 +0,0 @@
/*
HOW TO USE THIS SCRIPT:
Step 1: Put the script where you need it
Step 2: Set "replaceMenuBox" string to the right path (find and replace the number of ./../../'s)
Step 3: Make sure the files are being read from the right path based on the function below
Always use git. You will mess up your work first try.
*/
let fs = require('fs');
const dir = __dirname + '/m=news/'
files = fs.readdirSync(dir);
let replaceMenubox = `<div id="langAndLogin">`
files.forEach(function (fileName) {
if (fs.lstatSync(dir + fileName).isFile()) {
let contents = fs.readFileSync(dir + fileName, 'utf8');
const regex = /<div id="langAndLogin">[\s\S]*?<\/div>/i;
fs.writeFileSync(dir + fileName, contents.replace(regex, replaceMenubox));
}
})

View File

@ -1,10 +0,0 @@
<div class="centre" id="newsitemMenu">
<span class="newsNavcat"><img src="../../site/img/news/mini_all_categories.gif" alt="" />&nbsp;<a
href="https://2009scape.org/site/game_guide/play.html" class="white">Download
Game</a></span>
<span class="newsNavcat"><img src="../../site/img/news/mini_game_updates.gif" alt="" />&nbsp;<a
href="../../services/m=news/list.html" class="white">News Posts</a></span>
<span class="newsNavcat"><img src="../../site/img/news/mini_customer_support.gif" alt="" />&nbsp;<a
href="https://discord.gg/43YPGND" class="white">Discord Community</a></span><br />
<hr />
</div>

View File

@ -1,7 +0,0 @@
Copyright 2021 downthecrop
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -12,6 +12,17 @@ body {
overflow: hidden;
}
.quantity {
font-size:12px;
margin: 0;
}
.charm-spacer {
height:10px;
text-align:center;
border: none;
}
.stat-data {
background-color: #605443;
color: white;

View File

@ -25,13 +25,9 @@ layout: guide
<div class="bottombordershad">
<div class="bottomleftshad">
<div class="bottomrightshad">
<!-- CONTENT HERE -->
<div id="app"></div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'
import MyComponent from '../searchtool.js'
createApp(MyComponent).mount('#app')
</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script type="module" src="../js/searchtool.js"></script>
</div>
</div>
</div>

View File

@ -0,0 +1,58 @@
export class Result {
constructor(name, ids) {
this.name = name;
this.ids = ids;
this.charms = [];
this.items = [];
}
}
export class NPCObject {
constructor(ids, name) {
this.ids = ids;
this.name = name;
this.totalWeight = 0
this.totalCharmWeight = 0
this.default = []
this.main = []
this.charm = []
}
}
export class DisplayItem {
constructor(id, name, min, max, weight, totalWeight) {
this.percent = (weight / totalWeight) * 100;
this.id = parseInt(id);
this.name = name;
this.minAmount = parseInt(min);
this.maxAmount = parseInt(max);
this.amount = (min != max) ? min + "-" + max : min;
this.weight = weight;
this.totalWeight = totalWeight;
this.fractional = this.getFractional();
this.rarity = (this.weight != -1) ? parseFloat((this.percent).toFixed(2)) : 100;
this.rarityStyle = this.getStyle();
this.expectedQuantity = this.getExpectedQuantity();
}
getStyle() {
if (this.rarity > 99.99) return "always"
if (this.rarity > 4) return "common"
if (this.rarity > 1) return "uncommon"
if (this.rarity > 0.1) return "rare"
return "veryrare"
}
getFractional() {
if (this.weight === -1) return "Always"
return "1/" + (+parseFloat(100 / this.percent).toFixed(2).replace(/(\.0+|0+)$/, ''))
}
getExpectedQuantity() {
let t = 0;
if (this.minAmount > this.maxAmount) {
console.error("ERROR WITH DROP ID", this.id, "- MinValue > MaxValue")
return (0)
}
const range = Array(this.maxAmount - this.minAmount + 1).fill(1).map((x, y) => this.minAmount + y);
return ((range.reduce((a, b) => a + b, t) / range.length * (this.rarity / 100))).toFixed(2)
}
}

View File

@ -0,0 +1,96 @@
export default Vue.defineComponent({
template:
`
<div v-for="item in searchResults">
<h1>{{ item.name }}</h1>
<p class="npcIds">Item id: {{ item.id }}</p>
<tbody>
<tr>
<td v-if="item.bonuses" :set="bonus = getBonuses(item)">
<div class="stat-data">Attack bonuses</div>
<tbody>
<tr></tr>
<td><img src=".././img/items/1207.webp"></td>
<td><img src=".././img/items/1325.webp"></td>
<td><img src=".././img/items/1339.webp"></td>
<td><img src=".././img/alt/magic.webp"></td>
<td><img src=".././img/alt/ranged.webp"></td>
<tr>
<td>{{bonus.aStab}}</td>
<td>{{bonus.aSlash}}</td>
<td>{{bonus.aCrush}}</td>
<td>{{bonus.aMagic}}</td>
<td>{{bonus.aRanged}}</td>
</tr>
</tbody>
<div class="stat-data">Defense bonuses</div>
<tbody>
<tr></tr>
<td><img src=".././img/items/1207.webp"></td>
<td><img src=".././img/items/1325.webp"></td>
<td><img src=".././img/items/1339.webp"></td>
<td><img src=".././img/alt/magic.webp"></td>
<td><img src=".././img/alt/ranged.webp"></td>
<td><img src=".././img/alt/summoning.webp"></td>
<tr>
<td>{{bonus.dStab}}</td>
<td>{{bonus.dSlash}}</td>
<td>{{bonus.dCrush}}</td>
<td>{{bonus.dMagic}}</td>
<td>{{bonus.dRanged}}</td>
<td>{{bonus.dSummoning}}</td>
</tr>
</tbody>
<div class="stat-data">Other bonuses</div>
<tbody>
<tr></tr>
<td><img src=".././img/alt/Strength_icon.webp"></td>
<td><img src=".././img/alt/RangedStrength.webp"></td>
<td><img src=".././img/alt/MagicStrength.webp"></td>
<td><img src=".././img/alt/Prayer_icon.webp"></td>
<tr>
<td>{{bonus.strength}}</td>
<td>{{bonus.rangedStr}}</td>
<td>{{bonus.magicStr}}</td>
<td>{{bonus.prayer}}</td>
</tr>
</tbody>
</td>
<td>{{item.name}} <img :src=iconURL(item.id)></td>
<td>
<p v-for="prop in dumpKeys(item)" style="text-align:left;margin:0;"><b>{{prop.key}}</b> {{prop.val}}</p>
</td>
</tr>
</tbody>
</div>
`,
methods: {
getBonuses(item) {
const stats = item.bonuses.split(",")
return {
aStab: stats[0],
aSlash: stats[1],
aCrush: stats[2],
aMagic: stats[3],
aRanged: stats[4],
dStab: stats[5],
dSlash: stats[6],
dCrush: stats[7],
dMagic: stats[8],
dRanged: stats[9],
dSummoning: stats[10],
strength: stats[11],
prayer: stats[12],
magicStr: stats[13],
rangedStr: stats[14],
}
},
dumpKeys(item) {
return Object.entries(item).map(([key, val]) => ({ key, val }))
}
},
props: {
searchResults: { type: Object },
iconURL: { type: Function },
}
});

View File

@ -0,0 +1,27 @@
export default Vue.defineComponent({
template:
`
<div v-for="item in searchResults">
<h1>{{ item.name }}</h1>
<p class="npcIds">NPC ids: {{ item.ids }}</p>
<tbody>
<tr v-for="npc in item.items">
<td>{{npc.name}}</td>
<td><img :src=iconURL(npc.id)></td>
<td>{{item.name}} <br> id: {{npc.id}}</td>
<td @click="() => sortItems(item, 'maxAmount')">
{{npc.amount}}
<br>
<p class="quantity">{{npc.expectedQuantity}}</p>
</td>
<td :class=npc.rarityStyle @click="() => sortItems(item, 'rarity')">{{npc.fractional}}</td>
</tr>
</tbody>
</div>
`,
props: {
searchResults: { type: Object },
sortItems: { type: Function },
iconURL: { type: Function },
}
});

View File

@ -0,0 +1,46 @@
export default Vue.defineComponent({
template:
`
<div v-for="npc in searchResults">
<h1>{{ npc.name }}</h1>
<p class="npcIds">NPC ids: {{ npc.ids }}</p>
<tbody>
<tr v-for="item in npc.items">
<td><img :src=iconURL(item.id)></td>
<td>{{item.name}} <br> id: {{item.id}}</td>
<td @click="() => sortItems(npc, 'maxAmount')">
{{item.amount}}
<br>
<p class="quantity">
{{item.expectedQuantity}}
</p>
</td>
<td :class=item.rarityStyle @click="() => sortItems(npc, 'rarity')">{{item.fractional}}</td>
</tr>
<!-- Adding a spacer row -->
<tr v-if="npc.charms.length">
<td colspan="4" class="charm-spacer"></td>
</tr>
<tr v-for="item in npc.charms">
<td><img :src=iconURL(item.id)></td>
<td>{{item.name}} <br> id: {{item.id}}</td>
<td>
{{item.amount}}
<br>
<p class="quantity">
{{item.expectedQuantity}}
</p>
</td>
<td :class=item.rarityStyle>{{item.fractional}}</td>
</tr>
</tbody>
</div>
`,
props: {
searchResults: { type: Object },
sortItems: { type: Function },
iconURL: { type: Function },
}
});

View File

@ -0,0 +1,30 @@

export default Vue.defineComponent({
template:
`
<div class="centered">
<input type="radio" v-model="pick" @change="updatePick" value="Drop Tables" checked />Drop Tables
<input type="radio" v-model="pick" @change="updatePick" value="Item Sources" />Item Sources
<input type="radio" v-model="pick" @change="updatePick" value="Item Data" />Item Data
<br>
<div class="headings">
<span class="headertitleleft"><span class="headertitleright" id="search">{{pick}}</span></span>
</div>
<br>
<input v-model="input" @input="updateInput" style="width:50%;" placeholder="NPC/Item Name">
<p>Notes: RDT Slot = Rare Drop Table <a href=".././rdt.html">(link)</a>, Summoning Charms are rolled separately</p>
<br>
</div>
`,
data() {
return {
pick: "Drop Tables",
input: "",
}
},
methods: {
updatePick() { this.$emit('update-pick', this.pick) },
updateInput() { this.$emit('update-input', this.input) }
}
});

View File

@ -0,0 +1,237 @@
import { Result, DisplayItem, NPCObject } from './DataStructures.js';
import Navbar from './components/Navbar.js';
import NPCDrops from './components/NPCDrops.js';
import ItemData from './components/ItemData.js';
import ItemSources from './components/ItemSources.js';
Vue.createApp({
template: `
<div v-if="dropTables && itemConfigs">
<Navbar @update-pick="updateParentPick" @update-input="updateParentInput"/>
<!-- NPC Droptables (bynpc) -->
<NPCDrops v-if="pick == 'Drop Tables'" :searchResults="searchResults"
:sortItems="sortItems"
:iconURL="iconURL" />
<!-- Item Sources (byitem) -->
<ItemSources v-if="pick == 'Item Sources'" :searchResults="searchResults"
:sortItems="sortItems"
:iconURL="iconURL" />
<!-- Item Data (itemstats) -->
<ItemData v-if="pick == 'Item Data'" :searchResults="searchResults" :iconURL="iconURL" />
</div>
<div v-else class="centered">
<p>Loading JSON..</p>
</div>
`,
components: {
Navbar,
NPCDrops,
ItemData,
ItemSources
},
data() {
return {
dropTables: null,
itemConfigs: null,
itemIdToName: {},
npcObjects: {},
npcIdToName: {},
itemSourceNPCIds: {},
input: "",
pick: "Drop Tables",
searchResults: [],
}
},
methods: {
updateParentPick(newPick) {
this.pick = newPick;
},
updateParentInput(newInput) {
this.input = newInput;
},
iconURL(id) {
switch (id) {
case 0: return "../img/items/nothing.webp";
case 1: return "../img/items/2677.webp"; //Clue Scroll (easy)
case 5733: return "../img/items/2801.webp"; //Clue Scroll (medium)
case 12070: return "../img/items/2722.webp"; //Clue Scroll (hard)
default: return "../img/items/" + id + ".webp"
}
},
sortItems(d, key) {
d[`${key}Sorted`] = !d[`${key}Sorted`];
d.items.sort((a, b) => d[`${key}Sorted`] ? a[key] - b[key] : b[key] - a[key]);
},
spaceToUnder(str) {
return str.replaceAll(' ', '_').toLowerCase()
},
isNormalCharm(id) {
const charms = ["12163", "12160", "12159", "12158"]
return charms.includes(id)
},
search(input) {
this.searchResults = []
const pushItemsToResult = (drops, result, propName, totalWeight) => {
for (const drop of drops) {
result[propName].push(new DisplayItem(
drop.id, drop.name, drop.minAmount, drop.maxAmount,
drop.weight,
totalWeight
));
}
};
if (input.length > 2) {
const searchTerm = this.spaceToUnder(input)
if (this.pick == "Item Sources") {
Object.keys(this.itemSourceNPCIds).forEach(itemName => {
if (!itemName.includes(searchTerm)) return;
const npcIds = this.itemSourceNPCIds[this.spaceToUnder(itemName)];
const result = new Result(null, npcIds);
let npcName = "";
for (const id of npcIds.split(",")) {
const newNpcName = this.npcIdToName[id];
if (newNpcName && newNpcName !== npcName) {
npcName = newNpcName;
const npcObj = this.npcObjects[npcName];
if (!npcObj) continue;
for (const item of npcObj[itemName] || []) {
result.name = result.name || item.name;
const totalWeight = this.isNormalCharm(item.id) ? npcObj.totalCharmWeight : npcObj.totalWeight;
result.items.push(new DisplayItem(item.id, npcName, item.minAmount, item.maxAmount, item.weight, totalWeight));
}
}
}
this.searchResults.push(result);
});
} else if (this.pick == "Drop Tables") {
// bynpc.js
Object.keys(this.npcObjects).forEach(npcName => {
const npcObj = this.npcObjects[npcName];
if (this.spaceToUnder(npcName).includes(searchTerm)) {
const result = new Result(npcName, npcObj.ids);
pushItemsToResult(npcObj.default, result, 'items', -1);
pushItemsToResult(npcObj.main, result, 'items', npcObj.totalWeight);
pushItemsToResult(npcObj.charm, result, 'charms', npcObj.totalCharmWeight);
this.searchResults.push(result);
}
});
} else if (this.pick == "Item Data") {
// itemdata.js
for (const item of this.itemConfigs) {
if (this.spaceToUnder(item.name).includes(searchTerm)) {
console.log(searchTerm + " is like itemData: " + item.name)
this.searchResults.push(item)
}
}
}
}
}
},
watch: {
input() { this.search(this.input) },
pick() { this.search(this.input) }
},
created() {
// Proxy is used because GitLAB has CORS restrictions while GitHUB doesn't.
// this is refreshed every 15 minutes. If it's out of sync ping @downthecrop
const PROXY = "https://downthecrop.github.io/2009scape-mirror/Server/data/configs/";
const fetchData = async (url) => {
const response = await fetch(PROXY + url);
return await response.json();
};
const initConfigs = async () => {
const [npcConfigs, dropTables, itemConfigs] = await Promise.all([
fetchData("npc_configs.json"),
fetchData("drop_tables.json"),
fetchData("item_configs.json")
]);
this.npcIdToName = Object.fromEntries(npcConfigs.map(npc => [npc.id, npc.name]));
this.itemIdToName = Object.fromEntries(itemConfigs.map(item => [item.id, item.name]));
this.dropTables = dropTables;
this.itemConfigs = itemConfigs;
// Edge cases
this.itemIdToName["0"] = "Nothing";
this.itemIdToName["12070"] = "Clue Scroll (hard)";
this.itemIdToName["5733"] = "Clue Scroll (medium)";
this.itemIdToName["1"] = "Clue Scroll (easy)";
};
initConfigs();
let checkInterval = setInterval(() => {
if (this.itemConfigs && this.dropTables) {
clearInterval(checkInterval);
const processDrop = (drop, dropType, npcObj) => {
let itemName = this.spaceToUnder(this.itemIdToName[drop.id]);
if (dropType === 'main') {
npcObj.totalWeight += parseFloat(drop.weight);
} else if (dropType === 'charm') {
npcObj.totalCharmWeight += parseFloat(drop.weight);
}
if (this.itemSourceNPCIds[itemName]) {
this.itemSourceNPCIds[itemName] += `,${npcObj.ids}`;
} else {
this.itemSourceNPCIds[itemName] = npcObj.ids;
}
drop.name = this.itemIdToName[drop.id];
npcObj[dropType].push(drop);
if (npcObj[itemName]) {
npcObj[itemName].push(drop);
} else {
npcObj[itemName] = [drop];
}
};
for (const npc of this.dropTables) {
let npcName = this.npcIdToName[npc.ids.split(",")[0]];
if (npcName === undefined) continue;
let npcObj = new NPCObject(npc.ids, npcName);
if (this.npcObjects[npcName]) {
console.log("Duplicate NPC:", npcName, " id: ", npc.ids);
npcName = npcName + npc.ids.split(",")[0];
}
// Add Guaranteed / default drops
npc['default'].forEach(drop => {
drop.weight = -1;
processDrop(drop, 'default', npcObj);
});
// Add Normal / main drops
npc['main'].forEach(drop => {
processDrop(drop, 'main', npcObj);
});
// Add Charms / charm drops
npc['charm'].forEach(drop => {
processDrop(drop, 'charm', npcObj);
});
this.npcObjects[npcName] = npcObj;
}
}
}, 100);
}
}).mount('#app')

View File

@ -1,400 +0,0 @@
export default {
template: `
<div v-if="dropTables && itemConfigs">
<div class="centered">
<input type="radio" v-model="pick" value="Drop Tables" checked />Drop Tables
<input type="radio" v-model="pick" value="Item Sources" />Item Sources
<input type="radio" v-model="pick" value="Item Data" />Item Data
<br>
<div class="headings">
<span class="headertitleleft"><span class="headertitleright" id="search">{{pick}}</span></span>
</div>
<br>
<input v-model="input" style="width:50%;" placeholder="NPC/Item Name">
<p>Notes: RDT Slot = Rare Drop Table <a href=".././rdt.html">(link)</a>, Summoning Charms are rolled separately</p>
<br>
</div>
<!-- NPC Droptables (bynpc) -->
<div v-if="pick == 'Drop Tables'">
<div v-for="npc in searchResults">
<h1>{{ npc.name }}</h1>
<p class="npcIds">NPC ids: {{ npc.ids }}</p>
<tbody>
<tr v-for="item in npc.items">
<td><img :src=iconURL(item.id)></td>
<td>{{item.name}} <br> id: {{item.id}}</td>
<td @click="sortAmount(npc)">
{{item.amount}}
<br>
<p style="font-size:12px">
{{item.expectedQuantity}}
</p>
</td>
<td :class=item.rarityStyle @click="sortFractional(npc)">{{item.fractional}}</td>
</tr>
</tbody>
</div>
</div>
<div v-if="pick == 'Item Sources'">
<!-- Item Sources (byitem) -->
<div v-for="item in searchResults">
<h1>{{ item.name }}</h1>
<p class="npcIds">NPC ids: {{ item.ids }}</p>
<tbody>
<tr v-for="npc in item.items">
<td>{{npc.name}}</td>
<td><img :src=iconURL(npc.id)></td>
<td>{{item.name}} <br> id: {{npc.id}}</td>
<td @click="sortAmount(item)">
{{npc.amount}}
<br>
<p style="font-size:12px">
{{npc.expectedQuantity}}
</p>
</td>
<td :class=npc.rarityStyle @click="sortFractional(item)">{{npc.fractional}}</td>
</tr>
</tbody>
</div>
</div>
<div v-if="pick == 'Item Data'">
<!-- Item Data (itemstats) -->
<div v-for="item in searchResults">
<h1>{{ item.name }}</h1>
<p class="npcIds">Item id: {{ item.id }}</p>
<tbody>
<tr>
<td v-if="item.bonuses" :set="bonus = getBonuses(item)">
<div class="stat-data">Attack bonuses</div>
<tbody>
<tr></tr>
<td><img src=".././img/items/1207.webp"></td>
<td><img src=".././img/items/1325.webp"></td>
<td><img src=".././img/items/1339.webp"></td>
<td><img src=".././img/alt/magic.webp"></td>
<td><img src=".././img/alt/ranged.webp"></td>
<tr>
<td>{{bonus.aStab}}</td>
<td>{{bonus.aSlash}}</td>
<td>{{bonus.aCrush}}</td>
<td>{{bonus.aMagic}}</td>
<td>{{bonus.aRanged}}</td>
</tr>
</tbody>
<div class="stat-data">Defense bonuses</div>
<tbody>
<tr></tr>
<td><img src=".././img/items/1207.webp"></td>
<td><img src=".././img/items/1325.webp"></td>
<td><img src=".././img/items/1339.webp"></td>
<td><img src=".././img/alt/magic.webp"></td>
<td><img src=".././img/alt/ranged.webp"></td>
<td><img src=".././img/alt/summoning.webp"></td>
<tr>
<td>{{bonus.dStab}}</td>
<td>{{bonus.dSlash}}</td>
<td>{{bonus.dCrush}}</td>
<td>{{bonus.dMagic}}</td>
<td>{{bonus.dRanged}}</td>
<td>{{bonus.dSummoning}}</td>
</tr>
</tbody>
<div class="stat-data">Other bonuses</div>
<tbody>
<tr></tr>
<td><img src=".././img/alt/Strength_icon.webp"></td>
<td><img src=".././img/alt/RangedStrength.webp"></td>
<td><img src=".././img/alt/MagicStrength.webp"></td>
<td><img src=".././img/alt/Prayer_icon.webp"></td>
<tr>
<td>{{bonus.strength}}</td>
<td>{{bonus.rangedStr}}</td>
<td>{{bonus.magicStr}}</td>
<td>{{bonus.prayer}}</td>
</tr>
</tbody>
</td>
<td>{{item.name}} <img :src=iconURL(item.id)></td>
<td>
<p v-for="prop in dumpKeys(item)" style="text-align:left;margin:0;"><b>{{prop.key}}</b> {{prop.val}}</p>
</td>
</tr>
</tbody>
</div>
</div>
</div>
<div v-else>
<div class="centered">
<p>Loading JSON..</p>
</div>
</div>
`,
data() {
return {
dropTables: null,
itemConfigs: null,
itemIdToName: {},
npcObjects: {},
npcIdToName: {},
itemSourceNPCIds: {},
input: "",
pick: "Drop Tables",
searchResults: [],
}
},
methods: {
dumpKeys(item) {
const list = []
for (const [key, value] of Object.entries(item)) {
list.push({ key: key, val: value })
}
return list
},
getBonuses(item) {
const stats = item.bonuses.split(",")
return {
aStab: stats[0],
aSlash: stats[1],
aCrush: stats[2],
aMagic: stats[3],
aRanged: stats[4],
dStab: stats[5],
dSlash: stats[6],
dCrush: stats[7],
dMagic: stats[8],
dRanged: stats[9],
dSummoning: stats[10],
strength: stats[11],
prayer: stats[12],
magicStr: stats[13],
rangedStr: stats[14],
}
},
iconURL(id) {
switch (id) {
case 0: return "../img/items/nothing.webp";
case 1: return "../img/items/2677.webp"; //Clue Scroll (easy)
case 5733: return "../img/items/2801.webp"; //Clue Scroll (medium)
case 12070: return "../img/items/2722.webp"; //Clue Scroll (hard)
default: return "../img/items/" + id + ".webp"
}
},
sortFractional(d) {
d.fractionSorted = !d.fractionSorted
if (d.fractionSorted) d.items.sort((a, b) => a.rarity - b.rarity);
else d.items.sort((a, b) => b.rarity - a.rarity);
},
sortAmount(d) {
d.amountSorted = !d.amountSorted
if (!d.amountSorted) d.items.sort((a, b) => a.maxAmount - b.maxAmount);
else d.items.sort((a, b) => b.maxAmount - a.maxAmount);
},
spaceToUnder(str) {
return str.replaceAll(' ', '_').toLowerCase()
},
search(input) {
this.searchResults = []
class Result {
constructor(name, ids) {
this.name = name;
this.ids = ids;
this.items = [];
}
}
class DisplayItem {
constructor(id, name, min, max, weight, totalWeight) {
this.percent = (weight / totalWeight) * 100;
this.id = parseInt(id);
this.name = name;
this.minAmount = parseInt(min);
this.maxAmount = parseInt(max);
this.amount = (min != max) ? min + "-" + max : min;
this.weight = weight;
this.totalWeight = totalWeight;
this.fractional = this.getFractional();
this.rarity = (this.weight != -1) ? parseFloat((this.percent).toFixed(2)) : 100;
this.rarityStyle = this.getStyle();
this.expectedQuantity = this.getExpectedQuantity();
}
getStyle() {
if (this.rarity > 99.99) return "always"
if (this.rarity > 4) return "common"
if (this.rarity > 1) return "uncommon"
if (this.rarity > 0.1) return "rare"
return "veryrare"
}
getFractional() {
if (this.weight === -1) return "Always"
return "1/" + (+parseFloat(100 / this.percent).toFixed(2).replace(/(\.0+|0+)$/, ''))
}
getExpectedQuantity() {
let t = 0;
if(this.minAmount > this.maxAmount ) {
console.error("ERROR WITH DROP ID", this.id, "- MinValue > MaxValue")
return(0)
}
const range = Array(this.maxAmount - this.minAmount + 1).fill(1).map((x, y) => this.minAmount + y);
return ((range.reduce((a, b) => a + b, t) / range.length * (this.rarity / 100))).toFixed(2)
}
}
if (input.length > 2) {
const searchTerm = this.spaceToUnder(input)
if (this.pick == "Item Sources") {
// byitem.js
Object.keys(this.itemSourceNPCIds).forEach(itemName => {
if (itemName.includes(searchTerm)) {
console.log(searchTerm + " is like item: " + itemName)
let npcName = ""
let npcIds = this.itemSourceNPCIds[this.spaceToUnder(itemName)]
const result = new Result(null, npcIds)
for (const id of npcIds.split(",")) {
if (this.npcIdToName[id] && this.npcIdToName[id] != npcName) {
npcName = this.npcIdToName[id]
if (this.npcObjects[npcName]) {
try {
for (const item of this.npcObjects[npcName][itemName]) {
if (result.name == null) result.name = item.name
result.items.push(new DisplayItem(item.id, npcName, item.minAmount, item.maxAmount, item.weight, this.npcObjects[npcName].totalWeight))
}
} catch (e) {
console.log("error in" + e)
}
}
}
}
this.searchResults.push(result)
}
})
} else if (this.pick == "Drop Tables") {
// bynpc.js
Object.keys(this.npcObjects).forEach(npcName => {
if (this.spaceToUnder(npcName).includes(searchTerm)) {
console.log(searchTerm + " is like npc: " + npcName)
const result = new Result(npcName, this.npcObjects[npcName].ids)
// Guaranteed / 'default' drops
for (const drop of this.npcObjects[npcName].default) {
result.items.push(new DisplayItem(drop.id, drop.name, drop.minAmount, drop.maxAmount, -1, -1))
}
// Normal / 'main' drops
for (const drop of this.npcObjects[npcName].main) {
result.items.push(new DisplayItem(drop.id, drop.name, drop.minAmount, drop.maxAmount, drop.weight, this.npcObjects[npcName].totalWeight))
}
this.searchResults.push(result)
}
})
} else if (this.pick == "Item Data") {
// itemdata.js
for (const item of this.itemConfigs) {
if (this.spaceToUnder(item.name).includes(searchTerm)) {
console.log(searchTerm + " is like itemData: " + item.name)
this.searchResults.push(item)
}
}
}
}
}
},
watch: {
input() { this.search(this.input) },
pick() { this.search(this.input) }
},
created() {
// Proxy is used because GitLAB has CORS restrictions while GitHUB doesn't.
// this is refreshed every 15 minutes. If it's out of sync ping @downthecrop
const PROXY = "https://downthecrop.github.io/2009scape-mirror/Server/data/configs/"
fetch(PROXY + "npc_configs.json").then(r => r.json()).then(npc_configs => {
for (const npc of npc_configs) {
this.npcIdToName[npc.id] = npc.name;
}
});
fetch(PROXY + "drop_tables.json").then(r => r.json()).then(drop_tables => this.dropTables = drop_tables);
fetch(PROXY + "item_configs.json").then(r => r.json()).then(item_configs => {
// Create a dictionary of item ids to item names
for (const item of item_configs) {
this.itemIdToName[item.id] = item.name
}
// Edge cases where an itemId is being used outside of its original name.
// eg 5733 is "Rotten potato" but is instead a medium clue.
this.itemIdToName["0"] = "Nothing"
this.itemIdToName["12070"] = "Clue Scroll (hard)"
this.itemIdToName["5733"] = "Clue Scroll (medium)"
this.itemIdToName["1"] = "Clue Scroll (easy)"
this.itemConfigs = item_configs;
})
let checkInterval = setInterval(() => {
if (this.itemConfigs && this.dropTables) {
clearInterval(checkInterval);
// Create an NPC object for each npc in the droptable
class NPCObject {
constructor(ids, name) {
this.ids = ids;
this.name = name;
this.totalWeight = 0
this.default = []
this.main = []
}
}
for (const npc of this.dropTables) {
let npcName = this.npcIdToName[npc.ids.split(",")[0]]
if (npcName === undefined) continue;
let npcObj = new NPCObject(npc.ids, npcName)
if (this.npcObjects[npcName]) {
console.log("Duplicate NPC:", npcName, " id: ", npc.ids)
npcName = npcName + npc.ids.split(",")[0]
}
// Add Guaranteed / default drops
npc['default'].forEach(drop => {
let itemName = this.spaceToUnder(this.itemIdToName[drop.id])
if (this.itemSourceNPCIds[itemName]) {
// Add the ids of the current NPC to item sourcelist of this drop
this.itemSourceNPCIds[itemName] += `,${npc['ids']}`
} else {
// This is the first NPC dropping this item.
this.itemSourceNPCIds[itemName] = npc['ids']
}
drop.weight = -1
drop.name = this.itemIdToName[drop.id]
npcObj.default.push(drop)
if (npcObj[itemName]) {
npcObj[itemName].push(drop)
} else {
npcObj[itemName] = [drop]
}
})
// Add Normal / main drops
npc['main'].forEach(drop => {
let itemName = this.spaceToUnder(this.itemIdToName[drop.id])
npcObj.totalWeight += parseFloat(drop.weight)
if (this.itemSourceNPCIds[itemName]) {
// Add the ids of the current NPC to item sourcelist of this drop
this.itemSourceNPCIds[itemName] += `,${npc['ids']}`
}
else {
// This is the first NPC dropping this item.
this.itemSourceNPCIds[itemName] = npc['ids']
}
drop.name = this.itemIdToName[drop.id]
npcObj.main.push(drop)
if (npcObj[itemName]) {
npcObj[itemName].push(drop)
} else {
npcObj[itemName] = [drop]
}
})
this.npcObjects[npcName] = npcObj
}
}
}, 100)
}
}