enhancement #1816: Enhanced the renderItem method to allow different sprites to be rendered

src/client/css/main.css

@@ -1 +1 @@
-body,html{position:fixed;overflow:hidden;overscroll-behavior:none}body{margin:0;width:100vw;height:100vh;background-color:#2d2136}.ui-container{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20;overflow:hidden;display:flex;justify-content:center;align-items:center}.ui-container>.right{position:absolute;right:10px;top:94px}.ui-container.mobile .uiTooltipInfo{display:none!important}.ui-container.hideMonetization .monetization{display:none}.mobile.ui-container>.right{top:10px;right:158px;z-index:2;display:flex;flex-direction:row-reverse}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.canvas-container{position:relative;float:left}.canvas-container.visible{opacity:1;transition:1s}.canvas-container canvas{left:0;top:0;width:100vw}.disabled{opacity:.4!important;pointer-events:none!important}.hidden{display:none!important}[class^=ui] input,[class^=ui] textarea{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}[class^=ui] .el{height:35px;text-align:center;padding:0;background-color:transparent}[class^=ui] .textbox{border:none;outline:0;font-size:16px}[class^=ui] div.textbox{padding-top:6px}[class^=ui] .btn{cursor:pointer;display:flex;justify-content:center;align-items:center}[class^=ui] .btn:hover{background-color:#473456}[class^=ui] .spacer-h{width:100%}[class^=ui].modal .btnClose{position:absolute;background-color:#505360;color:#ff6942;cursor:pointer;height:31px;width:31px;text-align:center;right:0;top:0;padding-top:0;display:flex;justify-content:center;align-items:center}[class^=ui].modal .btnClose:hover{background-color:#676b7c}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background-color:#3c3f4c;-webkit-border-radius:0;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#929398}:root{scrollbar-color:#929398 #3c3f4c!important;scrollbar-width:thin!important;--color-element-default:#fcfcfc;--color-element-arcane:#fc66f7;--color-element-frost:#48edff;--color-element-fire:#ff4252;--color-element-holy:#ffeb38;--color-element-poison:#51fc9a}.q0{color:#fcfcfc}.q1{color:#4ac441}.q2{color:#3fa7dd}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346!important}.color-redA{color:#ff4252!important}.color-blueA{color:#48edff!important}.color-blueB{color:#3fa7dd!important}.color-greenB{color:#4ac441!important}.color-yellowB{color:#faac45!important}.color-green{color:#80f643!important}.color-brownC{color:#b15a30!important}.color-brownD{color:#763b3b!important}.color-grayA{color:#fcfcfc!important}.color-grayB{color:#c0c3cf!important}.color-grayC{color:#929398!important}.color-grayD{color:#69696e!important}.color-pinkA{color:#fc66f7!important}.color-pinkB{color:#de43ae!important}.color-purpleA{color:#a24eff!important}.color-tealB{color:#51fc9a!important}[class^=ui] .renderItem{width:72px;height:72px;float:left;position:relative;cursor:pointer;box-sizing:border-box;margin:4px;background-color:#312136}[class^=ui] .renderItem.hover{background-color:rgba(72,237,255,.1)}[class^=ui] .renderItem.dragging{position:absolute;opacity:.5;pointer-events:none;background-color:transparent}[class^=ui] .renderItem.dragging .icon{filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}[class^=ui] .renderItem .quantity{left:6px;bottom:3px;position:absolute;color:#fcfcfc;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136);-moz-filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}[class^=ui] .renderItem .icon{width:64px;height:64px;position:absolute;left:4px;top:4px}[class^=ui] .renderItem.eq .quantity{color:#ffeb38}[class^=ui] .renderItem.new .quantity{color:#80f643}[class^=ui] .renderItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}.hasBorderShadow{box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}
+body,html{position:fixed;overflow:hidden;overscroll-behavior:none}body{margin:0;width:100vw;height:100vh;background-color:#2d2136}.ui-container{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20;overflow:hidden;display:flex;justify-content:center;align-items:center}.ui-container>.right{position:absolute;right:10px;top:94px}.ui-container.mobile .uiTooltipInfo{display:none!important}.ui-container.hideMonetization .monetization{display:none}.mobile.ui-container>.right{top:10px;right:158px;z-index:2;display:flex;flex-direction:row-reverse}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.canvas-container{position:relative;float:left}.canvas-container.visible{opacity:1;transition:1s}.canvas-container canvas{left:0;top:0;width:100vw}.disabled{opacity:.4!important;pointer-events:none!important}.hidden{display:none!important}[class^=ui] input,[class^=ui] textarea{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}[class^=ui] .el{height:35px;text-align:center;padding:0;background-color:transparent}[class^=ui] .textbox{border:none;outline:0;font-size:16px}[class^=ui] div.textbox{padding-top:6px}[class^=ui] .btn{cursor:pointer;display:flex;justify-content:center;align-items:center}[class^=ui] .btn:hover{background-color:#473456}[class^=ui] .spacer-h{width:100%}[class^=ui].modal .btnClose{position:absolute;background-color:#505360;color:#ff6942;cursor:pointer;height:31px;width:31px;text-align:center;right:0;top:0;padding-top:0;display:flex;justify-content:center;align-items:center}[class^=ui].modal .btnClose:hover{background-color:#676b7c}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background-color:#3c3f4c;-webkit-border-radius:0;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#929398}:root{scrollbar-color:#929398 #3c3f4c!important;scrollbar-width:thin!important;--color-element-default:#fcfcfc;--color-element-arcane:#fc66f7;--color-element-frost:#48edff;--color-element-fire:#ff4252;--color-element-holy:#ffeb38;--color-element-poison:#51fc9a}.q0{color:#fcfcfc}.q1{color:#4ac441}.q2{color:#3fa7dd}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346!important}.color-redA{color:#ff4252!important}.color-blueA{color:#48edff!important}.color-blueB{color:#3fa7dd!important}.color-greenB{color:#4ac441!important}.color-yellowB{color:#faac45!important}.color-green{color:#80f643!important}.color-brownC{color:#b15a30!important}.color-brownD{color:#763b3b!important}.color-grayA{color:#fcfcfc!important}.color-grayB{color:#c0c3cf!important}.color-grayC{color:#929398!important}.color-grayD{color:#69696e!important}.color-pinkA{color:#fc66f7!important}.color-pinkB{color:#de43ae!important}.color-purpleA{color:#a24eff!important}.color-tealB{color:#51fc9a!important}[class^=ui] .renderItem{width:72px;height:72px;float:left;position:relative;cursor:pointer;box-sizing:border-box;margin:4px;background-color:#312136}[class^=ui] .renderItem.hover{background-color:rgba(72,237,255,.1)}[class^=ui] .renderItem.dragging{position:absolute;opacity:.5;pointer-events:none;background-color:transparent}[class^=ui] .renderItem.dragging .icon{filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}[class^=ui] .renderItem .quantity{left:6px;bottom:3px;position:absolute;color:#fcfcfc;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136);-moz-filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}[class^=ui] .renderItem .icon{width:64px;height:64px;position:absolute;left:4px;top:4px;image-rendering:optimizeSpeed;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:0 0}[class^=ui] .renderItem.eq .quantity{color:#ffeb38}[class^=ui] .renderItem.new .quantity{color:#80f643}[class^=ui] .renderItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}[class^=ui] .renderItem.spriteSize8 .icon{transform:scale(4);-webkit-transform:scale(4);margin:16px}[class^=ui] .renderItem.spriteSize24 .icon{transform:scale(4);-webkit-transform:scale(4);margin:-44px -16px}.hasBorderShadow{box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}

src/client/css/main.less

@@ -330,6 +330,10 @@ body {
 		position: absolute;
 		left: 4px;
 		top: 4px;
+		image-rendering: optimizeSpeed;
+		image-rendering: pixelated;
+		image-rendering: crisp-edges;
+		transform-origin: 0 0;
 	}
 
 	&.eq {
@@ -354,6 +358,24 @@ body {
 
 	}
 
+	&.spriteSize8 {
+		.icon {
+			transform: scale(4);
+			-webkit-transform: scale(4);
+			margin: 16px;
+		}
+
+	}
+
+	&.spriteSize24 {
+		.icon {
+			transform: scale(4);
+			-webkit-transform: scale(4);
+			margin: -44px -16px;
+		}
+
+	}
+
 }
 
 .hasBorderShadow {

src/client/ui/shared/renderItem.js

@@ -6,9 +6,11 @@ const tplItem = `
 `;
 
 define([
-	'js/system/events'
+	'js/system/events',
+	'js/system/globals'
 ], function (
-	events
+	events,
+	globals
 ) {
 	const hideTooltip = (el, item, e) => {
 		events.emit('onHideItemTooltip', item);
@@ -100,6 +102,8 @@ define([
 	};
 
 	return (container, item, useEl, manageTooltip, getItemContextConfig, showNewIndicators = true) => {
+		const { clientConfig: { spriteSizes } } = globals;
+
 		const itemEl = useEl || $(tplItem).appendTo(container);
 
 		if (!item) {
@@ -108,18 +112,6 @@ define([
 			return itemEl;
 		}
 
-		let size = 64;
-		let margin = 0;
-
-		if (item.type === 'skin') {
-			size = 8;
-			margin = 16;
-		}
-
-		const imgX = (-item.sprite[0] * size);
-		const imgY = (-item.sprite[1] * size);
-		const backgroundPosition = `${imgX}px ${imgY}px`;
-
 		let spritesheet = item.spritesheet || '../../../images/items.png';
 		if (!item.spritesheet) {
 			if (item.material)
@@ -132,13 +124,32 @@ define([
 				spritesheet = '../../../images/characters.png';
 		}
 
+		let size = 64;
+		let margin = '0px';
+
+		if (item.type === 'skin') {
+			size = 8;
+			margin = '16px';
+		}
+
+		if (item.spriteSize)
+			size = item.spriteSize;
+		if (item.spriteMargin)
+			margin = item.margin;
+
+		if (spriteSizes[spritesheet])
+			size = spriteSizes[spritesheet];
+
+		const imgX = (-item.sprite[0] * size);
+		const imgY = (-item.sprite[1] * size);
+		const backgroundPosition = `${imgX}px ${imgY}px`;
+
 		itemEl
 			.find('.icon')
 			.css({
 				background: `url(${spritesheet}) no-repeat scroll ${backgroundPosition} / auto`,
 				width: `${size}px`,
-				height: `${size}px`,
-				margin: `${margin}px`
+				height: `${size}px`
 			});
 
 		if (item.quantity > 1 || item.eq || item.active || item.has('quickSlot')) {
@@ -173,6 +184,8 @@ define([
 		if (getItemContextConfig)
 			addContextEvents(itemEl, item, getItemContextConfig);
 
+		itemEl.addClass(`spriteSize${size}`);
+
 		return itemEl;
 	};
 });

src/server/config/serverConfig.js

@@ -8,7 +8,7 @@ module.exports = {
 	// sqlite
 	// rethink
 	//eslint-disable-next-line no-process-env
-	db: process.env.IWD_DB || 'rethink',
+	db: process.env.IWD_DB || 'sqlite',
 	//eslint-disable-next-line no-process-env
 	dbHost: process.env.IWD_DB_HOST || 'localhost',
 	//eslint-disable-next-line no-process-env