s452639/psi
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

chore: Shelves textures

Browse Source
This commit is contained in:
Marcin Czerniak 2021-05-26 09:49:47 +02:00
parent 65faa9dc64
commit ce440ee778
10 changed files with 116 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/configuration.js
View File

@ -6,6 +6,6 @@ const StorageCenterLocation = { x: 7, y: 8, w: UnitsInGroupCount, h: 1 }
const UnitsCount = ((ColumnsOfGroupsCount * RowsOfGroupsCount) * UnitsInGroupCount
- StorageCenterLocation.w * StorageCenterLocation.h)
const AgentMoveSpeed = 40 /* 1 - slowest, 89 - fastest */
const AgentRotationSpeed = 40 /* 1 - slowest, 89 - fastest */
const AgentMoveSpeed = 60 /* 1 - slowest, 89 - fastest */
const AgentRotationSpeed = 60 /* 1 - slowest, 89 - fastest */
const AgentWaitTime = 500 /* in miliseconds */

BIN
src/data/tree Normal file
View File

Binary file not shown.

44
src/img/shelves/BASKET_SHELF.svg Normal file
View File

@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100.5" viewBox="0 0 100 100.5">
<defs>
<clipPath id="clip-path">
<rect width="69" height="100" fill="none"/>
</clipPath>
</defs>
<g id="BASKET_SHELF" transform="translate(-2262 -1151)">
<path id="Rectangle_1" data-name="Rectangle 1" d="M0,0H100V100H0Z" transform="translate(2262 1151)" fill="#7a7a7a" opacity="0.22"/>
<g id="Group_8" data-name="Group 8" opacity="0.4">
<g id="Repeat_Grid_11" data-name="Repeat Grid 11" transform="translate(2362 1167) rotate(90)" clip-path="url(#clip-path)">
<g transform="translate(-2271 -1151)">
<rect id="Rectangle_12" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
<g transform="translate(-2250 -1151)">
<rect id="Rectangle_12-2" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
<g transform="translate(-2229 -1151)">
<rect id="Rectangle_12-3" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
<g transform="translate(-2208 -1151)">
<rect id="Rectangle_12-4" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
</g>
<g id="Repeat_Grid_12" data-name="Repeat Grid 12" transform="translate(2277.5 1151.5)" clip-path="url(#clip-path)">
<g transform="translate(-2271 -1151)">
<rect id="Rectangle_12-5" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
<g transform="translate(-2250 -1151)">
<rect id="Rectangle_12-6" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
<g transform="translate(-2229 -1151)">
<rect id="Rectangle_12-7" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
<g transform="translate(-2208 -1151)">
<rect id="Rectangle_12-8" data-name="Rectangle 12" width="6" height="100" transform="translate(2271 1151)" fill="#a8a8a8"/>
</g>
</g>
</g>
<g id="Rectangle_2" data-name="Rectangle 2" transform="translate(2262 1151)" fill="none" stroke="#fff" stroke-width="4">
<rect width="100" height="100" stroke="none"/>
<rect x="2" y="2" width="96" height="96" fill="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

21
src/img/shelves/DISCOUNT_SHELF.svg Normal file
View File

