From c442d3ac1fe0e5f3ccfd8d3b198ec20aa1d5db3a Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 16 Sep 2019 21:20:48 +0200
Subject: [PATCH] refactor: start the new design of the matches

---
 client/src/assets/img/icons/Creep.svg         |   3 +
 client/src/assets/img/icons/Damage.svg        |   4 +
 client/src/assets/img/icons/Gold.svg          |   3 +
 .../assets/img/icons/KillParticipation.svg    |   3 +
 client/src/assets/img/roles/Bot.png           | Bin 0 -> 520 bytes
 client/src/assets/img/roles/Jungle.png        | Bin 0 -> 1623 bytes
 client/src/assets/img/roles/Mid.png           | Bin 0 -> 707 bytes
 client/src/assets/img/roles/Support.png       | Bin 0 -> 1143 bytes
 client/src/assets/img/roles/Top.png           | Bin 0 -> 416 bytes
 client/src/components/Match.vue               | 242 ++++++++++--------
 client/src/data/data.js                       |   2 +-
 client/src/helpers/summoner.js                |  67 +++--
 client/src/store/modules/ddragon.js           |  15 +-
 client/src/store/modules/summoner.js          |   2 +-
 client/src/views/Summoner.vue                 |   4 +-
 client/tailwind.config.js                     |   1 +
 .../DDragonEndpoints/DDragonRuneEndpoint.js   |  17 ++
 server/providers/Jax/src/Jax.js               |   2 +
 18 files changed, 238 insertions(+), 127 deletions(-)
 create mode 100644 client/src/assets/img/icons/Creep.svg
 create mode 100644 client/src/assets/img/icons/Damage.svg
 create mode 100644 client/src/assets/img/icons/Gold.svg
 create mode 100644 client/src/assets/img/icons/KillParticipation.svg
 create mode 100644 client/src/assets/img/roles/Bot.png
 create mode 100644 client/src/assets/img/roles/Jungle.png
 create mode 100644 client/src/assets/img/roles/Mid.png
 create mode 100644 client/src/assets/img/roles/Support.png
 create mode 100644 client/src/assets/img/roles/Top.png
 create mode 100644 server/providers/Jax/src/Endpoints/DDragonEndpoints/DDragonRuneEndpoint.js

