From 22eb7d5bcb30bd9ca67d070c7ab1b21a2cc63368 Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Fri, 27 May 2022 21:47:04 +0200
Subject: [PATCH] Shop refactor; better buying system; adjust assets; add
 helpers.js; add mono-button; move gui-elements to own scss;

---
 src/assets/gui/border_dark.png            | Bin 7933 -> 3161 bytes
 src/assets/gui/border_light.png           | Bin 7744 -> 3121 bytes
 src/assets/gui/border_steel.png           | Bin 3042 -> 2034 bytes
 src/assets/gui/btn_monochrome.png         | Bin 0 -> 441 bytes
 src/assets/gui/btn_monochrome_light.png   | Bin 0 -> 450 bytes
 src/assets/gui/btn_monochrome_pressed.png | Bin 0 -> 448 bytes
 src/components/CropField.vue              |   2 +-
 src/components/CropShopView.vue           | 156 +++++++++++++++-------
 src/helpers.js                            |   6 +
 src/style/_gui-elements.scss              |  92 +++++++++++++
 src/style/app.scss                        |  74 +---------
 11 files changed, 214 insertions(+), 116 deletions(-)
 create mode 100644 src/assets/gui/btn_monochrome.png
 create mode 100644 src/assets/gui/btn_monochrome_light.png
 create mode 100644 src/assets/gui/btn_monochrome_pressed.png
 create mode 100644 src/helpers.js
 create mode 100644 src/style/_gui-elements.scss

diff --git a/src/assets/gui/border_dark.png b/src/assets/gui/border_dark.png
index 60332065207c286f148cae5849cc8140ecd4b52f..0b012dc1301ece4ec5841dd869db62a4150f0743 100644
GIT binary patch
literal 3161
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
A$p8QV

