From ea24b49f75b7e416be6dff3febf4a4a296bea958 Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Wed, 25 May 2022 10:18:14 +0200
Subject: [PATCH] WIP;

---
 public/assets/gui/border_dark.png        | Bin 2019 -> 1405 bytes
 public/assets/gui/border_light.png       | Bin 2019 -> 1403 bytes
 public/assets/gui/border_steel.png       | Bin 3042 -> 1996 bytes
 src/components/CropField.vue             |  71 ++++--
 src/components/CropInformation.vue       |  35 ---
 src/components/InventoryDialog.vue       |  46 ++++
 src/components/MenuBar.vue               |   2 +-
 src/data/Items.js                        | 300 +++++++++++++++++++++--
 src/data/ItemsIDs.js                     |  45 ++++
 src/models/Item.js                       |   3 +
 src/services/ItemService.js              |  15 ++
 src/{tools => services}/SeasonService.js |   0
 src/store/index.js                       |   2 +-
 src/views/GameView.vue                   |   5 +-
 tests/unit/getSeason.spec.js             |   2 +-
 15 files changed, 442 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/CropInformation.vue
 create mode 100644 src/components/InventoryDialog.vue
 create mode 100644 src/data/ItemsIDs.js
 create mode 100644 src/models/Item.js
 create mode 100644 src/services/ItemService.js
 rename src/{tools => services}/SeasonService.js (100%)

