From 27a9d42faeed77d24b873ba7ce6238b189c50215 Mon Sep 17 00:00:00 2001
From: pisouvigne <pisouvigne>
Date: Sat, 13 Jun 2020 15:29:48 +0200
Subject: [PATCH]

---
 site/test/js/func.js         |   1 +
 site/vue/css/style.css       |   9 +-
 site/vue/img/and_test.png    | Bin 0 -> 1090 bytes
 site/vue/img/idea_white.png  | Bin 0 -> 11264 bytes
 site/vue/img/nand_test.png   | Bin 0 -> 930 bytes
 site/vue/img/nor_test.png    | Bin 0 -> 899 bytes
 site/vue/img/not_test.png    | Bin 0 -> 925 bytes
 site/vue/img/or_test.png     | Bin 0 -> 1012 bytes
 site/vue/index.html          |  21 ++-
 site/vue/js/class.js         |  33 ++++
 site/vue/js/const.js         |  18 +--
 site/vue/js/createElement.js | 298 +++++++++++++++++++++++++++++++++++
 site/vue/js/creator.js       | 204 ++++++++++++++++++++++++
 site/vue/js/easytimer.min.js |   7 +
 site/vue/js/func.js          | 268 ++++++++++++++++++++++++++++++-
 site/vue/js/init.js          |  52 ++++++
 site/vue/js/lang.js          |  12 +-
 site/vue/js/logique.js       | 105 ++++++++++++
 site/vue/js/main.js          |  35 +++-
 site/vue/js/timer.js         |  35 ++++
 20 files changed, 1068 insertions(+), 30 deletions(-)
 create mode 100644 site/vue/img/and_test.png
 create mode 100644 site/vue/img/idea_white.png
 create mode 100644 site/vue/img/nand_test.png
 create mode 100644 site/vue/img/nor_test.png
 create mode 100644 site/vue/img/not_test.png
 create mode 100644 site/vue/img/or_test.png
 create mode 100644 site/vue/js/class.js
 create mode 100644 site/vue/js/createElement.js
 create mode 100644 site/vue/js/creator.js
 create mode 100644 site/vue/js/easytimer.min.js
 create mode 100644 site/vue/js/init.js
 create mode 100644 site/vue/js/logique.js
 create mode 100644 site/vue/js/timer.js

diff --git a/site/test/js/func.js b/site/test/js/func.js
index 24f5659..c9b6f92 100644
--- a/site/test/js/func.js
+++ b/site/test/js/func.js
@@ -24,6 +24,7 @@ function changeLineColor(idLine) {
   line.stroke(colorline);
 }
 function changeLineColorBlack(idLine) {
+  
   let line = stage.findOne("#" + idLine);
   line.stroke(colorLineInnactive);
 }
diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index 0cabb12..16d2996 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -88,12 +88,13 @@ i:hover {
     display: none;
     position: fixed;
     z-index: 1;
-    padding-top: 100px;
+    padding-top: 2%;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
+    
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -103,6 +104,7 @@ i:hover {
     margin: auto;
     padding: 0;
     width: 80%;
+    border-radius: 15px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
@@ -153,4 +155,9 @@ hr{
 }
 .img_france{
     margin-right:50px;
+}
+
+.setting_play{
+    height: 30vh;
+    width: 90%;
 }
\ No newline at end of file
diff --git a/site/vue/img/and_test.png b/site/vue/img/and_test.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5b09bcea88cbd381e8f268f7be714f6514fd68f
GIT binary patch
literal 1090
zcmaKse=yqz0L5eNI;D;tH*TmCRHI+fp&@=9ZMq0brWkECjTT)c+SSz0R*za}(9nvM
z6h-Psg8U>Bv{)1&G$DzJABkb9x@~Hh>9Xwq-R|D|ynA==?^lctN17OYVFUt!Oi;my
zNPUv^zHWFx&kKd{L46pcMIz4_%#H$i`f~Voa9kP)WNiMg4M5dYEBzoF9Ts&C27^UM
zMP=N*`?R8>v7w>0xtZS9#?XsS?`&`9aX7E~`zOZ7XO+sug#{M~1nTN~`QpXGf`a<m
z+IBj<gTdgiSiJ(l=*Wmtsa)1*R#sM=ot<H)Pvdd8Dl(bb(ZOaixoozer{~S^utF|h
zU0n?g2`PN|u$e|<vsgSXm*3qzI4~fUO4Vxh&&$h8OG_u5ol|b!tff*pY<727muP56
zE|+W6YK=y-u&^*UH;0ahC?*hSjg4(BE&Y9cZ>OeID%HG7_0#OEQlSV649v>Rtfo+2
z)YWzKc;c}!g+k%y>-&9LTIG``O$`lP4o5ySGbxeibh<7cZ*6t8i_4WvOn7^H-%d?^
zTv|#YlUbde!y?hNOy&vzm@8Lub8;RQ6qFK)LV;jHES5>7)6>&&v9VV%nB>I7y!-cs
zJw0x2Zk`?<aBuIh(9q{KH9m0oH7vHAL~3U+dWAwP22(;LLZQ$AfB)p9r1P&U9YCN@
zuqZ@OR3>#p`RzBdK#K?J`j`{-hJ1@6W3VBZh&~#J_!{=&2G-|5J`Vc8+OUZK+akVt
zN)mQ_N<6TAtnXLL@Rw&dJxx%biCw(Y_riX`*;hOo6gkn>B$pB`$4<JOwRE$G<o+4b
z)Fv2aZ_pJTgw$!UHfg?n@7*Cn;$kXJAS-DSy0+s@Hg;@ckjb98cBpt$f!+4jHXIP@
z-oC!(SXg%?;2zAAnowF&=8ue&?ILhD_`ag*+~3_FHSI=S7r4OAGZ^5{9TS578%;ng
zfGs+Cp~+G?VC8jdz1WYF6iyNKs7sB?;r(W#5UOo2$p^hjU{9z}gG>i=K$s%lg009J
zs8Ln4=ccRHl7q>txMPXqyI&qBIFUUe6cMF-#pdAf9Vpnr<(}VTnnwwv-qxvXK;s_D
z&$6cG04oiL6ChPBTx)^|PNKau%>i_%EzUHhE8{ChW2}^$S3$eH83e2ydUlCiTU>c+
z{uG+I?{&lipy{e;rsl+0c%L|BaWX$ny3=XH<YI<Cw2<o}41f;k(K~}ad+J6cknqtq
zCi^=A@zZ!xYo1n{-sAfopOz)DCw>fkYKA83@S#J`@LDTvgo9Y8bS&d2k>at4AM+7F
z@c+YoeMYsP;usADprUv2^3AcD?%-_8yjOxQZf(M>gIxevD_h&G8hKwYW_!WPx6)Hm
zg?uLs%Z&E{zw=jZH2KyKZtHI*Nq-pEt?&H3Z&%!!k)6?EwWa?75b9hwqT|ff{C@y0
C*Cty4

literal 0
HcmV?d00001

diff --git a/site/vue/img/idea_white.png b/site/vue/img/idea_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..62532d97e01436d6dc668ab70b08ef78f71a7dbc
GIT binary patch
literal 11264
zcmdVAWmH>F^e%jY1q~Fp07Z(s6Rb#aDgMJf6|_LGVucc<NCkIjfl?$u3$$1uNQ=`V
z0g9DkB@}nN>3`iX_g(A#de^#H$(m>O-m_<)IXN?Pp4o|}#yV8wtmFUyQ0eJvnE?O+
z9ufegMEJtdpWPo{5W(*n-35U9G>S_XVtk#;P1no_0K)D7Ky(}coa05&8vqa_0RVrT
z0YE7m0GRypzuZ^GD+pW-bhH4VDuqW1UnBF={VxCjAU*$npbTLM8(s(w)HBis|0ZT9
zC6n<sNa6<op%Fc;yA~m{+w;M1m?qEEc26R0W(l4hiY1g1^cjoT)bq2B*_2k+_s~+D
z8%6FtPGU7$4tJHw?y)g{q4!2BWxS`@6=Y-~B0#Q{XaJ6Rm*tJSyjG_rLY$}u4}=d~
z$gYQ^t`A9#{``EB13SnG_hosT5bsQX&z0s2$R>U!J5J5*4ou)y;$rP7kKApn=Uf~a
z^H+$G)~_J;s;0-6c1=R;{SXtaUjd|5Y~I%(f{9;#hy-rhG-I0y_XBDg=i5pR82XnA
zKYx1RYfJYK+1#}4PpbX&0ZRcmQi%IL+w#OEA(6rxXch0f9*8=vba$vpJE;gIU-Yky
z?KZeLqVg5}Km4l=F8{yr0~So-D}Q}}o4A~a%gp)zIbg~jB#9GbsUR|CA1pYrAAnfC
zD#hbuJnsJA*gXFve+Xi!Rce(gL<E_8@}^NU<839_l>MmX$HUIO%6~&QzLoHNc;SZ0
zng8FQrp4Z$cR#4>`=8M-a;tAkthjlJ+tuQAB;1pb^PWDHU#4b8LyTTo^+D7Hj(Y@N
z^l%*lyON%6w1sF9gemv`@u9Vy?IdK5!;FDzP^3GqLaf;31YIe81*RWrM>VsqKjV&Z
zC@tQ|tG#nbr<GH6-6Y@Y`3jMJ^f+^BCeF0s4<Pa|5Umdtb3^hsXx2zF{%ETDAiQUX
z>xBq~hq>LAcAKh$BLx}?c<z73uuT;_=!J+H=%)l;H!rYCWJ1foR@gtAy|=YxurUM?
zhxI88+f_J5zy0><!Gne-<NM<1$-sW1V!Wgm>zNxB4XC+*bEsn3^E$&ouNa5tujGA?
zn7bh|6eIF{z!5>*@ao^r&<iTqgve>RAgGdw%ibsWW_V7h9sFRyXziaPRLdg15xAbv
zxYJ;mOuZdgM*YMK%4Tj?EW+Dqqw#)aw&vB;qYtomE1bxZ+syuncrX5m+-6+hF;}Ah
z1R_PPQPCua9^gXa?RpzQb+e(Jznn`(h^7Dhi5@ANM{^MI`a}lb0H9h|WFa&woF5+@
zuW<)n!nr97B(t@f<Gs)_-Lytg-9yEW=5h)W>sFo0-;mf3K~%#B{EF}nWG`ViRVjtG
z&d<!E-#*J#(-u~)q2~&GbS=Y>T}sbo@#xwDx|eAdJyv=4BdA~G9Z+I=VDdaN`vW~!
zqWOVIO4lhqFxq!(MM7Yg6tigFd&6o$seSj}0eW${Q9=btO7DQgg50P_DP4E)C?hwj
z%3-?zAdp%5fZOF;owzg?A2MAI!~Z#*%&Pr{J6}MfvtWKTCyTXcXN!81=m+qRI^iER
z`2*Dzr%E8Fqfyo_#DB0LT8EUqLQ!sX5c4QxQAdtWo#k&Y-$GObtfNmgM(a%pCrL49
zSh09msd!ki{H*+i^%jai82_y&J&@!)kYq}(PmGWvQy?=beLn5v*>nb%1$l7@J<VNT
ztkseCaxYRhoOL55aigZ}bEdqft#$KAg|UoQT9Qy&f-o7&&ysu{LJe)Zmck6H4R%v9
zs6K~2?U{8U>ic!KE$y6UN5{T7BZT<m*ApD_$#J62#&mDk@hIU<Np~|!GfkKCMb{OX
z>;=@DZCA>te}?(1Si)FXcxFkiTE>p)^2JOHa)J)N#L>2M)u(jsO?GF=>=4fMLcTM!
za`JNXGM;>~A2Mf7hWv#LNn7~Iw&=N3!Th`cOYCu6oEv3zM#<2T1O51)UH-H1wrL~7
zun+x%%*hKl4e9K+Yef#nCEZ1CNUt%Hij{gAOmWEEowgTsZZxexfuYsGXv1=ON%z)R
zCKUCWkvY-Hm7)DMa(<!5CeV$^Q<~%c!KmDz=`v@1Y!C|UgV6~4k>c~Amrem%Gt)a;
z>HGc+KF`FCB)2Y+hE3f0)WfuApR}-}^VxEF9h>EVhJ9?#jXM5J$zXiqT<qAQ+Ji&>
zH?x2~d+<%{&vr|MdFfiwqhTrrA2b7whAoKe&Y0?kUZh>LZyC7ttJ<n5(lIMH>d!p(
z_o~4b`8I#ZC1u7{4J)-PbL&R)lMlI394{XK-uLeL4>yJ=jx*n7Z5P~cB2i9U#wG72
zN-0lhy|rw40WEG}NqIQu(7~dR4V^;RE<L@>TOj&@x?(^!h?4-tlv#gwlMFEoFH@=w
zbE+X=A7eH4WR-D>`Ei2ByOfbR4T)j{eyl!SGzezFePy3MdISv+-K9X%S_b}7Mwz@T
zb{(ICOXqb;?X@^}kWZOw#O6gj#4l`Ij-~P+4}F4K*i>e+ba^=(Bs$d9j?R3xB*bD@
z$h31OXm4J}?wr4#WnA_;CKirw>mV}Bqw@zJ^FqUK2}v>y*0WpMB(2({QUO+FpdcG?
zvFI#Nss8w*7E|E$=oIzU7^lMnk7JSA9^}U|rZ`&l%djQm{G5$j)2>PjU6fDb^esx2
zCOR!+KpV(;NqS95nPq?aNoJ&frQTsSaTyU!^MQZ3M)0`oDY*O>)DWXX>Z)|lgtE8e
zR0MLbQ)`6m6maT&8<)yQ``$rg$lfc|F_OsIO>I<hJL0HY;F88%LuC5T7uh8a<PoKo
z**i+>oN~c>-%r_bb#CJOp$N1fa~g{ze@v7c(Z#c*maXTBl5$9o5TK$0SJ9x_LKLNG
z<h5>}<}X-is^u=s@9b|l?99N?BPhsj)TvEu+!b4Y^mG9eiKC-`XiFS<%V4#xkB2!$
z4)-JAJ0pDAxBltAMT+nYKmYfZ2)9tyYo?C)TAaD`R_vCfbo}?zc1JROB?soS!+F^d
zW*zu>|E%UNR~3&~2Fsy!5%=7KlvbYFHOo`Sf%4(~NjiD$ODlKLjviIPmp6Zst$Ave
z0wm<%(0ME7Sb1*IvZA#|L9X9WWy6o@WIq}8D}Jt-<zFefl{ujm=w6im)$&#()d^_i
zZeoOnB#c8`CtC!JGSNw@CjOgHEj8NP`?>wVcPslVM^5HaBkuLf(nm-&9gCC?5>3vF
zpEH(4p3>{hc%xbH8ty*~<3o{0r;7d)D&~)$LWOw*x=8H%RT%_xU2ci~I(pj0-;H}#
z1QXeux<t@jXuZ{qFB5vE-wISTn(#8juWXa*A2b<8N${~eA+pjL^Nx^M-J<7z&+f*<
ztPyDPH|p+7dIc6X4eLp2Ki&%&vkJ9Ba)(-KhP7b&+h?vDk~>Gt$R^wm-S-A4Irq(L
zJwf$f0g)SbYdM!Cj`iNoa<$Pm#6^7ogA)6hH05u|usIR5@2$JB>Fw1{e}am&b`H~v
zE^E6LapqrN5Z-60s*V~`1%1mKMYajI$2(vv(gh3lrcGC`9FEC!3)wlJRHcPe9GCdg
z>z^7|>eSXXnyByp(ygYxe@p(C>oJ-8l)ufI!(S>}C(}|1B4G`gn={rL#sT%V9fxCC
zg<NQdy94JC#rUPuU3t8*Bfs*x!}VZ24EFR}1Ei$G?B=!VX`+_m-~A4fn|r~C(^r<F
znl(Gpj+}3`9#o%XcTJmiK~&ohyR=pYc7^Si&YFW-2&hpe#blZi<UEq3^QJLJmBc7k
zw)@Y8EL;>BT_J1EVpffq%QqCe(dz`2)XU0<-B&8|A&VE&E4+wZBP>HyU|U`-n*QhW
zL4O<lsoRH~NPk&a;J4hBwy0Rg<d?XmJZ15s97?%mho312^=yjgua$LNr+$$lx(qTY
zd!CH0brOIZV|}}CmsoH9_l!)TNTIYVSS+4z10(kIThejJXk(~Ip9H?EjX3Swc{iCg
z5OEig_j=GjitZu$N!FH`^n#co<-FeRH#dKt251f6bW)R;`^mbTHI%7v67@BTN4v-D
z40iHiUqi!Q4`@b=V^6J;b^KqgUxYgGhj&2OhdW4LAu#v1EI(zw`*J`H@VGv_wrdJ)
zksLSixff0~;usT&8{~R8H6Bo(WT}u24QsrXpCY2+Lf`wDx70nq9vZ=VSgktxs!s)H
zxi{^s0P_Q{xS0ST{G$K9Ctl5Ai(z>h%cSxBk82&dWilN$1{Nytk_Z(VP7daMVyvoH
z!+Oym{`~E@kE8St`6Ug+QtDr02@uf(^a@!Uz38%k8rJhcV6@i<cHa=oL$;Y1SS#N+
zzI%1izW$C=Jy;zBtFN0ArCy$IsO8?pj0;<SW(WZ(jk98H(iwkuVYXXpl`5gQH{V^&
zcGZ^=cg&Mb1IZOX)ZfU7uB|o6Plfip-62?|<E!fx5E{>bwu}>*5s;c9_Z~2<<P>b*
z`ay*oy!~*GD(z3BT<l;NHB~!GFMB)I2B|mil3JnE<;%$1d%Szv&<27xV2<~163DpJ
zp?$qmdt&{`Yax!`;}p!+?)wuwErK?k%q-{`fk2L3=<Jaie#YFgZv!SRv}{Ec{dzgq
z`G>!<Nr*rD2>a_B!sWUz6B?PJ*sNIL8A<z1^BA?VvOV9-Wuj^qFh}=X3)|KhnTjrS
zNlt-nHH7T$@0)$)H!He7oIdK1jo#P4&6jjdDFc~iyWvJN?efBKx`BPQ8>xr~NUH}i
zwHwdy*a2n0J(z9OqiA#MtkX7Cu+KW>6LUN@or05I$-Hvp)#%NaM!v&dU3;X{%C=1>
zd-n6Yl3JY~&SL-e&k&1=93R0K)rApbiI39U{G}at^La`>dkaDmZ?7c}`MbMGWNG07
z){+_|R|Bql;QaZiU=5Lp8Eg}%qMv5FtWThv>Ds{tl%dRcC3ODm$EpHZ=U#qBbA63!
z{HNF9xl!xP7%^MDS>^!C2+I>PK%Ff=2F_y$qG}P_XYO=;v8<UwDUg|&?On}1$vgm2
zvOLDb-s)gUIB&g_I!NjsKhfmvt(CJL_eE(Mmqeb{ud`q6RYcF%j|X0UPP{x7d_M+B
zPMJIq4Z2|)XIN2&Z!RK|!)jHxD5<R*lFeT28@WwBK$qas&1=N}o;bFJZ<(bwu`Q5u
zW~X-2c+U_E>Q$o6+$Jv>V81C90CA)-=;+psKuFczsjX%UO|7I=^5jM@M3HX5ukhqm
zm0c6ntx*<<@xa3Y!{J?CN84O@dTSE&Nqk^`>}_*&gYL97yX$4PVqT+iLKkr#`B|;w
z4ND4ShB}*N^Vdq#x3P)_3X@-!-IQ)Ym+bf+|HO1Y*9VQ>%MNU11B0QxV#<j>9=KUP
zeF^oum*J;bc?Rxea}imThn@){#`W?Yr7Yv)d#pYWmX+<+2NOI<@VmV;Qa(;Wb^c4b
zGrqLTg6ifgL}7)*IX9TxCK2?q*Z;%jS2Yi&yq;C2@+4EF3Kj%+3|C$)AaG2@8KFmP
zJQV&4)v#xqKws3wa=3%@DOOwhVZ=}Q8w7mhpeKVkjn@kH9#uqnha${5TPk$w4(`$<
zK~hw<Vb2|$X^|&}89S1Qmd{UO;pC@W4Lb+kTem6Qn6kCD1>7cK2~fWg`}G`xNSg6I
za86_<`>2>$;;gvQqz^ajC;K_)Xn*t-x6-v+d|9nJ8^T}j%`7Xt0TvJS6Pr=}Hq+3~
zF<u8k=B0+QwxW3T;W=X0f%vY1>a59IxJ%1SWZ44<S}S?=O>%{Pdf@y5J`i93dI?mG
zDZVOm@={m}`v_;s)Ottph%zgZZ?>Lrq#okv1YY3yRzH{5L8ORuu%Km_V*<{cE|VWK
zr4iqI#B(n6V_)c$3~^V_LgcljcefAT=}t)6%V$wZzrXTO>Qvw3$Lr|7<lU)$nhEu}
zZByYvH5MJgqu|5h$&wm+yEU7ays4La)D3Az%6HHWy&v>Vw1{u(@tA!`x8Jwv&3Rvq
z^AJOJIpt?75D7{$Cv()N;(+&}Q*2e(x|wChuMgLVcC&O-FTN}%oO6jBcm-h6+>v$y
zbT7z?LE+kd7K57TG^{qS%RId0=Ygp!Uga=s@bM?K>wd5_`%VPnmYz*AW!41*fqEWL
zA_?+RZzfGWZ(2@hMI{S3hIX!OKeU}(_eZomKX}~sXtq;SEN!VWjrCYXaeO~L!NKM0
z(cni3`mXCf5AAhr3AtSWv&Z4Wlpg02Ivl75!#+FD*ppm}8`BYCxg+8<B*w949nTk^
zbQFqcA)e%%EGMGrRi9sENo^KxjqaH?#dtVYOfEm{%cE7N`hrybMI684fEFuMSiRs|
z8jp`~>bZvx<cP3Z9yd=8k5m1nMKp53aZli7&u<ur-3NOTia-$`Oa7JK=2QiVNM3gP
zzSn*wlo6l0po(**s1bieHT{V0JWjRrLg+r#E#)U~tqQ{d2TD$V5lk!2kHR}<bG?by
zm^z{-N@?f6%yq$E2l)U*E9am?oVk#U57Ja8ff=3IDg@Hk7hDSI(4hE;Ba-NC(KZ+C
zg+w4_Xxog<-?kmN0N<+wW&UVFs*8>xh?QTR%i{hRVGv>4TAOcbI1nl~eI`3P`<1bj
zF{(*19D}C-GY{(j99*R6M&g4RUkqK8uTO;5Iu|_rUPq_N>6?2{D7xQj^B|Hg+T#!D
z$w+a}rVFN{)mi;(*?)cK>&K$%k#uNhOo#bQ7df!RV!?6@xp=-{Umdg%?5iKj%hgGS
zZb<Lh!Z{NIrbvFOaHJ6c@>JT%n*-g|2hc)8ZeZb}kXh7DNlDt;HBB*5y5iq7;O_}2
zaZb82U?G@UDNZ>zoPhbkX{Ctyel9RTr5Mf#vpGw%j2Az&jf<4JL5Gf#A97{r4&k*V
z%$b3v1iG)k#YbSS738N;JL($${Z9-99H8&+NiK^h6=1NHlP}t^eu%i5Lp}GB@Mz>B
z-U#@Bnhjmd?;x=tz{cq#Pz@PD*~@J^>0>$pQKYD!W>UO$Wax<Qgx+{qD(^CMU8VK;
zH57eyyIA<WjBDmJ(NbX@Q@v(}cMCrd=hzI7IVjWza=y=nj-KI6J=ijdB)ERp|5Q^M
zc}O6zxOM~STi!_Ysjq%%p5|fmLNG)$#<)40z^@amE2S!fgW+wh6n1j72#T9JjayiR
z4G$VGd@Nf851)z+|F_OQEbp4CRc%|`clIZRBD7i@#`*rvTH~GOPEErP8}W;bzm}LO
z8i`r+d06NUo-?%0j98D#6`UR$%TCM`xGKBZUd&xWmK563cSqUV_qbD2ww-)^PoIQa
zmadD6{fx@qrrp=gT<$M$gE_fg2!pT;)MY`XNO1I2h{7SAy_<*{q(<*@=$)cL!3kv^
zV8wduP4{EQY|e=cebbvgm;0Sq?Zu{36EAS$+r=yR_uvRWxRdb_^Ez2rQ@oKTcedO7
zbPiTJGs;>e+AClu8+k=jIfe374u1ILLfA!S&n}wwUhn>n5XgN_Xk7&(ryohc)!a#Y
z?>mH=tDGrDADCIYer<>K`MlcS9<l&RpL0r79uO=nv-9+QSX|hNO9*eI47WxUMG4df
z1HX^0HRK-wdqa)gJ6JvDZ+w6OHCJJ-hEEi(9@zUCb(Uq>?RVqh>GqXpHLzR_PQ{1u
zt@Te>-^k=pw^#d{(CIM}9$%xDdFXrgZ4CPPDr5JSY;;I!Er)uOWp_~hG3u!Q$<Yc6
zmAX$9pJ6G<uD!@j)vDQhaJuSX!SptTU6hFL@rvHRFuGTIPL`-n14M3W9SJ<=-HgMZ
z*Qs4{0C=AgbZOrSLWpjXRu@0nSN#;b%zvmBbgr-V^s1g081(LSAfH`Sx8PHv_aAIh
zZt7BxpuC^2E*$xAfG=^PD1uV9w_*0JHr~d+()e<BQZkaz(j`Ij0Q7dUfNY`&Ln-T_
z?gh_%cHFGCb|>sKgr5jB1=D%rUG1;SoK-5eb}l_&3UBQXDHnVY1@$-AaCj;7lz(c*
z5@1d`2$$61cA@Nz+kU0~=4f4NJ?uNppmM~G_M@nxYuYOIqTc0==e2kyTX5<MZq{v7
z&&UU~C0;>K+Q3=;94T?*Wc|*Zf&Ipk6Ggr&R{bg;XtNn*)V9<9vaCP-8V(kIx>B&E
zXUvrDmPVYAe337uSg_-e-{KT;!kQtd4@AtAkiWcmU~#fXmQzYJrnZ&^d*!K8aAHBt
zWv+@?Xk@>_PdR!yE=rJpkMoQAfz5%P@6`+O)Lox32)EbxhqB`%o|o|7_Q3{2VAzn~
zvY;W^%PGZlXmvWy6MM3Vb6$BlO=JqUIkr=YE@gGcPJgc$N^iRZ4B7z(I;Q(QDj<<w
zTLfzFt1p4yC{|NO*!1pa>fPZ@!f09m_}J%&bADc&viwCD<es|vYP%m|MXKt?`~*|*
zMf%>E5wOE@Jf8)vrfErKBAy`pTAUNF&2#Jl7AC?^2L;e-tWglhpU+=*g?s47*+!1a
z?sNv|tT%&!_0Ov@1&5;Q%OATX)+6A3GJGNA0w6C0Gt5R0s~X>WK8KIHj0iRJ66eh4
z($9PxkqoUqeUN4}ViMXo)1}{i?UQ{kfCy%@cOZ_@{)>-_)*@9l{w#W>5R)q~ng*aP
zFdfLo*bJfwMri&?L5eKSZ{_t4k;DwDZh?UQ8-Ag?`38|QJ~IZyS&l6U1ZWKiP!rsG
zIlb}Cz&T^FfKv9<uf`$Pbj7p3AS?%gG5(Us6lZp+(3h8~gus3gATlq{7hTHifjuEc
zplJI{HLdG79I(s!1h%g4O04XAAlBUinEv?W2r-zw9y&3e_2q@UW@r=<>29fuuL==;
zmjI^Y-~h&;d;f)``^97~RN_S6#=Y{^NdqPWrBpWJ*QHaB$;gKKh5-sW(Av0@XUosj
z1|U|h$KjgZHpy~0Kfbmt%B;3Nlxv&2iB7frM7&x9CdFyNiGTpT5+7l=Y=~%~Eo;1w
zUpUF|C}lIg`bG$5lQ^zMC3|=A`R~3HBk{;%ccic+%L@`sm5@TH4{g#esdG3fFapO*
zKM%=V95~^xC{TnNWN`FXK1<0tV-r-&1Y6>zF9QS0?$~Cw5l_5j3n`Q;+@!}9fu=23
zsFZiVVK*Uku;Ck$YbX0&cUMt*Jn$^d87X{=&HKyshkqQX))u=t@fcG~sPs(WRa6(m
zy3{IWvfNso5DPMhgGk8U0N_T#%#C^9DuU)lOa|#yZ{Ri@KN<?`u2n=^<FD}^+*>vY
zi-BppSxDQXDw1FnCL_Tn6GVZ!TLi36W*IWL@SLLvGfCMWJ-zPCgQ9xgu^$*(x+ue(
z6VV6dj~AkE<D&UgZyw_a@rM8+x1ru`Hzw|25&u74xisA9(HW3|0AJffLx8_tGc)9>
z+XDKi9t?9PTb6P=xUqJ**H1s?>?LKH2*-kwn+xhEvVmG>q{v?Qkd2_~D8xoNMc#3<
zx10>aTNcl90W?w>=;?=1-mQ@Y*$+ehd$pHP@A@<riV6uC3CUQ0%$;4z?3D}ULbD!v
zB1P^w$;sUSS&f>Rzm?sq**oE2kvr}6-67A{AN<$CJv0B&*(Ms#Mrkq<ZY3`OSt!j+
z_p1S$yP2ghn7e;q;pa2!Ki5t&g!jFxc{|;ZBF15*1Np#+3t05qMa<{i7p_PV$hB8T
zt$5xPMS6ZE+Wx>zT^=#^{e|%Ga1<TH6)ei$l&C>S@7j(voLjtfW?FJYjCCKBe*UuY
zxc=}_+J9?XpEcUQaL-Mj>X}B{vJXIPSzWHa@Tf;W#@?mK@(%Hf1`cH4_CgNJ<Clv%
z1_*5TB=O+z<eFZ)tZ~6I_CZG~6`osa+AY}fUmxok-~7%-p<G+K7ETMGSJtY`E8drx
zy;Ug>mATOmbOwuUj!|*ueHdlM4MOYyfG^D?3eR<fAeLTnG%*m$`BIFhL7RY<;gwn9
zmSkwt+rcu9j1BJ~?oF|yN7n&?tG|DI2~#E^3SnKvp((ay4p4uG=Wp=5h{1XOYLNJ6
z9W}D=Pe+uu7T1h~Rlh-0mMjY*yCJQ`5R6jYmaOILwt>`7U3QL^e-MZzVj1?wZMBp7
zxB-a6_s1ysr*jZ&_t{Lp+xN6#lbbSZiNTkGP0M<MpF@x~bx4oY=!dr*xiVYu!i+5#
zzVlzq)kkd_b&uB69y&g5`x_B8{{5Bz#k2n6qG3A*gbP@FMq=!MOd8D@n3g!nT(@{d
zNL1N%AGgE@OVvt&Yv;ukV7u0*Ci^U*%?tQFuVcfimrRJ&r_GH)h$_<7IX`%XdRGNc
z!l^WeSU2nAkMC6BN-nMmYc~lUQ}nG;ms70+HN7mj-2iu*1?ut3iqdBh1h0&0cAo`*
zdW;SkmS;-Dpk%ZT>a?iw+#w<egQLmVQ8ZG7&OR?BjFj^=K!Goac;`sm^b*JwtUrvz
zna0~`zKMul#WV5buOcwYYgE@eRw)Nq{`C7bd#$F!Q4A30qG!J`*ETGr+;U5;VHDm|
zEUz_XZ$8<gwMzp~>jGV(b3`9KiZsdt`(Y&m;jx~VSr4Gkk4mb3yVvmlu9o+V7utH1
z|5cUvTM?bIRpESCIA{AzMLOBlo=fEu$2wUyUXF@5Lr|k+bOibPX5qCsp%sR(<E&Hm
z=aVH>>)e!XMH*E{eL5ur!IH-=_)zBVE;NpNEvWXv@kFVu!>(gx!xatTOa<3jGymH2
zs&WI#IJ_f^7;BA;t-yA-m+puC)uxs~F`nh~#*dYmstld9bdCje{R8_xlvHim8<`vl
zy4-UlA@wWrbbaN%O~0QiYfkvQX@8i8??2=R?6SeF3}kNE9rPA!#dYHN?ecTmRQxgT
zyB4vdLYRblG+C}TGrFVD;3+ZbZtcPa#q|A>NXAQ5*wZhyw<FC%>9=Q=lW|F#x6RPc
zal7yJLuMO)viddl+2|{M>|a?REB-QO9)H?#IhPPHQ<8jXP1YP*5v?ESi8Of<w=TsQ
zP|pbqeCZuAAI=xk$++*~94vAuR1-X&4E^#o^~GKxdVdZ#Mt1$%(#-rH6{qXgv2@nx
z9I;GNU$|vyJi6K5`F8Goq2Q9{M>k|)v7_T)ow3$q#1i+g;<o_MRx37!e?u~D{|x!}
z`W01K+k%h$5)opFOmTE;#_5BYfv5e(Q8N0OhQ+?|Db`*}TJ~L)`{1Nw8VEm~8>2^u
z-ZikdHpVj6f5Gs8CRQVjTdz!gMP9SAk3ejDYKaT?bwPE%&&!IXE;07pOsH7Ky&s^R
zu(#34GcNrbPXiv(Z#LihRsiClNERE|W&+g=2V8f)ce>`AGd|AVUbDj$yFDqWXP<JW
zMttRVi5SfXtXB8KParmrM3B-mx0B<h3B+^F)j6UdZQpE2=&&HByOHY_@6me-Km=&0
zKQDxlEukLwEciv^)U-1VBP~y=BitfaHNZB>#pYg85IjF_w3z7;id1}sZ{p=I8WV>-
zI<M1-d3VCU#gPVx82s*u2XXrz4%T;Y!!0=Cusi3i`r9$acm4R2msmkU2CUjlxN>pU
z4%zuXyv4oB?$gT~BEgYlR+g`_Oc#yGra$e+d$K%_PRT`U3sc^{>uYAiYO|C)HiSDG
zogbcD81;PQz>`(?bA$hrj`jQFFD2Ua;RTs9*=$3yG`DC<=S@@=?W*>$mSyrd?%A7i
zhZPBux};;VVq!=6a{ReCG3(0!L%0gE!S%Z-a`WdK0<)UWtv8w5{U1q@Y+y1IPo{@j
zck)Kg2j4Ik1tu8@a(%M@d!5%D)Kh!J`62?paJr_T9m_wSh`*t8W&h1yWTr0kc>#Y0
zUorNJJ>ii#!P1dcX+Xv1i_zkqQ(4V8eb9Ti$JZdA+kIh3!SAa%oRsD+=SOa=n?Gdi
zMhykIEUSmr&{sVV!dWUPuasLuG{2w&o1D0{A70tm33AEe@Y;xpgdM5gb2bDBDKqX@
zoAG8n3JB@4N8&^8syG9;<gf-r{TKiVOJC894a=zQ%YIadTECzChG63opL8(#a^*Ur
zyp(F?iFwt^@P%)|d*=hIw8j}?dv`aLJhcNjdiY-UuPeURVoj8?-Az98daa|ZUOT|O
z*czqOH`DHx5DbFZ__iB0-uBPBjO=cdd(Wi49DYJ=`g{bp<g&#IKM5#KrdmI}qd0YY
zK^XRdDP7@aZIqqz<EH{6PNEbK<kn_dd_dbPs8?fb%mjrl+0EKwbX`O24YfhmfgS?o
zXv=H`EW{P!{6Ig~3JCBPL!WNvs_nqbw+p-zo{HL{Fh|azlV=1ltjP;=ajyCO@0T%%
zIYZm2!zOu{J#{ndNZJj6dTyqkv|4dSh+d@JbLxRiVdycFo5K)<us%pIqi)SN?~ZUd
zh5IL&L%;I+*!g%fb@J7kGs0H35f}WnuyHxQ(EyXhQdCZ#E_L?!8laS3wfqtP?X=<0
z*VrB0N{DyzYIKcS*-L?LMEUde&wkj1=^EfwXr`|J`_mcWH0uZ-lvCpK1^R5r5ssV{
zco$9o)%O4lk<2%0>LBs*W+u5bN1%*M$+-pt4!}Z`u^y3qkSTXxOombs)a&&df`t9~
zOHlFmvlrJRkjdYMm{0l_ru^@KSC{fpOAprr!jRCaZ$=~QmdTko=e&3H>ZWmPzBxQ0
zk}wOp6Tv3Wdd;9x`gD}5Ow^!-#gRaLtZc})vo@P8z)p~ucVnMsSk2CNP}Gf}6|c!&
zeQLFNLGIT-uuHc?Z<_a+)Bk;{>@aWM>KZk>heGSePLa7;*7e2#v#8-tCKL$<+XdGK
ziwGJXfRCl}7w_Vn3qHx`PyUB<rs_T<SQwe$VIL2sn7E8ljhANcf=tc$#5XD>L96w$
z=_TT!m#J^P6ZFWk!mb>mw<HRoZOBKMj{Y(xn7s}m<%O6F_%ZF0t;I@MU1vK1bv?$U
zGnOLo1RRZ6IC<UX^)Q#bC&gFXneI!Y=Az?lp~3OqX<qfh708a7tLPCHlug{ic(cA2
z{7$BW)X<IqHA?mGBD`F|>di0l2_I~2f9%P_VGj*}sf)W!d7bX{VBqwazzn-+U`Jr%
zK5I9ucF`~gZa5+E`qY{(k}TtSGPyW~6<@~MHT|bbWsAhWXEZL&Ysg0NMSC?~a_<Vj
zuwDukro&ETTo*sXKvW8G&<ApFc5P#FJ89LAKOYf9jzXki_{1TXe*#sRX^QNaR2)s?
z@8~;b>at=kNG3r9p}X%He*2Ki-mRJsb)Le#VB4F5Bn3)A+>wlu|D%;;@AP)(-Fkai
z``5k?Qmi*$&vafYj6a(1RW`(Q&fL}(GciKze0f}a<#pVxeyBceGV&P8xWd!+df`KU
z-LKKo39FR2N)oeo+Xm{l^wMdgbz=lU3G~_jUyv}?5+xl>0<(a_>GuuLhGx|2Z_#f6
zEpkJ${|g}6$iR*CB`sk0>7dXXTcUq0077~DEi{V4EWUB_0Zm6E;X)wY-){iy&v1YN
zXUZ3ahj`L#CIwpcJB=2YV_#PR;|aOT`vlGxUqeUdXG)YFueZVR`BSCl1kQOYZR^f~
zp5U!Y<U!$wnG(hVd=syA6+35Mn2io0K8I}(@@WI_a-sXqdPEu=ytQGou7ZD|U~tKc
zNBi65Bo+~z_^TEHC-t$SN=Lxy^>Q1WAAdilx>DjJ;0>`1F0g68{%Q?zM9Z)O8CCp&
zVlK3n)DAwunmcsxU>MRuriuFQC$?oCA;wL1)><-7bSjK+1^-NVZHS-Lf8e6Ezb^@w
zd(sut!b^x@8{W8B9ixJOIalsrQ4btIq;5SVpLXmNrxyYqq>4@abwB1WmWoG3)uQ&U
zFGiR2C3`qJWM>F-EYUiqtwvbh8-f6cg6j!s_@Y0CFpV~9>S8Ifhah)(RUmSm8iU6O
z-c~fRDK(dhV=obclq`%=yk3(=y_4Xrp4!krPxJM1O}_+2;z8p5*+?U?2HDDfe;gO>
z9+jaxlIxW!p7>JB>+e)~7YPsBFnend)fQ`v<8qY+U%2tXNM|&}K|ee=Iueu+G?KO{
z;+1E~GOHS4{3^9IeG=B`y#Lg2)<@FP7e(5#Bk0AMy9w@H*7b>zov8>ryL2Z7EpGqY
zk2X@|zSPhbxiD4gHnAt@hhb7Y!=<E!Srgvs$}4O8wz)KaYPqK-mwc*3e6W$CFx1|u
z)(U7h)bRN93Wb?B`HrrTBE}PcV@6tT9c&uS27Tz`d34D=F0>qSNs_!d-1^>IrLZp}
zY&8oSrt(_WgE@&uf<D|CP%2T0@VsKJ?qwC}78&ZXJFQ^69Lc<)E|R&}YB-oJz$d%%
z1!~&_y1N8=D7iiHz!!j&gp`D+gsiBPf`x>Fl7ym?tdy{Xgpz~=&XiE-|7hUt>;BL)
z^#8v>0aa@zz5&a>9?X3`1A|?jcmTn{!D0`69tXI&_<4x=K7r@`Rc6H-0eafTTD2O^
G&;A#6w;uce

literal 0
HcmV?d00001

diff --git a/site/vue/img/nand_test.png b/site/vue/img/nand_test.png
new file mode 100644
index 0000000000000000000000000000000000000000..89153d9a1355302027c69cbc400683a83542ce97
GIT binary patch
literal 930
zcmeAS@N?(olHy`uVBq!ia0vp^(||aIgBeH$w^|+oQjEnx?oNz1PwLbIIh+L^k;M!Q
z+`=Ht$S`Y;1W-YFfKQ04hK{$LYe_`XlHAHOH66EG`tP<+y4NxJUdNRCJ<}gdo&RXb
znrGYhy*_#F!^Nwg<drOy)a;$T>ymP}mo?w&oN~Ww>itP`9?oC!bkojPC(eGje(TGv
zyI*A$%rtbo0wSm7*IekE@nFL2hm+?%oU`=Fx@|9yo_>G*_Ln>Nzna^oH}>3_IQ!wO
z#gA8Pc)tJWyDK+7-?;PT^7YTMispXdlS>+J&RFz#_2w5xPrbi-^UJkcUoKqzbmrnm
zYp1-_f<3iecUmXj>z)2!(duXWj=Vj0>EpS}pH7|sc>K%<ebdOu<mH8Rmn&LtHT2w>
zvGDQMJ+F_Qey?K~6dJ!^%DhJ#cfLAu^8Nq+|26e|gQ90<mL4srxmezEtAFN$bz5H^
zJpS&;srQO1wr+mS(W$EvbGBs^AFA!VJ#YEb?R#GzIQH()@pp$#yfZM3bo8k54(W}}
zSU-2!lbr|N>^=NeS=~`h%Uw&~-@-1VxZ%3Cet<_ndv^H=cmLM(;)6<R4!TC6J|TUX
zB}Za^MOOl&;E1P-V@SoEw^y%+9dZz8c&OpR>MF7{^No_&n!q=)Z!|h?9KBb)p8vh#
z3I`{S;tPk@ovS~tX8co+$-pOSm)F^}6rrGLZnNhuKArld@@E^<whJB}Qj>2c>1w4}
ztXs0BM|Zu#l2fa)qI+#mJj&uN{Tk(zRbXOvb9Qvonrmip$x2JU@ujDSm-|mR`t{pa
zet}C5E_^ugVup7@ufLC<;H58T)<i!q;##w_Qq<ogtH1o<E4Q#DMQ))@3iyavo%`h%
z)gL;}Uvgrr*XK(wUsTSDSQxF8-*2k3KO!@(M(wVzwD%s5Jz={{_E_AkycO{%`l+33
z(4*M!S>pN5VUIqWY<{%&z@-PD>wA}ex$$J(fBk8fwEJ~ZPX3>xcHAo^ZclI8wfFyi
z9=X+~lk(T3`}xac&;1+X)jwT#PXF*TLgQA%O1{Vm6IeO%5E==(zot*)%uFrKy_<Vm
zAYyjo+FYkwH}BrIx3Ce4xbxAoVS?ZJE6?wBpBCuey-RJ$?CAe<k0<_25xnyE@ZyVS
qUId?=aKy%T^BL~Sb=S9l=TBg~$u;u_lQ}S-F?hQAxvX<aXaWFc8`ppU

literal 0
HcmV?d00001

diff --git a/site/vue/img/nor_test.png b/site/vue/img/nor_test.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c969d68d787d29f7ecfd5841da79cf93be4695c
GIT binary patch
literal 899
zcmeAS@N?(olHy`uVBq!ia0vp^(||aIgBeH$w^|+oQjEnx?oNz1PwLbIIh+L^k;M!Q
z+`=Ht$S`Y;1W-XzfKQ04w}wWEo!yd%h%>plw`*$dwzS-9Z@<^kalfPEK~K-4sZ*aV
zS@L@O_75jde!6(kQeNI(NvY1+d3#dQt+KNFot^i)x*krN^mP9GSDQ9{IC0|3_3K}6
z-7=Gv_0rIo77%bDKmS2r-@^$L9!{S8WX_zI>(;$Ldi3j^JL%@;cN!ZXPMr97)~x3%
zR=nH4|MQhAUvAv^eEG7utn6ezzndi`k7vwyv3m8Ft5?5VyY}hAg^y>><XKzqNlm>|
zTYImy^+9j%vqg*E?%VhA+__KZ&V4*}>cjElk^1_}BO@;t7T&6;xYN+^dh6Er$BqT*
z=qv~geKcjttBo7qA35^>|9@Xi&6z<#M>8`o78KknFMrVA|L)*HTSdiYH@8*M(c2Oe
z4`pQBuC0AKZ{E8D2i_ez6lq{k<>=V!?Y%xW_Q~A2Z+7l{yLYdnva-9Hn!lD-hK0rT
z;^F{p?RF236WQ6V?(PTE(;bwQLUncfe0+{%X5KMU4+DnwE>9Q7kcv5PuYdPH<REeU
zq1J*Xg)XDD(ghD#zK6}xSYT23=w9^ydS;2G0UOo}*uMJy`S#bo-OCksG8`8b(VDVq
zQIeZhV7AxRT}FQKafvHJLM0_VbB&_cY|H9<o}KkN<STE_l^ZGLH|7M2-OtI$ylN0M
zd-dMKH*bojmVV!HRn6_w7pq^t*x45A)MZqpOqqD>n7Z2XWqS>;oq2P|Mp?H)tk!D1
z^0BC>upN?~FZo&4+HF|EDyF(YqtTU9$15R_saq&w%7H~JC_<A$uANFhq@JW5biM1m
z+PTx6qW2XFjaRyN*TymFypKGzc9Q$ceQKGXi;|bhso4Fp>M-ILi-?a-JuDQhn;!OQ
zn|=CHO97pi8XGbUBsaD^eiLE2_o-xR>OMc?wPN+U8;mv{sW162eyv<QZCU!K<fotB
zul^7@>+z>KUr*z670{tVk*gPOEp@wfV@v)|nS&D9)_XRe_Ne~Ne(SJ@%CSfNeTREW
zidNZh&xt=0`RA#qa_s$<yuW&<*}E6MdnezM=J)@4&y*d<)kVLbnfLnX*SE5#j+n5W
T?3&dJ%t#ELu6{1-oD!M<ebcy?

literal 0
HcmV?d00001

diff --git a/site/vue/img/not_test.png b/site/vue/img/not_test.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d76058bf0d07aa3867d912a35a29d95f982d2ba
GIT binary patch
literal 925
zcmeAS@N?(olHy`uVBq!ia0vp^(||aIgBeH$w^|+oQjEnx?oNz1PwLbIIh+L^k;M!Q
z+`=Ht$S`Y;1W-X|fKQ04zM-<0uX#p}Ut?S1#Hsny=Tyv^S2KG)5Y^6G)VOSA_oi*L
z4<Frl@$!)yx6Z1nNo#1y1q9oaRD}0T%$l>HZtlW{#mhU^ZJfIA;OdK)58u6a`N6|$
zN-9$E$?h$k$qSY=FIv{NWJTwi^^<q+TYm21fxGuFKYV=C(Z#T&GJNXH(nZVKm#ykv
zwRXa`oeNH$*?If!#d{B~-nxBWSw$)~(XFdLedU_|9lIBwyKvyn-HUhcUAl4e%#~}$
z-8@YyY9c31FPt&AYX0J;jaz1&IJN!i^^@0boVtAV=!Hv%EUdJ$^8DMnQ~D<7Oqp4-
zVol$H!|TppJb3BK5fd}@)J&hI_QZ+P3YM<y+IL{p+4K9(UD*Hs|9?Yc)x=cK+NRjn
zuH@cH*$bDp?%uoX^x55KFYH&>kPQyA%P9yfsR*lXh?z94aP7vahmLMIb!OM;b9>I5
z+hb|1<riQT5^fh2>zrR4ymrHsBgZ#uYRl{DD;b%nI=LEl_N5t{s)a>5)VIXXU0A<v
z)3lIq`|A2=O)WVy3ys>wSSP*PtALTR*3-o?q+-t7>tBPJ93_rFG!EEkAowLG$1w1X
z!_i|5Ja6)jzWZ}pme0M_nlEndMArTD?@zmZyEaYl*@GP&Cst&*`sgSh)qE^0G<lL`
zs8?3hE+ys36Q{h=={2)%e_W|&?msd9fJdwA(Or{*#Jlyi*RNQUv?Qz6H#akOZ}-&;
z83C&#SFXHy<I=5b?~*>s&W*j>bLDdOtJm@d+-nXld?@H9B`dw%XGSkmc2U-?10G?s
zYu&PEvT83lu!u!Wb%REuE2oZELLgJOP{b5up@rvW{XX+qe5K^0otNBg(_8pY*Z%sx
zl<98NtD65CE~HoLJ+Ym%-{)UnyR`S7iC<o1E58g>(AaR~^^aTHcOr`T86x)OM{GF2
zq+Ox&@l(RdjZfm22YGBb@Jmwr!udV_5B~alKm2`U(TWS{e{-=|jwG~HAmOaFn3!Z{
zW@YNtMbW|$ucc>4_iWj_dH44E0*wtn7C#ntE1DN|{>^hW^X~mSQkJaFKHlrQ{%3;W
xmA7~Q9#&q?W#%mM{mYsMaW{(hTHU|L7+k7&pl*sbFl#X|c)I$ztaD0e0ss*e!cG7H

literal 0
HcmV?d00001

diff --git a/site/vue/img/or_test.png b/site/vue/img/or_test.png
new file mode 100644
index 0000000000000000000000000000000000000000..639057733c7f2e4adf36259976fc6e76e62ae3e1
GIT binary patch
literal 1012
zcmeAS@N?(olHy`uVBq!ia0vp^(||aIgBeH$w^|+oQjEnx?oNz1PwLbIIh+L^k;M!Q
z+`=Ht$S`Y;1W-XnfKQ04hPQ@YiCx5!h}<)|HMeV8?zXhwYwx(%(Q&_{=RwcZM^l$P
zTeAK2_LCn@Ui@@X-cnx4Udg%6Ica-R*{!n9`<-3)yCyxHH2>-RO|Lec_;BL-m+QB_
z-jX$w)$q~?m==(KA;0fI--L$~CO@1!=gFLPFV`J?fAr4RJLc);jdvO+KAbq~@vIfk
zSL}bc|H|hpH@@7s{Q0u1xvbx0zml6JGak=a{bKdiFITU9xpv{xg)<+|Sm#-%?n$k^
zQ`>s4wf8~qqGyZtz1?^2<GFL6&Yk*r>iCD_`jPsP%OeXf7gpS=Xt>j`_4U?c?~myO
z>4Yu_o$_eP##bAUyg#z*&949d|4)BBedn8<n!cJrGlMdZW)@s5D8E(S|DgZiyMv0h
zif+wr(W{~pw<TsA%Ba0vJMZbd1MdzTdUwbm(!jCG(Yx0>c75#JCv*3{-K*@Vtmdw!
z<*#LtVNra&SUW)5qunF>M7DdYd-}n2B?l$lP+gxspUfkf7X`8e85o#UJzX3_D(1Ys
z@jG0|QRKi!UBy;~GgHEEpHA>OsdFN3R#=D_*BQP=Q{TT>`)%95zc-#1irrAvv#995
z^Il)3?D>ZI#_9alo4bl0rOZEExk}!XS?_yh|M#9p(l*v5=PYfSRHoYt@U))SURCw*
zk?QlO+8$DSr8?VYo(nqOwyt;gL=(Z?b|>?EUapzF{gIyiB%$q#FPFc&cRBLaUv}fo
z9#t0R|6hEZyyRfjuQxxLCdH}5E!%T)#lfhUSKZ1dC!R}j)=b(ewoyTlTL>2s6s@x^
z@|dsl8g~(4+v7q`5wQ~u!|cvS6n1R5Vtj1&|BByhcHGSgiI}ylev84%_G6DM1)tw}
z*46V_>vWmG^Z)IQk+am^EIYX3RMNNP86sh4eGhwG-Q1GEn>-^V?D3l!{L>@DHY>l{
zC)^z|cXPqLPhS_Ngw7A#5fLP3cYKO!l!M^vNlU(lE!SD{ecBcvy=L8?xm`iNk<Y$H
zOpgfLoc?iznpjKd=56m~#h#ztW^$D`Qu*{2$H@n>QkR#qtiG(&ee=MX*?-mAm#*3V
zC1JhWD}L{4_Qoly_DPOPVk&qDqs`MkYp?dG`fBw_P4ukPnyp`ZeN}RE-&fod<6`r!
z{az>QDQ{<Gms&L6Tj%R(y-DA`eU87pF=1xwiv0WaJuD*k1C6DE>i!jJ?f<xw@86%l
Z>{Cr-KM1nEIs(kO44$rjF6*2Ung9b*@r(cf

literal 0
HcmV?d00001

diff --git a/site/vue/index.html b/site/vue/index.html
index f5f7e75..c5c7165 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -46,26 +46,31 @@
                 <img onclick="setLang('en')" src="img/usa.png" /><br><br>
                 <hr id="hr">
                 <p id="setting_title_perso" class="txt">Personnalisation du jeu</p>
-                <p><a class="txt" id="active_line_setting">Couleur ligne active : </a><input type="color" id="head" name="head"
-            value="#e66465"></p>
-            <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="head" name="head"
-                value="#e66465"></p>
-                <br>
-                <hr id="hr">
-                <p><a>Previsualisation</a></p>
+                <p><a class="txt" id="active_switch_setting">Couleur ligne active : </a><input type="color" id="active_switch_picker" name="head"
+            value="#008000"></p>
+            <p><a class="txt" id="inactive_switch_setting">Couleur ligne innactive : </a><input type="color" id="inactive_switch_picker" name="head"
+                value="#FF0000"></p>
+                <p><a class="txt" id="active_line_setting">Couleur ligne innactive : </a><input type="color" id="active_line_picker" name="head"
+                    value="#4CFEFE"></p>
+                    <p><a class="txt" id="inactive_line_setting">Couleur ligne innactive : </a><input type="color" id="inactive_line_picker" name="head"
+                        value="#000000"></p>
                 <hr id="hr">
                 <div class="setting_play" id="setting_container">
 
                 </div>
-                <br>
             </div>
         </div>
     </div>
 </body>
+<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
 <script src="js/const.js"></script>
 <script src="js/lang.js"></script>
 <script src="js/func.js"></script>
+<script src="js/createElement.js"></script>
+<script src="js/logique.js"></script>
+<script src="js/init.js"></script>
 <script src="js/main.js"></script>
+
 <script>
 
     function play(){
diff --git a/site/vue/js/class.js b/site/vue/js/class.js
new file mode 100644
index 0000000..5cc4e64
--- /dev/null
+++ b/site/vue/js/class.js
@@ -0,0 +1,33 @@
+class gameData {
+    
+    constructor(hauteur, largeur) {
+        this.hauteur = hauteur;
+        this.largeur = largeur;
+    }
+    
+}
+
+function createSwitch(id, x, y) {
+    var switche = {
+      id : id,
+      x : x,
+      y : y,
+    };
+    switchsInfo.push(switche);
+    switchsInfoCopy.push(switche);
+    switchs.push(id);
+    var num = lineCount.length;
+    lineCount.push(1);
+    var rect1 = new Konva.Rect({
+      x: x,
+      y: y,
+      width: SwitchWidth,
+      height: SwitchHeight,
+      stroke: colorSwitchBorder,
+      fill: colorSwitchInnactiveBackground,
+      strokeWidth: 4,
+      id: id,
+      id3: null,
+    });
+    layer.add(rect1);
+  }
\ No newline at end of file
diff --git a/site/vue/js/const.js b/site/vue/js/const.js
index 6096de6..a2c309c 100644
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@@ -1,23 +1,23 @@
 //Portes Logiques
-var imageHeight = 70;
-var imageWidth = 75;
+var imageHeight = 75;
+var imageWidth = 100;
 var imageRotation = 0;
 
 //couleur
 const blackColor = "#444442";
 const whiteColor = "#D7CCC8";
 //Image
-const pathImg = "../img/";
-const imageLogiqueEt = "eee.png";
-const imageLogiqueOu = "zzz.png";
+const pathImg = "img/";
+const imageLogiqueEt = "and_test.png";
+const imageLogiqueOu = "ou.png";
 const imageLogiqueEtNon = "nand.png";
 const imageLogiqueInv = "not_test.png";
 const imageLogiqueNonOu = "aaa.png";
 const imageEnd = "idea_white.png";
 
 //line
-const colorLineInnactive = "black";
-const colorLineActive = "#4CFEFE";//FFF033
+var colorLineInnactive = "black";
+var colorLineActive = "#4CFEFE";//FFF033
 const lineStroke = 4;
 const pourcentageBreak = 15;
 
@@ -25,8 +25,8 @@ const pourcentageBreak = 15;
 const SwitchHeight = 25;
 const SwitchWidth = 50;
 const colorSwitchBorder = "black";
-const colorSwitchInnactiveBackground = "red";
-const colorSwitchActiveBackground = "green";
+var colorSwitchInnactiveBackground = "red";
+var colorSwitchActiveBackground = "green";
 
 //timer
 var timeEnd = 70;
diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js
new file mode 100644
index 0000000..80c9cbc
--- /dev/null
+++ b/site/vue/js/createElement.js
@@ -0,0 +1,298 @@
+function createEnd() {
+
+    //find X and Y
+  
+    var X = stage.width() - stage.width() /100 * 5;
+    var Y = stage.height() / 3;
+  
+    var imageObj2 = new Image();
+    imageObj2.onload = function () {
+      var end = new Konva.Image({
+        x: X,
+        y: Y,
+        image: imageObj2,
+        width: 50,
+        height: 50,
+        id: "end",
+      });
+      layer.add(end);
+      layer.batchDraw();
+    };
+    end = {
+      name: "end",
+      x: X,
+      y: Y,
+      type: "end",
+      position: 1,
+      let:1,
+    }
+    imageObj2.src = pathImg + imageEnd;
+  }
+  
+  function createSwitch(id, x, y) {
+    var switche = {
+      id : id,
+      x : x,
+      y : y,
+    };
+    switchsInfo.push(switche);
+    switchsInfoCopy.push(switche);
+    switchs.push(id);
+    var num = lineCount.length;
+    lineCount.push(1);
+    var rect1 = new Konva.Rect({
+      x: x,
+      y: y,
+      width: SwitchWidth,
+      height: SwitchHeight,
+      stroke: colorSwitchBorder,
+      fill: colorSwitchInnactiveBackground,
+      strokeWidth: 4,
+      id: id,
+      id3: null,
+    });
+    layer.add(rect1);
+  }
+  
+  function createLine(points, id) {
+    let startX = points[0], startY = points[1], endX = points[2], endY = points[3];
+    let distance20 = (endX - startX)/100*pourcentageBreak;
+    let newPoints = [startX, startY,startX + distance20, startY,endX - distance20,endY,endX,endY];
+    let line = new Konva.Line({
+      points: newPoints,
+      fill : 'blue',
+      stroke: colorLineInnactive,
+      strokeWidth: lineStroke,
+      id: id,
+    });
+    layer.add(line);
+  }
+  
+  
+  function createLink(entre, sortie) {
+    //entre est une porte logique
+    lineId = lineCount.length;
+    lineCount.push(1);
+    switch (whatIsElement(entre)) {
+      case "switch":
+        switch (whatIsElement(sortie)) {
+          case "logique":
+            switch (giveLineId(sortie.name,entre)) {
+              
+              case "id1":
+                let switchMidX = entre.getX() + entre.getWidth();
+                let switchMidY = entre.getY() + entre.getHeight() / 2;
+  
+                let logiqueMidX = sortie.x;
+                if(sortie.type === "inv"){
+                  var logiqueMidY = sortie.y + (imageHeight / 2);
+                }else{
+                  var logiqueMidY = sortie.y + (imageHeight / 3);
+                }
+                createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
+                setLine(sortie, "id1", "line" + lineId);
+                entre.id3 = "line" + lineId;
+                break;
+              case "id2":
+                createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
+                setLine(sortie, "id2", "line" + lineId);
+                entre.id3 = "line" + lineId;
+                break;
+            }
+        }
+        break;
+      case "logique":
+        switch (whatIsElement(sortie)) {
+          case "logique":
+            switch (giveLineId(sortie.name,entre)) {
+              case "id1":
+                let switchMidX = entre.x + imageWidth;
+                let switchMidY = entre.y + imageHeight / 2;
+  
+                let logiqueMidX = sortie.x;
+                if(sortie.type === "inv"){
+                  var logiqueMidY = sortie.y + (imageHeight / 2);
+                }else{
+                  var logiqueMidY = sortie.y + (imageHeight / 3);
+                }
+                createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId);
+                setLine(sortie, "id1", "line" + lineId);
+                setLine(entre, "id3", "line" + lineId);
+                break;
+              case "id2":
+                createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId);
+                setLine(sortie, "id2", "line" + lineId);
+                setLine(entre, "id3", "line" + lineId);
+                break;
+            }
+            break;
+          default:
+            endLines.push(lineId);
+            createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / end.position)*end.let], "line" + lineId);
+            setLine(entre, "id3", "line" + lineId);
+            end.let--;
+            break;
+        }
+        break;
+        
+    }
+  }
+  function createLogique(x, y, id, type) {
+    var imageObj = new Image();
+    imageObj.onload = function () {
+      var et = new Konva.Image({
+        x: x,
+        y: y,
+        image: imageObj,
+        width: imageWidth,
+        height: imageHeight,
+        id: id,
+      });
+      if (imageRotation != 0) {
+        et.rotation(imageRotation);
+        et.x(et.getX() + imageHeight);
+      }
+      layer.add(et);
+      layer.batchDraw();
+    };
+    switch(type){
+      case "et" :
+        imageObj.src = pathImg + imageLogiqueEt;
+        break;
+      case "ou":
+        imageObj.src = pathImg + imageLogiqueOu;
+        break;
+      case "etnon":
+        imageObj.src = pathImg + imageLogiqueEtNon;
+        break;
+      case "inv":
+        imageObj.src = pathImg + imageLogiqueInv;
+        break;
+      case "nonou":
+        imageObj.src = pathImg + imageLogiqueNonOu;
+        break;
+    }
+    
+    imageObj.id = id;
+  
+  
+  
+    var logique = {
+      name: id,
+      x: x,
+      y: y,
+      type: type,
+      id1: null,
+      id2: null,
+      id3: null,
+    }
+    logiques.push(logique);
+  }
+  
+  function switchCreator(number){
+    numberOfSwitch = number;
+    let split = number + 1;
+    let space = (stage.height() - stage.height()/100*25) / split;
+    for(let i = 1; i < number+1 ; i++){
+      createSwitch("s"+i, 20, (i) * space);
+    }
+  }
+  
+  function insertLogiqueColonne(nomLogique, TypeLogique, colonne){
+    var X = stage.width() / (colonneTot+1) * (colonne+1);
+    //calcul position Y
+    if(numberPerColonne[colonne] == 1){
+      var Y = stage.height() / 3;
+    }else{
+      let numberAlreadyAdded = liveColonneNumber[colonne].length+1;
+      let split = (stage.height() - stage.height()/100*25) / (numberPerColonne[colonne]+1);
+      var Y = split * numberAlreadyAdded;
+    }
+    createLogique(X, Y, nomLogique,TypeLogique);
+    liveColonneNumber[colonne].push(1);
+  }
+  
+  function createLinkSwitch(){
+    var logique = null;
+    var distance = stage.width();
+    //Trouver la porte logique la plus proche des switchs
+    logiques.forEach(function(element){
+      if(element.id1 == null || element.id2 == null){
+        if(element.x < distance){
+          logique = element;
+          distance = element.x;
+        }
+      }
+    });
+    var distanceSwitch = stage.height();
+    var switchs = null;
+    if(switchsInfo.length > 0){
+      switchsInfo.forEach(function(element){
+        if(Math.abs(logique.y - element.y) < distanceSwitch){
+          distanceSwitch = Math.abs(logique.y - element.y);
+          switchs = element;
+        }
+      });
+    }
+    else {
+      switchsInfoCopy.forEach(function(element){
+        if(stage.findOne("#"+element.id).id3 == null){
+          console.log("le switch " + element.id);
+          if(Math.abs(logique.y - element.y) < distanceSwitch){
+            console.log("ai");
+            distanceSwitch = Math.abs(logique.y - element.y);
+            switchs = element;
+          }
+        }
+      });
+    } 
+    
+    switchsInfo.splice( switchsInfo.indexOf(switchs), 1 );
+    createLink(stage.findOne("#"+switchs.id), findLogique(logique.name));
+  }
+  
+  function getNumberOfSwitchEmpty(){
+    let number = 0;
+    switchsInfoCopy.forEach(function(element){
+      if(stage.findOne("#"+element.id).id3 == null)
+        number++;
+    });
+    return number;
+  }
+  
+  function createAllLinkSwitch(){
+    while(getNumberOfSwitchEmpty() > 0){
+      createLinkSwitch();
+    }
+  }
+  
+  function createLinkAuto(logiqueId){
+    var logique = findLogique(logiqueId);
+    var ligneSupCoor = null;
+    var stop = false;
+    //on cherche la ligne supérieur
+    logiques.forEach(function(element){
+      if(!stop){
+        if(logique.x < element.x){
+          stop = true;
+          ligneSupCoor = element.x;
+        }
+      }
+    });
+    if(ligneSupCoor != null){
+      //on stock les portes logiques de la lignes supérieur (si il reste de la place dans leur entrees)
+      var ligneSup = [];
+      logiques.forEach(function(element){
+        
+        if(element.x == ligneSupCoor){
+          if(checkLogiqueLines(element.name,"id1") == false || checkLogiqueLines(element.name,"id2") == false){
+            ligneSup.push(element);
+          }
+        }
+      });
+      //on tire au sort
+      let sortie = getRandomArbitrary(0,ligneSup.length);
+      sortie = ligneSup[sortie];
+      createLink(findLogique(logiqueId),findLogique(sortie.name));
+    }
+  }
\ No newline at end of file
diff --git a/site/vue/js/creator.js b/site/vue/js/creator.js
new file mode 100644
index 0000000..8abc79c
--- /dev/null
+++ b/site/vue/js/creator.js
@@ -0,0 +1,204 @@
+function createGame1() {
+
+    timeEnd = 20;
+
+    initTimer();
+
+    createSwitch("s1", 20, 20);
+    createSwitch("s2", 20, 90);
+    createSwitch("s3", 20, 300);
+    createSwitch("s4", 20, 500);
+    createSwitch("s5", 20, 700);
+    createSwitch("s6", 20, 600);
+    createSwitch("s7", 350, 600);
+
+    createLogique(200, 100, "logique1", "et");
+    createLogique(300, 200, "logique2", "nonou");
+    createLogique(500, 300, "logique3", "et");
+    createLogique(500, 400, "logique4", "etnon");
+    createLogique(500, 500, "logique5", "inv");
+
+    createLink(stage.findOne("#s7"), findLogique("logique5"));
+    createLink(stage.findOne("#s5"), findLogique("logique4"));
+    createLink(stage.findOne("#s6"), findLogique("logique4"));
+    createLink(stage.findOne("#s3"), findLogique("logique2"));
+    createLink(stage.findOne("#s2"), findLogique("logique1"));
+    createLink(stage.findOne("#s1"), findLogique("logique1"));
+    createLink(findLogique("logique1"), findLogique("logique2"));
+    createLink(stage.findOne("#s4"), findLogique("logique3"));
+    createLink(findLogique("logique2"), findLogique("logique3"));
+    initAllSwitch();
+    createEnd(800, 320);
+    initEnd();
+}
+function createGame2() {
+
+    timeEnd = 40;
+
+    colonneTot = 3;
+    numberPerColonne = [1,1,3];
+
+    initTimer();
+
+    switchCreator(7);
+
+    insertLogiqueColonne("logique1", "et", 0);
+    insertLogiqueColonne("logique2", "nonou", 1);
+    insertLogiqueColonne("logique3", "et", 2);
+    insertLogiqueColonne("logique4", "etnon", 2);
+    insertLogiqueColonne("logique5", "inv", 2);
+
+    createLink(findLogique("logique1"), findLogique("logique2"));
+    createLink(findLogique("logique2"), findLogique("logique3"));
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+}
+
+function tuto(){
+    timeEnd = 1000;
+
+    initTimer();
+
+    var logiqueCount = 0;
+
+    colonneTot = 1;
+
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+
+    numberPerColonne[0] = 1;
+
+    insertLogiqueColonne("logique" + logiqueCount, "et", 0);
+    
+
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+}
+
+function creatorRandomPyramid(){
+    timeEnd = getRandomArbitrary(15, 50);
+
+    initTimer();
+
+    var premiereColonne = 2;
+
+    let still = premiereColonne;
+    let nmbColonne = 1;
+
+    while(still != 1){
+        still = still / 2;
+        nmbColonne++;
+    }
+
+    var logiqueCount = 0;
+
+    colonneTot = nmbColonne;
+
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+    premiereColonne = premiereColonne * 2;
+    for (let i = 0; i < colonneTot; i++) {
+        numberPerColonne[i] = premiereColonne - premiereColonne / 2;
+        premiereColonne = premiereColonne / 2;
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            logiqueCount++;
+            let type = null;
+            switch (getRandomArbitrary(0, 4)) {
+                case 0:
+                    type = "et";
+                    break;
+                case 1:
+                    type = "ou";
+                    break;
+                case 2:
+                    type = "etnon";
+                    break;
+                case 3:
+                    type = "nonou";
+                    break;
+            }
+            insertLogiqueColonne("logique" + logiqueCount, type, i);
+        }
+    }
+    
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+}
+
+function generatorGame() {
+
+    timeEnd = getRandomArbitrary(15, 50);
+
+    initTimer();
+
+    var logiqueCount = 0;
+
+    colonneTot = getRandomArbitrary(2, 3);
+
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+
+    for (let i = 0; i < colonneTot; i++) {
+        numberPerColonne[i] = getRandomArbitrary(2, 4);
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            logiqueCount++;
+            let type = null;
+            switch (getRandomArbitrary(0, 4)) {
+                case 0:
+                    type = "et";
+                    break;
+                case 1:
+                    type = "ou";
+                    break;
+                case 2:
+                    type = "etnon";
+                    break;
+                case 3:
+                    type = "nonou";
+                    break;
+            }
+            insertLogiqueColonne("logique" + logiqueCount, type, i);
+        }
+    }
+    
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+
+}
\ No newline at end of file
diff --git a/site/vue/js/easytimer.min.js b/site/vue/js/easytimer.min.js
new file mode 100644
index 0000000..ca9c46b
--- /dev/null
+++ b/site/vue/js/easytimer.min.js
@@ -0,0 +1,7 @@
+/**
+ * easytimer.js
+ * Generated: 2019-12-22
+ * Version: 4.1.1
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).easytimer={})}(this,function(t){"use strict";function _(t){return(_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)}return n}function z(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,n,o;e=r,o=i[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(i,t))})}return r}function i(t,e,n){var o,r="";if((t="number"==typeof t?String(t):t).length>e)return t;for(o=0;o<e;o+=1)r+=String(n);return(r+t).slice(-r.length)}function R(){this.secondTenths=0,this.seconds=0,this.minutes=0,this.hours=0,this.days=0,this.toString=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:["hours","minutes","seconds"],e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:":",n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:2;t=t||["hours","minutes","seconds"],e=e||":",n=n||2;var o,r=[];for(o=0;o<t.length;o+=1)void 0!==this[t[o]]&&("secondTenths"===t[o]?r.push(this[t[o]]):r.push(i(this[t[o]],n,"0")));return r.join(e)}}var n="undefined"!=typeof window?window.CustomEvent:void 0;"undefined"!=typeof window&&"function"!=typeof n&&((n=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}).prototype=window.Event.prototype,window.CustomEvent=n);var B="secondTenths",F="seconds",G="minutes",H="hours",J="days",K=[B,F,G,H,J],N={secondTenths:100,seconds:1e3,minutes:6e4,hours:36e5,days:864e5},Q={secondTenths:10,seconds:60,minutes:60,hours:24},W="undefined"!=typeof module&&module.exports&&"function"==typeof require?require("events"):void 0;function X(){return"undefined"!=typeof document}function Y(){return W}function Z(t,e){return(t%e+e)%e}function o(){var e,n,r,o,i,s,u,c,a,f,d=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},l=new R,h=new R,p=X()?document.createElement("span"):Y()?new W.EventEmitter:void 0,v=!1,y=!1,m={},b={detail:{timer:this}};function w(t,e){var n,o,r=h[e];return o=C(t,N[n=e]),h[n]=o,l[n]=n===J?o:0<=o?Z(o,Q[n]):Q[n]-Z(o,Q[n]),h[e]!==r}function t(){g(),function(){for(var t in l)l.hasOwnProperty(t)&&"number"==typeof l[t]&&(l[t]=0);for(var e in h)h.hasOwnProperty(e)&&"number"==typeof h[e]&&(h[e]=0)}()}function g(){clearInterval(e),e=void 0,y=v=!1}function O(t){I()?(a=E(),s=V(i.target)):D(t),function(){var t=N[n];if(S(P(Date.now())))return;e=setInterval(j,t),v=!0,y=!1}()}function E(){return P(Date.now())-h.secondTenths*N[B]*r}function j(){var t=P(Date.now());!function(t){t[B]&&M("secondTenthsUpdated",b);t[F]&&M("secondsUpdated",b);t[G]&&M("minutesUpdated",b);t[H]&&M("hoursUpdated",b);t[J]&&M("daysUpdated",b)}(T()),o(b.detail.timer),S(t)&&(U(),M("targetAchieved",b))}function T(t){var e=0<arguments.length&&void 0!==t?t:P(Date.now()),n=0<r?e-a:a-e,o={};return o[B]=w(n,B),o[F]=w(n,F),o[G]=w(n,G),o[H]=w(n,H),o[J]=w(n,J),o}function P(t){return Math.floor(t/N[n])*N[n]}function S(t){return s instanceof Array&&f<=t}function D(t){var e;n=function(t){if(function(t){return 0<=K.indexOf(t)}(t=typeof t==="string"?t:F))return t;throw new Error("Error in precision parameter: ".concat(t," is not a valid value"))}((t=t||{}).precision),o="function"==typeof t.callback?t.callback:function(){},c=!0===t.countdown,r=!0==c?-1:1,"object"===_(t.startValues)?(e=t.startValues,u=x(e),l.secondTenths=u[0],l.seconds=u[1],l.minutes=u[2],l.hours=u[3],l.days=u[4],h=L(u,h)):u=null,a=E(),T(),s="object"===_(t.target)?V(t.target):c?(t.target={seconds:0},V(t.target)):null,m={precision:n,callback:o,countdown:"object"===_(t)&&!0===t.countdown,target:s,startValues:u},i=t}function x(t){var e,n,o,r,i,s;if("object"===_(t))if(t instanceof Array){if(5!==t.length)throw new Error("Array size not valid");s=t}else{for(var u in t)if(K.indexOf(u)<0)throw new Error("Error in startValues or target parameter: ".concat(u," is not a valid input value"));s=[t.secondTenths||0,t.seconds||0,t.minutes||0,t.hours||0,t.days||0]}return e=s[0],n=s[1]+C(e,10),o=s[2]+C(n,60),r=s[3]+C(o,60),i=s[4]+C(r,24),s[0]=e%10,s[1]=n%60,s[2]=o%60,s[3]=r%24,s[4]=i,s}function C(t,e){var n=t/e;return n<0?Math.ceil(n):Math.floor(n)}function V(t){if(t){var e=L(s=x(t));return f=a+e.secondTenths*N[B]*r,s}}function L(t,e){var n=e||{};return n.days=t[4],n.hours=24*n.days+t[3],n.minutes=60*n.hours+t[2],n.seconds=60*n.minutes+t[1],n.secondTenths=10*n.seconds+t[[0]],n}function U(){t(),M("stopped",b)}function k(t,e){X()?p.addEventListener(t,e):Y()&&p.on(t,e)}function A(t,e){X()?p.removeEventListener(t,e):Y()&&p.removeListener(t,e)}function M(t,e){X()?p.dispatchEvent(new CustomEvent(t,e)):Y()&&p.emit(t,e)}function q(){return v}function I(){return y}D(d),void 0!==this&&(this.start=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t=z({},d,{},t),q()||(O(t),M("started",b))},this.pause=function(){g(),y=!0,M("paused",b)},this.stop=U,this.reset=function(){t(),O(i),M("reset",b)},this.isRunning=q,this.isPaused=I,this.getTimeValues=function(){return l},this.getTotalTimeValues=function(){return h},this.getConfig=function(){return m},this.addEventListener=k,this.on=k,this.removeEventListener=A,this.off=A)}t.Timer=o,t.default=o,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index 214a679..4da739f 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -48,10 +48,10 @@ function setColor(color) {
         document.getElementById("setting_int").style.color = whiteColor;
         document.getElementById("setting_int").style.backgroundColor = blackColor;
         var hr = document.querySelectorAll("#hr");
-        hr.forEach(function(item){
-            console.log(item);
-            hr.style.border = "3px solid " + blackColor;
+        hr.forEach(function (item) {
+            item.setAttribute("style", "border : 3px solid " + whiteColor);
         });
+        document.querySelector(".modal-body").style.border = "5px solid" + whiteColor;
 
     } else {
         document.body.style.color = blackColor;
@@ -59,9 +59,10 @@ function setColor(color) {
         document.getElementById("setting_int").style.color = blackColor;
         document.getElementById("setting_int").style.backgroundColor = whiteColor;
         var hr = document.querySelectorAll("#hr");
-        hr.forEach(function(item){
-            hr.style.border = "3px solid " + whiteColor;
+        hr.forEach(function (item) {
+            item.setAttribute("style", "border : 3px solid " + blackColor);
         });
+        document.querySelector(".modal-body").style.border = "5px solid" + blackColor;
     }
 }
 
@@ -79,4 +80,259 @@ function setLang(newLang) {
             document.getElementById(currText).innerHTML = lang.en[currText];
         })
     }
-}
\ No newline at end of file
+}
+function calculNombreSwitch() {
+    var entrelibre = 0;
+    logiques.forEach(function (element) {
+
+        if (element.id1 == null) {
+            entrelibre++;
+        }
+        if (element.id2 == null && element.type != "inv") {
+            entrelibre++;
+        }
+    });
+    numberOfSwitch = entrelibre;
+}
+function whatIsElement(element) {
+    if (findLogique(element.name) == null || findLogique(element.name) == undefined) {
+        return "switch";
+    } else {
+        return "logique";
+    }
+}
+
+function setLine(logiqueElement, lineId, lineName) {
+    logiques.forEach(function (element, index) {
+        if (element.name === logiqueElement.name) {
+            Object.keys(element).map(function (objectKey, index) {
+                if (objectKey == lineId) {
+                    element[objectKey] = lineName;
+                }
+            });
+        }
+    });
+}
+
+function changeLineColor(idLine) {
+    let line = stage.findOne("#" + idLine);
+    var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
+    line.stroke(colorline);
+}
+function changeLineColorInput(idLine,color) {
+    let line = stage.findOne("#" + idLine);
+    console.log("changer");
+    line.stroke(color);
+}
+function changeLineColorBlack(idLine) {
+    let line = stage.findOne("#" + idLine);
+    line.stroke(colorLineInnactive);
+}
+function changeLineColorYellow(idLine) {
+    let line = stage.findOne("#" + idLine);
+    line.stroke(colorLineActive);
+}
+
+function checkAllSortieLogique() {
+    logiques.forEach(function (element) {
+        if (element.id3 != null)
+            checkSortieLogique(element.name);
+    });
+}
+
+function checkSortieLogique(logiqueId) {
+    let logique = findLogique(logiqueId);
+    logiques.forEach(function (element, index) {
+        if (element.name === logique.name) {
+            let line1State, line2State;
+            let id1Color = stage.findOne("#" + element.id1).stroke();
+            if (element.type !== "inv") {
+                let id2Color = stage.findOne("#" + element.id2).stroke();
+                if (id2Color == colorLineInnactive) {
+                    line2State = false;
+                } else {
+                    line2State = true;
+                }
+            }
+
+            if (id1Color == colorLineInnactive) {
+                line1State = false;
+            } else {
+                line1State = true;
+            }
+
+            switch (logique.type) {
+                case "et":
+                    if (line1State == true && line2State == true) {
+                        changeLineColorYellow(element.id3);
+                    }
+                    else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+                case "inv":
+                    if (line1State == false) {
+                        changeLineColorYellow(element.id3);
+                    }
+                    else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+                case "ou":
+                    if (line1State == true || line2State == true) {
+                        changeLineColorYellow(element.id3);
+                    }
+                    else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+                case "nonou":
+                    if (line1State == true || line2State == true) {
+                        changeLineColorBlack(element.id3);
+                    }
+                    else {
+                        changeLineColorYellow(element.id3);
+                    }
+                    break;
+                case "etnon":
+                    if (line1State == false && line2State == false) {
+                        changeLineColorYellow(element.id3);
+                    } else if (line1State == false && line2State == true) {
+                        changeLineColorYellow(element.id3);
+                    } else if (line1State == true && line2State == false) {
+                        changeLineColorYellow(element.id3);
+                    } else {
+                        changeLineColorBlack(element.id3);
+                    }
+                    break;
+            }
+        }
+    });
+}
+
+function getRandomArbitrary(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+}
+
+function isElementExisting(elementId) {
+    if (stage.findOne("#" + elementId) != null) {
+        return true;
+    }
+    return false;
+}
+
+function checkLineSwitch(switchId) {
+    if (stage.findOne("#" + switchId) != null) {
+        return true;
+    }
+    return false;
+}
+
+function checkEnd() {
+    let ter = true;
+    endLines.forEach(function (element) {
+        if (stage.findOne("#line" + element).stroke() == "black") {
+            ter = false;
+
+        }
+    });
+    if (ter) {
+        setTimeout(() => { localStorage.setItem("niveau", parseInt(niveauActuel) + 1); document.location.reload(true); }, 100);
+    }
+}
+
+
+function calculNombreSwitch() {
+    var entrelibre = 0;
+    logiques.forEach(function (element) {
+
+        if (element.id1 == null) {
+            entrelibre++;
+        }
+        if (element.id2 == null && element.type != "inv") {
+            entrelibre++;
+        }
+    });
+    numberOfSwitch = entrelibre;
+}
+
+
+
+function resize() {
+    console.log(window.innerWidth);
+    stage.scale({ x: 1, y: 1 });
+    stage.draw();
+    console.log(stage);
+}
+
+function activeSwitchInput(event) {
+    changeAllSwitchColorActive(event.target.value);
+}
+function inactiveSwitchInput(event) {
+    changeAllSwitchColorInActive(event.target.value);
+}
+function activeLineInput(event) {
+    changeAllLineColorActive(event.target.value);
+}
+function inactiveLineInput(event) {
+    changeAllLineColorInActive(event.target.value);
+}
+
+document.querySelector("#active_switch_picker").addEventListener("input", activeSwitchInput, false);
+document.querySelector("#inactive_switch_picker").addEventListener("input", inactiveSwitchInput, false);
+document.querySelector("#active_line_picker").addEventListener("input", activeLineInput, false);
+document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false);
+
+function changeAllSwitchColorActive(color){
+    switchsInfoCopy.forEach(function(element){
+        var switche = stage.findOne("#"+element.id);
+        if(switche.fill() == colorSwitchActiveBackground){
+            switche.fill(color);
+        }
+    });
+    colorSwitchActiveBackground = color;
+    layer.draw();
+}
+function changeAllSwitchColorInActive(color){
+    switchsInfoCopy.forEach(function(element){
+        var switche = stage.findOne("#"+element.id);
+        if(switche.fill() == colorSwitchInnactiveBackground){
+            switche.fill(color);
+        }
+    });
+    colorSwitchInnactiveBackground = color;
+    layer.draw();
+}
+
+function changeAllLineColorActive(color){
+    var line1 = stage.findOne("#line2");
+    var line2 = stage.findOne("#line3");
+    var line3 = stage.findOne("#line4");
+    if(line1.stroke() === colorLineActive){
+        line1.stroke(color);
+    }
+    if(line2.stroke() === colorLineActive){
+        line2.stroke(color);
+    }
+    if(line3.stroke() === colorLineActive){
+        line3.stroke(color);
+    }
+    colorLineActive = color;
+    layer.draw();
+}
+function changeAllLineColorInActive(color){
+    var line1 = stage.findOne("#line2");
+    var line2 = stage.findOne("#line3");
+    var line3 = stage.findOne("#line4");
+    if(line1.stroke() === colorLineInnactive){
+        line1.stroke(color);
+    }
+    if(line2.stroke() === colorLineInnactive){
+        line2.stroke(color);
+    }
+    if(line3.stroke() === colorLineInnactive){
+        line3.stroke(color);
+    }
+    colorLineInnactive = color;
+    layer.draw();
+}
diff --git a/site/vue/js/init.js b/site/vue/js/init.js
new file mode 100644
index 0000000..47e74e8
--- /dev/null
+++ b/site/vue/js/init.js
@@ -0,0 +1,52 @@
+function initAllSwitch() {
+  switchs.forEach(function (element) {
+    let switche = stage.findOne("#" + element);
+    switche.on('click', function () {
+      
+      let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground;
+      switche.fill(colorrect);
+      changeLineColor(switche.id3);
+      checkAllSortieLogique();
+      layer.draw();
+      checkEnd(); 
+    });
+    switche.on('mouseover', function () {
+      document.body.style.cursor = "pointer";
+    });
+    switche.on('mouseout', function () {
+      document.body.style.cursor = "default";
+    });
+
+  });
+   
+}
+function initLayer() {
+  
+}
+
+function compareLogiqueForEnd(a,b){
+  if(a.y > b.y)
+    return -1;
+  if(a.y < b.y)
+    return 1;
+  return 0;
+}
+
+function initEnd() {
+  var listeLogique = [];
+  let countLogique = 0;
+  logiques.forEach(function (element) {
+    if(element.id3 == null){
+      countLogique++;
+      listeLogique.push(element);
+    }
+  });
+  listeLogique.sort(compareLogiqueForEnd);
+  end.position = countLogique;
+  end.let = countLogique;
+  listeLogique.forEach(function (element) {
+    if(element.id3 == null){
+      createLink(element,end);
+    }
+  });
+}
\ No newline at end of file
diff --git a/site/vue/js/lang.js b/site/vue/js/lang.js
index e3c11ef..8898a5e 100644
--- a/site/vue/js/lang.js
+++ b/site/vue/js/lang.js
@@ -9,8 +9,10 @@ const lang = {
         retour: "Retour",
         dysfont: "Dyslexie :",
         setting_title_perso: "Personnalisation du jeu",
-        active_line_setting : "Couleur ligne active : ",
-        inactive_line_setting : "Couleur ligne innactive : ",
+        active_line_setting : "Couleur lines active : ",
+        inactive_line_setting : "Couleur lines innactive : ",
+        active_switch_setting : "Couleur switchs active : ",
+        inactive_switch_setting : "Couleur switchs innactive : ",
     },
     en: {
         titleGame: "Make It True",
@@ -22,7 +24,9 @@ const lang = {
         retour: "Back",
         dysfont:"Dyslexia :",
         setting_title_perso: "Game customization",
-        active_line_setting : "Color active line : ",
-        inactive_line_setting : "Color inactive line : ",
+        active_line_setting : "Color active lines : ",
+        inactive_line_setting : "Color inactive lines : ",
+        active_switch_setting : "Color inactive switch : ",
+        inactive_switch_setting : "Color inactive switchs : ",
     }
 }
\ No newline at end of file
diff --git a/site/vue/js/logique.js b/site/vue/js/logique.js
new file mode 100644
index 0000000..edda198
--- /dev/null
+++ b/site/vue/js/logique.js
@@ -0,0 +1,105 @@
+function findLogique(logiqueId) {
+    let elem = null;
+    logiques.forEach(function (element) {
+        if (element.name === logiqueId) {
+            elem = element;
+        }
+    });
+    return elem;
+}
+
+function giveSwitchYWithLineId(lineId){
+    var elementY = null;
+    switchsInfoCopy.forEach(function(element){
+        if(stage.findOne("#"+element.id).id3 == lineId){
+            elementY = (element.y);
+        }
+    });
+    return elementY;
+}
+
+function removeLineFromSwitch(lineId){
+    switchsInfoCopy.forEach(function(element){
+        if(stage.findOne("#"+element.id).id3 == lineId){
+            stage.findOne("#"+element.id).id3 = null;
+        }
+    });
+}
+
+function removeLine(lineId){
+    //remove from switch
+    removeLineFromSwitch(lineId);
+    let line = stage.findOne("#" + lineId);
+    line.destroy();
+
+}
+
+function giveLineId(logiqueId,entre) {
+    var newEntre = entre;
+    isSwitch = false;
+    if(entre.id !== undefined){
+        switchsInfoCopy.forEach(function(element){
+            if(entre.id() == element.id){
+                isSwitch = true;
+                newEntre = element;
+            }
+        });
+    }
+    let lineId = null;
+    let logique = findLogique(logiqueId);
+    if(logique.y >= newEntre.y){
+        if (logique.type === "inv") {
+            if (logique.id1 == null) {
+                lineId = "id1";
+            }
+        }
+        else {
+            if (logique.id1 == null) {
+                lineId = "id1";
+            } else if (logique.id2 == null) {
+                lineId = "id2";
+                /*if(isSwitch){
+                    if(giveSwitchYWithLineId(logique.id1) > entre.getY()){
+                        console.log(giveSwitchYWithLineId(logique.id1));
+                        console.log(entre);
+                        removeLine(entre.id3);
+                        lineRemove.push([entre, "switch"]);
+                    }else{
+                        lineId = "id2";
+                    }
+                }*/
+            }    
+        }
+    }else{
+        if (logique.type === "inv") {
+            if (logique.id1 == null) {
+                lineId = "id1";
+            }
+        }
+        else {
+            if (logique.id2 == null) {
+                lineId = "id2";
+            } else if (logique.id1 == null) {
+                lineId = "id1";
+            }
+    
+    
+        }
+    }
+    
+    return lineId
+}
+
+function checkLogiqueLines(logiqueId, lineId) {
+    let logique = findLogique(logiqueId);
+    logiques.forEach(function (element, index) {
+        if (element.name === logique.name) {
+          Object.keys(element).map(function(objectKey, index) {
+            if(objectKey == lineId && objectKey != null){
+                return true;
+            }
+        });
+        }
+    });
+    return false;
+}
\ No newline at end of file
diff --git a/site/vue/js/main.js b/site/vue/js/main.js
index 6c25195..709691b 100644
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@@ -1,5 +1,36 @@
-function initAll(){
+function initAll() {
     darkMode();
     setLang("fr");
     dysFont();
-}
\ No newline at end of file
+
+}
+
+var mobile = false;
+var switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
+console.log(document.querySelector("#setting_container").offsetWidth);
+var width = window.innerWidth - window.innerWidth / 100 * 30;
+var height = window.innerWidth / 5;
+
+var stage = new Konva.Stage({
+    container: 'setting_container',
+    width: width,
+    height: height,
+});
+var layer = new Konva.Layer();
+stage.add(layer);
+
+colonneTot = 1;
+numberPerColonne = [1];
+var logiqueCount = 0;
+
+for (let i = 0; i < colonneTot; i++) {
+    liveColonneNumber.push([]);
+}
+insertLogiqueColonne("logique1", "et", 0);
+calculNombreSwitch();
+switchCreator(numberOfSwitch);
+createAllLinkSwitch();
+
+initAllSwitch();
+createEnd();
+initEnd();
diff --git a/site/vue/js/timer.js b/site/vue/js/timer.js
new file mode 100644
index 0000000..dffff75
--- /dev/null
+++ b/site/vue/js/timer.js
@@ -0,0 +1,35 @@
+function initTimer(){
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = "0%";
+    let seconds = timeEnd;
+    let minutes = 0;
+    while(seconds - 60 > 0){
+      minutes++;
+      seconds = seconds - 60;
+    }
+    document.getElementById("timerend").innerHTML = " / " + minutes +" m "+ seconds + " s";
+}
+
+function move() {
+    var lapsPerSecond = 100/timeEnd;
+    var TimerElem = document.getElementById("progressBar");
+    TimerElem.style.width = (parseInt(TimerElem.style.width) + lapsPerSecond)+"%";
+}
+
+
+
+var timer = new easytimer.Timer();
+    timer.start();
+    timer.addEventListener('secondsUpdated', function (e) {
+      if(timer.getTimeValues().seconds <= timeEnd){
+        document.getElementById("timer").innerHTML = timer.getTimeValues().minutes.toString() +" m " + timer.getTimeValues().seconds.toString() + " s";
+        move();
+      }else{
+        endTime();
+        timer.stop();
+      }
+    });
+    function endTime(){
+        var modal = document.getElementById("myModal");
+        modal.style.display = "block";
+    }
\ No newline at end of file