basic item tooltip display, removed it from the frontend into the saimod npc vendor template

This commit is contained in:
Ulf Gebhardt 2016-04-04 17:06:53 +02:00
parent d3f2a6a95e
commit 4bdb8c59da
10 changed files with 279 additions and 614 deletions

View File

@ -3,6 +3,8 @@ namespace SQL;
class TBC_ITEM extends \SYSTEM\DB\QP {
public static function get_class(){return \get_class();}
public static function mysql(){return
'SELECT * FROM item_template WHERE entry = ?;';
'SELECT item_template.*, lower(mangos_one_dbc.itemdisplayinfo.6) as icon FROM item_template'.
' LEFT JOIN mangos_one_dbc.itemdisplayinfo ON item_template.displayid = mangos_one_dbc.itemdisplayinfo.1'.
' WHERE entry = ?;';
}
}

View File

@ -4,10 +4,7 @@ class default_article extends \SYSTEM\PAGE\Page {
public function __construct($id) {
$this->id = $id;}
public static function js(){
return array( new PPAGE('default_article/js/handlebars-v4.0.5.js'),
new PPAGE('default_article/js/default_article.js'));}
public static function scss(){
return array( new PPAGE('default_article/css/default_item.scss'));}
return array( new PPAGE('default_article/js/default_article.js'));}
public function html(){
$element = array('text' => \SYSTEM\PAGE\text::get($this->id));

View File

@ -1,502 +1,3 @@
function init_article(){
var items = {
"hearthstone": {
icon: "inv_misc_rune_01",
quality: "common",
name: "Hearthstone",
binds: "when picked up",
unique: true,
bonuses: [
{ description: "Use: Returns you to The Crossroads. Speak to an Innkeeper in a different place to change your home location." }
]
},
"shiny-red-apple": {
icon: "inv_misc_food_19",
quality: "common",
name: "Shiny Red Apple",
stack: 20,
bonuses: [
{ description: "Use: Restores 90 health over 18 sec. Must remain seated while eating." }
]
},
"melon-juice": {
icon: "inv_drink_09",
quality: "common",
name: "Melon Juice",
stack: 20,
bonuses: [
{ description: "Use: Restores 72 mana over 24 sec. Must remain seated while drinking." }
]
},
"red-linen-shirt": {
icon: "inv_shirt_red_01",
quality: "common",
name: "Red Linen Shirt",
slot: "Shirt"
},
"medicine-staff-of-the-monkey": {
icon: "inv_staff_31",
quality: "uncommon",
name: "Medicine Staff of the Monkey",
binds: "when equipped",
unique: false,
slot: "Two-Hand",
type: "Staff",
damage: {
min: 25,
max: 39,
extras: {
min: [],
max: []
},
speed: 2.50
},
stats: [
{ stat: "Agility", value: 4, type: "primary" },
{ stat: "Stamina", value: 4, type: "primary" }
],
enchantments: {
enchants: [
{ description: "Flametongue" }
],
},
durability: 65,
level: 14,
ilevel: 19
},
"deepdive-helmet": {
icon: "inv_helmet_49",
quality: "uncommon",
name: "Deepdive Helmet",
binds: "when equipped",
unique: false,
slot: "Head",
type: "Cloth",
armor: 96,
stats: [
{ stat: "Stamina", value: 15, type: "primary" }
],
durability: 70,
level: 0,
ilevel: 0,
tradelevel: {
trade: "Engineering",
level: 230
},
bonuses: [
{ description: "Equip: Allows underwater breathing" }
]
},
"hanzo-sword": {
icon: "inv_sword_10",
quality: "rare",
name: "Hanzo Sword",
binds: "when equipped",
unique: false,
slot: "One-Hand",
type: "Sword",
damage: {
min: 45,
max: 86,
extras: {
min: [],
max: []
},
speed: 1.8
},
durability: 90,
chanceOnHit: [
{ description: "Wounds the target for 75 damage." }
],
level: 50,
ilevel: 0
},
"boots-of-the-petrified-forest": {
icon: "inv_boots_leather_02",
quality: "epic",
name: "Boots of the Petrified Forest",
binds: "when picked up",
unique: false,
slot: "Feet",
type: "Leather",
armor: 798,
stats: [
{ stat: "Stamina", value: 116, type: "primary" },
{ stat: "Intellect", value: 79, type: "primary" },
{ stat: "Spirit", value: 52, type: "primary" },
{ stat: "Haste", value: 53, type: "secondary" }
],
durability: 80,
level: 80,
ilevel: 0
},
"the-2-ring": {
icon: "inv_jewelry_ring_34",
quality: "epic",
name: "The 2 Ring",
binds: "when equipped",
unique: false,
slot: "Finger",
type: "",
armor: 96,
stats: [
{ stat: "Strength", value: 22, type: "primary" },
{ stat: "Agility", value: 22, type: "primary" },
{ stat: "Stamina", value: 22, type: "primary" },
{ stat: "Intellect", value: 22, type: "primary" },
{ stat: "Spirit", value: 22, type: "primary" }
],
flavour: "Vastly superior to the 1 ring."
},
"dragonwrath-tarecgosas-rest": {
icon: "stave_2h_tarecgosa_e_01stagefinal",
quality: "legendary",
name: "Dragonwrath, Tarecgosa's Rest",
binds: "when picked up",
slot: "Two-Hand",
type: "Staff",
damage: {
min: 2344,
max: 3518,
// extras is for stuff like additional fire dmg
extras: {
min: [],
max: []
},
speed: 3.30
},
stats: [
{ stat: "Stamina", value: 730, type: "primary" },
{ stat: "Intellect", value: 426, type: "primary" },
{ stat: "Hit", value: 314, type: "secondary" },
{ stat: "Haste", value: 271, type: "secondary" },
{ stat: "Spell Power", value: 2786, type: "secondary" }
],
enchantments: {
sockets: [
{ color: "red" },
{ color: "red" },
{ color: "red" }
],
socketBonus: "+30 Intellect"
},
durability: 145,
level: 85,
ilevel: 397,
bonuses: [
{ description: "Equip: When you deal damage, you have a chance to gain the Wrath of Tarecgosa, duplicating the harmful spell." },
{ description: "Use: Transforms you into Tarecgosa's Visage, allowing you to fly very fast." }
]
},
"hoggers-trousers": {
icon: "inv_pants_02",
quality: "rare",
name: "Hogger's Trousers",
binds: "when picked up",
unique: false,
slot: "Legs",
type: "Leather",
armor: 102,
stats: [
{ stat: "Agility", value: 9, type: "primary" },
{ stat: "Hit", value: 9, type: "secondary" }
],
durability: 95,
level: 20,
ilevel: 0
},
"green-hills-of-stranglethorn-11": {
icon: "inv_misc_note_06",
quality: "common",
name: "Green Hills of Stranglethorn - Page 11",
stack: 10,
bonuses: [
{
description: "Right Click to Read"
}
]
},
"hopeglow-spaulders": {
icon: "inv_shoulder_leather_raidmonk_n_01",
quality: "epic",
name: "Hopeglow Spaulders",
binds: "when picked up",
unique: false,
slot: "Shoulder",
type: "Leather",
armor: 2623,
stats: [
{ stat: "Stamina", value: 2452, type: "primary" },
{ stat: "Intellect", value: 1474, type: "primary" },
{ stat: "Spirit", value: 1010, type: "primary" },
{ stat: "Haste", value: 1010, type: "secondary" }
],
enchantments: {
sockets: [
{ color: "yellow" },
{ color: "yellow" }
],
socketBonus: "+120 Intellect"
},
durability: 100,
level: 90,
ilevel: 559,
}
}
Handlebars.registerHelper("speed", function( speed ) {
return speed.toFixed(2);
});
Handlebars.registerHelper("dps", function( damage ) {
var damageTotal = damage.max + damage.min;
if( damage.extras ) {
for( var i = 0; i < damage.extras.min.length; i++ ) {
damageTotal += damage.extras.min[i];
}
for( var i = 0; i < damage.extras.max.length; i++ ) {
damageTotal += damage.extras.max[i];
}
}
return ((damageTotal/2) / damage.speed).toFixed(1);
});
Handlebars.registerHelper("classes", function( array ) {
var classes = array.toString().replace(/\s/g,"&nbsp;").replace(/,/g,", ");
return new Handlebars.SafeString( classes );
});
var source = $("#wow-item-template").html();
var template = Handlebars.compile(source);
var $body = $("body");
var $wowIcons = $(".wow-icon");
var lastHovered;
$wowIcons.each(function(k,v) {
var $this = $(this);
var id = $this.data("item-id");
obj = items[id];
if( obj ) {
if( obj.icon ) {
$this.css({
"background-image": "url(http://wow.zamimg.com/images/wow/icons/medium/"+ obj.icon +".jpg)"
});
}
if( obj.stack ) {
$this.append("<span class='stack'>"+obj.stack+"</span>");
}
}
});
$wowIcons.on("mouseover.wow", function(e) {
var $this = $(this);
var $html;
if( !lastHovered || !lastHovered.is( $this ) ) {
var id = $this.data("item-id");
$html = $( template(items[id]) );
$body.find(".wow-item").remove();
$body.append( $html );
$html.css({
left: e.clientX + 20,
top: e.clientY - 10
});
lastHovered = $this;
} else {
$html = $(".wow-item");
}
setTimeout(function() {
$html.removeClass("hidden");
},10);
$this.on("mousemove.wow", function(e) {
$html.css({
left: e.clientX + 20,
top: e.clientY - 30
});
});
});
$wowIcons.on("mouseout.wow",function(e) {
$body.find(".wow-item").addClass("hidden");
$(this).off("mousemove.wow");
});
$body.on("mouseover.wow", ".wow-item" , function(e) {
//$(this).removeClass("hidden");
});
$body.on("mouseout.wow", ".wow-item" , function(e) {
$(this).addClass("hidden");
});
/*var example = {
// most values can be left blank
// or omitted if they aren't needed.
"example": {
icon: "icon_name"
quality: "trash",
name: "Example Tooltip",
binds: "when picked up",
unique: true,
slot: "Two-Hand",
type: "Axe",
damage: {
min: 25,
max: 39,
// extras is for stuff like additional fire dmg
extras: {
min: [],
max: []
},
speed: 2.50
},
stats: [
{ stat: "Agility", value: 4, type: "primary" },
{ stat: "Stamina", value: 4, type: "primary" },
{ stat: "Hit", value: 4, type: "secondary" },
{ stat: "Haste", value: 4, type: "secondary" }
],
enchantments: {
enchants: [
{ description: "Flametongue" }
],
sockets: [
{ color: "red" },
{ color: "blue" },
{ color: "yellow" },
{ color: "meta" },
{ color: "prismatic" }
],
socketBonus: "+12 Haste"
},
durability: 65,
chanceOnHit: [
{ description: "Strike an enemy for an additional 2 fire damage." },
{ description: "Explode." }
],
classes: [ "Warrior", "Paladin", "Death Knight" ],
level: 14,
ilevel: 19,
bonuses: [
{ description: "Equip: Increases your PVP Power by 10." },
{ description: "Use: Summon a basilisk as a buddy for 10 seconds." }
]
}
};*/
}

View File

@ -4,110 +4,4 @@
<br>
<br>
<button class="btn btn-primary" onclick="system.back();">zurück</button>
<br>
<i class="wow-icon" data-item-id="hearthstone"></i>
</div>
<script id="wow-item-template" type="text/x-handlebars-template">
<aside class="wow-item hidden" data-quality="{{ quality }}">
<header class="wow-item__header">
<p class="header__title">{{ name }}</p>
{{#if binds}}<p class="header__binds">Binds {{ binds }}</p>{{/if}}
{{#if unique}}
<p class="header__unique">Unique</p>
{{/if}}
</header>
<section class="wow-item__type">
<p class="type__slot">{{slot}}</p>
<p class="type__item">{{type}}</p>
</section>
<section class="wow-item__stats">
{{#if damage}}
<p class="stats__damage-armor"><span class="value">{{ damage.min }} - {{damage.max}}</span> Damage</p>
<p class="stats__speed">Speed <span class="value">{{ speed damage.speed }}</span></p>
<p class="stats__dps">(<span class="value">{{ dps damage }}</span> damage per second)</p>
{{/if}}
{{#if armor}}
<p class="stats__armor">{{ armor }} Armor</p>
{{/if}}
<div class="stats__list">
{{#each stats}}
<p class="stats__{{ type }} stats__list-item">+{{ value }} {{ stat }}</p>
{{/each}}
</div>
</section>
{{#if enchantments}}
<section class="wow-item__enchantments">
{{#each enchantments.enchants}}
<p class="enchantments__enchant">{{ description }}</p>
{{/each}}
<div class="enchantments__sockets">
{{#each enchantments.sockets }}
<p class="enchantments__socket socket--{{ color }}">{{ color }} socket</p>
{{/each}}
{{#if enchantments.socketBonus}}
<p class="enchantments__socket-bonus">Socket Bonus: {{ enchantments.socketBonus }}</p>
{{/if}}
</div>
</section>
{{/if}}
<section class="wow-item__info">
{{#if durability}}
<p class="info__durability">Durability: {{ durability }} / {{ durability }}</p>
{{/if}}
{{#each chanceOnHit}}
<p class="info__chance-on-hit">Chance on hit: {{ description }}</p>
{{/each}}
{{#if classes}}
<p class="info__class-requirement">Classes: <span class="value">{{ classes classes }}</span></p>
{{/if}}
{{#if level}}
<p class="info__level-requirement">Requires Level {{ level }}</p>
{{/if}}
{{#if ilevel}}
<p class="info__item-level">Item Level {{ ilevel }}</p>
{{/if}}
</section>
{{#if bonuses}}
<section class="wow-item__bonuses">
{{#each bonuses}}
<p class="bonuses__bonus">{{ description }}</p>
{{/each}}
</section>
{{/if}}
<section class="wow-item__info">
{{#if tradelevel }}
<p class="info__trade-level">Requires {{ tradelevel.trade }} ({{ tradelevel.level }})</p>
{{/if}}
{{#if flavour }}
<p class="info__flavour-text">"{{ flavour }}"</p>
{{/if}}
</section>
</aside>
</script>
</div>

View File

@ -108,4 +108,172 @@ function init_saimod_mojotrollz_npc_vendor_template_vendor(){
}
});
});
//item hover
var items = {}
Handlebars.registerHelper("speed", function( speed ) {
return speed.toFixed(2);
});
Handlebars.registerHelper("dps", function( damage ) {
var damageTotal = damage.max + damage.min;
if( damage.extras ) {
for( var i = 0; i < damage.extras.min.length; i++ ) {
damageTotal += damage.extras.min[i];
}
for( var i = 0; i < damage.extras.max.length; i++ ) {
damageTotal += damage.extras.max[i];
}
}
return ((damageTotal/2) / damage.speed).toFixed(1);
});
Handlebars.registerHelper("classes", function( array ) {
var classes = array.toString().replace(/\s/g,"&nbsp;").replace(/,/g,", ");
return new Handlebars.SafeString( classes );
});
var source = $("#wow-item-template").html();
var template = Handlebars.compile(source);
var $body = $("body");
var $wowIcons = $(".wow-icon");
var lastHovered;
$wowIcons.each(function(k,v) {
var $this = $(this);
var id = $this.data("item-id");
$.getJSON('./api.php?call=tbc&action=item&id='+id,function(json){
if(!json || json.status !== true || !json.result){
return;}
items[json.result.entry] = json.result;
if( json.result.icon ) {
$this.css({"background-image": "url(http://wow.zamimg.com/images/wow/icons/medium/"+ json.result.icon +".jpg)"});
}
if( json.result.stack ) {
$this.append("<span class='stack'>"+json.result.stack+"</span>");}
});
});
$wowIcons.on("mouseover.wow", function(e) {
console.log(items);
var $this = $(this);
var $html;
if( !lastHovered || !lastHovered.is( $this ) ) {
var id = $this.data("item-id");
$html = $( template(items[id]) );
$body.find(".wow-item").remove();
$body.append( $html );
$html.css({
left: e.clientX + 20,
top: e.clientY - 10
});
lastHovered = $this;
} else {
$html = $(".wow-item");
}
setTimeout(function() {
$html.removeClass("hidden");
},10);
$this.on("mousemove.wow", function(e) {
$html.css({
left: e.clientX + 20,
top: e.clientY - 30
});
});
});
$wowIcons.on("mouseout.wow",function(e) {
$body.find(".wow-item").addClass("hidden");
$(this).off("mousemove.wow");
});
$body.on("mouseover.wow", ".wow-item" , function(e) {
//$(this).removeClass("hidden");
});
$body.on("mouseout.wow", ".wow-item" , function(e) {
$(this).addClass("hidden");
});
/*var example = {
// most values can be left blank
// or omitted if they aren't needed.
"example": {
icon: "icon_name"
quality: "trash",
name: "Example Tooltip",
binds: "when picked up",
unique: true,
slot: "Two-Hand",
type: "Axe",
damage: {
min: 25,
max: 39,
// extras is for stuff like additional fire dmg
extras: {
min: [],
max: []
},
speed: 2.50
},
stats: [
{ stat: "Agility", value: 4, type: "primary" },
{ stat: "Stamina", value: 4, type: "primary" },
{ stat: "Hit", value: 4, type: "secondary" },
{ stat: "Haste", value: 4, type: "secondary" }
],
enchantments: {
enchants: [
{ description: "Flametongue" }
],
sockets: [
{ color: "red" },
{ color: "blue" },
{ color: "yellow" },
{ color: "meta" },
{ color: "prismatic" }
],
socketBonus: "+12 Haste"
},
durability: 65,
chanceOnHit: [
{ description: "Strike an enemy for an additional 2 fire damage." },
{ description: "Explode." }
],
classes: [ "Warrior", "Paladin", "Death Knight" ],
level: 14,
ilevel: 19,
bonuses: [
{ description: "Equip: Increases your PVP Power by 10." },
{ description: "Use: Summon a basilisk as a buddy for 10 seconds." }
]
}
};*/
}

View File

@ -135,6 +135,9 @@ class saimod_mojotrollz_npc_vendor_template extends \SYSTEM\SAI\SaiModule {
public static function html_li_menu(){return '<li role="separator" class="nav-divider"></li><li><a data-toggle="tooltip" data-placement="left" title="test server: npc_vendor_template" href="#!mojotrollz_npc_vendor_template"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>&nbsp;&nbsp;Vendor Template</a></li>';}
public static function right_public(){return false;}
public static function right_right(){return \SYSTEM\SECURITY\Security::check(\SYSTEM\SECURITY\RIGHTS::SYS_SAI);}
public static function js(){return array(new \PSAI('saimod_mojotrollz_npc_vendor_template/js/saimod_mojotrollz_npc_vendor_template.js'));}
public static function js(){return array( new \PSAI('saimod_mojotrollz_npc_vendor_template/js/handlebars-v4.0.5.js'),
new \PSAI('saimod_mojotrollz_npc_vendor_template/js/saimod_mojotrollz_npc_vendor_template.js'));}
//public static function css(){return array();}
public static function scss(){
return array( new \PSAI('saimod_mojotrollz_npc_vendor_template/css/default_item.scss'));}
}

View File

@ -49,4 +49,104 @@
<li><a href="#!mojotrollz_npc_vendor_template_vendor;entry.${entry};search.${search};page.${page_last}">&raquo;</a></li>
</ul>
<br>
<button id="btn_back" onClick="system.back();" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> ${basic_back}</button>
<button id="btn_back" onClick="system.back();" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> ${basic_back}</button>
<script id="wow-item-template" type="text/x-handlebars-template">
<aside class="wow-item hidden" data-quality="{{ Quality }}">
<header class="wow-item__header">
<p class="header__title">{{ name }}</p>
{{#if binds}}<p class="header__binds">Binds {{ binds }}</p>{{/if}}
{{#if unique}}
<p class="header__unique">Unique</p>
{{/if}}
</header>
<section class="wow-item__type">
<p class="type__slot">{{InventoryType}}</p>
<p class="type__item">{{class}}</p>
</section>
<section class="wow-item__stats">
{{#if damage}}
<p class="stats__damage-armor"><span class="value">{{ damage.min }} - {{damage.max}}</span> Damage</p>
<p class="stats__speed">Speed <span class="value">{{ speed damage.speed }}</span></p>
<p class="stats__dps">(<span class="value">{{ dps damage }}</span> damage per second)</p>
{{/if}}
{{#if armor}}
<p class="stats__armor">{{ armor }} Armor</p>
{{/if}}
<div class="stats__list">
{{#each stats}}
<p class="stats__{{ type }} stats__list-item">+{{ value }} {{ stat }}</p>
{{/each}}
</div>
</section>
{{#if enchantments}}
<section class="wow-item__enchantments">
{{#each enchantments.enchants}}
<p class="enchantments__enchant">{{ description }}</p>
{{/each}}
<div class="enchantments__sockets">
{{#each enchantments.sockets }}
<p class="enchantments__socket socket--{{ color }}">{{ color }} socket</p>
{{/each}}
{{#if enchantments.socketBonus}}
<p class="enchantments__socket-bonus">Socket Bonus: {{ enchantments.socketBonus }}</p>
{{/if}}
</div>
</section>
{{/if}}
<section class="wow-item__info">
{{#if durability}}
<p class="info__durability">Durability: {{ durability }} / {{ durability }}</p>
{{/if}}
{{#each chanceOnHit}}
<p class="info__chance-on-hit">Chance on hit: {{ description }}</p>
{{/each}}
{{#if classes}}
<p class="info__class-requirement">Classes: <span class="value">{{ classes classes }}</span></p>
{{/if}}
{{#if RequiredLevel}}
<p class="info__level-requirement">Requires Level {{ RequiredLevel }}</p>
{{/if}}
{{#if ItemLevel}}
<p class="info__item-level">Item Level {{ ItemLevel }}</p>
{{/if}}
</section>
{{#if bonuses}}
<section class="wow-item__bonuses">
{{#each bonuses}}
<p class="bonuses__bonus">{{ description }}</p>
{{/each}}
</section>
{{/if}}
<section class="wow-item__info">
{{#if tradelevel }}
<p class="info__trade-level">Requires {{ tradelevel.trade }} ({{ tradelevel.level }})</p>
{{/if}}
{{#if flavour }}
<p class="info__flavour-text">"{{ flavour }}"</p>
{{/if}}
</section>
</aside>
</script>

View File

@ -1,6 +1,6 @@
<tr>
<td><a href="#!mojotrollz_npc_vendor_template_vendor;entry.${entry}">${entry}</a></td>
<td>${item}</td>
<td>${item} <i class="wow-icon" data-item-id="${item}"></i></td>
<td>${maxcount}</td>
<td>${incrtime}</td>
<td>${ExtendedCost}</td>