add skills page

data/Skills.csv

@@ -0,0 +1,151 @@
+ID,CategoryId,SkillCostId,Name,SpellIcon,AltVerb,CanLink
+6,7,0,Frost,188,,0
+8,7,0,Fire,183,,0
+26,7,0,Arms,514,,0
+38,7,0,Combat,243,,0
+39,7,0,Subtlety,250,,0
+43,6,0,Swords,1,,0
+44,6,0,Axes,1,,0
+45,6,0,Bows,1,,0
+46,6,0,Guns,1,,0
+50,7,0,Beast Mastery,255,,0
+51,7,0,Survival,257,,0
+54,6,0,Maces,1,,0
+55,6,0,Two-Handed Swords,1,,0
+56,7,0,Holy,70,,0
+78,7,0,Shadow Magic,234,,0
+95,6,0,Defense,1,,0
+98,10,0,Language: Common,1,,0
+101,9,0,Dwarven Racial,1,,0
+109,10,0,Language: Orcish,1,,0
+111,10,0,Language: Dwarven,1,,0
+113,10,0,Language: Darnassian,1,,0
+115,10,0,Language: Taurahe,1,,0
+118,6,0,Dual Wield,1,,0
+124,9,0,Tauren Racial,1,,0
+125,9,0,Orc Racial,1,,0
+126,9,0,Night Elf Racial,1,,0
+129,9,0,First Aid,504,,1
+134,7,0,Feral Combat,107,,0
+136,6,0,Staves,1,,0
+137,10,0,Language: Thalassian,1,,0
+138,10,0,Language: Draconic,1,,0
+139,10,0,Language: Demon Tongue,1,,0
+140,10,0,Language: Titan,1,,0
+141,10,0,Language: Old Tongue,1,,0
+142,9,0,Survival,1,,0
+148,9,0,Horse Riding,1,,0
+149,9,0,Wolf Riding,1,,0
+150,9,0,Tiger Riding,1,,0
+152,9,0,Ram Riding,1,,0
+155,9,0,Swimming,1,,0
+160,6,0,Two-Handed Maces,1,,0
+162,6,0,Unarmed,1,,0
+163,7,0,Marksmanship,126,,0
+164,11,0,Blacksmithing,335,Modify,1
+165,11,0,Leatherworking,346,Emboss,1
+171,11,0,Alchemy,339,Refill,1
+172,6,0,Two-Handed Axes,1,,0
+173,6,0,Daggers,1,,0
+176,6,0,Thrown,1,,0
+182,11,0,Herbalism,345,,0
+183,12,0,GENERIC (DND),1,,0
+184,7,0,Retribution,555,,0
+185,9,0,Cooking,1467,,1
+186,11,0,Mining,2418,,0
+188,7,0,Pet - Imp,1,,0
+189,7,0,Pet - Felhunter,1,,0
+197,11,0,Tailoring,341,Embroider,1
+202,11,0,Engineering,333,Tinker,1
+203,7,0,Pet - Spider,1,,0
+204,7,0,Pet - Voidwalker,1,,0
+205,7,0,Pet - Succubus,1,,0
+206,7,0,Pet - Infernal,1,,0
+207,7,0,Pet - Doomguard,1,,0
+208,7,0,Pet - Wolf,1,,0
+209,7,0,Pet - Cat,1,,0
+210,7,0,Pet - Bear,1,,0
+211,7,0,Pet - Boar,1,,0
+212,7,0,Pet - Crocolisk,1,,0
+213,7,0,Pet - Carrion Bird,1,,0
+214,7,0,Pet - Crab,1,,0
+215,7,0,Pet - Gorilla,1,,0
+217,7,0,Pet - Raptor,1,,0
+218,7,0,Pet - Tallstrider,1,,0
+220,9,0,Racial - Undead,1,,0
+226,6,0,Crossbows,1,,0
+228,6,0,Wands,1,,0
+229,6,0,Polearms,1,,0
+236,7,0,Pet - Scorpid,1,,0
+237,7,0,Arcane,125,,0
+251,7,0,Pet - Turtle,1,,0
+253,7,0,Assassination,514,,0
+256,7,0,Fury,561,,0
+257,7,0,Protection,276,,0
+267,7,0,Protection,291,,0
+270,7,0,Pet - Generic Hunter,1,,0
+293,8,0,Plate Mail,1,,0
+313,10,0,Language: Gnomish,1,,0
+315,10,0,Language: Troll,1,,0
+333,11,0,Enchanting,578,Enchant,1
+354,7,0,Demonology,90,,0
+355,7,0,Affliction,88,,0
+356,9,0,Fishing,580,,0
+373,7,0,Enhancement,19,,0
+374,7,0,Restoration,13,,0
+375,7,0,Elemental Combat,62,,0
+393,11,0,Skinning,1,,0
+413,8,0,Mail,1,,0
+414,8,0,Leather,1,,0
+415,8,0,Cloth,1,,0
+433,8,0,Shield,1,,0
+473,6,0,Fist Weapons,1,,0
+533,9,0,Raptor Riding,1,,0
+553,9,0,Mechanostrider Piloting,1,,0
+554,9,0,Undead Horsemanship,1,,0
+573,7,0,Restoration,962,,0
+574,7,0,Balance,225,,0
+593,7,0,Destruction,547,,0
+594,7,0,Holy,70,,0
+613,7,0,Discipline,685,,0
+633,7,0,Lockpicking,1,,0
+653,7,0,Pet - Bat,1,,0
+654,7,0,Pet - Hyena,1,,0
+655,7,0,Pet - Bird of Prey,1,,0
+656,7,0,Pet - Wind Serpent,1,,0
+673,10,0,Language: Gutterspeak,1,,0
+713,9,0,Kodo Riding,317,,0
+733,9,0,Racial - Troll,0,,0
+753,9,0,Racial - Gnome,0,,0
+754,9,0,Racial - Human,0,,0
+755,11,0,Jewelcrafting,1768,Modify,1
+756,9,0,Blood Elf Racial,0,,0
+758,-1,0,Pet - Event - Remote Control,0,,0
+759,10,0,Language: Draenei,0,,0
+760,9,0,Draenei Racial,0,,0
+761,7,0,Pet - Felguard,0,,0
+762,9,0,Riding,255,,0
+763,7,0,Pet - Dragonhawk,1530,,0
+764,7,0,Pet - Nether Ray,1577,,0
+765,7,0,Pet - Sporebat,2033,,0
+766,7,0,Pet - Warp Stalker,1952,,0
+767,7,0,Pet - Ravager,1585,,0
+768,7,0,Pet - Serpent,2167,,0
+769,7,22,Internal,1775,,0
+770,7,0,Blood,2636,,0
+771,7,0,Frost,2632,,0
+772,7,0,Unholy,2633,,0
+773,11,0,Inscription,3267,Inscribe,1
+775,7,0,Pet - Moth,0,,0
+776,7,0,Runeforging,2727,Engrave,0
+777,7,0,Mounts,2224,,0
+778,7,0,Companions,0,,0
+780,7,0,Pet - Exotic Chimaera,0,,0
+781,7,0,Pet - Exotic Devlisaur,0,,0
+782,7,0,Pet - Ghoul,221,,0
+783,7,0,Pet - Exotic Silithid,0,,0
+784,7,0,Pet - Exotic Worm,0,,0
+785,7,0,Pet- Wasp,0,,0
+786,7,0,Pet - Exotic Rhino,0,,0
+787,7,0,Pet - Exotic Core Hound,0,,0
+788,5,0,Pet - Exotic Spirit Beast,0,,0