literal 7933
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
To$Rpz>j+{&u`wy%=@t8Lryo6k

diff --git a/src/assets/gui/border_light.png b/src/assets/gui/border_light.png
index 3f45dc032a6f2670e03c33a890cfdf3c48f3ecd0..6449dc00e00cb2b399d204e26a355ffb1e52098e 100644
GIT binary patch
literal 3121
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
Lk)WwsoKg56W(qLw

literal 7744
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
Ph5&nOC#&);0WtpuzG(b~

diff --git a/src/assets/gui/border_steel.png b/src/assets/gui/border_steel.png
index 3e0a14d0e3cb7ad5712978645fb4b5d54aaa1043..9d4c5e87f41784a99416bbdbd8a534c7e7dcb713 100644
GIT binary patch
literal 2034
zcma)-drVVz6vuBJv!Egn6nw1IjW}N!jUn0$YA-kt(OM9;i(C-hOn4M6n>+?oT4sGv
zr6Cz+Lr{uwh*(N_wFRs^)Iof-R|joTD7dlms4ZBft+bY|jLhmn4S)P{bCUZw-|so!
z&t*lD!(5lFSpoonYxwSvC;&jMn?25p0RULRtj)JwQ0Y-&JAqp1C*!ulDJghgFaXpS
zEq(Lt$F|z#``xkW0I<Ac_Mj+omJ0x&&xVHtf1RD6RYoKa{fOz-r9~GH;Vb<G-}px-
zE)H~o#ZBi9<hrl+(bPX;`VdT`@-n8oh8lgU(|sf~<P?T*^skCg^cLp^X5@-cVN2g8
z%#kuw3Vl<dU&_#h&!!DV%T9V;rFIyFH3eMw*{dyr_|qg#sUUT;O)Hz*_i;V&l3qSw
zyab@OE^@l-?C$Ox6jb=O=rOLp8jSNIGG<6TWusvvPLPFUABlh7d3>6mDrm*PC43oj
z+ZRpImaDpp<Z8o^n>=;vy^#?;Y^gbzBZ5TUhiH5#jhPUi@zJ91oSX|h)~(x>pT7z<
zZ;@zDU+W2u>NRfdv0Tn1f93`xieZ@Jd31S#HI7G1O&9Oya&%o2))|Q|kw^DydpQa#
zy}+D02&_g<ve7e2Y%gNmcgJM1QZnOcw7#THzjz<RlO1@6pS^hhe8C3tj#zF#!Y~!X
z7J~IAJ{1-CW!{_Jyh~TWyMwL{n>I|HFW@BPilLqpnz4Iu2YGP%!2?0*2x!f{D!-))
z4SCk~X;2V}pVle8yaVELJP%p+@Tf^`#zt5PK@eq|M6FgE6iYJtaucZFgE(X_kJ|HE
zQ<B!1Z$9&O2Ja2Tzejk?e|(utiY>{`M<ZlQbN>$uF*cFlgD;jw4zp7|-Rg`2t)`+e
z8l1=)a6F35s5NOvNra9;d}$db<IM4ed}T8Vwm!44&>fCFd%FT9)lSJ(R<y?ImcRCY
zTW42HS|3z4EMcMh%ugR{D*P`vzSF+BW}%cF*Vtc;U}|JYau$O}_4eZ{)WU{_C~gWA
z6C-MeD(=W%9XH1g<|a@wX;aVs4x{AM^JEBTaFqc|Zbr=;1zS@jzPAT*=|q!!BInOP
zWUx|P;B0Zt^U&>$cxZdSxG9p$AtL(Aj!m_1{`ks@(_zasCRD@I7K<m6OwD?<`u>Mp
z^NAXMjwKU%K7Ti!cBAa_Z7J6D2jHm^>S#Ny!Pcs}Wv`%>S5wnVDV51&TK>whI=y&+
z{)?#mS6EqYlCowK)Odi)!4fP{Ji6oVuPM$Kj7ojD0$TaBUS*d*rSlcEegPV)ZQ(JO
zwJX%!9};3GKmdDJI#U`s4|W{rdQarLMFwTGKR9XQ{7|u*KF1#N(z8V3*s}EwjhxFE
z;8yk3SvR+UK>aXvA%aRS>aqt&0UgY$V@Vsz_XmPwn%<(D7{}mwBFdx=lq%=YAdx(`
z4e4KERwBgx+!Qa+%C-@u_LhDR?^=t=0H$UJ>Qp$nTKIx>M_`&Zv>fXF&*;Pm#?q{+
zS<-sd6{qEC>tV}luVvZSUFOeKbdHA(%eUV2a+wq}c#ud{c^bA9jwGgP%Za$#2gNVC
zVPlaNJ3<Us54|GKv9XAe(FTFI_*R&U{eUF8M|}|sw`FjAb|(x%BCgPN8{7Ng)5mq-
ztIC)S)}WWF--QsU9hiZYT?)_^P(?)E6-cD(YKF*x;ESOf7@2yzT1T5`YR<6btmXAf
zEG5&dn&kJYd1=wq1yShH==Q~{rk-p)jFdvY3wq?Y6yhR~=Cl!4&~@GRp9aE1$sx5n
H51;%8HvuD8

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/assets/gui/btn_monochrome.png b/src/assets/gui/btn_monochrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..e17852226f51bc2c32be2131c2945cf41c3d3ed6
GIT binary patch
literal 441
zcmV;q0Y?6bP)<h;3K|Lk000e1NJLTq003YB001Be1^@s6?ZACh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGf6951U69E94oEQKA0ZvIoK~!i%?b<Pl
zgis6yVBHH?T3Xt86VKuayp6q=cn1&!K`bpr3q8T^m`#Lvj-&1l<Q4x1PBN{@52DX6
zio$y(Ns@1FpEOOw9o*!vKV8?+AMwQ%lxzvGH@+-O?%)&RIHqchp&EuEB?1Xhwo8D$
z`NJ@92X{O+oV#aoKal`O_*GS1+WaibxPvR|y5{be{q!UE7YR_dOTgLYkK@Q4ywkQV
z)gTC{3P}PI;E44ph!S8==4kV$X`%}6$^Dw=nQ9b8RFMG3oDN`}<a(`}kL~|FBtRJk
zpbP_0h5;zU0F+?>$}j+B7=SViK-unHkdSYf%d${~d*mHZnx<6cGzs1XIp#D0qVId|
z;EJQo7f663wo?(t7)pZuHQ!DG+;g<~I2GXtKhJY&9+RO2h@*2Y@Hevg0ts-$mH?Zb
j2>2h_cpDO+%JY5zP*A14N2F;!00000NkvXXu0mjf`vJ28

literal 0
HcmV?d00001

diff --git a/src/assets/gui/btn_monochrome_light.png b/src/assets/gui/btn_monochrome_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..e105ab60042a4187f985f048121262072461e056
GIT binary patch
literal 450
zcmV;z0X_bSP)<h;3K|Lk000e1NJLTq003YB001Be1^@s6?ZACh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGf6951U69E94oEQKA0ar;xK~!i%?b<Pl
zgHR9#VBO9uSlN37d%GONQ+OK>VQHr~P)R2th@gU<<t|R%2zjnC?gr)+{|8|v?VI_V
z=d+U}v3?VV;kRm^R8^%qIOBf5+e^J(uk@dNsR}~Y1n3)|rm5=S6FkqOS`-D<d7dc|
zNPw_S0`$#q+g5dOhU>bjd&cL91Q^2Zy6&ybzg#Y=gLjPMsJe%yX;k;X=Zgdg+a%y<
z^ZUM69lTQ4HC5mDsWMIi5?}~B%Q8xUKAFAEABKS{yvFA>O%v512&f_fhB+L-GRft)
zY(BRC^N;{x7=SPgKo|xf3<D5`0SLnYgkb=}FaTkjyCBBjFw3%}3g_@0P!vT}`85gd
zf(&z*0G8*u>fjxFo6nE{L#(eNZnqmHLI0YsCjrjc+kCu=FoYe)F*T0kPy*QAyB7Ex
s-h74x7-CI;PEQ2<4{y8<2@qvjKS>p{ou)->`Tzg`07*qoM6N<$g3+nBnE(I)

literal 0
HcmV?d00001

diff --git a/src/assets/gui/btn_monochrome_pressed.png b/src/assets/gui/btn_monochrome_pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..5aa0d6445796358f107bbdf8c843afc5e46e3f3a
GIT binary patch
literal 448
zcmV;x0YCnUP)<h;3K|Lk000e1NJLTq003YB001Be1^@s6?ZACh00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGf6951U69E94oEQKA0aZyvK~!i%?b<P_
zgFp}lV70RoVi2rsJ%hcM@-`kKrKLv@>_mdtSlj8t$&TPA#+VnFE&dO}Oj>7tkag`m
z&#hO|G@VtuQB{@d;EenIZZEa2Yx>U|RYAy_0Da?cx0~wV7osSlT9zf%aU3ZTNPw`X
z1n8UJb)D+qj4%vUx5dvB2{44+_x(qkKhG~;ieN{QB&vI8nnraG{CtrBVNVG-+I-LR
zR0r?GaZJ^5wmZ&AKmrV57ezrUu1{uf^RL${Rd~<$eX9JthGC$J1Q_OU0L$htzh#ox
z{@+6agkb=}FaTi~fG`X|7zQ8=0}zG*2*Ut`J)H$H{)RbC6ID2ePYr?~pvt#Na28~k
z!vwI)<)S+H#NOsJB)|~st%$a5DGB=5d_4(p&fezZR)it!EX$~IU3c>dZ0}wRe1|um
qApwS16QI)*0sq4ruR{VvS=Jxbahh=z2G+s=0000<MNUMnLSTYcytm8%

literal 0
HcmV?d00001

diff --git a/src/components/CropField.vue b/src/components/CropField.vue
index 735994c..9c36a7d 100644
--- a/src/components/CropField.vue
+++ b/src/components/CropField.vue
@@ -38,7 +38,7 @@
                     </div>
 
                     <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>
+                        <button type="button" class="btn btn-pixel" data-bs-dismiss="modal">K, bye</button>
                     </div>
                 </div>
             </div>
diff --git a/src/components/CropShopView.vue b/src/components/CropShopView.vue
index 3960d9a..48f9ebc 100644
--- a/src/components/CropShopView.vue
+++ b/src/components/CropShopView.vue
@@ -2,41 +2,64 @@
     <div class="container container-fluid" id="main-container">
         <div class="float-right shop-tab-wrapper row">
             <div class="col-6">
-                <div v-on:click="active = 'buy'" :class="'btn btn-sm btn-pixel-border ' + (active === 'buy' ? ' active' : '') + ' shop-tab'">Buy</div>
+                <div v-on:click="active = 'buy'" :class="'btn btn-sm btn-pixel' + (active === 'buy' ? '-mono' : '') + ' shop-tab'">Buy</div>
             </div>
             <div class="col-6">
-                <div v-on:click="active = 'sell'" :class="'btn btn-sm btn-pixel-border ' + (active === 'sell' ? ' active' : '') + ' shop-tab'">Sell</div>
+                <div v-on:click="active = 'sell'" :class="'btn btn-sm btn-pixel' + (active === 'sell' ? '-mono' : '') + ' shop-tab'">Sell</div>
             </div>
-
         </div>
-        <div class="pixel-border-static shop-front" style="border-bottom: none;">
-            <div class="row" v-for="item in items" v-bind:key="item">
-                <div class="col-12 item-card">
-                    <div class="float-end">
+        <div v-if="active === 'buy'" class="pixel-border-static shop-front" style="border-bottom: none;">
+            <template v-for="item in items" v-bind:key="item">
+                <div class="item-info row">
+                    <div class="col-9">
                         <img :src="item.icon" class="item-icon" :alt="item.name">
+                        <span>{{ item.name }}</span>
+                        <span class="float-end price-view">{{ item.economy.buy }}$</span>
+                    </div>
+                    <div class="col-3">
+                        <div class="btn-pixel buy-button" v-on:click="selectQuantity(item)">Buy</div>
                     </div>
-                    {{ item.name }}<br/>
-                    Costs {{ item.economy.buy }}$<span v-if="item.cropData">, Sells for {{ item.economy.sell }}$ when harvested</span><br>
-                    <span v-if="item.cropData">
-                    Takes {{ item.cropData.timeToGrow }} minutes to grow
-                </span>
-                </div>
-                <div class="col-4">
-                    <a href="javascript:"
-                       v-on:click="$store.commit('buyItem', {item: item, quantity: 1})"
-                       class="btn btn-sm btn-pixel-border">Buy 1</a>
-                </div>
-                <div class="col-4">
-                    <a href="javascript:"
-                       v-on:click="$store.commit('buyItem', {item: item, quantity: 5})"
-                       class="btn btn-sm btn-pixel-border">Buy 5</a>
                 </div>
-                <div class="col-4">
-                    <a href="javascript:"
-                       v-on:click="$store.commit('buyItem', {item: item, quantity: 20})"
-                       class="btn btn-sm btn-pixel-border">Buy 20</a>
+            </template>
+        </div>
+
+        <div class="modal fade" id="quantityModal" tabindex="-1" aria-labelledby="quantityModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-sm">
+                <div class="modal-content steel-border" v-if="selectedItem">
+                    <div class="modal-header">
+                        Buy {{ selectedItem.name }}
+                        <div class="float-end">
+                            <img src="@/assets/gui/close.png" alt="" data-bs-dismiss="modal">
+                        </div>
+                    </div>
+                    <div class="modal-body">
+                        <div class="row">
+                            <div class="col-12" v-if="selectedItem.cropData">
+                                <small class="text-muted">Seed info</small><br/>
+                                Sells for <span class="number-marker">{{ selectedItem.economy.sell }}$</span> when harvested<br/>
+                                Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow
+                                <hr>
+                            </div>
+                            <div class="col-4">
+                                <input type="number" class="d-inline quantity-input pixel-border-green" v-model="quantity">
+                            </div>
+                            <div class="col-4 text-center">
+                                <div class="btn btn-sm btn-pixel" v-on:click="quantity = getMaxQuantity(selectedItem)">
+                                    MAX
+                                </div>
+                            </div>
+                            <div class="col-4 text-center">
+                                <img src="@/assets/gui/minus.png" alt="minus" class="quantity-button" v-on:click="quantity--">
+                                <img src="@/assets/gui/plus.png" alt="plus" class="quantity-button" v-on:click="quantity++">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <div class="btn-pixel" data-bs-dismiss="modal" v-on:click="$store.commit('buyItem', {item: selectedItem, quantity: quantity})">
+                            Buy for {{ selectedItem.economy.buy * quantity }}$
+                        </div>
+                    </div>
                 </div>
-                <hr>
             </div>
         </div>
     </div>
@@ -46,21 +69,43 @@
 
 import ItemService from "@/services/ItemService";
 import {ItemTypes} from "@/data/ItemTypes";
+import {openModal} from "@/helpers";
 
 export default {
     name: "CropShopView",
     data() {
         return {
-            active: 'buy'
+            active: 'buy',
+            selectedItem: null,
+            quantity: 1
         }
     },
     methods: {
-        getMaxQuantity(seed) {
-            return Math.floor(this.$store.state.player.money / seed.economy.buy).toFixed(0)
+        selectQuantity(item) {
+            this.selectedItem = item;
+            openModal('quantityModal');
+            console.log(item);
+        },
+        getMaxQuantity(item) {
+            return Math.floor(this.$store.state.player.money / item.economy.buy).toFixed(0);
         }
     },
     mounted() {
     },
+    watch: {
+        selectedItem() {
+            this.quantity = 1;
+        },
+        quantity() {
+            if (this.quantity < 1) {
+                this.quantity = 1;
+            }
+
+            if (this.quantity > this.getMaxQuantity(this.selectedItem)) {
+                this.quantity = this.getMaxQuantity(this.selectedItem);
+            }
+        }
+    },
     computed: {
         items() {
             return ItemService.getItemsByType([ItemTypes.Seeds, ItemTypes.AnimalProducts]);
@@ -74,22 +119,18 @@ export default {
     padding: 4.9em 1em;
 }
 
-.item-card {
-    font-size: 0.75em;
-    margin-bottom: 1em;
-}
-
 .item-icon {
+    display: inline-block;
     max-height: 3.5em;
     width: 42px;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(100, 100, 100, 0.2);
     padding: 5px;
     border-radius: 5px;
     border: 1px solid saddlebrown;
-    margin-top: 1em;
+    margin-right: 0.4em;
 }
 
-.btn-pixel-border {
+.btn-pixel {
     margin: 0 0 0.5em;
     font-size: 0.8em;
     white-space: nowrap;
@@ -102,11 +143,6 @@ export default {
     width: 100%;
 }
 
-hr {
-    margin-top: 1em;
-    color: white;
-}
-
 .shop-tab {
     text-align: center;
     padding : 0.1em;
@@ -116,13 +152,43 @@ hr {
 
 .shop-tab:not(.active) {
     display: inline-block;
-    opacity: 0.7;
 }
 
 .shop-front {
     background-color: white;
-    margin-top: 1em;
+    margin-top: 0.5em;
     border-radius: 20px;
 }
 
+.buy-button {
+    width: 100%;
+    text-align: center;
+}
+
+.price-view {
+    padding-top: 0.5em;
+    color: green;
+}
+
+#quantityModal .btn-pixel {
+    text-align: center;
+}
+
+.quantity-input {
+    text-align: right;
+    max-width: 100%;
+    height: 2.7em;
+}
+
+.quantity-button {
+    height: 2.7em;
+    width: auto;
+    margin: 0 0.1em;
+    display: inline-block;
+}
+
+.number-marker {
+    color: green;
+    text-decoration: underline;
+}
 </style>
\ No newline at end of file
diff --git a/src/helpers.js b/src/helpers.js
new file mode 100644
index 0000000..56cc6dc
--- /dev/null
+++ b/src/helpers.js
@@ -0,0 +1,6 @@
+import Modal from "bootstrap/js/src/modal";
+
+export const openModal = (modalName) => {
+    const modal = new Modal(document.getElementById(modalName))
+    modal.toggle();
+}
diff --git a/src/style/_gui-elements.scss b/src/style/_gui-elements.scss
new file mode 100644
index 0000000..5b081e3
--- /dev/null
+++ b/src/style/_gui-elements.scss
@@ -0,0 +1,92 @@
+.grass-border {
+    background-position: 64px 64px;
+
+    border: 16px solid transparent;
+    border-image: url(@/assets/border.png) 10% round;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 10px;
+}
+
+.steel-border {
+    border: 10px solid transparent;
+    border-image: url(@/assets/gui/border_steel.png) 36 repeat;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.pixel-border-static {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_light.png) 36 repeat;
+}
+
+.pixel-border-green {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_green.png) 36 repeat;
+}
+
+.pixel-border-red {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_red.png) 36 repeat;
+}
+
+.pixel-border-blue {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_blue.png) 36 repeat;
+}
+
+.pixel-border-magenta {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_magenta.png) 36 repeat;
+}
+
+.pixel-border {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_light.png) 36 repeat;
+}
+
+.pixel-border:hover {
+    border-image: url(@/assets/gui/border_dark.png) 36 repeat;
+}
+
+.btn-pixel {
+    margin-bottom: 5px;
+    padding: 0 15px;
+
+    background-color: #C9A46A;
+    border: 12px solid transparent;
+    border-radius: 7px;
+    border-image: url('@/assets/gui/btn_light.png') 15 repeat;
+}
+
+.btn-pixel:hover {
+    border-image: url('@/assets/gui/btn_dark.png') 15 repeat;
+}
+
+.btn-pixel:active {
+    border-image: url('@/assets/gui/btn_light_pressed.png') 15 repeat;
+}
+
+.btn-pixel-mono {
+    margin-bottom: 5px;
+    padding: 0 15px;
+
+    border: 12px solid transparent;
+    border-radius: 7px;
+    background-color: #A8A8A8;
+    border-image: url('@/assets/gui/btn_monochrome_light.png') 15 repeat;
+}
+
+.btn-pixel-mono:hover {
+    border-image: url('@/assets/gui/btn_monochrome.png') 15 repeat;
+}
+
+.btn-pixel-mono:active {
+    border-image: url('@/assets/gui/btn_monochrome_pressed.png') 15 repeat;
+}
diff --git a/src/style/app.scss b/src/style/app.scss
index 491bed9..29891db 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -1,5 +1,6 @@
 @import "bootswatch/dist/simplex/bootstrap.min.css";
 @import "izitoast/dist/css/iziToast.min.css";
+@import "gui-elements";
 
 @font-face {
     font-family: Pixellari;
@@ -7,76 +8,9 @@
 }
 
 body {
-    cursor: url("@/assets/cursor/cursor.png");
     font-family: 'Pixellari', sans-serif;
 }
 
-
-.grass-border {
-    background-position: 64px 64px;
-
-    border: 16px solid transparent;
-    border-image: url(@/assets/border.png) 10% round;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: 10px;
-}
-
-.steel-border {
-    border: 10px solid transparent;
-    border-image: url(@/assets/gui/border_steel.png) 36 repeat;
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.pixel-border-static {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_light.png) 36 repeat;
-}
-
-.pixel-border-green {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_green.png) 36 repeat;
-}
-
-.pixel-border-red {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_red.png) 36 repeat;
-}
-
-.pixel-border-blue {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_blue.png) 36 repeat;
-}
-
-.pixel-border {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_light.png) 36 repeat;
-}
-
-.pixel-border:hover {
-    border-image: url(@/assets/gui/border_dark.png) 36 repeat;
-}
-
-.btn-pixel-border {
-    margin-bottom: 5px;
-    padding: 0 15px;
-
-    background-color: #C9A46A;
-    border: 12px solid transparent;
-    border-radius: 7px;
-    border-image: url('@/assets/gui/btn_light.png') 15 repeat;
-}
-
-.btn-pixel-border:hover {
-    border-image: url('@/assets/gui/btn_dark.png') 15 repeat;
-}
-
-.btn-pixel-border:active {
-    border-image: url('@/assets/gui/btn_light_pressed.png') 15 repeat;
-}
+.text-right {
+    text-align: right;
+}
\ No newline at end of file