diff --git a/client/src/assets/img/icons/Creep.svg b/client/src/assets/img/icons/Creep.svg
new file mode 100644
index 0000000..f355375
--- /dev/null
+++ b/client/src/assets/img/icons/Creep.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.04 1.04912C7.97335 0.971025 7.89055 0.908316 7.79733 0.865316C7.7041 0.822316 7.60266 0.800049 7.5 0.800049C7.39734 0.800049 7.2959 0.822316 7.20267 0.865316C7.10945 0.908316 7.02665 0.971025 6.96 1.04912C5.5 2.79946 2.5 7.60041 2.5 8.42057C2.5 9.24073 5.74 12.9315 7.09 14.0717C7.20224 14.1736 7.34841 14.23 7.5 14.23C7.65159 14.23 7.79776 14.1736 7.91 14.0717C9.26 12.9315 12.5 9.26074 12.5 8.42057C12.5 7.58041 9.5 2.79946 8.04 1.04912ZM7.32 12.1813L4.58 8.53059C4.55791 8.49446 4.54621 8.45292 4.54621 8.41057C4.54621 8.36821 4.55791 8.32668 4.58 8.29054L5.38 6.69023C5.40154 6.66315 5.42891 6.64127 5.46008 6.62624C5.49124 6.6112 5.5254 6.60339 5.56 6.60339C5.5946 6.60339 5.62876 6.6112 5.65992 6.62624C5.69109 6.64127 5.71846 6.66315 5.74 6.69023L7.34 8.26054C7.36057 8.28233 7.38536 8.2997 7.41288 8.31157C7.44039 8.32343 7.47004 8.32956 7.5 8.32956C7.52996 8.32956 7.55961 8.32343 7.58712 8.31157C7.61464 8.2997 7.63943 8.28233 7.66 8.26054L9.28 6.64022C9.30154 6.61314 9.32891 6.59126 9.36008 6.57623C9.39124 6.56119 9.4254 6.55338 9.46 6.55338C9.4946 6.55338 9.52876 6.56119 9.55992 6.57623C9.59109 6.59126 9.61846 6.61314 9.64 6.64022L10.44 8.24054C10.4621 8.27667 10.4738 8.3182 10.4738 8.36056C10.4738 8.40291 10.4621 8.44445 10.44 8.48058L7.68 12.1813C7.6597 12.2102 7.63275 12.2338 7.60142 12.2501C7.57009 12.2663 7.5353 12.2748 7.5 12.2748C7.4647 12.2748 7.42991 12.2663 7.39858 12.2501C7.36725 12.2338 7.3403 12.2102 7.32 12.1813Z" fill="#81E6D9"/>
+</svg>
diff --git a/client/src/assets/img/icons/Damage.svg b/client/src/assets/img/icons/Damage.svg
new file mode 100644
index 0000000..753af64
--- /dev/null
+++ b/client/src/assets/img/icons/Damage.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0714 1.92857V1H12.1429V1.92857L11.2143 2.85714H9.35714V1.92857H8.42857V2.85714H6.57143V1.92857H5.64286V2.85714H3.78571L2.85714 1.92857V1H1.92857V1.92857H1V2.85714H1.92857L2.85714 3.78571V5.64286H1.92857V6.57143H2.85714V7.5H3.78571V6.57143H5.64286L6.57143 5.64286V3.78571H8.42857V5.64286L1 11.2143V14H3.78571L9.35714 6.57143H11.2143V7.5H12.1429V6.57143H13.0714V5.64286H12.1429V3.78571L13.0714 2.85714H14V1.92857H13.0714Z" fill="#E25656"/>
+<path d="M8.02929 9.75643L11.2143 14H14V11.2143L9.75643 8.02929L8.02929 9.75643Z" fill="#E25656"/>
+</svg>
diff --git a/client/src/assets/img/icons/Gold.svg b/client/src/assets/img/icons/Gold.svg
new file mode 100644
index 0000000..558ad14
--- /dev/null
+++ b/client/src/assets/img/icons/Gold.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" fill="#F3A05A"/>
+</svg>
diff --git a/client/src/assets/img/icons/KillParticipation.svg b/client/src/assets/img/icons/KillParticipation.svg
new file mode 100644
index 0000000..bedabc0
--- /dev/null
+++ b/client/src/assets/img/icons/KillParticipation.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 1.5C4.18594 1.5 1.5 3.85078 1.5 6.75C1.5 8.39297 2.36484 9.85781 3.71484 10.8211C3.93984 10.9828 4.07109 11.2453 4.03125 11.5219L3.81094 13.0734C3.77813 13.2984 3.95156 13.5 4.17891 13.5H6V12.1875C6 12.0844 6.08437 12 6.1875 12H6.5625C6.66563 12 6.75 12.0844 6.75 12.1875V13.5H8.25V12.1875C8.25 12.0844 8.33437 12 8.4375 12H8.8125C8.91563 12 9 12.0844 9 12.1875V13.5H10.8211C11.0484 13.5 11.2219 13.2984 11.1891 13.0734L10.9688 11.5219C10.9289 11.2477 11.0578 10.9828 11.2852 10.8211C12.6352 9.85781 13.5 8.39297 13.5 6.75C13.5 3.85078 10.8141 1.5 7.5 1.5ZM5.25 9C4.42266 9 3.75 8.32734 3.75 7.5C3.75 6.67266 4.42266 6 5.25 6C6.07734 6 6.75 6.67266 6.75 7.5C6.75 8.32734 6.07734 9 5.25 9ZM9.75 9C8.92266 9 8.25 8.32734 8.25 7.5C8.25 6.67266 8.92266 6 9.75 6C10.5773 6 11.25 6.67266 11.25 7.5C11.25 8.32734 10.5773 9 9.75 9Z" fill="#B78787"/>
+</svg>
diff --git a/client/src/assets/img/roles/Bot.png b/client/src/assets/img/roles/Bot.png
new file mode 100644
index 0000000000000000000000000000000000000000..93c8c8432c3a85870ffd5190ed8d097b11ffaa15
GIT binary patch
literal 520
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX3?#Wzf)jw0aez;VtKsyi)eo=MJiH2I08!1O
ztCjaIxfl3AxDc}O+0BNhH|n2UuYGi_>cQm`<%Oq!+IdQX{DSwlEuXt(Ix|D?N)J1^
zvdk<72F40c7srr_TW@cl%{#0h!1CaT?u>2RKmN|&)~*$Jxq&O~|EhB`JAYiRnE2p8
zYWXB?g$4#D4iIr7*HP~zr;25!iset!lP7yr)DO>^^JdnQl;37D7nv><<*-dy_V_}(
ziR{)D&Q^VEcwbt2NM0&xiQ>|9zSTF!Q}WVF<;#*BpMR>?7@koqZ#PtVGW)QY(2I8l
ztt`L9oKG|#7WnjHLvzeY_9x2^bA5VZ&}3u1OmV#vpEL&}$N@ew8yFc`1RNNCK2^?#
zxd|x#hqdFV>K)!EtUxKCeA<b2VUF%*#zT)I+6^qHDaQ1La?DN^{Iu_PgMrmF1>NIc
zS8NpsW>d6vSBv#H9@u5%a?p^)ldDhA<NQQRS>_4L78`vxWXQBU6lk0;&pct;;%SH8
zS}=3AH#}xh+0cL7(qjcv=^5um0rHzCXk0z6qLP=?r`fS2nN4WB((@S&C#;Ss7EVs-
sab6<(ctWgYg%c+@=r|Pqi+$qMSa|QU=Fu~UfpNp&>FVdQ&MBb@0Kh!d4gdfE

literal 0
HcmV?d00001

diff --git a/client/src/assets/img/roles/Jungle.png b/client/src/assets/img/roles/Jungle.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa52eeb84fbc91ee205007dd0c33de7182422fce
GIT binary patch
literal 1623
zcmc(fX<JeW0EKY~rE9oRE@8MEnx;T5lu@EV(v5K~s3}oNammW9>$DD{VuGoa!L%r7
zW@U@mq*hbvh@#yZ+)~SWurasM!m>tf8>c@p=Q-!RU(ctL7tCT{faL%JfxrZ94h&tO
z=)a(m3vI{?<1XN6Fc`jxu^;?pWZ?huJp!_PVTnsxC@Tzc{0GN|HK<|Z&l^9y%d7@c
zUbsoNnoB#T=C(D_6E0e>tBA?%3~hP3lNZy*Mj%j;L4p3^mR3_uy#i$d0;Sn{(5in0
z`O}w3UD@GbOTzxo9zPjIe%ChvW=Dv|G&5e2J&oSAIENo)QAYm5>E#_8#X9Cv?N;1&
z|J)wCm$!pEFP*wH<i6^n#_5Ic1azU=H>ZG=d0MwNleYLmaa-*G!s9)EuZCC}cb|E#
zlhK!ylHIpx!?4+fPeW;0XP30wr0v@@52=cIqBpYD6k2LbRvI{C>x{ul<{bORvgj$I
z%A>M=g$1^&O9RI;-x+*i7x_)_1NYbmZUE2nM9v>UxOFTD?0TW4sP;tXKH!715bL$d
z>~{*OriFZHcOdC!EXi~nO7eTH()(hy6NDgm^o#(11+2&UkzVyKIx_!SWn?VXze$^E
zPlIYyM*?<pa5D*Q`FY|)`sO#EjP;4O9~!LXx&}U+aq$o%>K?lg#s&(un<WGGl?D7n
z?q71s%|T-FG{IV@$vA$QepO-sTiuKv^vrPShq&64n#QLQUW0YoGhU660l<xddxD{~
zeEJ=uBdC8MaIWf<4;i4o*+G9|ju|kD3&7UJFJ054f`#=C?CzS*ezm=Xl3aWlyiyes
z3-jyu>H;q61ci$un%rGcxCkQohWOk^qwygpD)tGpH4>jqcJ(I5n%Bo~?rKYfMHcy(
zueW3zMUr~Z#Al4!u5QU+lW)<DodENje{iaNH0be_WZ~$J@mS}%?C+|%sMvg(x*2gy
zigh-Ec5yw^@#P(H^i8Y+X>D2$3hOLJ?DGxr)UPU(b{AUJn8;a?x>v$FH$uI4#|S*9
zu7WwP6B+l}+V$S#S}ao^<^V!3Lt=v8?g8jjhuDkJ#IwsOtI^6QT2?K4tCZD_5b9w{
z3>rIfG(=v1UpakeaVi<tU}NrAF}yx?%jt3K?iJGyBFzW&NUnxC1>ss!xjaeTgMVvS
z>1G*&rfy-GM8_^Y-48bC?GSO4g+(Vg3Ytbr3_;shKIO+eQrd+Yl(2DV2H*@B0N&3E
zF(vK?Ue|yElTdVFw_D|s+t^yz^T1Gzo51rTF}qnn6K9lEiw>A7n{%}9C&Yv2WlqmJ
zSCnv;o2}Y5X)A`jX!Mf=-?ckJIYj?x72vaxSxSmhtE;6Uoh5BoDTtF1E76J0IqES}
zGX7Z?`-1}#e=WnL1ngH&%DOcrZ*EOk_}=R1Eh@fTaV<dO5No~Sx;s04QBJj$zbME?
zMoBfi?ZcBuyb_<9(1!sTIW^$6Pn^W~jF-NUOGgP>o2{?61Buns!gM4$K?whfLQS<B
zB{qxF?S#F0f^pAL^;o0Oi;<h|8mc56zZDlHSUov=zP$Vm+-$T<*MD5HJlhF>*E0@@
zPjD=OJG1q0x{y>}J7Sl{of=ohjLN%Ijy1(umfQ1!gvnJ&+`JRyE#YYnu}C{6uRA(O
zoD3z|(g)7(vAau*LmHmG&hcjWtnucS!CYBRvNWl&I3$=IrErj|M!gA>9A`QCy;W&f
zFuOL8mOJTE%2Alq*vi9@SwF%>xLR9z%sB^}=MFy6EZQh|#`t>SDQS@gd8Ca&8x9A|
z<_~C*_!Rvxvw5Ww>H{db+s)?5DbSw)CCkEWzG7=;8@|ED*>Pq|9`qdDAgT~PkgU8P
zpMTz;ITpEp#2rWpW6o}nGG3b4jxuMDB`x_HRc1T%O#yNawlereiP48!Q(CVsqYj^q
z*m;<#Car30vu2Z;45rw=+ALmagFDql8Z7OYCA?SnEVsEsgnnzejHv`INmN$qX1vbW
r@-cs}&SUn{$zxe{s=n`f_;y35<1^}T?jgm(KO=%Ru>x<<xPpHHiHZU4

literal 0
HcmV?d00001

diff --git a/client/src/assets/img/roles/Mid.png b/client/src/assets/img/roles/Mid.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b62066c9e2f5964ae0d429c0c98624d5aa54fb2
GIT binary patch
literal 707
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX3?#Wzf)jw0R)9~4t9yZu;q<8uPj47an^JN2
zlHv3zKrR>o86bA!vzzr#Z&W|HlH$Rq4ANW@<QL4azhQrUTut~+?!Yg)HY*tzm~1^=
z978H@y}cbc>5zgzOQO)CYhHW)mzJOYnmBy{pY4AYy9?|W)<?1M%(!#{3ffbv=GyE%
zzq0D&PLoG134Ho2#Ydcb`U*}Q+bGApGeY*@gj*Ze9CtA5yKOjO+G7rn>B<6|O85Lo
zU{btp$Iftar|HG-Rstvd@9>$cJQrK?@PXp@?`K6-_P>9;b+NosP9{(78zw``vW6Qn
z9|cbTxWSxMdgh?Oxrfbnu3H{^*rc<~%BN3iQnifs^>%in+pi3)f^7F+?z{S8g5u`2
ze4CZ8a?iV&m~=x{DMfFKb2E!Y&|cAlGTHN;CD#bnY8YqtES48~@}kYfvPyB)V;<*}
z<42rw`Ysi05ZKEv_UHw3>kb)(BhMcwY%Bf0lDSzz_UX*#rX8{ZM|SAfJWNn{Rrl9s
z;{?_M0f8fo4%4I`esG>)_e)XzMftbuPnrWj;b5US=P)~?tlkOMk_v?thZz%Pt)5(}
zvU^scx76u@T?)tDcCMXlHu@n7f_$t(j|3FLGwNTpvRK}E?l499YIyT5+1A1(zh3OR
z9H`-5HRpDgz`FkU6Dm#z?1FyP_uXYx{9Vx_$a%;rsCH)F|Mzd_yNPhT4N%<SJSVcU
zovrcsN*>4O{Ol@61k3nB?4HQ1XqnHvRKcCc#iF09QKOHe;|WJYj;#7=)l!*D1s>aN
z_X?bP*zN#xHRnSaJB}9xjvnpoO;$1j*A_Y_wDT;K)k=ANqTOM_*KMDT)ShPind`83
ho|O><Z1Ud6SSh+ezSdlD0x*3sc)I$ztaD0e0st&VF?av~

literal 0
HcmV?d00001

diff --git a/client/src/assets/img/roles/Support.png b/client/src/assets/img/roles/Support.png
new file mode 100644
index 0000000000000000000000000000000000000000..a55a20b0d85f34415b3dd6142a66e2dd320a6229
GIT binary patch
literal 1143
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oX3?#Wzf)jvLRDe&2t9yY@<FlKzKub=3F9O;k
zTN30K%piGnn)k+M^<TJtsl;pD$(YZw-Pz=vz`nfF1zpiWVun2o49x32T^vIyZoQp-
zdQ!83fUB#ch^f@s!(PY!|34e)qqfL~H7DjqcjOYSnX}&&XXbcJnp1d8G95^Kd=%(&
z>&1eWJ?hSP5=s=(gg&(hUh+Nmqw&H;gUu86un0J*byvJ!|2S=Na?;gzPF329!Z%|*
z($rOM$Da6_x%hD<Yecwyn(TD;mipC)mMmV85VqyuhDjS3SKZuFrKlV8|Lh~FW9O^{
z+BR<F>q$Iwt<k9Gq*XziVZ?G@B^R;l23D^RNV(<8W*lCz=5gkXiN4nyORov?I={7_
z+3RT}BIgy=n`rhzqfNzglGfLNNt(Qy9o>IvX5HMW{d0R?!VF%kT|XZ#)|)f+Po%p+
z&)&X8aW<xR=S~f2J!0_9>fKqbqxsKPr6e>Zt|{HHeFxjUpm5dP*Q=DLp5t9NWoOlK
zU-reTrUiUeoO0vUi&AYvzr9l<UU_U>xb$DlpD8z9?zr;It#)nhnwr49cb`??$v*w}
zkVDUnv~&C~S#NHdTeD?vT=%9!5&2X0-QAO^X{egHZbGm|dhpUk(Hm@3MSk~hc{TOx
zKILQlTSYY0EK477-g{NuSFHMCe)ztvQsFzZonC2NKka>V=hT1y|E}qJ&8qyQWn=KH
z={}cTUM6L1Gy9-Dr!Ok^-XH6zQ0X1_xCPGb$*AMi<dxwPW(2Y$l>AHz6nu`z=IX!J
z2{G=feapm=9#<!4ciF1z{fh4lEynN9X!&QWMt08r(D31z>z~se*Bkd5zT7fb{Pgby
zYnb;pF(3Nxu61AA)4D)bN?_k-p`VQ{TbO?*1bLNj*j!l|RvGm)T~ltxiTR!GmaA>n
zF8<Q{ZpIy>$UbdR?uhgUD^Jw;C7%Aa?xtDr({phKANGEYdv-nZ;kL6bl{M2?ecH5i
zBM!c53X?ID+_a_Ond|F6$`=nToTRvH>2({+2U{DP)sm-93;bMi@}kwdi9N1STB@tL
zqgKzIq}Us?Lr5U~UC$9$Zdbu3a~r|;QYD{#vX?6uu2YNHDAgIJ^7_jQi8aR-PPOt$
zSQydkoUOMvuT&r``9hbupLAkmucLNn>D$v?S2?yQUCoh{Z4Rx7TKV{;n8@l6Tb`X-
zy@owebXM4#f=SG$wM^EkJewM&9oCrXx~tf_geNR9bE%v;`+|tprKZ>a`8-fq<8*12
z{adyrQ>*S4HztWrx_0NoVle~7U)kBNyy>&uikUTX8LkVSU3+MqPl9ut+=)#uPBBM|
zl~x`&t)%bYv+2Ys;pI9>m5ZjPM$Vg&`tY>ycAetNMbn@57@xCv++(csNWAm>`CrfE
SABF?-ID@CFpUXO@geCy~<Thyl

literal 0
HcmV?d00001

diff --git a/client/src/assets/img/roles/Top.png b/client/src/assets/img/roles/Top.png
new file mode 100644
index 0000000000000000000000000000000000000000..3bdc961fa2cb861fc54612e5a1aa839b6f0eba49
GIT binary patch
literal 416
zcmeAS@N?(olHy`uVBq!ia0vp^9U#oY3?$D@*_Q~U<N|y`Tn(pBbuaKSnlY{M*-cFJ
zC}!4Ipi0h?Aiv=K4B=gjvz9Zl>=xXZ!oa|&;pyTSl5y|t&5NAP1|qEwcRM*RTp#IJ
z(D+WlqG_L1lW~XBcHIkMyoR%?i(g#c$z1a%W6FdRyarA!9D+*LPnOP3Wl^wQkRr+8
z!Cs-3*dh3mAwOM?!Gk+O{j+d`NrR|#Ys3V$4{v?4J2oqSm3naY#1<*PGag%8XH2Z^
zki6L*F;U@27mH%L$F==8IT=1O9PzX)`p)n~IH=9WhT&(Mh~oYUn}igdT25#x9TWi4
zKucZz^%m4SsdV~qEMZcRRJ`uN>QLmQH<7C$r8P#;l%bRVGml5Hw!4w@xrt{c1gCHp
zPBL}(ke(+obHdvvmc~ywUT#rjKe33<(&3AuVG>8@gzEMDo!)M>9ZT|O*)RmQED_{)
tFj4e8!YmN#!S#`&rF^kVhk)UEX}0CM=WBhMB!L0R;OXk;vd$@?2>@OipRfP`

literal 0
HcmV?d00001

diff --git a/client/src/components/Match.vue b/client/src/components/Match.vue
index 31ad4f2..bb7822d 100644
--- a/client/src/components/Match.vue
+++ b/client/src/components/Match.vue
@@ -1,69 +1,105 @@
 <template>
-  <li class="match mt-4 bg-white shadow text-sm md:text-base" :class="data.result ? 'win' : 'lose'">
+  <li :class="matchResultClass" class="match mt-4 rounded-lg text-white text-sm md:text-base">
     <div class="match-container">
-      <!-- Responsive  -->
-      <div
-        class="flex justify-between lg:hidden text-sm text-gray-800 px-2 border-gray-300 border-b"
-      >
-        <div class="flex">
-          <div class="gamemode mr-1">{{ data.gamemode }}</div>
-          <span>•</span>
-          <div class="date ml-1">Il y a {{ data.date }}</div>
-        </div>
-        <div>
-          <div class="date">{{ data.time }}</div>
-        </div>
-      </div>
+      <div class="flex flex-wrap px-5 py-3">
+        <div class="first w-1/3 text-left">
+          <div>
+            <div
+              class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
+            >{{ data.champ }}</div>
 
-      <div class="flex-container">
-        <div class="first col w-1/3 lg:w-1/4">
-          <div class="icon-and-sums flex flex-col sm:flex-row">
-            <div class="relative">
-              <img
-                :src="`https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png`"
-                class="champion-icon mb-2px sm:mb-0 sm:mr-2px"
-                alt="example design"
-              />
-              <span class="level absolute bottom-0 left-0 text-white font-bold">{{ data.level }}</span>
+            <div class="flex">
+              <div class="flex flex-col justify-center items-center">
+                <div
+                  class="w-10 h-10 bg-blue-1000"
+                  :style="{background: `url(${require('@/assets/img/roles/Bot.png')}) center/cover`}"
+                ></div>
+                <span class="text-xs text-teal-500 font-extrabold">LVL {{ data.level }}</span>
+              </div>
+              <div
+                class="ml-2 w-16 h-16 crop-champion bg-blue-1000 rounded-lg mb-2px sm:mb-0 sm:mr-2px"
+                :style="{backgroundImage: `url('https://ddragon.leagueoflegends.com/cdn/${$patch}/img/champion/${data.champ}.png')`}"
+              ></div>
+              <div class="ml-2 flex flex-row sm:flex-col sm:justify-around">
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.firstSum}) center/cover`}"
+                ></div>
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.secondSum}) center/cover`}"
+                ></div>
+              </div>
+              <div class="ml-1 flex flex-row sm:flex-col sm:justify-around">
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.primaryRune}) center/cover`}"
+                ></div>
+                <div
+                  class="w-6 h-6 bg-blue-1000 rounded-md"
+                  :style="{background: `url(${data.secondaryRune}) center/cover`}"
+                ></div>
+              </div>
+              <div class="ml-12 flex items-center">
+                <div class="text-3xl font-extrabold text-teal-500">
+                  <span class>{{ data.kills }}</span>
+                  <span class>/</span>
+                  <span class>{{ data.deaths }}</span>
+                  <span class>/</span>
+                  <span class>{{ data.assists }}</span>
+                </div>
+              </div>
             </div>
-            <div class="summonerSpells flex flex-row sm:flex-col">
-              <img class="spell-icon mr-2px sm:mr-0 sm:mb-2px" :src="data.firstSum" alt="Ignite" />
-              <img class="spell-icon" :src="data.secondSum" alt="Ignite" />
+
+            <div
+              class="h-6 flex items-end text-sm text-white font-extrabold leading-none"
+            >{{ data.gamemode }}</div>
+          </div>
+        </div>
+
+        <div class="second w-1/3 py-6 flex items-center">
+          <div class="items flex flex-wrap">
+            <div
+              v-for="(item, index) in data.items"
+              :key="index"
+              :style="{background: item}"
+              class="ml-1 w-8 h-8 rounded-md bg-blue-1000"
+            ></div>
+          </div>
+
+          <div class="ml-12 leading-none">
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/Creep.svg" alt="Minions" />
+              <div class="ml-1 text-teal-300 text-lg font-bold">
+                {{ data.minions }}
+                <span class="font-normal">cs</span>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/Gold.svg" alt="Gold" />
+              <div class="ml-1 gold text-lg font-bold">
+                {{ data.gold }}
+                <span class="font-normal">gold</span>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/Damage.svg" alt="Damage" />
+              <div class="ml-1 damage text-lg font-bold">
+                {{ data.damage }}
+                <span class="font-normal">damage</span>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
+              <div class="ml-1 kp text-lg font-bold">
+                {{ data.kp }}
+                <span class="font-normal">kp</span>
+              </div>
             </div>
           </div>
-          <span class="champion-name hidden sm:block">{{ data.champ }}</span>
         </div>
 
-        <div class="second col hidden lg:block lg:w-1/4">
-          <div class="map">{{ data.map }}</div>
-          <div class="gamemode">{{ data.gamemode }}</div>
-        </div>
-
-        <div class="third col w-1/2 lg:w-1/4 flex-wrap md:flex-no-wrap">
-          <div
-            v-for="(item, index) in data.items"
-            :key="index"
-            :style="{background: item}"
-            class="item"
-          ></div>
-        </div>
-
-        <div
-          class="fourth w-1/6 lg:w-1/4 flex-col items-center justify-center sm:flex-row sm:justify-around"
-        >
-          <div
-            class="score mb-2 sm:mb-0 font-bold"
-          >{{ data.kills }}/{{ data.deaths }}/{{ data.assists }}</div>
-          <div class="gold-farm text-center">
-            <div class="gold flex items-center justify-center mb-2 sm:mb-0">
-              {{ data.gold }}
-              <v-icon name="coins" class="h-3 ml-1 text-blue-800" />
-            </div>
-            <div class="farm flex items-center justify-center">
-              {{ data.minions }}
-              <v-icon name="skull-crossbones" class="h-3 ml-1 text-blue-800" />
-            </div>
-          </div>
+        <div class="third w-1/3 py-6 flex items-center justify-around">
           <div class="duration-date hidden lg:block">
             <div class="duration">{{ data.time }}</div>
             <div class="date">{{ data.date }}</div>
@@ -82,6 +118,16 @@ export default {
     data: {
       type: Object,
       required: true
+    },
+  },
+
+  computed: {
+    matchResultClass() {
+      return {
+        'win': this.data.result === 'Win',
+        'loss': this.data.result === 'Fail',
+        'remake': this.data.result === 'Remake',
+      }
     }
   }
 }
@@ -89,66 +135,52 @@ export default {
 
 
 <style scoped>
-.match {
-  border-bottom: 1px solid #dae1e7;
+.loss {
+  background-image: linear-gradient(
+      89.21deg,
+      rgba(140, 0, 0, 0.38) 0.09%,
+      rgba(44, 82, 130, 0) 68.58%
+    ),
+    linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
 }
 
-.match .flex-container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 16px 8px;
+.win {
+  background-image: linear-gradient(
+      89.45deg,
+      rgba(1, 97, 28, 0.38) -18.36%,
+      rgba(44, 82, 130, 0) 85.07%
+    ),
+    linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
 }
 
-.match.win .match-container {
-  border-left: 10px solid #48bb78;
+.remake {
+  background-image: linear-gradient(
+      89.45deg,
+      rgba(233, 169, 75, 0.38) -1.14%,
+      rgba(44, 82, 130, 0) 58.83%
+    ),
+    linear-gradient(90deg, #2c5282 0%, rgba(44, 82, 130, 0) 101.52%);
 }
 
-.match.lose .match-container {
-  border-left: 10px solid #f56565;
+.crop-champion {
+  background-size: 74px;
+  background-position: center;
 }
 
-/* First col */
-.match .first {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+.items {
+  width: 7rem;
+  height: 4.5rem;
 }
 
-.champion-icon {
-  width: 48px;
-  height: 48px;
-  display: block;
+.gold {
+  color: #f3a05a;
 }
 
-.match .summonerSpells {
-  margin: 0 8px 0 0;
+.damage {
+  color: #e25656;
 }
 
-.spell-icon {
-  width: 23px;
-  height: 23px;
-  display: block;
-}
-
-/* Second col */
-.match .second {
-  text-align: left;
-}
-
-/* Third col */
-.match .third {
-  display: flex;
-}
-
-.third .item {
-  width: 48px;
-  height: 48px;
-  margin: 0 2px 0 0;
-}
-
-/* Fourth col */
-.match .fourth {
-  display: flex;
-  align-items: center;
+.kp {
+  color: #b78787;
 }
 </style>
diff --git a/client/src/data/data.js b/client/src/data/data.js
index aad19f8..8acaa83 100644
--- a/client/src/data/data.js
+++ b/client/src/data/data.js
@@ -1,3 +1,3 @@
 export const maps = { 10: 'The Twisted Treeline', 11: "Summoner's Rift", 12: 'Howling Abyss' }
 
-export const gameModes = { 76: 'URF', 100: 'ARAM', 400: 'Normal (Draft)', 420: 'Ranked (Solo)', 430: 'Normal (Blind)', 440: 'Ranked (Flex)', 460: '3v3 Blind', 470: '3v3 Ranked (Flex)', 800: '3v3 Co-op vs. AI (Intermediate)', 810: '3v3 Co-op vs. AI (Intro)', 820: '3v3 Co-op vs. AI (Beginner)', 830: 'Co-op vs. AI (Intro)', 840: 'Co-op vs. AI (Beginner)', 850: 'Co-op vs. AI (Intermediate)' }
+export const gameModes = { 76: 'URF', 100: 'ARAM', 400: 'DRAFT 5vs5', 420: 'Solo/Duo', 430: 'BLIND 5v5', 440: 'FLEX 5vs5', 460: 'BLIND 3vs3', 470: 'FLEX 3vs3', 800: '3v3 Co-op vs. AI (Intermediate)', 810: '3v3 Co-op vs. AI (Intro)', 820: '3v3 Co-op vs. AI (Beginner)', 830: 'Co-op vs. AI (Intro)', 840: 'Co-op vs. AI (Beginner)', 850: 'Co-op vs. AI (Intermediate)' }
diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js
index f2272dc..46fcae2 100644
--- a/client/src/helpers/summoner.js
+++ b/client/src/helpers/summoner.js
@@ -7,7 +7,7 @@ import summonersJSON from '@/data/summoner.json'
  * @param {Object} RiotData : all data from the Riot API
  * @param {Object} championsInfos : champions data from the Riot API
  */
-export function createSummonerData(RiotData, championsInfos) {
+export function createSummonerData(RiotData, championsInfos, runesInfos) {
   console.log('--- ALL INFOS ---')
   console.log(RiotData)
 
@@ -21,43 +21,71 @@ export function createSummonerData(RiotData, championsInfos) {
     soloQ.rankImgLink = getRankImg(soloQStats)
     soloQ.wins = soloQStats.wins
     soloQ.losses = soloQStats.losses
-    soloQ.winrate =  (soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
-    soloQ.lp =  soloQStats.leaguePoints
+    soloQ.winrate = (soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
+    soloQ.lp = soloQStats.leaguePoints
   }
 
   const matchesInfos = []
   // Loop on all matches
   for (let i = 0; i < matches.length; i++) {
     const currentMatch = matches[i]
-    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
+    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId - 1
 
-    const teamId = currentMatch.participants[participantId - 1].teamId
-    const win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
+    const teamId = currentMatch.participants[participantId].teamId
+    let win = currentMatch.teams.find((t) => t.teamId === teamId).win
+
+    // Match less than 5min
+    if (currentMatch.gameDuration < 300) {
+      win = 'Remake'
+    }
 
     const map = maps[currentMatch.mapId]
     let mode = gameModes[currentMatch.queueId]
     if (!mode)
       mode = 'Undefined gamemode'
-    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
-    const role = currentMatch.participants[participantId - 1].timeline.lane
+    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId].championId)[0]
+    const role = currentMatch.participants[participantId].timeline.lane
     const timeAgo = timeDifference(currentMatch.gameCreation)
     const time = secToTime(currentMatch.gameDuration)
-    const kills = currentMatch.participants[participantId - 1].stats.kills
-    const deaths = currentMatch.participants[participantId - 1].stats.deaths
-    const assists = currentMatch.participants[participantId - 1].stats.assists
-    const level = currentMatch.participants[participantId - 1].stats.champLevel
+    const kills = currentMatch.participants[participantId].stats.kills
+    const deaths = currentMatch.participants[participantId].stats.deaths
+    const assists = currentMatch.participants[participantId].stats.assists
+    const kda = ((kills + assists) / deaths).toFixed(2)
+    const level = currentMatch.participants[participantId].stats.champLevel
+    const damage = (currentMatch.participants[participantId].stats.totalDamageDealtToChampions / 1000).toFixed(1) + 'k'
+
+    const primaryRuneCategory = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkPrimaryStyle)
+    let primaryRune
+    for (const subCat of primaryRuneCategory.slots) {
+      primaryRune = subCat.runes.find(r => r.id === currentMatch.participants[participantId].stats.perk0)
+      if (primaryRune) {
+        break
+      }
+    }
+    primaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${primaryRune.icon}`
+    let secondaryRune = runesInfos.find(r => r.id === currentMatch.participants[participantId].stats.perkSubStyle)
+    secondaryRune = `https://ddragon.leagueoflegends.com/cdn/img/${secondaryRune.icon}`
+
+
+    const totalKills = currentMatch.participants.reduce((prev, current) => {
+      if (current.teamId !== teamId) {
+        return prev
+      }
+      return prev + current.stats.kills
+    }, 0)
+    const kp = ((kills + assists) * 100 / totalKills).toFixed(1) + '%'
 
     const items = []
     for (let i = 0; i < 6; i++) {
       const currentItem = 'item' + i
-      items.push(getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
+      items.push(getItemLink(currentMatch.participants[participantId].stats[currentItem]))
     }
 
-    const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'
-    const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
+    const gold = (currentMatch.participants[participantId].stats.goldEarned / 1000).toFixed(1) + 'k'
+    const minions = currentMatch.participants[participantId].stats.totalMinionsKilled + currentMatch.participants[participantId].stats.neutralMinionsKilled
 
-    const firstSum = currentMatch.participants[participantId - 1].spell1Id
-    const secondSum = currentMatch.participants[participantId - 1].spell2Id
+    const firstSum = currentMatch.participants[participantId].spell1Id
+    const secondSum = currentMatch.participants[participantId].spell2Id
 
     matchesInfos.push({
       result: win,
@@ -65,12 +93,17 @@ export function createSummonerData(RiotData, championsInfos) {
       gamemode: mode,
       champ: champion,
       role: role,
+      primaryRune,
+      secondaryRune,
       date: timeAgo,
       time: time,
       kills: kills,
       deaths: deaths,
       assists: assists,
+      kda,
       level: level,
+      damage,
+      kp,
       items: items,
       gold: gold,
       minions: minions,
diff --git a/client/src/store/modules/ddragon.js b/client/src/store/modules/ddragon.js
index 15f8794..fac4572 100644
--- a/client/src/store/modules/ddragon.js
+++ b/client/src/store/modules/ddragon.js
@@ -3,12 +3,16 @@ import { axios } from '@/plugins/axios'
 export const namespaced = true
 
 export const state = {
-  champions: []
+  champions: [],
+  runes: []
 }
 
 export const mutations = {
   PUSH_CHAMPIONS(state, champions) {
     state.champions = champions
+  },
+  PUSH_RUNES(state, runes) {
+    state.runes = runes
   }
 }
 
@@ -18,7 +22,14 @@ export const actions = {
     const endpoint = 'Champion'
     const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
     commit('PUSH_CHAMPIONS', resp.data.data)
-  }
+  },
+
+  async getRunes({ commit }) {
+    console.log('API CALL FOR RUNES')
+    const endpoint = 'Rune'
+    const resp = await axios(({ url: 'ddragon', data: { endpoint }, method: 'POST' }))
+    commit('PUSH_RUNES', resp.data)
+  },
 }
 
 export const getters = {
diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js
index 4b1982b..f378061 100644
--- a/client/src/store/modules/summoner.js
+++ b/client/src/store/modules/summoner.js
@@ -28,7 +28,7 @@ export const actions = {
     try {
       const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
       if (resp.data) {
-        const infos = createSummonerData(resp.data, rootState.ddragon.champions)
+        const infos = createSummonerData(resp.data, rootState.ddragon.champions, rootState.ddragon.runes)
         commit('SUMMONER_FOUND', infos)
       } else {
         commit('SUMMONER_NOT_FOUND')
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index ea9c5d3..db0a6ce 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -152,12 +152,14 @@ export default {
       if (!this.areChampionsLoaded)
         await this.getChampions()
 
+      await this.getRunes()
+
       this.summonerRequest({ summoner: this.summoner, region: this.region })
     },
     redirect(summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
-    ...mapActions('ddragon', ['getChampions']),
+    ...mapActions('ddragon', ['getChampions', 'getRunes']),
     ...mapActions('summoner', ['summonerRequest'])
   }
 }
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a418018..3d58e42 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -248,6 +248,7 @@ module.exports = {
       none: '0',
       sm: '.125rem',
       default: '.25rem',
+      md: '.375rem',
       lg: '.5rem',
       full: '9999px',
     },
diff --git a/server/providers/Jax/src/Endpoints/DDragonEndpoints/DDragonRuneEndpoint.js b/server/providers/Jax/src/Endpoints/DDragonEndpoints/DDragonRuneEndpoint.js
new file mode 100644
index 0000000..a190ef2
--- /dev/null
+++ b/server/providers/Jax/src/Endpoints/DDragonEndpoints/DDragonRuneEndpoint.js
@@ -0,0 +1,17 @@
+const DDragonRequest = require('../../DDragonRequest')
+
+class DDragonRuneEndpoint {
+  constructor(version) {
+    this.version = version
+  }
+
+  list() {
+    return new DDragonRequest(
+      `runesReforged.json`,
+      'cdn',
+      this.version
+    ).execute()
+  }
+}
+
+module.exports = DDragonRuneEndpoint
diff --git a/server/providers/Jax/src/Jax.js b/server/providers/Jax/src/Jax.js
index 1afb33c..d77313c 100644
--- a/server/providers/Jax/src/Jax.js
+++ b/server/providers/Jax/src/Jax.js
@@ -7,6 +7,7 @@ const SummonerEndpoint = require('./Endpoints/SummonerEndpoint')
 
 const DDragonVersionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonVersionEndpoint')
 const DDragonChampionEndpoint = require('./Endpoints/DDragonEndpoints/DDragonChampionEndpoint')
+const DDragonRuneEndpoint = require('./Endpoints/DDragonEndpoints/DDragonRuneEndpoint')
 
 class Jax {
   constructor(key, env) {
@@ -30,6 +31,7 @@ class Jax {
 
     this.DDragon = {
       Champion: new DDragonChampionEndpoint(this.version),
+      Rune: new DDragonRuneEndpoint(this.version),
       Version: this.version
     }
   }