src/armory/controllers/CharacterController.ts

@@ -4,7 +4,7 @@ import { RowDataPacket } from "mysql2/promise";
 import { Armory } from "../Armory";
 import { IRealmConfig } from "../Config";
 import { IEmblem, Utils } from "../Utils";
-import { IAchievement as IAchievementDbc } from "../data/DbcReader";
+import { IAchievement as IAchievementDbc, ISkillDbc } from "../data/DbcReader";
 
 interface ICharacterData {
 	guid: number;
@@ -72,6 +72,13 @@ interface IArenaTeam {
 	emblem?: IEmblem;
 }
 
+interface ISkills {
+	id: number;
+	skill: string;
+	value: number;
+	max: number ;
+}
+
 const ItemClassGem = 3;
 const SpellMechanicMounted = 21;
 const RaceDisplayName = {
@@ -108,6 +115,7 @@ export class CharacterController {
 	private itemSocketBonuses: { [key: number]: number };
 	private mountSpells: number[];
 	private mountBySpellId: { [key: number]: IMount };
+	private skillById: { [key: number]: ISkillDbc };
 	private achievementById: { [key: number]: IAchievementDbc };
 
 	public constructor(armory: Armory) {
@@ -180,6 +188,11 @@ export class CharacterController {
 		for await (const achievement of this.armory.dbc.achievement()) {
 			this.achievementById[achievement.id] = achievement;
 		}
+
+		this.skillById = {};
+		for await (const skill of this.armory.dbc.skill()) {
+			this.skillById[skill.id] = skill;
+		}
 	}
 
 	public async character(req: express.Request, res: express.Response, next: express.NextFunction): Promise<void> {
@@ -993,7 +1006,7 @@ export class CharacterController {
 		return talents;
 	}
 
-	private async getSkills(realm: string, character: number): Promise<number[][]> {
+	private async getSkills(realm: string, character: number): Promise<ISkills[]> {
 		const [rows] = await this.armory.getCharactersDb(realm).query({
 			sql: `
 				SELECT skill, value, max
@@ -1004,9 +1017,14 @@ export class CharacterController {
 			timeout: this.armory.config.dbQueryTimeout,
 		});
 
-		const skills: number[][] = [[], []];
+		const skills: { id: number, skill: string; value: number; max: number }[] = [];
 		for (const row of rows as RowDataPacket[]) {
-			skills[0].push(row.skill, row.value, row.max);
+			skills.push({
+				id: row.skill,
+				skill: this.skillById[row.skill].name,
+				value: row.value,
+				max: row.max,
+			});
 		}
 
 		return skills;

src/armory/data/DbcReader.ts

@@ -65,6 +65,16 @@ export interface IMountXDisplayDbc {
 	mountId: number;
 }
 
+export interface ISkillDbc {
+	id: number;
+	categoryId: number;
+	skillCostId: number;
+	name: string;
+	spellIcon: number;
+	altVerb: string;
+	canLink: number;
+}
+
 export interface ISpellDbc {
 	id: number;
 	mechanic: number;
@@ -313,6 +323,7 @@ export const DbcFiles = {
 	itemDisplayInfo: path.join(dir, "ItemDisplayInfo_3.3.5_12340.csv"),
 	mount: path.join(dir, "Mount_9.2.0_41462.csv"),
 	mountDisplay: path.join(dir, "MountXDisplay_9.2.0_41462.csv"),
+	skill: path.join(dir, "Skills.csv"),
 	spell: path.join(dir, "Spell_3.3.5_12340.csv"),
 	spellItemEnchantment: path.join(dir, "SpellItemEnchantment_3.3.5_12340.csv"),
 	spellIcon: path.join(dir, "SpellIcon_3.3.5_12340.csv"),
@@ -331,6 +342,7 @@ const dbcFields = {
 	itemDisplayInfo: ["id", "inventoryIcon0"],
 	mount: ["id", "sourceSpellId"],
 	mountDisplay: ["id", "creatureDisplayInfoId", "mountId"],
+	skill: ["id", "name"],
 	spell: ["id", "mechanic", "spellIconId"],
 	spellItemEnchantment: ["id", "srcItemId"],
 	spellIcon: ["id", "textureFilename"],
@@ -361,6 +373,7 @@ export class DbcManager {
 	private _itemDisplayInfo: IItemDisplayInfoDbc[];
 	private _mount: IMountDbc[];
 	private _mountDisplay: IMountXDisplayDbc[];
+	private _skill: ISkillDbc[];
 	private _spell: ISpellDbc[];
 	private _spellItemEnchantment: ISpellItemEnchantmentDbc[];
 	private _spellIcon: ISpellIcon[];
@@ -384,6 +397,7 @@ export class DbcManager {
 		this._itemDisplayInfo = await this.read<IItemDisplayInfoDbc>(DbcFiles.itemDisplayInfo, dbcFields.itemDisplayInfo).toArray();
 		this._mount = await this.read<IMountDbc>(DbcFiles.mount, dbcFields.mount).toArray();
 		this._mountDisplay = await this.read<IMountXDisplayDbc>(DbcFiles.mountDisplay, dbcFields.mountDisplay).toArray();
+		this._skill = await this.read<ISkillDbc>(DbcFiles.skill).toArray();
 		this._spell = await this.read<ISpellDbc>(DbcFiles.spell, dbcFields.spell).toArray();
 		this._spellItemEnchantment = await this.read<ISpellItemEnchantmentDbc>(
 			DbcFiles.spellItemEnchantment,
@@ -434,6 +448,10 @@ export class DbcManager {
 		return this.getLoadedDataOrRead(DbcFiles.mountDisplay, this._mountDisplay, dbcFields.mountDisplay);
 	}
 
+	public skill() {
+		return this.getLoadedDataOrRead(DbcFiles.skill, this._skill, dbcFields.skill);
+	}
+
 	public spell() {
 		return this.getLoadedDataOrRead(DbcFiles.spell, this._spell, dbcFields.spell);
 	}

static/character-skills.hbs

@@ -1,241 +1,35 @@
 <link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-talents.css">
 {{> icons }}
 <script type="application/javascript">
-	const aowow_tooltips = { "renamelinks": true, };
+    const aowow_tooltips = { "renamelinks": true, };
 </script>
 
 {{> character-header }}
 
-
+<div class="skills-table">
-
+    <h2 class="is-size-4">Character Skills</h2>
-{{!-- 
+    <table class="table is-striped is-hoverable is-fullwidth">
-<div id="talent-template" class="iconmedium icontalent empty">
+        <thead>
-	<div class="icon"></div>
+            <tr>
-	<div class="border"></div>
+                {{!-- <th>Skill ID</th> --}}
-	<div class="icon-border"></div>
+				<th>Skill Name</th>
-	<a target="_blank"></a>
+                <th>Skill Value</th>
-</div>
+                <th>Max Value</th>
-
+            </tr>
-<div id="talent-tree-template" class="talent-tree column is-full-touch is-one-quarter-desktop">
+        </thead>
-	<div class="header">
+        <tbody>
-		<img class="image">
+            {{#each data.skills}}
-		<span class="name is-size-4"></span>
+            <tr>
-		<span class="points is-size-5"></span>
+                {{!-- <td>{{this.id}}</td> --}}
-	</div>
+				<td>{{this.skill}}</td>
-	<div class="cols">
+                <td>{{this.value}}</td>
-		<div class="col"></div>
+                <td>{{this.max}}</td>
-		<div class="col"></div>
+            </tr>
-		<div class="col"></div>
+            {{/each}}
-		<div class="col"></div>
+        </tbody>
-	</div>
+    </table>
-</div>
-
-<div id="spec-links" class="is-size-4">
-	<a href="#0" id="link-spec-0" class="is-block-touch">Primary specialization</a>
-	<span class="is-hidden-touch">&ensp;|&ensp;</span>
-	<a href="#1" id="link-spec-1" class="is-block-touch">Secondary specialization</a>
-</div>
-
-<div id="talents-spec-0" class="columns talents-spec is-multiline has-text-centered">
-	<div class="column is-one-quarter-desktop">
-		<span class="is-size-4">Glyphs</span>
-		<div class="glyphs"></div>
-	</div>
-</div>
-<div id="talents-spec-1" class="columns talents-spec is-multiline has-text-centered hidden">
-	<div class="column is-one-quarter-desktop">
-		<span class="is-size-4">Glyphs</span>
-		<div class="glyphs"></div>
-	</div>
 </div>
 
 <script type="application/javascript">
-	$(window).on("load", () => {
+    // Add any additional JavaScript logic if needed
-		const talentsData = {{{JSONstringify data}}};
+</script>
-
-		function createTree(data, learnedTalents, container) {
-			const $columns = $(container).find(".col");
-			let points = 0;
-
-			for (let i = 0; i < 4; ++i) {
-				const nbRows = Math.max(...data.spells.filter(s => s.columnIndex === i).map(s => s.tierId));
-				const $column = $columns.eq(i);
-				if (nbRows < 0) {
-					// Remove empty column
-					$column.remove();
-					continue;
-				}
-				for (let j = 0; j <= nbRows; ++j) {
-					$("<div>")
-						.addClass("iconmedium")
-						.appendTo($column);
-				}
-			}
-
-			for (const spell of data.spells) {
-				const $column = $columns.eq(spell.columnIndex);
-				const $placeholder = $column.find(".iconmedium").eq(spell.tierId);
-				const $template = $("#talent-template");
-				const $talent = $template.clone(false);
-				$talent.removeAttr("id");
-				$talent.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${spell.icon}.jpg")`);
-				const rank = spell.id in learnedTalents ? (learnedTalents[spell.id].rank - 1) : 0;
-				$talent.find("a").attr("href", `{{aowow}}/?spell=${spell["spellRank" + rank]}`);
-				$talent.data("id", spell.id);
-
-				if (spell.id in learnedTalents) {
-					points += learnedTalents[spell.id].rank;
-					const ranks = [spell.spellRank0, spell.spellRank1, spell.spellRank2, spell.spellRank3, spell.spellRank4].filter(r => r !== 0).length;
-					const maxRank = learnedTalents[spell.id].rank === ranks;
-					$talent
-						.removeClass("empty")
-						.addClass(maxRank ? "full" : "notfull");
-					$talent.attr("rank", `${learnedTalents[spell.id].rank}/${ranks}`);
-					$talent.data("rank", learnedTalents[spell.id].rank);
-				}
-
-				$placeholder.replaceWith($talent);
-			}
-
-			// Add arrows
-			for (let i = 0; i < 4; ++i) {
-				const $column = $columns.eq(i);
-				for (const icon of $column.find(".iconmedium")) {
-					const $icon = $(icon);
-					const spell = data.spells.find(s => s.id === $icon.data("id"));
-					if (spell === undefined || spell.prereqTalent0 === 0) {
-						continue;
-					}
-					const req = data.spells.find(s => s.id === spell.prereqTalent0);
-					if (req === undefined) {
-						continue;
-					}
-					if (req.columnIndex === spell.columnIndex) {
-						// Down
-						const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 25;
-						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-						createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
-					} else if (req.tierId === spell.tierId && req.columnIndex < spell.columnIndex) {
-						// Right
-						const width = (44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 23;
-						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-						createArrow(width, 15, -(width - 8), undefined, 16, "right" + arrowFile, "right center", $icon);
-					} else if (req.tierId === spell.tierId && req.columnIndex > spell.columnIndex) {
-						// Left
-						const width = (44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 23;
-						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-						createArrow(width, 15, undefined, -(width - 8), 16, "left" + arrowFile, "left center", $icon)
-					} else if (req.tierId < spell.tierId && req.columnIndex < spell.columnIndex) {
-						// Right Down
-						const width = 44 * (spell.columnIndex - req.columnIndex) + 2;
-						const left = -((44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 15);
-						const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
-						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-						createArrow(width, 15, left, undefined, top, "rightdown" + arrowFile, "right center", $icon);
-
-						const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
-						createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
-					} else {
-						// Left Down
-						const width = 44 * (req.columnIndex - spell.columnIndex) - 1;
-						const right = -((44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 15);
-						const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
-						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-						createArrow(width, 15, undefined, right, top, "leftdown" + arrowFile, "left center", $icon);
-
-						const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
-						createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
-					}
-				}
-			}
-
-			$(container).find(".header .points").text(points);
-		}
-
-		function createArrow(width, height, left, right, top, file, bgPos, container) {
-			const $arrow = $("<div>");
-			$arrow.css("position", "absolute");
-			if (left !== undefined) {
-				$arrow.css("left", `${left}px`);
-			}
-			if (right !== undefined) {
-				$arrow.css("right", `${right}px`);
-			}
-			$arrow.css("top", `${top}px`);
-			$arrow.css("width", `${width}px`);
-			$arrow.css("height", `${height}px`);
-			$arrow.css("background-image", `url("{{aowow}}/static/images/TalentCalc/arrows/${file}.png")`);
-			$arrow.css("background-position", bgPos);
-			$(container).append($arrow);
-		}
-
-		function main() {
-			for (let spec = 0; spec < 2; ++spec) {
-				const $spec = $(`#talents-spec-${spec}`);
-
-				let nbLearned = 0;
-				for (const tree of talentsData.trees) {
-					const learned = {};
-					for (const talent of talentsData.talents[spec]) {
-						for (const s of tree.spells) {
-							const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
-							const idx = ranks.indexOf(talent);
-							if (idx === -1) {
-								continue;
-							}
-							learned[s.id] = {
-								spell: s,
-								rank: idx + 1,
-							};
-							++nbLearned;
-							break;
-						}
-					}
-
-					const $tree = $("#talent-tree-template")
-						.clone(false)
-						.removeAttr("id")
-						.appendTo($spec);
-					$tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
-					$tree.find(".header .name").text(tree.name);
-
-					createTree(tree, learned, $tree[0]);
-				}
-
-				if (nbLearned === 0 && spec !== 0) {
-					$spec.addClass("hidden");
-					$("#spec-links").hide();
-					continue;
-				}
-
-				const $glyphs = $spec.find(".glyphs");
-				for (const spell of talentsData.glyphs[spec]) {
-					const $a = $("<a>");
-					$a.attr("href", `{{aowow}}?spell=${spell}`);
-					$glyphs.append($a);
-					$glyphs.append("<br>");
-				}
-				$glyphs.parent().appendTo($spec);
-			}
-
-			$("#link-spec-0").on("click", () => {
-				$("#talents-spec-0").removeClass("hidden");
-				$("#talents-spec-1").addClass("hidden");
-			});
-
-			$("#link-spec-1").on("click", () => {
-				$("#talents-spec-1").removeClass("hidden");
-				$("#talents-spec-0").addClass("hidden");
-			});
-
-			if (location.hash === "#1") {
-				$("#link-spec-1").click();
-			}
-
-			$("<script>")
-				.attr("src", "{{aowow}}/static/widgets/power.js")
-				.appendTo("body");
-		}
-		main();
-	});
-</script> --}}