@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_2" data-name="Rectangle 2" width="100" height="100" transform="translate(2398 1151)" fill="red"/>
</clipPath>
</defs>
<g id="DISCOUNT_SHELF" transform="translate(-2398 -1151)">
<g id="Mask_Group_3" data-name="Mask Group 3" opacity="0.49" clip-path="url(#clip-path)">
<rect id="Rectangle_13" data-name="Rectangle 13" width="96" height="96" transform="translate(2448 1133.118) rotate(45)" fill="rgba(200,126,226,0.78)"/>
</g>
<path id="Rectangle_1" data-name="Rectangle 1" d="M0,0H100V100H0Z" transform="translate(2398 1151)" fill="#7a7a7a" opacity="0.22"/>
<g id="Rectangle_2-2" data-name="Rectangle 2" transform="translate(2398 1151)" fill="none" stroke="#fff" stroke-width="4">
<rect width="100" height="100" stroke="none"/>
<rect x="2" y="2" width="96" height="96" fill="none"/>
</g>
<g id="Polygon_1" data-name="Polygon 1" transform="translate(2399.5 1218)" fill="#e65a5a">
<path d="M 25.90585327148438 29.22233200073242 L 20.27404975891113 25.53178977966309 L 20 25.35220909118652 L 19.72595024108887 25.53178977966309 L 14.09414577484131 29.22233200073242 L 12.31420040130615 23.70521926879883 L 12.19626998901367 23.33970069885254 L 11.81270980834961 23.35939979553223 L 4.654505729675293 23.72698211669922 L 7.240449905395508 18.60923004150391 L 7.467249870300293 18.16036987304688 L 7.017079830169678 17.93618011474609 L 1.121551513671875 15 L 7.017079830169678 12.06381988525391 L 7.467249870300293 11.83963012695313 L 7.240449905395508 11.39076995849609 L 4.654514312744141 6.273016929626465 L 11.81272029876709 6.640600204467773 L 12.19627952575684 6.660299777984619 L 12.31420993804932 6.294779777526855 L 14.09416484832764 0.7776670455932617 L 19.7259693145752 4.468210220336914 L 20.00001907348633 4.64778995513916 L 20.27407073974609 4.468200206756592 L 25.90585136413574 0.7776604294776917 L 27.68580055236816 6.294789791107178 L 27.80373001098633 6.660309791564941 L 28.18729019165039 6.640610218048096 L 35.34549713134766 6.273017883300781 L 32.75955963134766 11.39078044891357 L 32.53276062011719 11.83963966369629 L 32.98292922973633 12.06383037567139 L 38.87844848632813 15.00000095367432 L 32.98292922973633 17.93618011474609 L 32.53276062011719 18.16036987304688 L 32.75955963134766 18.60923004150391 L 35.34549713134766 23.72698211669922 L 28.18729019165039 23.35939979553223 L 27.80373001098633 23.33970069885254 L 27.68580055236816 23.70521926879883 L 25.90585327148438 29.22233200073242 Z" stroke="none"/>
<path d="M 14.36865234375 1.555326461791992 L 12.79006004333496 6.448299407958984 L 12.5542106628418 7.179340362548828 L 11.78708076477051 7.13994026184082 L 5.489349365234375 6.816543579101563 L 7.686710357666016 11.16527938842773 L 8.14031982421875 12.06299018859863 L 7.239990234375 12.51139068603516 L 2.243133544921875 15.00000095367432 L 7.239978790283203 17.48860931396484 L 8.140310287475586 17.93700981140137 L 7.686698913574219 18.83472061157227 L 5.489337921142578 23.18345642089844 L 11.78706932067871 22.86005973815918 L 12.55419921875 22.82065963745117 L 12.7900505065918 23.55170059204102 L 14.3686351776123 28.44467353820801 L 19.45190048217773 25.11359024047852 L 20 24.75441932678223 L 20.54809951782227 25.11359024047852 L 25.63136672973633 28.44467353820801 L 27.2099494934082 23.55170059204102 L 27.44580078125 22.82065963745117 L 28.21292877197266 22.86005973815918 L 34.51066207885742 23.18345642089844 L 32.31330108642578 18.83472061157227 L 31.85968971252441 17.93700981140137 L 32.7600212097168 17.48860931396484 L 37.75686645507813 15.00000095367432 L 32.7600212097168 12.51140022277832 L 31.85968971252441 12.0629997253418 L 32.31330108642578 11.16529083251953 L 34.51066207885742 6.816545486450195 L 28.21292877197266 7.139949798583984 L 27.44580078125 7.179349899291992 L 27.2099494934082 6.448310852050781 L 25.63136672973633 1.555328369140625 L 20.54812049865723 4.886409759521484 L 20.00001907348633 5.245590209960938 L 19.45191955566406 4.886409759521484 L 14.36865234375 1.555326461791992 M 13.81967926025391 0 L 20.00001907348633 4.049999237060547 L 26.18033981323242 0 L 28.16164970397949 6.141269683837891 L 36.18033981323242 5.729490280151367 L 33.20582962036133 11.61627006530762 L 40 15 L 33.20582962036133 18.38373947143555 L 36.18033981323242 24.27050971984863 L 28.16164970397949 23.85873985290527 L 26.18033981323242 30 L 20 25.95000076293945 L 13.81966018676758 30 L 11.83835029602051 23.85873985290527 L 3.819660186767578 24.27050971984863 L 6.794170379638672 18.38373947143555 L 0 15 L 6.794181823730469 11.61626052856445 L 3.819671630859375 5.729490280151367 L 11.83835983276367 6.141260147094727 L 13.81967926025391 0 Z" stroke="none" fill="#c54545"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

13
src/img/shelves/FREESTANDING_SHELF.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<g id="FREESTANDING_SHELF" transform="translate(-2398 -1151)">
<path id="Rectangle_1" data-name="Rectangle 1" d="M0,0H100V100H0Z" transform="translate(2398 1151)" fill="#7a7a7a" opacity="0.22"/>
<g id="Rectangle_2" data-name="Rectangle 2" transform="translate(2398 1151)" fill="none" stroke="#fff" stroke-width="4">
<rect width="100" height="100" stroke="none"/>
<rect x="2" y="2" width="96" height="96" fill="none"/>
</g>
<rect id="Rectangle_14" data-name="Rectangle 14" width="8" height="8" transform="translate(2407 1160)" fill="#717171"/>
<rect id="Rectangle_17" data-name="Rectangle 17" width="8" height="8" transform="translate(2407 1234)" fill="#717171"/>
<rect id="Rectangle_15" data-name="Rectangle 15" width="8" height="8" transform="translate(2481 1160)" fill="#717171"/>
<rect id="Rectangle_16" data-name="Rectangle 16" width="8" height="8" transform="translate(2481 1234)" fill="#717171"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

