perf(items): use sprites

SteveVanOpstal · Jan 13, 2017 · baae41f · baae41f
1 parent 13f06f1
commit baae41f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/src/client/build/build.css b/src/client/build/build.css
@@ -562,10 +562,8 @@ lb-items lb-item .bundle {
 
 lb-item {
   background-color: #eee;
-  border-radius: 5px;
   cursor: pointer;
   display: flex;
-  height: 45px;
   margin: 2.5px;
   -webkit-user-select: none;/* Chrome/Safari */
      -moz-user-select: none;/* Firefox */
@@ -575,9 +573,15 @@ lb-item {
 }
 
 lb-item > img {
-  border-radius: 5px;
   display: inline-block;
-  height: 45px;
+  object-fit: none;
+}
+
+lb-item,
+lb-item > img {
+  border-radius: 5px;
+  height: 48px;
+  width: 48px;
 }
 
 lb-item .name {
@@ -680,6 +684,19 @@ lb-preview .item > lb-item img {
   width: 64px;
 }
 
+lb-preview .item > lb-item img {
+  border-radius: 5px;
+  height: 48px;
+  margin: 8px 0 0 8px;
+  object-fit: none;
+  transform: scale(1.33);
+  width: 48px;
+}
+
+lb-preview .item > lb-item p.gold {
+  margin-top: -13px;
+}
+
 lb-preview .item > lb-item {
   display: block;
   margin: 0 auto;
@@ -752,20 +769,21 @@ lb-items-from lb-item:hover {
 lb-items-from > div > lb-item:before {
   border: 1px solid;
   content: '';
+  cursor: default;
   position: absolute;
   width: 60px;
 }
 
 lb-items-from > div:first-of-type > lb-item:before {
-  margin: -12px 0 6px 22px;
+  margin: -12px 0 6px 23px;
 }
 
 lb-items-from > div:last-of-type > lb-item:before {
-  margin: -12px 0 6px -40px;
+  margin: -12px 0 6px -39px;
 }
 
 lb-items-from > div:not(:first-of-type):not(:last-of-type) > lb-item:before {
-  margin: -12px 0 0 -40px;
+  margin: -12px 0 0 -39px;
   width: 120px;
 }
 

diff --git a/src/client/build/items/item.component.ts b/src/client/build/items/item.component.ts
@@ -6,7 +6,9 @@ import {Item} from '../item';
 @Component({
   selector: 'lb-item',
   template: `
-    <img [attr.alt]="item.name" [attr.src]="'item/' + item.image.full | lbDDragon">
+    <img [attr.alt]="item.name" 
+         [attr.src]="'sprite/'+item.image.sprite | lbDDragon"
+         [style.object-position]="'-' + item.image.x + 'px -' + item.image.y + 'px'">
     <p *ngIf="item.bundle > 1" class="bundle">x{{item.bundle}}</p>
     <p class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
 })

diff --git a/src/client/build/shop/item.component.ts b/src/client/build/shop/item.component.ts
@@ -3,7 +3,9 @@ import {Component, Input} from '@angular/core';
 @Component({
   selector: 'lb-item',
   template: `
-    <img [attr.alt]="item.name" [attr.src]="'item/' + item.image.full | lbDDragon">
+    <img [attr.alt]="item.name"
+         [attr.src]="'sprite/' + item.image.sprite | lbDDragon"
+         [style.object-position]="'-' + item.image.x + 'px -' + item.image.y + 'px'">
     <div>
       <p class="name">{{item.name}}</p>
       <div class="gold">

diff --git a/src/client/build/shop/preview/item.component.ts b/src/client/build/shop/preview/item.component.ts
@@ -6,7 +6,8 @@ import {Item} from '../../item';
   selector: 'lb-item',
   template: `
     <img [attr.alt]="item.name"
-         [attr.src]="'item/' + item?.image?.full | lbDDragon"
+         [attr.src]="(sprite ? 'sprite/'+item.image.sprite : 'item/' + item.image.full) | lbDDragon"
+         [style.object-position]="sprite ? '-' + item.image.x + 'px -' + item.image.y + 'px' : ''"
          (click)="selectItem(item)"
          (contextmenu)="pickItem(item)">
     <p class="gold" (click)="selectItem(item)" (contextmenu)="pickItem(item)">