diff --git a/public/assets/gui/border_dark.png b/public/assets/gui/border_dark.png
index e7aaca039dda54a180110aad259b91733ee55e4a..f14dbd49ffa06a1e2b3ba516a3e3ebe42aaa88ab 100644
GIT binary patch
literal 1405
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4mJh`29f4<4M2*qILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmFKt5-IM`SSr1Gg{;GcwGYBf-GHD&*<n7*Y}U_Rhk-Dd{2&4`<#|;^54?
zoa5{38!E~aA0Ft~^h`=?l~%xBh7wO#)^)o&R(<0OkT&XTQE>2A{Mm3f<$ucmGw1gG
ze`Duw^iV}R;PW%<YL3@e59P?;zuhMovEu9b|1n<H`y}d_Vk{Y%jF?zbSU65_2u#?y
zMf=A6{(Z%Jo1`E8`?%I{?$<B-&(1hk_2bQxJJ%{086}Yw&#YygUH$gfo+@Ltgq3~o
z?#W%wTek20x`YFdKqg%heRJ;m{l3htzaDPiulH8ok!knO@7L$s)vmvv8`qO*r!7%n
z0JPL+o#XEvWxlqD8=mes@!#v$pC@l;=%uaVk8^NvYiKwV7iMr>Z-?AAf4Q1>2VPH4
z-q6H&y@7#o=1uJx+2VJ6cE=oF1F`RBCTsEArrDYAO3!ey>GT1We7%ytP5;xBqPI+b
z=0~{LWO$I>E~ucO47Q<%0o7BZ5)Gq40?Q7AEiqiXef;~jWV^>dPu@24{r&01Y{Ru-
z_y2!-Ue$BJbbIZm2gT-b`(+N7n47J?*Yi?GADqV1mNV?Vz30c5pBqlq{^^ltzJ9fR
z>+8qq?9dG67rx>0JNf%km#fS7Nge*Z|G`E1b;$(_p2h86wxfx$8<<Jb>=~`TN*7%>
zv`ARK@AU5ntl-e`iCa<k|KpE4Q(wM#_tr4B=e2~+{eA0W`RC7_^Skyt6Sz!SSH{ZB
z*CoocV;eA|pNTuT>`d(0hQp>?vwSx~j0Wa#XkwcjzG3IHIFM}V)mf*x!G#e#^iO1c
awYTGcwbo9d>^iW>WbkzLb6Mw<&;$UcnZ?!s

literal 2019
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4rT@h2IbheO+bpVILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmF3=GT+0X`wFK=H*v3j5OywibK;Z?`$s9QJ=^)V+i2{~wt7|LDU1S9iU+
zd-?yJWB(st{Qv(yQ1K`j4T0el0<}pAM}hf-p(MyJ7?{FGGGGY)&aMiKTh0QH$YKTt
zZeb8+WSBKa0$5lic)B=-RK&f#da>xTg+xQ(v^=NT+xGmwEtZ@qnH~IN!So+B<<pj)
zd2!~)`Q_Vp%f0{g-Nd)axnY{xK}84e$qxh;EcGnlxNu3uf+ZtUNM@EpaMJtFozg!4
z-|$L0csD3H2rl3V5OFBJe(y#}+p|{w-mi+x908{KH5qI8XT~$y+St@sI!-^Gdhh3c
z23^K3rWdiZE|&dx%~@4dCH4PZ^yGwm1qP;&T9yo-`Olv}|0!Kxy8U*p@vgY_4fps1
zzOXwaXTDas{QSmW6)BO1w1!3ZS*@;qu`ILi1Q}Mx_2utuYn{0TzhtB*zi4M$@Sk0S
zNrbVB!4>K*mQn8D3=P%`*Pa&LG`pL(z4DRC-hKP_?b#EvKHT9wyT-5B1#90H8qa#}
zcX`?8A3rLtFl=Gb_+`A{ZLrOGm0k1glpTy6F1k0ksn2xzemR{bgH3~L!S=l$4er0m
z-F;l;*X!RmzepN2FoeppTZMkURqdR7f??L#?DxFAip&{i>-U<Qw4GrxnYG*RrpgUz
zBTy>8H-T}B3Fo&q9$-S>V4lLD>)W&!s5VpR4ew0OlAL|^sTi4n38;aOF=`fzeO2{u
Zw!?ZhJq}y4fYmqygQu&X%Q~loCIDW$T5kXV

diff --git a/public/assets/gui/border_light.png b/public/assets/gui/border_light.png
index d2e640603eb1516c2b05ad52ec7d75945823a1ce..86b539fc0799ec29f9ba995a513e3f8501d5a060 100644
GIT binary patch
literal 1403
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4mJh`29f4<4M2*qILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmFKt5-IM`SSr1Gg{;GcwGYBf-GHD&Xnj7*Y}U_RhwxDd{2&4`)tLn&1|s
zBRDZ+Bge`;EWb_eHE#9Y72|q9ZELvz_v;Ey&*ZIhB@A;E&B_kBJPa;RtiLh;=FRW(
zZ$584$Q&JU_H_BTj@MTY<;=Txzeg})#aI3MI4|pcQuRzRmW)hBOe`rZ949ygChXjz
zePjRr`^9^kvL9WWE1hihdj9^t<0aSbx}QIv+bb?GK~O<K*}=iBp`nL?apukN4Lh%|
zn><}TnQ7Xq7vC<<*k=5-ww#q&%)O!E%+z%W_wW2E^jUq?f4}X{E%hv%InVbW=eMh0
ze}8|a;j*7=5)RxGP*5=5$@ccqEz_?&%+nq#{nviE`tkPUT{BkNRWLG20$pYuc`#=8
z1B0A-wtp@)majjaz{<?m0J2(pMz(m2|LvILKyw}eU4Ao*wfJq*>&$nhXSmpO`hZHl
zUdi94|7l9mTP8pABV256c#%Dd><^GV@DLc407dO+kbtwpU`q_wW-tG4o^1E{>c`uL
zzQ2F%mOr*7s`mebk5xSf8gJWF|5z&hKCVA;m$bUR|FM#3knFlSwBg?V%8x%k7f${C
zMbe&)@9OcbuP>)_$APo)nXvE;m-FuKG+f5NZ?9z=fBnI|_A$p3{Lk(!^DTtt<UFR5
zSLRRFC2u(HS3AA@AU8N@X6_02`}g(v=j(jjxAz|_F$7B2?A}*)xAx1QJMVWxtS;WF
zEwLdSm_ZK;0W*3v>ujTPQ|52iudFgX3dy60Wablh@Y$?tuxx0yo<34315~55`s)AR
X_uf1FkkqIJ7MKj4u6{1-oD!M<wjRCB

literal 2019
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4rT@h2IbheO+bpVILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmF3=GT+0X`wFK=E@0I@dY_pY%Gtn4kE6bI|{N*{=>S|9^ei|A)Ij-Z=LE
z$<hDsZvX%I@c;k+K*ghAGz5lI2q>1Z*aPzkLrIWdFffIWWWW&oom~|ex10qYk;M!Q
z+`=Ht$S`Y;1hBA3@N{tusfc@f^>)z}3lWDvwaX?iV}AVK&wK1rz_pSDXSt8J@~16b
zcWKq9m;U+Xw)emOH1Tb6ZkVQaP|?AA@&kbdOFauXE?iQvV9Cf7l9}ZYob>*_u=$LC
zH>HglrZKoSC^-l&&}ewJZtupIJZHJ(rCvL;2`tEp`*9&c-e^BlRYk>*q9(oRr}uoW
zXN+PJVZE^1WbxY%*M-0Q_+jzy?sm0<_Z%2lR{Y|)FvHH@-~Y4uzgKzNZ>N>)jbq#^
zzu*Ob!?8=(JeQr{_}kM&gW)WL>wfN%RWFO*)CqwM`z!L|w|RMl)x$5AW@;Dtc^&@q
z2e4=`i7<9S-NiA=9h{-TwP5Y(r<-zj-Oc-aB(tivwzjfzXWaURd;9@kb~{Ahew=1<
ze(o~g=Rbe`T)~*Z8So|D;r8;1d7dTqwQdb*4U762di{(#-z`7Sae*g5#38@>apJz4
zx6ArHzg+*m`K56R1LG<?zLHhXwtjCrHi6M(_Vs(xQqF7_a^kA<Gk9jQW|)-E-Q>B!
zJcU8mw`s2;GcaMl;gtlY_JsTs3{kUKs)1@Rsoan@5`J-`rv4Q6oWQijgtP9;w{N`D
WGgIXp&RnPg6|SDHelF{r5}E*h>S1L7

diff --git a/public/assets/gui/border_steel.png b/public/assets/gui/border_steel.png
index 3e0a14d0e3cb7ad5712978645fb4b5d54aaa1043..d229db28877fb449f37fd45d2773d1b709ccc2f6 100644
GIT binary patch
literal 1996
zcma)-eN2;A6vp2w3J9!dbRZyYSb|gLh_b?<umWNMzk^!i+XCVgMmrTP7Dj2yG<-#r
zn8pEPP@U3=<t=XY6|{gbr%0eJhE^yops>KoM;q;G=@(sz2^O`^KW=VLa?d$8&;6a}
zmhRmh@3F#X1pojZi3xE@0DwTxFPG&20IWX8FR*P0YEpbGz!&?eY=Kio%&r&!_`TfC
zoVLssyJjUEq5{At?ehykep>1Z0M2QNaWVUIQ)Y(tlqBb@d-S||1Dno`Tfa+MzprPt
z;PjJcf!9hfK^t7s*FMI_WQ}o>N%CEr)i+%VlS+Iy1gy?ZtBZ|Y<KrnU^z_^|_)q1=
zOGl;(vei!8dv1>up{eTd^-4ufAj5z5QqIcltC~^FLaN%&Thu8st{E5^mz6Yak~RXG
zaKw@$PA(-Y(P(@@f%ihd)ojI|^Z%kHYi=hbmp2=mKtYK7XX(8rl3@%F(TXc7$U1@f
zM-xRP9(;h5k@cLgP|A~IbQ2z8hVokpydeq8ssUR)^0J<Iyjy-zFI!MqqYsT3(dJDm
zQX6EFu-e&E5G~j;ssb(Fx0rteHPB2K0b&Lc1y+lKJp)=uMjeU_6AisrLCf{wW!3Ix
z;RsKo7d;psXHj59?wJAMVXsDadXB_#^YNGHQDc2488$sfwx#koZowpI+4T6oUDx2#
zMa<GxUr*1^qNB?I#O5VVf4SHP(<*>*RQFsl@l#E4;JVJta9-!d^5G~`;p>zhu?*5C
z-=b#hkxph<1e|)Ax~HF0kCBNvNN>KD8daXt+2Xc*+V}0cubcG5_I-7YAF^MN&6+@{
zqlCI|2Tv`1?;|ZzF+FWdRoOl9UN#hlMc&e5M59*(L>zZr*jq3ACaG#iK_HP><2+z`
z<m}~Kb5&^%z?)->(6Hr%j^ws#fo8<Jx-1gO7KBs)Gq0%abJh=>?jbF?9VJ&swh#B0
zee5N|v!;~!8F#R{(yg#@ZSe3x-q6FKYM47{&>|k3Ve(OtQp*dFm`T=Y6$gtf?XHeB
zQ0dU4Rq?0>3|5ldmO|Nx4ES?MWhSvEXOkcrh1U%mRffB5BF7Xh%uZ#B<}5?!hHAuM
zy;7P%%0|uEj-je9WcAl~jL{IYmhl3Fm>-h(8H0R!3=)T&d_NY8K-}3FT!*v5@wV|B
z+mp)2Tn?@)7WNtLGR;9#@F0|*T}Qx;nAKX?=op>K6l6dxmj3J0=|}@R2<E;-2PkXA
z5}k@2Pl1W1fnthIE0xTVcqqs6*|YH-#vkREU9`#}Z}x}ZF&ul|t{f0Z-6OWT+RxnE
zY%PrDZSWg&M@+`&3)W>{Y2MT-3%Qy2WanH~ME>88|8FMV-0{;ucGrz5Kwrx}G#xpX
zp4lshP<<C2n}T2SnG<axiW-}u1e`(<Murv5uRw@q^M-z(3$+H7hBns_ef}iFKyAWx
z_orGY5N(PxcNC&^BmL@Sk_xfq1_5{Cwd2quqOE3AP?Ka6wtq+GDNro7(pu@S+#J6|
zRk!dk>jwi0PMGbVI{B2`bmtz4$9d855ES%HBwyd*#o9-)4j8uRzpQ6Tun;G&fgsc{
zCh~1$3iDeR8o!6VKK=P&EQ-+5HxI_lafZLQFWDbii5W|?iY8Jg=kP7?WiA0H>M)Vv
zYGp2ufaBnF2@s79B|^WXXFj`sAcQYFp&ZjIGmq)6f&!|l;{HvUTJF^-n>^l&EYJEF
vbL*x1E_Kh#aUT%O|6F%J!hE*)SdeLd@X7*K9?7=-z(C@*-EsWb!)N~k8~6}2

literal 3042
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4rT@h2IbheO+bpVILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmF3=GT+0X`wFKyeNZ4hbGcb7f9@O&&Krem_&;Fk6XOXW3LQrQ9Hmj9{~p
zNWIc{yP71k>J+E?`udhE+wLNl$<@BITf!Fg#IKr~v1wk>!3`ZJcTM^K=hOfH|AA(X
zg3%Bd5+U$?>F4dhe8Nx?<QEJ~x+57d1b=5&1x6ZYfk$L90|Vbd5N6ylG5ak81ADxu
zi(^Pd+}pbsi-ezvwgw6X3oTGAmASR7_W$!G>ECpg{-5~7?5&FUjq1A-b*1O`&+Iv?
z@bc{R>U(?a^!8tL*zw1W`QayN-j>t(CIVOlKE6N5{P=mb-QCa6|DT?(x6gXd{^uVL
zx&M>1lerhW!$zc&?a<SO9zd=9u8SHADm8?FCOJ>cP>7N1ase6~pd!UFy<G`t4;H2W
zE>~FndHm>o`}zM9yB=;n;xEqEyIuTNi^^>NikdI%LVSO1f8^fV|6N_IE2c2u#AOF{
z_EsC-k|M&)KSd80AAY>AZeMxbyyLMK)t+Q7m~5u#&pdYvXQkAOCB7iDa-HU}S!D`;
zGP&S6d&2TYzgsOpvoEPVv1I!D<8gm|rKVlopA|=pMRqPiDF69V_g__F_2)FZ_xAB!
zJCBB*|MUMunJbEZyjJ~q<}~}q?N;`^n;d}Qa~BwL7i5WNRNT3s_GiVfS#=R#&)+#j
zioKq*KYVFAKR<W9!iDebw?%RJ9k1JA!IZ9IV|!C7BLg$&h|&%Y<vpve`P-9fNSyuG
zj~BmjF;&i8vVp`%MRD1axq63wd&|5x_!z`oTm7+sB*Q*Ud2#kz5wqu~4-Xz}h&9aH
z#wK;_>@|nOJAl5CFpp;DeVmrPAn{HPuSw7BwT*3sn@ukmpeXtw{TF1w&zFDRM*rWT
zlM}9T6R4OtLf?GC`^EBdTR3lvdYS?4BAxKJyOE=BeqlMc{tS_A+LLmC&L@JHw{F+X
zxIBgP5w+jn9X?p*Itl1wXL1N&>{(jmgyRSrqQZ{|MRAS_|1XdhvS=}|USUG{e?B5Z
z`F1wnm$R)Zv)T7HIoQhsi$tf{pmHzQ30Mwp;RKe87u1LoJoLCtW%k>rY@eoO->?1t
zGhw&VNnm19B!cj)ke$mfUo-pXySvBx<)44v$7BEJLv#4||NpAj-~07tiLXWxYAI#O
z#M}S-7nb4=C8wa4lz-MYs{A}$ad~q)yS-+ce&y$<_O?Gy+&`B7Cx3o1u*hY0ny7uN
z<^FSiWq)Q{_jznpeKx#bWPk;(C9se!2A09kf#vS`iO*Mae0h3k{o(hYrGHGBt)KGw
z-u{noTm3$M1Bz|-u&@2({@tdZJ750$j~6>xAKrd)R($*Yx#2|CDOjtYjddTj`D=V*
v>J~Q^{OkqRSmwZ5={~TM!Y>g2^V8FKJJtwQcbDr6K#e9(S3j3^P6<r_z&V-R

diff --git a/src/components/CropField.vue b/src/components/CropField.vue
index d288055..c40243f 100644
--- a/src/components/CropField.vue
+++ b/src/components/CropField.vue
@@ -15,23 +15,18 @@
          aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content steel-border">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="cropInventoryModalLabel">Select a crop to be planted</h5>
-                </div>
-
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-6 pixel-border-static"
+                        <div v-on:click="plantSeed(seed)"
                              v-for="seed in $store.getters.getSeedsInInventory"
                              v-bind:key="seed"
-                             data-bs-dismiss="modal">
-                            <div v-on:click="plantSeed(seed)">
-                                <div class="float-end">
-                                    <img :src="seed.assetsFolder+'/6.png'" :alt="seed.name">
+                             data-bs-dismiss="modal"
+                             class="crop-item-wrapper" :style="'background-image: url('+seed.assetsFolder+'/6.png)'">
+                            <div class="crop-item" >
+                                <div>
+                                    <span class="growtime-display">{{ seed.cropData.timeToGrow }}</span>
+                                    <span class="quantity-display">{{ seed.quantity }}</span>
                                 </div>
-                                {{ seed.name }}<br/>
-                                {{ seed.cropData.timeToGrow }} minutes<br/>
-                                ({{ seed.quantity }} left)
                             </div>
                         </div>
                         <div v-if="!$store.getters.getSeedsInInventory.length">
@@ -40,8 +35,8 @@
                     </div>
                 </div>
 
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">Cancel</button>
+                <div class="modal-footer" v-if="!$store.getters.getSeedsInInventory.length">
+                    <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">K, bye</button>
                 </div>
             </div>
         </div>
@@ -77,17 +72,6 @@ export default {
         harvestField(field) {
             this.$store.commit('harvestSeed', field);
         },
-        // cropInformation(id) {
-        //     this.$store.commit('selectField', id);
-        //
-        //     if (!this.$store.getters.selectedField.data) {
-        //         return false;
-        //     }
-        //
-        //     const modal = new Modal(document.getElementById('cropInformationModal'))
-        //     modal.toggle();
-        //     return false;
-        // },
         getCropAsset(field) {
             let seed = this.$store.state.itemCatalogue.find((item) => {
                 return item.id === field.data.seed_id;
@@ -155,4 +139,41 @@ export default {
     background-color: green;
     height: 0.2em;
 }
+
+.crop-item-wrapper {
+    align-content: center;
+    width: 3.7em;
+    height: 3.7em;
+    margin: 3px auto;
+    padding: 0;
+    position: relative;
+}
+
+.crop-item {
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+
+.growtime-display {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 500;
+    padding: 0 0.4em;
+    margin-bottom: -0.5em;
+    background-color: green;
+    border-radius: 15px;
+}
+
+.quantity-display {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 500;
+    padding: 0 0.4em;
+    margin-bottom: -0.5em;
+    background-color: yellow;
+    border-radius: 15px;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/components/CropInformation.vue b/src/components/CropInformation.vue
deleted file mode 100644
index b954b2c..0000000
--- a/src/components/CropInformation.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <div class="modal fade"
-         id="cropInformationModal"
-         tabindex="-1"
-         aria-labelledby="cropInformationModalLabel"
-         aria-hidden="true"
-         v-if="$store.getters.selectedField">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content steel-border">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="cropInformationModalLabel">Crop information</h5>
-                </div>
-
-                <div class="modal-body" v-if="$store.getters.selectedField.data">
-                    Seed: {{ $store.getters.selectedFieldSeed.name }}<br/>
-                    Percent done: {{ $store.getters.selectedField.data.percentDone }}<br/>
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">Cancel</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "CropInformation"
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/InventoryDialog.vue b/src/components/InventoryDialog.vue
new file mode 100644
index 0000000..dd19bdd
--- /dev/null
+++ b/src/components/InventoryDialog.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="modal fade" id="inventoryModal" tabindex="-1" aria-labelledby="inventoryModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content steel-border">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="inventoryModalLabel">Inventory</h5>
+                </div>
+
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-6 pixel-border-static"
+                             v-for="item in $store.getters.getInventoryWithItemData"
+                             v-bind:key="item"
+                             data-bs-dismiss="modal">
+                            <div class="">
+                                <div class="float-end">
+                                    <img :src="item.icon" :alt="item.name">
+                                </div>
+                                {{ item.name }}<br/>
+                                {{ item.quantity }}
+                            </div>
+                        </div>
+                        <div v-if="$store.state.inventory.length === 0">
+                            You don't have any items yet.
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">Exit</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "InventoryDialog",
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 52b9642..7f7cfee 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -5,7 +5,7 @@
         </div>
 
         <div class="menu-item">
-            Item
+            <a href="javascript:" v-on:click="openModal('inventoryModal')">Inventory</a>
         </div>
 
         <div class="menu-center">
diff --git a/src/data/Items.js b/src/data/Items.js
index 11873e7..f70f052 100644
--- a/src/data/Items.js
+++ b/src/data/Items.js
@@ -1,13 +1,16 @@
 import Seasons from "@/data/Seasons";
 import ItemTypes from "@/data/ItemTypes";
 import {CropAssets} from "@/data/Paths";
+import {Seeds, FieldProducts} from "@/data/ItemsIDs";
 
 export default [
     {
+        id: Seeds.WheatSeeds,
         name: 'Wheat seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'wheat/',
+        icon: CropAssets + 'wheat/1.png',
         economy: {
             buy: 5,
             sell: 10
@@ -15,10 +18,11 @@ export default [
         cropData: {
             timeToGrow: 1,
             season: Seasons.Summer,
-            product_id: 2
+            product_id: FieldProducts.Wheat
         }
     },
     {
+        id: FieldProducts.Wheat,
         name: 'Wheat',
         type: ItemTypes.FieldProducts,
         description: '',
@@ -30,10 +34,12 @@ export default [
         }
     },
     {
+        id: Seeds.RiceSeeds,
         name: 'Rice seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'rice/',
+        icon: CropAssets + 'rice/',
         economy: {
             buy: 5,
             sell: 10,
@@ -41,10 +47,11 @@ export default [
         cropData: {
             timeToGrow: 2,
             season: Seasons.Summer,
-            product_id: 4
+            product_id: FieldProducts.Rice
         }
     },
     {
+        id: FieldProducts.Rice,
         name: 'Rice',
         type: ItemTypes.FieldProducts,
         description: '',
@@ -56,241 +63,496 @@ export default [
         }
     },
     {
+        id: Seeds.TurnipSeeds,
         name: 'Turnip seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'turnip/',
+        icon: CropAssets + 'turnip/',
         economy: {
             buy: 10,
             sell: 20,
         },
         cropData: {
             timeToGrow: 3,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Turnip
         }
     },
     {
+        id: FieldProducts.Turnip,
+        name: 'Turnip',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'turnip/',
+        icon: CropAssets + 'turnip/6.png',
+        economy: {
+            buy: 10,
+            sell: 20,
+        }
+    },
+    {
+        id: Seeds.PotatoSeeds,
         name: 'Potato seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'potato/',
+        icon: CropAssets + 'potato/',
         economy: {
             buy: 10,
             sell: 20,
         },
         cropData: {
             timeToGrow: 3,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Potato
         }
     },
     {
+        id: FieldProducts.Potato,
+        name: 'Potato',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'potato/',
+        icon: CropAssets + 'potato/6.png',
+        economy: {
+            buy: 10,
+            sell: 20,
+        }
+    },
+    {
+        id: Seeds.CornSeeds,
         name: 'Corn seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'corn/',
+        icon: CropAssets + 'corn/',
         economy: {
             buy: 15,
             sell: 25,
         },
         cropData: {
             timeToGrow: 7,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Corn
         }
     },
     {
+        id: FieldProducts.Corn,
+        name: 'Corn',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'corn/',
+        icon: CropAssets + 'corn/6.png',
+        economy: {
+            buy: 15,
+            sell: 25,
+        }
+    },
+    {
+        id: Seeds.EggplantSeeds,
         name: 'Eggplant seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'eggplant/',
+        icon: CropAssets + 'eggplant/',
         economy: {
             buy: 15,
             sell: 25,
         },
         cropData: {
             timeToGrow: 9,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Eggplant
         }
     },
     {
+        id: FieldProducts.Eggplant,
+        name: 'Eggplant',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'eggplant/',
+        icon: CropAssets + 'eggplant/6.png',
+        economy: {
+            buy: 15,
+            sell: 25,
+        }
+    },
+    {
+        id: Seeds.GrapeSeeds,
         name: 'Grapes seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'grapes/',
+        icon: CropAssets + 'grapes/',
         economy: {
             buy: 15,
             sell: 25,
         },
         cropData: {
             timeToGrow: 9,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Grapes
         }
     },
     {
+        id: FieldProducts.Grapes,
+        name: 'Grapes',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'grapes/',
+        icon: CropAssets + 'grapes/6.png',
+        economy: {
+            buy: 15,
+            sell: 25,
+        }
+    },
+    {
+        id: Seeds.TomatoSeeds,
         name: 'Tomato seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'tomato/',
+        icon: CropAssets + 'tomato/',
         economy: {
             buy: 20,
             sell: 35,
         },
         cropData: {
             timeToGrow: 10,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Tomato
         }
     },
     {
+        id: FieldProducts.Tomato,
+        name: 'Tomato',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'tomato/',
+        icon: CropAssets + 'tomato/6.png',
+        economy: {
+            buy: 20,
+            sell: 35,
+        }
+    },
+    {
+        id: Seeds.CucumberSeeds,
         name: 'Cucumber seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'cucumber/',
+        icon: CropAssets + 'cucumber/',
         economy: {
             buy: 30,
             sell: 55,
         },
         cropData: {
             timeToGrow: 15,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Cucumber
+        }
+    },
+    {
+        id: FieldProducts.Cucumber,
+        name: 'Cucumber',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'cucumber/',
+        icon: CropAssets + 'cucumber/6.png',
+        economy: {
+            buy: 30,
+            sell: 55,
         }
     },
     {
+        id: Seeds.StrawberrySeeds,
         name: 'Strawberry seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'strawberry/',
+        icon: CropAssets + 'strawberry/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Strawberry
         }
     },
     {
+        id: FieldProducts.Strawberry,
+        name: 'Strawberries',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'strawberry/',
+        icon: CropAssets + 'strawberry/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
+        }
+    },
+    {
+        id: Seeds.OrangeSeeds,
         name: 'Orange seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'orange/',
+        icon: CropAssets + 'orange/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Orange
+        }
+    },
+    {
+        id: FieldProducts.Orange,
+        name: 'Orange',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'orange/',
+        icon: CropAssets + 'orange/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
         }
     },
     {
+        id: Seeds.LemonSeeds,
         name: 'Lemon seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'lemon/',
+        icon: CropAssets + 'lemon/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Lemon
+        }
+    },
+    {
+        id: FieldProducts.Lemon,
+        name: 'Lemon',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'lemon/',
+        icon: CropAssets + 'lemon/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
         }
     },
     {
+        id: Seeds.PineappleSeeds,
         name: 'Pineapple seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'pineapple/',
+        icon: CropAssets + 'pineapple/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Pineapple
         }
     },
     {
+        id: FieldProducts.Pineapple,
+        name: 'Pineapple',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'pineapple/',
+        icon: CropAssets + 'pineapple/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
+        }
+    },
+    {
+        id: Seeds.MelonSeeds,
         name: 'Melon seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'melon/',
+        icon: CropAssets + 'melon/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Melon
         }
     },
     {
+        id: FieldProducts.Melon,
+        name: 'Melon',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'melon/',
+        icon: CropAssets + 'melon/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
+        }
+    },
+    {
+        id: Seeds.CoffeeSeeds,
         name: 'Coffee seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'coffee/',
+        icon: CropAssets + 'coffee/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.CoffeeBeans
         }
     },
     {
+        id: FieldProducts.CoffeeBeans,
+        name: 'Coffee beans',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'coffee/',
+        icon: CropAssets + 'coffee/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
+        }
+    },
+    {
+        id: Seeds.CassavaSeeds,
         name: 'Cassava seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'cassava/',
+        icon: CropAssets + 'cassava/',
         economy: {
             buy: 60,
             sell: 140,
         },
         cropData: {
             timeToGrow: 60,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Cassava
         }
     },
     {
+        id: FieldProducts.Cassava,
+        name: 'Cassava',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'cassava/',
+        icon: CropAssets + 'cassava/6.png',
+        economy: {
+            buy: 60,
+            sell: 140,
+        }
+    },
+    {
+        id: Seeds.SunflowerSeeds,
         name: 'Sunflower seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'sunflower/',
+        icon: CropAssets + 'sunflower/',
         economy: {
             buy: 10,
             sell: 20,
         },
         cropData: {
             timeToGrow: 5,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Sunflower
+        }
+    },
+    {
+        id: FieldProducts.Sunflower,
+        name: 'Sunflower',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'sunflower/',
+        icon: CropAssets + 'sunflower/6.png',
+        economy: {
+            buy: 10,
+            sell: 20,
         }
     },
     {
+        id: Seeds.RoseSeeds,
         name: 'Roses seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'rose/',
+        icon: CropAssets + 'rose/',
         economy: {
             buy: 10,
             sell: 20,
         },
         cropData: {
             timeToGrow: 5,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Rose
+        }
+    },
+    {
+        id: FieldProducts.Rose,
+        name: 'Rose',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'rose/',
+        icon: CropAssets + 'rose/6.png',
+        economy: {
+            buy: 10,
+            sell: 20,
         }
     },
     {
+        id: Seeds.TulipSeeds,
         name: 'Tulips seeds',
         type: ItemTypes.Seeds,
         description: '',
         assetsFolder: CropAssets + 'tulip/',
+        icon: CropAssets + 'tulip/',
         economy: {
             buy: 10,
             sell: 20,
         },
         cropData: {
             timeToGrow: 5,
-            season: Seasons.Summer
+            season: Seasons.Summer,
+            product_id: FieldProducts.Tulip
+        }
+    },
+    {
+        id: FieldProducts.Tulip,
+        name: 'Tulip',
+        type: ItemTypes.FieldProducts,
+        description: '',
+        assetsFolder: CropAssets + 'tulip/',
+        icon: CropAssets + 'tulip/6.png',
+        economy: {
+            buy: 10,
+            sell: 20,
         }
     },
 ]
diff --git a/src/data/ItemsIDs.js b/src/data/ItemsIDs.js
new file mode 100644
index 0000000..fcc0211
--- /dev/null
+++ b/src/data/ItemsIDs.js
@@ -0,0 +1,45 @@
+// SEEDS
+export const Seeds = {
+    WheatSeeds: 1,
+    RiceSeeds: 3,
+    TurnipSeeds: 5,
+    PotatoSeeds: 7,
+    CornSeeds: 9,
+    EggplantSeeds: 11,
+    GrapeSeeds: 13,
+    TomatoSeeds: 15,
+    CucumberSeeds: 17,
+    StrawberrySeeds: 19,
+    OrangeSeeds: 21,
+    LemonSeeds: 23,
+    PineappleSeeds: 25,
+    MelonSeeds: 27,
+    CoffeeSeeds: 29,
+    CassavaSeeds: 31,
+    SunflowerSeeds: 33,
+    RoseSeeds: 35,
+    TulipSeeds: 37,
+}
+
+// FIELD PRODUCTS
+export const FieldProducts = {
+    Wheat: 2,
+    Rice: 4,
+    Turnip: 6,
+    Potato: 8,
+    Corn: 10,
+    Eggplant: 12,
+    Grapes: 14,
+    Tomato: 16,
+    Cucumber: 18,
+    Strawberry: 20,
+    Orange: 22,
+    Lemon: 24,
+    Pineapple: 26,
+    Melon: 28,
+    CoffeeBeans: 30,
+    Cassava: 32,
+    Sunflower: 34,
+    Rose: 36,
+    Tulip: 38,
+}
diff --git a/src/models/Item.js b/src/models/Item.js
new file mode 100644
index 0000000..3509c96
--- /dev/null
+++ b/src/models/Item.js
@@ -0,0 +1,3 @@
+export default class {
+
+}
diff --git a/src/services/ItemService.js b/src/services/ItemService.js
new file mode 100644
index 0000000..9244211
--- /dev/null
+++ b/src/services/ItemService.js
@@ -0,0 +1,15 @@
+import Items from "@/data/Items";
+
+export default class {
+    getItemByID(id) {
+        return Items.find((item) => {
+            return item.id === id;
+        });
+    }
+
+    getItemsByType(type) {
+        return Items.filter((item) => {
+            return item.type === type;
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/tools/SeasonService.js b/src/services/SeasonService.js
similarity index 100%
rename from src/tools/SeasonService.js
rename to src/services/SeasonService.js
diff --git a/src/store/index.js b/src/store/index.js
index cf452fb..169454a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
 import {createStore} from 'vuex'
 import moment from "moment";
-import {SeasonService} from "@/tools/SeasonService";
+import {SeasonService} from "@/services/SeasonService";
 import ItemTypes from "@/data/ItemTypes";
 import Items from "@/data/Items";
 
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 37f6077..46f4cc1 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -4,8 +4,8 @@
         <CropField/>
     </div>
     <MenuBar/>
-<!--    <CropInformation/>-->
     <ItemShop/>
+    <InventoryDialog/>
 </template>
 
 <script>
@@ -14,10 +14,11 @@ import StatusBar from "@/components/StatusBar";
 import CropField from "@/components/CropField";
 import MenuBar from "@/components/MenuBar";
 import ItemShop from "@/components/ItemShop";
+import InventoryDialog from "@/components/InventoryDialog"
 
 export default {
     name: "GameView",
-    components: {ItemShop, MenuBar, CropField, StatusBar},
+    components: {InventoryDialog, ItemShop, MenuBar, CropField, StatusBar},
     data() {
         return {
             time: null,
diff --git a/tests/unit/getSeason.spec.js b/tests/unit/getSeason.spec.js
index ed0164b..7ddbbd8 100644
--- a/tests/unit/getSeason.spec.js
+++ b/tests/unit/getSeason.spec.js
@@ -1,4 +1,4 @@
-import {Seasons, SeasonService} from "@/tools/SeasonService";
+import {Seasons, SeasonService} from "@/services/SeasonService";
 
 test('expect week 1 to return season spring', () => {
     expect(SeasonService.getSeasonByWeek(1)).toBe(Seasons.Spring);