0
src/img/shelves/FRIDGE.svg → src/img/shelves/FRIDGE_shelf.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 995 B

After

Width:  |  Height:  |  Size: 995 B

26
src/img/shelves/LARGE_SHELF.svg Normal file
View File

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_2" data-name="Rectangle 2" width="98.5" height="100" fill="#c8b593"/>
</clipPath>
</defs>
<g id="LARGE_SHELF" transform="translate(-2126 -1151)">
<g id="Rectangle_1" data-name="Rectangle 1" transform="translate(2126.5 1151)" fill="#00f8ff" stroke="#fff" stroke-width="3" opacity="0.05">
<rect width="99.5" height="100" stroke="none"/>
<rect x="1.5" y="1.5" width="96.5" height="97" fill="none"/>
</g>
<rect id="Rectangle_1-2" data-name="Rectangle 1" width="99.5" height="100" transform="translate(2126 1151)" fill="#efc273" opacity="0.22"/>
<g id="Group_7" data-name="Group 7" opacity="0.32">
<g id="Mask_Group_2" data-name="Mask Group 2" transform="translate(2127 1151)" clip-path="url(#clip-path)">
<path id="Path_4" data-name="Path 4" d="M1.163.172l44.78-.226-1.52,301.567-44.78.226Z" transform="translate(172.028 140.794) rotate(135)" fill="#c8b593"/>
</g>
<g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(2127 1151)" clip-path="url(#clip-path)">
<path id="Path_3" data-name="Path 3" d="M0,0,48.067.242l1.632,323.7L1.632,323.7Z" transform="translate(146.209 -81.852) rotate(45)" fill="#c8b593"/>
</g>
</g>
<g id="Rectangle_2-3" data-name="Rectangle 2" transform="translate(2126 1151)" fill="none" stroke="#fff" stroke-width="4">
<rect width="99.5" height="100" stroke="none"/>
<rect x="2" y="2" width="95.5" height="96" fill="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

16
src/img/shelves/SHELF_FRIDGE.svg
View File

@ -1,16 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<g id="SHELF_FRIDGE" transform="translate(330)">
<g id="Rectangle_1" data-name="Rectangle 1" transform="translate(-330)" fill="#cef4f5" stroke="#fff" stroke-width="3" opacity="0.2">
<rect width="100" height="100" stroke="none"/>
<rect x="1.5" y="1.5" width="97" height="97" fill="none"/>
</g>
<g id="Group_1" data-name="Group 1" opacity="0">
<path id="Path_1" data-name="Path 1" d="M-291.832,0l-30.122,97.125h35.735L-254.952,0Z" transform="translate(0 1.489)" fill="#fff"/>
<path id="Path_2" data-name="Path 2" d="M-291.832,0l-30.122,97.125h12.5L-278.191,0Z" transform="translate(45 1.489)" fill="#fff"/>
</g>
<g id="Rectangle_2" data-name="Rectangle 2" transform="translate(-330)" fill="none" stroke="#fff" stroke-width="4">
<rect width="100" height="100" stroke="none"/>
<rect x="2" y="2" width="96" height="96" fill="none"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 997 B

15
src/logic/shelf.js
View File

@ -1,13 +1,10 @@
const SHELF_TYPE = Object.freeze({
FRIDGE: 'FRIDGE',
BREAD_SHELF: 'BREAD_SHELF',
FURNITURE_SHELF: 'FURNITURE_SHELF',
SEASONAL_SHELF: 'SEASONAL_SHELF',
MEDICINE_SHELF: 'MEDICINE_SHELF',
BASKET_FOR_BALLS: 'BASKET_FOR_BALLS',
SPORT_CLOTHES_SHELF: 'SPORT_CLOTHES_SHELF',
UNIVERSAL_SHELF: 'UNIVERSAL_SHELF',
UNIVERSAL_FOOD_SHELF: 'UNIVERSAL_FOOD_SHELF',
FRIDGE_SHELF: 'FRIDGE_SHELF',
LARGE_SHELF: 'LARGE_SHELF',
BASKET_SHELF: 'BASKET_SHELF',
DISCOUNT_SHELF: 'DISCOUNT_SHELF',
STANDARD_SHELF: 'STANDARD_SHELF',
FREESTANDING_SHELF: 'FREESTANDING_SHELF',
});
class Shelf {

5
src/view/grid.js
View File

@ -135,16 +135,13 @@ class Grid {
this.ctx.strokeRect(x, y, w, h);
this.drawFixIfOnEdge(x, y, w, h);
if (shelf.type == SHELF_TYPE.FRIDGE) {
var img = new Image();
img.src = "img/shelves/FRIDGE.svg";
img.src = `img/shelves/${shelf.type}.svg`;
img.onload = () => {
this.ctx.drawImage(img, x, y, w, h);
}
}
}
storage (x, y, w, h, hasTop, hasRight, hasBottom, hasLeft) {
this.ctx.strokeStyle = '#ffff00';
this.ctx.lineWidth = 5;