diff --git a/helpers/item-tooltip/builder.js b/helpers/item-tooltip/builder.js index 054107e4..72b4ac83 100644 --- a/helpers/item-tooltip/builder.js +++ b/helpers/item-tooltip/builder.js @@ -1,81 +1,230 @@ -$(function () { - var items = [{ - name: `Infernal Bite`, - type: 'Curved Sword', - rqr: { - level: 25, - dex: 200 - }, - quality: 4, - stats: { - Dexterity: '[200 - 300]', - 'Increased Crit Multiplier': '[40% - 65%]', - 'Your hits always critically hit': null, - '50% of your damage is converted to fire damage': null, - 'You take [2% - 5%] of all damage you deal yourself': null - }, - spritesheet: '../../src/client/images/items.png', - sprite: [9, 9] - }, { - name: `Cowl of Obscurity`, - type: 'Silk Cowl', - rqr: { - level: 20, - dex: 150 - }, - quality: 4, - stats: { - Vitality: '[20 - 35]', - Dexterity: '[150 - 220]', - 'Critical hits heal you for [1% - 3%] of your maximum health': null, - 'Your hits have a 50% chance to miss': null, - }, +/*let items = [{ + name: 'Bronze Hilt', + type: 'Material', + quality: 0, + stats: { '10% chance to roll [2 - 5] Strength': null }, + spritesheet: './IWD_Stuff.png', + sprite: [10, 15] +}, { + name: 'Bronze Hilt', + type: 'Material', + quality: 1, + stats: { + '10% chance to roll [2 - 5] Strength': null, + '10% chance to roll [1 - 4] Vitality': null + }, + spritesheet: './IWD_Stuff.png', + sprite: [10, 15] +}, { + name: 'Bronze Hilt', + type: 'Material', + quality: 1, + stats: { '20% chance to roll [2 - 5] Dexterity': null }, + spritesheet: './IWD_Stuff.png', + sprite: [10, 15] +}, { + name: 'Iron Blade', + type: 'Material', + quality: 0, + stats: { + '5% chance to roll [1% - 3%] Attack Speed': null, + '5% chance to roll [2% - 4%] Attack Crit Chance': null + }, + spritesheet: './IWD_Stuff.png', + sprite: [11, 16] +}, { + name: 'Iron Blade', + type: 'Material', + quality: 1, + stats: { '20% chance to roll [10% - 20%] Attack Crit Multiplier': null }, + spritesheet: './IWD_Stuff.png', + sprite: [11, 16] +}, { + name: 'Iron Blade', + type: 'Material', + quality: 2, + stats: { '30% chance to roll [1% - 3%] Attack Speed': null }, + spritesheet: './IWD_Stuff.png', + sprite: [11, 16] +}, { + name: 'Infernal Bite', + type: 'Curved Sword', + rqr: { + level: 25, + dex: 200 + }, + quality: 4, + stats: { + Dexterity: '[200 - 300]', + 'Increased Crit Multiplier': '[40% - 65%]', + 'Your hits always critically hit': null, + '50% of your damage is converted to fire damage': null, + 'You take [2% - 5%] of all damage you deal yourself': null + }, + spritesheet: '../../src/client/images/items.png', + sprite: [9, 9] +}, { + name: 'Cowl of Obscurity', + type: 'Silk Cowl', + rqr: { + level: 20, + dex: 150 + }, + quality: 4, + stats: { + Vitality: '[20 - 35]', + Dexterity: '[150 - 220]', + 'Critical hits heal you for [1% - 3%] of your maximum health': null, + 'Your hits have a 50% chance to miss': null + }, + spritesheet: '../../src/client/images/items.png', + sprite: [0, 4] +}];*/ + +//Mining +const items2 = [ + { text: 'Reach Level 5' }, + { text: 'Train Mining' }, + { text: 'Buy Basic Mining Pick' }, + { + name: 'Iron Mining Pick', + type: 'Tool', + quality: 0, + spritesheet: './IWD_Stuff.png', + sprite: [4, 12] + }, + { text: 'Mine Iron Ore' }, + { + name: 'Iron Ore', + type: 'Material', + quality: 0, + spritesheet: './IWD_Stuff.png', + sprite: [4, 11] + }, + { text: 'Gain Mining Skill' }, + { text: 'Craft Iron Bars' }, + { + name: 'Iron Bar', + type: 'Material', + quality: 0, + spritesheet: './IWD_Stuff.png', + sprite: [0, 11] + }, + { text: 'Gain Mining Skill' } +]; + +//Blacksmithing +const items = [ + { text: 'Reach Level 5' }, + { text: 'Train Blacksmithing' }, + { text: 'Buy Hammer' }, + { + name: 'Iron Blacksmith\'s Hammer', + type: 'Tool', + quality: 0, + spritesheet: './IWD_Stuff.png', + sprite: [0, 12] + }, + { text: 'Train Glove Plate Recipe' }, + { + name: 'Iron Glove Plate', + type: 'Recipe', + quality: 0, + spritesheet: '../../src/client/images/consumables.png', + sprite: [0, 5] + }, + { text: 'Obtain Iron Bars' }, + { text: 'Craft Plates' }, + { + name: 'Iron Glove Plate', + type: 'Material', + quality: 0, + spritesheet: './IWD_Stuff.png', + sprite: [13, 14] + }, + { text: 'Gain Skill' }, + { text: 'Train Iron Gloves Recipe' }, + { text: 'Craft Iron Bars' }, + { + name: 'Iron Gloves', + type: 'Recipe', + quality: 0, + spritesheet: '../../src/client/images/consumables.png', + sprite: [0, 5] + }, + { text: 'Craft Gloves' }, + { + name: 'Iron Gloves', + type: 'Recipe', + quality: 0, spritesheet: '../../src/client/images/items.png', - sprite: [0, 4] - }]; + sprite: [3, 0] + }, + { text: 'Gain Skill' } +]; - for (var i = 0; i < items.length - 1; i++) { - $('.tooltip:first-child').clone().appendTo('body'); - } +const htmlItem = ` +
+
+
+
+
+
+
+
+
+
`; - items.forEach(function (item, i) { - var div = $('.tooltip').eq(i); +const buildItem = item => { + const div = $(htmlItem).appendTo('body'); - for (var p in item) { - var val = item[p]; + for (let p in item) + div.find('.' + p).html(item[p]); - div.find('.' + p).html(val); + let stats = item.stats; + if (stats) { + let val = ''; + for (let s in stats) { + let v = s; + if (stats[s]) + v = stats[s] + ' ' + s; + val += '
' + v + '
'; } + div.find('.stats').html(val); + } - var stats = item.stats; - if (stats) { - var val = ''; - for (var s in stats) { - var v = s; - if (stats[s]) - v = stats[s] + ' ' + s; - val += '
' + v + '
'; - } - div.find('.stats').html(val); + let rqr = item.rqr; + if (rqr) { + let val = 'Requires: '; + for (let s in rqr) { + val += rqr[s] + ' ' + s; + if (Object.keys(rqr).indexOf(s) < Object.keys(rqr).length - 1) + val += ', '; } + div.find('.rqr').html(val); + } - var rqr = item.rqr; - if (rqr) { - var val = 'Requires: '; - for (var s in rqr) { - val += rqr[s] + ' ' + s; - if (Object.keys(rqr).indexOf(s) < Object.keys(rqr).length - 1) - val += ', '; - } - div.find('.rqr').html(val); - } + const bg = `url('${item.spritesheet}') ${(-item.sprite[0] * 64)}px ${(-item.sprite[1] * 64)}px`; + div.find('.sprite') + .css({ background: bg }) + .html(''); + + div.find('.name').addClass('q' + item.quality); +}; - div.find('.sprite') - .css({ - background: 'url(' + item.spritesheet + ') ' + (-item.sprite[0] * 64) + 'px ' + (-item.sprite[1] * 64) + 'px' - }) - .html(''); +const htmlText = '
'; - div.find('.name').addClass('q' + item.quality); +const buildText = ({ text }) => { + const div = $(htmlText) + .appendTo('body') + .html(text); +}; + +$(function () { + items.forEach(item => { + if (item.text) + buildText(item); + else + buildItem(item); }); }); diff --git a/helpers/item-tooltip/index.html b/helpers/item-tooltip/index.html index 5ddbabb2..cc9a3c04 100644 --- a/helpers/item-tooltip/index.html +++ b/helpers/item-tooltip/index.html @@ -3,19 +3,10 @@ builder - + -
-
-
-
-
-
-
-
-
-
+ diff --git a/helpers/item-tooltip/styles.css b/helpers/item-tooltip/styles.css index ade2280e..b901e622 100644 --- a/helpers/item-tooltip/styles.css +++ b/helpers/item-tooltip/styles.css @@ -2,12 +2,37 @@ body { background-color: #2d2136; padding: 10px; margin: 0px; + display: flex; + align-items: center; + height: 100vh; + width: 100vw; } -@font-face -{ - font-family: bitty; - src: url('../../src/client/fonts/bitty.ttf'); +* { + box-sizing: border-box; +} + +.text { + background-color: #3c3f4c; + text-align: center; + padding: 10px; + margin-bottom: 10px; + font-family: bitty; + color: #fafcfc; + display: flex; + justify-content: center; + align-items: center; + height: max-content; +} + +.text, +.tooltip { + margin-right: 10px; +} + +@font-face { + font-family: bitty; + src: url('../../src/client/fonts/bitty.ttf'); } .tooltip { @@ -16,7 +41,6 @@ body { padding: 10px; margin-bottom: 10px; font-family: bitty; - width: 400px; } .sprite-box { diff --git a/src/server/package-lock.json b/src/server/package-lock.json index 33b518e8..698d97b3 100644 --- a/src/server/package-lock.json +++ b/src/server/package-lock.json @@ -1,6 +1,6 @@ { "name": "isleward_server", - "version": "0.5.0", + "version": "0.6.0", "lockfileVersion": 1, "requires": true, "dependencies": {