From 84aeb36f8368d52a42a2b4ee9e7b169367cdc002 Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Fri, 7 Mar 2025 17:50:37 +0100
Subject: [PATCH] deux pages (presque)

---
 build/dp1.js         |   2 +-
 build/dp2.js         |   2 +-
 img/Regular/Back.svg | 321 ++++++-------------------------------------
 index.html           |  15 +-
 src/deck.ts          |  86 ++++++++++--
 src/display/dp1.ts   | 194 ++++++++++++++------------
 src/display/dp2.ts   | 212 ++++++++++++++++------------
 src/hand.ts          |  70 +++++++++-
 src/tile.ts          |  60 ++++++--
 9 files changed, 475 insertions(+), 487 deletions(-)

diff --git a/build/dp1.js b/build/dp1.js
index 9653106..9a9e501 100644
--- a/build/dp1.js
+++ b/build/dp1.js
@@ -1 +1 @@
-(()=>{"use strict";var i=function(){function i(i,t,e){this.family=i,this.value=t,this.red=e,this.imgSrc="",this.setImgSrc()}return i.prototype.getFamily=function(){return this.family},i.prototype.getValue=function(){return this.value},i.prototype.isRed=function(){return this.red},i.prototype.drawTile=function(i,t,e,r){var l=new Image;l.src="/img/Regular/Front.svg",l.onload=function(){i.drawImage(l,t,e,75*r,100*r)};var s=new Image;s.src=this.imgSrc,s.onload=function(){i.drawImage(s,t,e,75*r,100*r)}},i.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value),this.red&&(this.imgSrc+="-Dora"),this.imgSrc+=".svg"):4===this.family?this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg":5===this.family&&(this.imgSrc+=["","Chun","Hatsu","Haku"][this.value]+".svg")},i}(),t=function(){function t(i){this.tiles=[],this.initTiles(i)}return t.prototype.displayFamilies=function(t,e,r,l,s,n){void 0===s&&(s=0),void 0===n&&(n=0);for(var o=e,a=r,f=1;f<6;f++)if(f<4){for(var u=1;u<10;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(4===f){for(u=1;u<5;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(5===f)for(u=1;u<4;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l},t.prototype.initTiles=function(t){for(var e=1;e<6;e++)if(e<4)for(var r=1;e<10;e++)this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),5===r&&t?this.tiles.push(new i(e,r,!0)):this.tiles.push(new i(e,r,!1));else if(5===e)for(r=1;r<5;r++)for(var l=0;l<4;l++)this.tiles.push(new i(e,r,!1));else if(6===e)for(r=1;r<4;r++)for(l=0;l<4;l++)this.tiles.push(new i(e,r,!1))},t}(),e=document.getElementById("myCanvas");if(e){var r=e.getContext("2d");if(r){r.fillStyle="#007730",r.fillRect(50,50,1e3,1e3);var l=.75;new t(!1).displayFamilies(r,180,80,l,50,100),r.fillStyle="#DFDFFF",r.font="30px serif",r.fillText("Caractère:",55,140),r.fillText("Rond:",55,290),r.fillText("Bambou:",55,440),r.fillText("Vent:",55,590),r.fillText("Dragon:",55,740);for(var s=0;s<3;s++)for(var n=0;n<9;n++)r.fillText(String(n+1),180+125*n*l+22.5,80+200*s*l+112.5);r.fillText("Est",180,642.5),r.fillText("Sud",273.75,642.5),r.fillText("Ouest",367.5,642.5),r.fillText("Nord",461.25,642.5),r.fillText("Rouge",180,792.5),r.fillText("Vert",273.75,792.5),r.fillText("Blanc",367.5,792.5)}else console.error("Impossible d'obtenir le contexte du canvas.")}else console.error("Canvas introuvable dans le DOM.")})();
\ No newline at end of file
+(()=>{"use strict";var t=function(){function t(t,e,n){this.family=t,this.value=e,this.red=n,this.loadded=!1,this.imgSrc="",this.imgFront=new Image,this.imgBack=new Image,this.img=new Image,this.setImgSrc()}return t.prototype.getFamily=function(){return this.family},t.prototype.getValue=function(){return this.value},t.prototype.isRed=function(){return this.red},t.prototype.drawTile=function(t,e,n,i){t.drawImage(this.imgFront,e,n,75*i,100*i),t.drawImage(this.img,e,n,75*i,100*i)},t.prototype.isLessThan=function(t){return this.family<t.family||this.family===t.family&&this.value<=t.value},t.prototype.cleanup=function(){this.imgFront.onload=null,this.imgFront.onerror=null,this.imgBack.onload=null,this.imgBack.onerror=null,this.img.onload=null,this.img.onerror=null},t.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value),this.red&&(this.imgSrc+="-Dora"),this.imgSrc+=".svg"):4===this.family?this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg":5===this.family&&(this.imgSrc+=["","Chun","Hatsu","Haku"][this.value]+".svg")},t.prototype.preloadImg=function(){return t=this,e=void 0,i=function(){return function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},l=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return l.next=s(0),l.throw=s(1),l.return=s(2),"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function s(s){return function(a){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;l&&(l=0,s[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&s[0]?i.return:s[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;switch(i=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,i=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){o=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){o.label=s[1];break}if(6===s[0]&&o.label<r[1]){o.label=r[1],r=s;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(s);break}r[2]&&o.ops.pop(),o.trys.pop();continue}s=e.call(t,o)}catch(t){s=[6,t],i=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}(this,(function(t){switch(t.label){case 0:return[4,Promise.all([this.loadImg(this.imgFront,"/img/Regular/Front.svg"),this.loadImg(this.imgBack,"/img/Regular/Back.svg"),this.loadImg(this.img,this.imgSrc)])];case 1:return t.sent(),[2]}}))},new((n=void 0)||(n=Promise))((function(r,o){function l(t){try{a(i.next(t))}catch(t){o(t)}}function s(t){try{a(i.throw(t))}catch(t){o(t)}}function a(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(l,s)}a((i=i.apply(t,e||[])).next())}));var t,e,n,i},t.prototype.loadImg=function(t,e){return new Promise((function(n,i){t.onload=function(){return n()},t.onerror=function(){return i()},t.src=e}))},t}(),e=function(){function e(e){void 0===e&&(e=""),this.tiles=[];for(var n=0;2*n+1<e.length;n++){var i=e.substring(2*n,2*(n+1));"m"===i[0]?this.tiles.push(new t(1,Number(i[1]),!1)):"p"===i[0]?this.tiles.push(new t(2,Number(i[1]),!1)):"s"===i[0]?this.tiles.push(new t(3,Number(i[1]),!1)):"w"===i[0]?this.tiles.push(new t(4,Number(i[1]),!1)):"d"===i[0]&&this.tiles.push(new t(5,Number(i[1]),!1))}}return e.prototype.push=function(t){this.tiles.push(t)},e.prototype.pop=function(){return this.tiles.pop()},e.prototype.sort=function(){for(var t,e=0;e<this.tiles.length;e++)for(var n=0;n<this.tiles.length-1;n++)this.tiles[n].isLessThan(this.tiles[n+1])||(t=[this.tiles[n+1],this.tiles[n]],this.tiles[n]=t[0],this.tiles[n+1]=t[1])},e.prototype.drawHand=function(t,e,n,i,r,o){void 0===o&&(o=void 0);for(var l=0;l<this.tiles.length;l++)l===o?this.tiles[l].drawTile(t,e+75*l*r+l*i*r,n-25*r,r):this.tiles[l].drawTile(t,e+75*l*r+l*i*r,n,r)},e.prototype.preload=function(){return t=this,e=void 0,i=function(){var t;return function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},l=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return l.next=s(0),l.throw=s(1),l.return=s(2),"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function s(s){return function(a){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;l&&(l=0,s[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&s[0]?i.return:s[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;switch(i=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,i=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){o=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){o.label=s[1];break}if(6===s[0]&&o.label<r[1]){o.label=r[1],r=s;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(s);break}r[2]&&o.ops.pop(),o.trys.pop();continue}s=e.call(t,o)}catch(t){s=[6,t],i=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}(this,(function(e){switch(e.label){case 0:t=0,e.label=1;case 1:return t<this.tiles.length?[4,this.tiles[t].preloadImg()]:[3,4];case 2:e.sent(),e.label=3;case 3:return t++,[3,1];case 4:return[2]}}))},new((n=void 0)||(n=Promise))((function(r,o){function l(t){try{a(i.next(t))}catch(t){o(t)}}function s(t){try{a(i.throw(t))}catch(t){o(t)}}function a(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(l,s)}a((i=i.apply(t,e||[])).next())}));var t,e,n,i},e.prototype.cleanup=function(){this.tiles.forEach((function(t){return t.cleanup()})),this.tiles=[]},e}(),n=function(){function n(t){this.tiles=[],this.initTiles(t)}return n.prototype.displayFamilies=function(t,e,n,i,r,o){void 0===r&&(r=0),void 0===o&&(o=0);for(var l=e,s=n,a=1;a<6;a++)if(a<4){for(var u=1;u<10;u++)this.find(a,u).drawTile(t,l,s,i),l+=(75+r)*i;l=e,s+=(100+o)*i}else if(4===a){for(u=1;u<5;u++)this.find(a,u).drawTile(t,l,s,i),l+=(75+r)*i;l=e,s+=(100+o)*i}else if(5===a)for(u=1;u<4;u++)this.find(a,u).drawTile(t,l,s,i),l+=(75+r)*i},n.prototype.pop=function(){return this.tiles.length,this.tiles.pop()},n.prototype.find=function(t,e){for(var n,i=void 0,r=0;r<this.tiles.length;r++)this.tiles[r].getFamily()===t&&this.tiles[r].getValue()===e&&(i=r);return void 0!==i?(n=[this.tiles[0],this.tiles[i]],this.tiles[i]=n[0],this.tiles[0]=n[1],this.tiles.shift()):void 0},n.prototype.count=function(t,e){for(var n=0,i=0;i<this.tiles.length;i++)this.tiles[i].getFamily()===t&&this.tiles[i].getValue()===e&&n++;return n},n.prototype.shuffle=function(){for(var t,e=[];this.tiles.length>0;){var n=Math.floor(Math.random()*this.tiles.length);t=[this.tiles[0],this.tiles[n]],this.tiles[n]=t[0],this.tiles[0]=t[1],e.push(this.tiles.shift())}this.tiles=e},n.prototype.getRandomHand=function(){var t=new e;this.shuffle();for(var n=0;n<13;n++)t.push(this.pop());return t},n.prototype.cleanup=function(){this.tiles.forEach((function(t){return t.cleanup()})),this.tiles=[]},n.prototype.preload=function(){return t=this,e=void 0,i=function(){var t;return function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},l=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return l.next=s(0),l.throw=s(1),l.return=s(2),"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function s(s){return function(a){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;l&&(l=0,s[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&s[0]?i.return:s[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;switch(i=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,i=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){o=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){o.label=s[1];break}if(6===s[0]&&o.label<r[1]){o.label=r[1],r=s;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(s);break}r[2]&&o.ops.pop(),o.trys.pop();continue}s=e.call(t,o)}catch(t){s=[6,t],i=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}(this,(function(e){switch(e.label){case 0:t=0,e.label=1;case 1:return t<this.tiles.length?[4,this.tiles[t].preloadImg()]:[3,4];case 2:e.sent(),e.label=3;case 3:return t++,[3,1];case 4:return[2]}}))},new((n=void 0)||(n=Promise))((function(r,o){function l(t){try{a(i.next(t))}catch(t){o(t)}}function s(t){try{a(i.throw(t))}catch(t){o(t)}}function a(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(l,s)}a((i=i.apply(t,e||[])).next())}));var t,e,n,i},n.prototype.initTiles=function(e){for(var n=1;n<6;n++)if(n<4)for(var i=1;i<10;i++)this.tiles.push(new t(n,i,!1)),this.tiles.push(new t(n,i,!1)),this.tiles.push(new t(n,i,!1)),5===i&&e?this.tiles.push(new t(n,i,!0)):this.tiles.push(new t(n,i,!1));else if(4===n)for(i=1;i<5;i++)for(var r=0;r<4;r++)this.tiles.push(new t(n,i,!1));else if(5===n)for(i=1;i<4;i++)for(r=0;r<4;r++)this.tiles.push(new t(n,i,!1))},n}(),i=function(t,e,n,i){return new(n||(n=Promise))((function(r,o){function l(t){try{a(i.next(t))}catch(t){o(t)}}function s(t){try{a(i.throw(t))}catch(t){o(t)}}function a(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(l,s)}a((i=i.apply(t,e||[])).next())}))},r=function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},l=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return l.next=s(0),l.throw=s(1),l.return=s(2),"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function s(s){return function(a){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;l&&(l=0,s[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&s[0]?i.return:s[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;switch(i=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,i=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==s[0]&&2!==s[0])){o=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){o.label=s[1];break}if(6===s[0]&&o.label<r[1]){o.label=r[1],r=s;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(s);break}r[2]&&o.ops.pop(),o.trys.pop();continue}s=e.call(t,o)}catch(t){s=[6,t],i=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}};function o(t){return i(this,void 0,void 0,(function(){return r(this,(function(e){switch(e.label){case 0:return[4,t.preload()];case 1:return e.sent(),[2]}}))}))}!function(){i(this,void 0,void 0,(function(){var t,e,i,l,s,a,u,c,f,h,p,y;return r(this,(function(r){switch(r.label){case 0:return(t=document.getElementById("myCanvas"))?(e=t.getContext("2d"))?(e.fillStyle="#007730",e.fillRect(50,50,1e3,1e3),i=180,l=80,s=.75,a=50,u=100,[4,o(c=new n(!1))]):[3,2]:[3,4];case 1:for(r.sent(),c.displayFamilies(e,i,l,s,a,u),e.fillStyle="#DFDFFF",e.font="30px serif",f=50*s,h=30*s,e.fillText("Caractère:",55,l+f+h),e.fillText("Rond:",55,l+3*f+u*s+h),e.fillText("Bambou:",55,l+5*f+2*u*s+h),e.fillText("Vent:",55,l+7*f+3*u*s+h),e.fillText("Dragon:",55,l+9*f+4*u*s+h),p=0;p<3;p++)for(y=0;y<9;y++)e.fillText(String(y+1),i+y*(a+75)*s+30*s,l+p*(u+100)*s+150*s);return e.fillText("Est",i+0*(a+75)*s,l+3*(u+100)*s+150*s),e.fillText("Sud",i+1*(a+75)*s,l+3*(u+100)*s+150*s),e.fillText("Ouest",i+2*(a+75)*s,l+3*(u+100)*s+150*s),e.fillText("Nord",i+3*(a+75)*s,l+3*(u+100)*s+150*s),e.fillText("Rouge",i+0*(a+75)*s,l+4*(u+100)*s+150*s),e.fillText("Vert",i+1*(a+75)*s,l+4*(u+100)*s+150*s),e.fillText("Blanc",i+2*(a+75)*s,l+4*(u+100)*s+150*s),window.cleanup=function(){c.cleanup()},[3,3];case 2:console.error("Impossible d'obtenir le contexte du canvas."),r.label=3;case 3:return[3,5];case 4:console.error("Canvas introuvable dans le DOM."),r.label=5;case 5:return[2]}}))}))}()})();
\ No newline at end of file
diff --git a/build/dp2.js b/build/dp2.js
index 4573e28..565e863 100644
--- a/build/dp2.js
+++ b/build/dp2.js
@@ -1 +1 @@
-(()=>{"use strict";var i=function(){function i(i,t,e){this.family=i,this.value=t,this.red=e,this.imgSrc="",this.setImgSrc()}return i.prototype.getFamily=function(){return this.family},i.prototype.getValue=function(){return this.value},i.prototype.isRed=function(){return this.red},i.prototype.drawTile=function(i,t,e,r){var l=new Image;l.src="/img/Regular/Front.svg",l.onload=function(){i.drawImage(l,t,e,75*r,100*r)};var s=new Image;s.src=this.imgSrc,s.onload=function(){i.drawImage(s,t,e,75*r,100*r)}},i.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value),this.red&&(this.imgSrc+="-Dora"),this.imgSrc+=".svg"):4===this.family?this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg":5===this.family&&(this.imgSrc+=["","Chun","Hatsu","Haku"][this.value]+".svg")},i}(),t=function(){function t(i){this.tiles=[],this.initTiles(i)}return t.prototype.displayFamilies=function(t,e,r,l,s,n){void 0===s&&(s=0),void 0===n&&(n=0);for(var o=e,a=r,f=1;f<6;f++)if(f<4){for(var u=1;u<10;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(4===f){for(u=1;u<5;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l;o=e,a+=(100+n)*l}else if(5===f)for(u=1;u<4;u++)new i(f,u,!1).drawTile(t,o,a,l),o+=(75+s)*l},t.prototype.initTiles=function(t){for(var e=1;e<6;e++)if(e<4)for(var r=1;e<10;e++)this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),this.tiles.push(new i(e,r,!1)),5===r&&t?this.tiles.push(new i(e,r,!0)):this.tiles.push(new i(e,r,!1));else if(5===e)for(r=1;r<5;r++)for(var l=0;l<4;l++)this.tiles.push(new i(e,r,!1));else if(6===e)for(r=1;r<4;r++)for(l=0;l<4;l++)this.tiles.push(new i(e,r,!1))},t}(),e=document.getElementById("myCanvas");if(e){var r=e.getContext("2d");if(r){r.fillStyle="#007730",r.fillRect(50,50,1e3,1e3);var l=.75;new t(!1).displayFamilies(r,180,80,l,50,100),r.fillStyle="#DFDFFF",r.font="30px serif",r.fillText("Caractère:",55,140),r.fillText("Pin:",55,290),r.fillText("Bambou:",55,440),r.fillText("Vent:",55,590),r.fillText("Dragon:",55,740);for(var s=0;s<3;s++)for(var n=0;n<9;n++)r.fillText(String(n+1),180+125*n*l+22.5,80+200*s*l+112.5);r.fillText("Est",180,642.5),r.fillText("Sud",273.75,642.5),r.fillText("Ouest",367.5,642.5),r.fillText("Nord",461.25,642.5),r.fillText("Rouge",180,792.5),r.fillText("Vert",273.75,792.5),r.fillText("Blanc",367.5,792.5)}else console.error("Impossible d'obtenir le contexte du canvas.")}else console.error("Canvas introuvable dans le DOM.")})();
\ No newline at end of file
+(()=>{"use strict";var t=function(){function t(t,e,n){this.family=t,this.value=e,this.red=n,this.loadded=!1,this.imgSrc="",this.imgFront=new Image,this.imgBack=new Image,this.img=new Image,this.setImgSrc()}return t.prototype.getFamily=function(){return this.family},t.prototype.getValue=function(){return this.value},t.prototype.isRed=function(){return this.red},t.prototype.drawTile=function(t,e,n,i){t.drawImage(this.imgFront,e,n,75*i,100*i),t.drawImage(this.img,e,n,75*i,100*i)},t.prototype.isLessThan=function(t){return this.family<t.family||this.family===t.family&&this.value<=t.value},t.prototype.cleanup=function(){this.imgFront.onload=null,this.imgFront.onerror=null,this.imgBack.onload=null,this.imgBack.onerror=null,this.img.onload=null,this.img.onerror=null},t.prototype.setImgSrc=function(){this.imgSrc="/img/Regular/",this.family<=3?(this.imgSrc+=["","Man","Pin","Sou"][this.family],this.imgSrc+=String(this.value),this.red&&(this.imgSrc+="-Dora"),this.imgSrc+=".svg"):4===this.family?this.imgSrc+=["","Ton","Nan","Shaa","Pei"][this.value]+".svg":5===this.family&&(this.imgSrc+=["","Chun","Hatsu","Haku"][this.value]+".svg")},t.prototype.preloadImg=function(){return t=this,e=void 0,i=function(){return function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&a[0]?i.return:a[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;switch(i=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,i=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){o.label=a[1];break}if(6===a[0]&&o.label<r[1]){o.label=r[1],r=a;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(a);break}r[2]&&o.ops.pop(),o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t],i=0}finally{n=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}(this,(function(t){switch(t.label){case 0:return[4,Promise.all([this.loadImg(this.imgFront,"/img/Regular/Front.svg"),this.loadImg(this.imgBack,"/img/Regular/Back.svg"),this.loadImg(this.img,this.imgSrc)])];case 1:return t.sent(),[2]}}))},new((n=void 0)||(n=Promise))((function(r,o){function s(t){try{l(i.next(t))}catch(t){o(t)}}function a(t){try{l(i.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}l((i=i.apply(t,e||[])).next())}));var t,e,n,i},t.prototype.loadImg=function(t,e){return new Promise((function(n,i){t.onload=function(){return n()},t.onerror=function(){return i()},t.src=e}))},t}(),e=function(){function e(e){void 0===e&&(e=""),this.tiles=[];for(var n=0;2*n+1<e.length;n++){var i=e.substring(2*n,2*(n+1));"m"===i[0]?this.tiles.push(new t(1,Number(i[1]),!1)):"p"===i[0]?this.tiles.push(new t(2,Number(i[1]),!1)):"s"===i[0]?this.tiles.push(new t(3,Number(i[1]),!1)):"w"===i[0]?this.tiles.push(new t(4,Number(i[1]),!1)):"d"===i[0]&&this.tiles.push(new t(5,Number(i[1]),!1))}}return e.prototype.push=function(t){this.tiles.push(t)},e.prototype.pop=function(){return this.tiles.pop()},e.prototype.sort=function(){for(var t,e=0;e<this.tiles.length;e++)for(var n=0;n<this.tiles.length-1;n++)this.tiles[n].isLessThan(this.tiles[n+1])||(t=[this.tiles[n+1],this.tiles[n]],this.tiles[n]=t[0],this.tiles[n+1]=t[1])},e.prototype.drawHand=function(t,e,n,i,r,o){void 0===o&&(o=void 0);for(var s=0;s<this.tiles.length;s++)s===o?this.tiles[s].drawTile(t,e+75*s*r+s*i*r,n-25*r,r):this.tiles[s].drawTile(t,e+75*s*r+s*i*r,n,r)},e.prototype.preload=function(){return t=this,e=void 0,i=function(){var t;return function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&a[0]?i.return:a[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;switch(i=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,i=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){o.label=a[1];break}if(6===a[0]&&o.label<r[1]){o.label=r[1],r=a;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(a);break}r[2]&&o.ops.pop(),o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t],i=0}finally{n=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}(this,(function(e){switch(e.label){case 0:t=0,e.label=1;case 1:return t<this.tiles.length?[4,this.tiles[t].preloadImg()]:[3,4];case 2:e.sent(),e.label=3;case 3:return t++,[3,1];case 4:return[2]}}))},new((n=void 0)||(n=Promise))((function(r,o){function s(t){try{l(i.next(t))}catch(t){o(t)}}function a(t){try{l(i.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}l((i=i.apply(t,e||[])).next())}));var t,e,n,i},e.prototype.cleanup=function(){this.tiles.forEach((function(t){return t.cleanup()})),this.tiles=[]},e}(),n=function(){function n(t){this.tiles=[],this.initTiles(t)}return n.prototype.displayFamilies=function(t,e,n,i,r,o){void 0===r&&(r=0),void 0===o&&(o=0);for(var s=e,a=n,l=1;l<6;l++)if(l<4){for(var u=1;u<10;u++)this.find(l,u).drawTile(t,s,a,i),s+=(75+r)*i;s=e,a+=(100+o)*i}else if(4===l){for(u=1;u<5;u++)this.find(l,u).drawTile(t,s,a,i),s+=(75+r)*i;s=e,a+=(100+o)*i}else if(5===l)for(u=1;u<4;u++)this.find(l,u).drawTile(t,s,a,i),s+=(75+r)*i},n.prototype.pop=function(){return this.tiles.length,this.tiles.pop()},n.prototype.find=function(t,e){for(var n,i=void 0,r=0;r<this.tiles.length;r++)this.tiles[r].getFamily()===t&&this.tiles[r].getValue()===e&&(i=r);return void 0!==i?(n=[this.tiles[0],this.tiles[i]],this.tiles[i]=n[0],this.tiles[0]=n[1],this.tiles.shift()):void 0},n.prototype.count=function(t,e){for(var n=0,i=0;i<this.tiles.length;i++)this.tiles[i].getFamily()===t&&this.tiles[i].getValue()===e&&n++;return n},n.prototype.shuffle=function(){for(var t,e=[];this.tiles.length>0;){var n=Math.floor(Math.random()*this.tiles.length);t=[this.tiles[0],this.tiles[n]],this.tiles[n]=t[0],this.tiles[0]=t[1],e.push(this.tiles.shift())}this.tiles=e},n.prototype.getRandomHand=function(){var t=new e;this.shuffle();for(var n=0;n<13;n++)t.push(this.pop());return t},n.prototype.cleanup=function(){this.tiles.forEach((function(t){return t.cleanup()})),this.tiles=[]},n.prototype.preload=function(){return t=this,e=void 0,i=function(){var t;return function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&a[0]?i.return:a[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;switch(i=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,i=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){o.label=a[1];break}if(6===a[0]&&o.label<r[1]){o.label=r[1],r=a;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(a);break}r[2]&&o.ops.pop(),o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t],i=0}finally{n=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}(this,(function(e){switch(e.label){case 0:t=0,e.label=1;case 1:return t<this.tiles.length?[4,this.tiles[t].preloadImg()]:[3,4];case 2:e.sent(),e.label=3;case 3:return t++,[3,1];case 4:return[2]}}))},new((n=void 0)||(n=Promise))((function(r,o){function s(t){try{l(i.next(t))}catch(t){o(t)}}function a(t){try{l(i.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}l((i=i.apply(t,e||[])).next())}));var t,e,n,i},n.prototype.initTiles=function(e){for(var n=1;n<6;n++)if(n<4)for(var i=1;i<10;i++)this.tiles.push(new t(n,i,!1)),this.tiles.push(new t(n,i,!1)),this.tiles.push(new t(n,i,!1)),5===i&&e?this.tiles.push(new t(n,i,!0)):this.tiles.push(new t(n,i,!1));else if(4===n)for(i=1;i<5;i++)for(var r=0;r<4;r++)this.tiles.push(new t(n,i,!1));else if(5===n)for(i=1;i<4;i++)for(r=0;r<4;r++)this.tiles.push(new t(n,i,!1))},n}(),i=function(t,e,n,i){return new(n||(n=Promise))((function(r,o){function s(t){try{l(i.next(t))}catch(t){o(t)}}function a(t){try{l(i.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(s,a)}l((i=i.apply(t,e||[])).next())}))},r=function(t,e){var n,i,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(o=0)),o;)try{if(n=1,i&&(r=2&a[0]?i.return:a[0]?i.throw||((r=i.return)&&r.call(i),0):i.next)&&!(r=r.call(i,a[1])).done)return r;switch(i=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return o.label++,{value:a[1],done:!1};case 5:o.label++,i=a[1],a=[0];continue;case 7:a=o.ops.pop(),o.trys.pop();continue;default:if(!((r=(r=o.trys).length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){o=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){o.label=a[1];break}if(6===a[0]&&o.label<r[1]){o.label=r[1],r=a;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(a);break}r[2]&&o.ops.pop(),o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t],i=0}finally{n=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}},o=document.getElementById("myCanvas");function s(t){return i(this,void 0,void 0,(function(){return r(this,(function(e){switch(e.label){case 0:return[4,t.preload()];case 1:return e.sent(),[2]}}))}))}!function(){i(this,void 0,void 0,(function(){var t,e,a,l,u,c,h,f,p,d,y,v,g,m,w,b,x,I,S=this;return r(this,(function(k){switch(k.label){case 0:return o?(t=o.getContext("2d"))?((e=document.createElement("canvas")).width=o.width,e.height=o.height,a=e.getContext("2d"),l=0,u=1e3/30,c=150,h=150,f=75,p=.75,[4,s(d=new n(!1))]):[3,3]:[3,5];case 1:for(k.sent(),y=[],v=0;v<4;v++)(g=d.getRandomHand()).sort(),y.push(g);return[4,(m=new n(!1)).preload()];case 2:return k.sent(),(w=m.getRandomHand()).sort(),b=void 0,x=function(){return i(S,void 0,void 0,(function(){var n;return r(this,(function(i){for(a.clearRect(0,0,o.width,o.height),a.fillStyle="#007730",a.fillRect(50,50,1e3,1e3),a.fillStyle="#DFDFFF",a.font="50px serif",a.fillText("Exemples de main:",65,100),n=0;n<y.length;n++)y[n].drawHand(a,c,h+n*p*(100+f),5,p);return w.drawHand(a,c,800,5,p,b),t.clearRect(0,0,o.width,o.height),t.drawImage(e,0,0),[2]}))}))},I=function(t){t-l>=u&&(l=t,x()),requestAnimationFrame(I)},o.addEventListener("mousemove",(function(t){var e=o.getBoundingClientRect(),n=t.clientX-e.left-c,i=t.clientY-e.top,r=Math.floor(n/(80*p));b=n-80*r*p<=75&&r>=0&&r<14&&i>=800&&i<=800+100*p?r:void 0})),requestAnimationFrame(I),window.cleanup=function(){d.cleanup(),y.forEach((function(t){return t.cleanup()})),y=[],m.cleanup(),w.cleanup(),t.clearRect(0,0,o.width,o.height),a.clearRect(0,0,e.width,e.height),b=void 0},[3,4];case 3:console.error("Impossible d'obtenir le contexte du canvas."),k.label=4;case 4:return[3,6];case 5:console.error("Canvas introuvable dans le DOM."),k.label=6;case 6:return[2]}}))}))}()})();
\ No newline at end of file
diff --git a/img/Regular/Back.svg b/img/Regular/Back.svg
index 4620342..8a034c7 100644
--- a/img/Regular/Back.svg
+++ b/img/Regular/Back.svg
@@ -1,281 +1,42 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="300"
-   height="400"
-   viewBox="0 0 300 400"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="Back.svg"
-   inkscape:export-filename="C:\Users\Fluffy\Documents\Projects\ExtraRiichi\Tiles\Export\Regular\Back.png"
-   inkscape:export-xdpi="180"
-   inkscape:export-ydpi="180">
-  <defs
-     id="defs4">
-    <inkscape:path-effect
-       effect="skeletal"
-       id="path-effect7963"
-       is_visible="true"
-       pattern="m -90.825902,-314.06958 23.03016,41.38503 13.798268,-41.38503 z"
-       copytype="repeated_stretched"
-       prop_scale="1"
-       scale_y_rel="false"
-       spacing="0"
-       normal_offset="0"
-       tang_offset="0"
-       prop_units="false"
-       vertical_pattern="false"
-       fuse_tolerance="0"
-       pattern-nodetypes="cccc" />
-    <inkscape:path-effect
-       effect="skeletal"
-       id="path-effect7830"
-       is_visible="true"
-       pattern="M -12.828427,33.715729 -17,-11 l 9.0000001,0 z"
-       copytype="repeated_stretched"
-       prop_scale="-1"
-       scale_y_rel="false"
-       spacing="5.1"
-       normal_offset="0"
-       tang_offset="0"
-       prop_units="false"
-       vertical_pattern="false"
-       fuse_tolerance="0"
-       pattern-nodetypes="cccc" />
-    <linearGradient
-       id="linearGradient10055"
-       osb:paint="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop10057" />
-    </linearGradient>
-    <marker
-       inkscape:stockid="Arrow1Lstart"
-       orient="auto"
-       refY="0"
-       refX="0"
-       id="Arrow1Lstart"
-       style="overflow:visible"
-       inkscape:isstock="true">
-      <path
-         id="path4978"
-         d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#ff5c00;stroke-width:1pt;stroke-opacity:1"
-         transform="matrix(0.8,0,0,0.8,10,0)"
-         inkscape:connector-curvature="0" />
-    </marker>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath4243">
-      <circle
-         style="opacity:1;fill:#000000;fill-opacity:0.29670332;fill-rule:nonzero;stroke:#000000;stroke-width:19.13299942;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="circle4245"
-         cx="-264.65997"
-         cy="-198.20665"
-         r="293.95438" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath7847">
-      <ellipse
-         style="opacity:1;fill:#822600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="ellipse7849"
-         cx="394"
-         cy="552.36218"
-         rx="349.49533"
-         ry="216" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath4243-1">
-      <circle
-         style="opacity:1;fill:#000000;fill-opacity:0.29670332;fill-rule:nonzero;stroke:#000000;stroke-width:19.13299942;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="circle4245-4"
-         cx="-264.65997"
-         cy="-198.20665"
-         r="293.95438" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath7876">
-      <circle
-         style="opacity:1;fill:#000000;fill-opacity:0.29670332;fill-rule:nonzero;stroke:#000000;stroke-width:19.13299942;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="circle7878"
-         cx="-264.65997"
-         cy="-198.20665"
-         r="293.95438" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath14693">
-      <rect
-         style="opacity:1;fill:#a53c3c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="rect14695"
-         width="131.78395"
-         height="168.82127"
-         x="-332.59583"
-         y="383.49765"
-         rx="1.2551664"
-         ry="3.7514515"
-         transform="matrix(0.99939083,-0.03489951,0.03489951,0.99939083,0,0)" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath14952">
-      <ellipse
-         style="opacity:1;fill:#a53c3c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="ellipse14954"
-         cx="-271.34384"
-         cy="647.25604"
-         rx="69.057365"
-         ry="116.91089"
-         transform="matrix(0.99939083,-0.03489951,0.03489951,0.99939083,0,0)" />
-    </clipPath>
-    <pattern
-       y="0"
-       x="0"
-       height="6"
-       width="6"
-       patternUnits="userSpaceOnUse"
-       id="EMFhbasepattern" />
-    <filter
-       style="color-interpolation-filters:sRGB;"
-       inkscape:label=""
-       id="filter4198">
-      <feGaussianBlur
-         stdDeviation="2.51 2.51"
-         result="blur"
-         id="feGaussianBlur4200" />
-    </filter>
-    <mask
-       maskUnits="userSpaceOnUse"
-       id="mask4216">
-      <rect
-         ry="40"
-         y="-1325.6035"
-         x="-451.93805"
-         height="400.77808"
-         width="300.05896"
-         id="rect4218"
-         style="opacity:1;fill:#ff3737;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         transform="scale(-1,-1)" />
-    </mask>
-    <mask
-       maskUnits="userSpaceOnUse"
-       id="mask4222">
-      <rect
-         ry="40"
-         y="652.28351"
-         x="0"
-         height="400.77808"
-         width="300.05896"
-         id="rect4224"
-         style="opacity:1;fill:#ff3737;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
-    </mask>
-    <filter
-       style="color-interpolation-filters:sRGB;"
-       inkscape:label="Blur"
-       id="filter4188">
-      <feGaussianBlur
-         stdDeviation="2.35 2.34"
-         result="blur"
-         id="feGaussianBlur4190" />
-    </filter>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#aeffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35742971"
-     inkscape:cx="-92.256393"
-     inkscape:cy="-195.52606"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     units="px">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4774"
-       visible="true"
-       dotted="false"
-       color="#3f3fff"
-       opacity="0.03921569"
-       empcolor="#3f3fff"
-       empopacity="0.07843137"
-       enabled="false" />
-    <sodipodi:guide
-       position="150,200"
-       orientation="0,1"
-       id="guide8231"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="150,200"
-       orientation="1,0"
-       id="guide8233"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-652.36216)">
-    <rect
-       style="opacity:1;fill:#ff3737;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-       id="rect4164"
-       width="300.05896"
-       height="400.77808"
-       x="0"
-       y="652.28351"
-       ry="40" />
-    <path
-       style="fill:#ffffff;fill-opacity:0.78431373;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter4198)"
-       d="M -4.7687833,775.07096 C -9.6501835,741.99485 -16.84552,674.23676 -1.2788716,652.0641 18.998297,625.94378 233.50094,631.63117 263.31435,653.90999 276.21398,662.64856 59.158568,656.47658 35.908342,685.10013 13.199947,712.46776 0.65060847,818.18718 -4.7687833,775.07096 Z"
-       id="path4166"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccc"
-       mask="url(#mask4222)" />
-    <path
-       sodipodi:nodetypes="ccccc"
-       inkscape:connector-curvature="0"
-       id="path4221"
-       d="m 151.73588,1025.0177 c -3.32683,-9.3138 -10.24843,-68.45389 5.31821,-90.62655 20.27717,-26.12032 219.43558,-16.45796 231.55506,-9.93184 11.07433,5.31702 -178.60366,0.0589 -204.85126,34.86646 -21.59349,30.0006 -26.50086,82.17843 -32.02201,65.69193 z"
-       style="fill:#000000;fill-opacity:0.39215687;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter4198)"
-       transform="matrix(-1,0,0,-1,451.93806,1977.887)"
-       mask="url(#mask4216)" />
+<?xml version="1.0"?>
+<svg width="300" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1">
+ <defs id="defs4">
+  <clipPath clipPathUnits="userSpaceOnUse" id="clipPath4243">
+   <circle cx="-264.66" cy="-198.21" fill="#000000" fill-opacity="0.3" fill-rule="nonzero" id="circle4245" r="293.95" stroke="#000000" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="19.13"/>
+  </clipPath>
+  <clipPath clipPathUnits="userSpaceOnUse" id="clipPath7847">
+   <ellipse cx="394" cy="552.36" fill="#822600" fill-rule="nonzero" id="ellipse7849" rx="349.5" ry="216" stroke-dashoffset="0" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="12"/>
+  </clipPath>
+  <clipPath clipPathUnits="userSpaceOnUse" id="clipPath4243-1">
+   <circle cx="-264.66" cy="-198.21" fill="#000000" fill-opacity="0.3" fill-rule="nonzero" id="circle4245-4" r="293.95" stroke="#000000" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="19.13"/>
+  </clipPath>
+  <clipPath clipPathUnits="userSpaceOnUse" id="clipPath7876">
+   <circle cx="-264.66" cy="-198.21" fill="#000000" fill-opacity="0.3" fill-rule="nonzero" id="circle7878" r="293.95" stroke="#000000" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="19.13"/>
+  </clipPath>
+  <clipPath clipPathUnits="userSpaceOnUse" id="clipPath14693">
+   <rect fill="#a53c3c" fill-rule="nonzero" height="168.82" id="rect14695" rx="1.26" ry="3.75" stroke-dashoffset="0" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="8" transform="matrix(0.99939083,-0.03489951,0.03489951,0.99939083,0,0)" width="131.78" x="-332.6" y="383.5"/>
+  </clipPath>
+  <clipPath clipPathUnits="userSpaceOnUse" id="clipPath14952">
+   <ellipse cx="-271.34" cy="647.26" fill="#a53c3c" fill-rule="nonzero" id="ellipse14954" rx="69.06" ry="116.91" stroke-dashoffset="0" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="7" transform="matrix(0.99939083,-0.03489951,0.03489951,0.99939083,0,0)"/>
+  </clipPath>
+  <filter color-interpolation-filters="sRGB" id="filter4198">
+   <feGaussianBlur id="feGaussianBlur4200" result="blur" stdDeviation="2.51 2.51"/>
+  </filter>
+  <mask id="mask4216" maskUnits="userSpaceOnUse">
+   <rect fill="#ff3737" fill-rule="nonzero" height="400.78" id="rect4218" ry="40" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="10" transform="scale(-1,-1)" width="300.06" x="-451.94" y="-1325.6"/>
+  </mask>
+  <mask id="mask4222" maskUnits="userSpaceOnUse">
+   <rect fill="#ff3737" fill-rule="nonzero" height="400.78" id="rect4224" ry="40" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="10" width="300.06" x="0" y="652.28"/>
+  </mask>
+  <pattern height="6" id="EMFhbasepattern" patternUnits="userSpaceOnUse" width="6" x="0" y="0"/>
+ </defs>
+ <metadata id="metadata7">image/svg+xml</metadata>
+ <g class="layer">
+  <title>Layer 1</title>
+  <g id="layer1">
+   <rect fill="#b268e8" fill-rule="nonzero" height="400.78" id="rect4164" ry="40" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="10" width="300.06" y="-0.08"/>
+   <path d="m-4.77,122.71c-4.88,-33.08 -12.08,-100.83 3.49,-123.01c20.28,-26.12 234.78,-20.43 264.59,1.85c12.9,8.74 -204.15,2.57 -227.4,31.19c-22.71,27.37 -35.26,133.09 -40.68,89.97z" fill="#b268e8" fill-opacity="0.78" fill-rule="evenodd" filter="url(#filter4198)" id="path4166" mask="url(#mask4222)" stroke-width="1px"/>
+   <path d="m151.74,1677.38c-3.33,-9.32 -10.25,-68.46 5.31,-90.63c20.28,-26.12 219.44,-16.46 231.56,-9.93c11.07,5.32 -178.6,0.06 -204.85,34.87c-21.6,30 -26.5,82.17 -32.02,65.69z" fill="#b268e8" fill-opacity="0.39" fill-rule="evenodd" filter="url(#filter4198)" id="path4221" mask="url(#mask4216)" stroke-width="1px" transform="matrix(-1, 0, 0, -1, 451.938, 1977.89)"/>
   </g>
-</svg>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index a1f743a..11b073a 100644
--- a/index.html
+++ b/index.html
@@ -72,20 +72,23 @@
 		<div id="canvasContainer"></div>
 
     <script>
-				const loaderScript = new Set();
+				let currentScript = null;
 
         function loadScript(scriptName) {
+					if (window.cleanup) {
+						window.cleanup();
+					}
+
 					const container = document.getElementById("canvasContainer");
 					container.innerHTML = `<canvas id="myCanvas" width="1000" height="1000"></canvas>`;
 
 					const timestamp = new Date().getTime();
 
-					const script = document.createElement("script");
-					script.type = "module";
-					script.src = `build/${scriptName}?t=${timestamp}`;
+					currentScript = document.createElement("script");
+					currentScript.type = "module";
+					currentScript.src = `build/${scriptName}?t=${timestamp}`;
 
-					script.onload = () => {};
-					document.body.appendChild(script);
+					document.body.appendChild(currentScript);
 				}
 					
 				//script initial
diff --git a/src/deck.ts b/src/deck.ts
index 3a2da6a..632e30a 100644
--- a/src/deck.ts
+++ b/src/deck.ts
@@ -1,4 +1,5 @@
 import { Tile } from "./tile"
+import { Hand } from "./hand"
 
 export class Deck {
 	private tiles: Array<Tile>;
@@ -15,13 +16,13 @@ export class Deck {
 		size: number,
 		xOffset: number = 0,
 		yOffset: number = 0
-	): undefined {
+	): void {
 		let posX = x;
 		let posY = y;
 		for (let i = 1; i < 6; i++) {
-			if (i < 4) { // ordinaire
+			if (i < 4) { // famille
 				for (let j = 1; j < 10; j++) {
-					const tile = new Tile(i, j, false);
+					const tile = this.find(i, j) as NonNullable<Tile>;
 					tile.drawTile(ctx, posX, posY, size);
 					posX += (75 + xOffset) * size;
 				}
@@ -29,7 +30,7 @@ export class Deck {
 				posY += (100 + yOffset) * size;
 			} else if (i === 4) { //vent
 				for (let j = 1; j < 5; j++) {
-					const tile = new Tile(i, j, false);
+					const tile = this.find(i, j) as NonNullable<Tile>;
 					tile.drawTile(ctx, posX, posY, size);
 					posX += (75 + xOffset) * size;
 				}
@@ -37,7 +38,7 @@ export class Deck {
 				posY += (100 + yOffset) * size;
 			} else if (i === 5) { //vent
 				for (let j = 1; j < 4; j++) {
-					const tile = new Tile(i, j, false);
+					const tile = this.find(i, j) as NonNullable<Tile>;
 					tile.drawTile(ctx, posX, posY, size);
 					posX += (75 + xOffset) * size;
 				}
@@ -45,10 +46,77 @@ export class Deck {
 		}
 	}
 
+	public pop(): Tile {
+		if (this.tiles.length === 0) {
+		}
+		return this.tiles.pop() as NonNullable<Tile>;
+	}
+
+	public find(family: number, value: number): Tile | undefined {
+		let n = undefined;
+		for (let i = 0; i < this.tiles.length; i++) {
+			if (
+				this.tiles[i].getFamily() === family &&
+				this.tiles[i].getValue() === value
+			) {
+				n = i;
+			}
+		}
+		if (n !== undefined) {
+			[this.tiles[n as NonNullable<number>], this.tiles[0]] = [this.tiles[0], this.tiles[n as NonNullable<number>]];
+			return this.tiles.shift();
+		} else {
+			return undefined;
+		}
+	}
+
+	public count(family: number, value: number): number {
+		let n = 0;
+		for (let i = 0; i < this.tiles.length; i++) {
+			if (
+				this.tiles[i].getFamily() === family &&
+				this.tiles[i].getValue() === value
+			) {
+				n++;
+			}
+		}
+		return n;
+	}
+
+	public shuffle(): undefined {
+		let newArray: Array<Tile> = [];
+		while (this.tiles.length > 0) {
+			let n = Math.floor(Math.random() * this.tiles.length);
+			[this.tiles[n], this.tiles[0]] = [this.tiles[0], this.tiles[n]];
+			newArray.push(this.tiles.shift() as NonNullable<Tile>);
+		}
+		this.tiles = newArray;
+	}
+
+	public getRandomHand(): Hand {
+		let hand = new Hand();
+		this.shuffle();
+		for (let i = 0; i < 13; i++) {
+			hand.push(this.pop());
+		}
+		return hand;
+	}
+
+	public cleanup(): void {
+		this.tiles.forEach(tile => tile.cleanup());
+		this.tiles = [];
+	}
+
+	public async preload(): Promise<void> {
+		for (let i = 0; i < this.tiles.length; i++) {
+			await this.tiles[i].preloadImg();
+		}
+	}
+
 	private initTiles(allowRed: boolean): undefined {
 		for (let i = 1; i < 6; i++) {
-			if (i < 4) { // ordinaire
-				for (let j = 1; i < 10; i++) {
+			if (i < 4) { // famille
+				for (let j = 1; j < 10; j++) {
 					this.tiles.push(new Tile(i, j, false));
 					this.tiles.push(new Tile(i, j, false));
 					this.tiles.push(new Tile(i, j, false));
@@ -58,13 +126,13 @@ export class Deck {
 						this.tiles.push(new Tile(i, j, false));
 					}
 				}
-			} else if (i === 5) { //vent
+			} else if (i === 4) { // vent
 				for (let j = 1; j < 5; j++) {
 					for (let k = 0; k < 4; k++) {
 						this.tiles.push(new Tile(i, j, false));
 					}
 				}
-			} else if (i === 6) { //vent
+			} else if (i === 5) { // dragon
 				for (let j = 1; j < 4; j++) {
 					for (let k = 0; k < 4; k++) {
 						this.tiles.push(new Tile(i, j, false));
diff --git a/src/display/dp1.ts b/src/display/dp1.ts
index e39e1b7..d855bf9 100644
--- a/src/display/dp1.ts
+++ b/src/display/dp1.ts
@@ -1,91 +1,111 @@
-import { Tile } from "../tile"
 import { Deck } from "../deck"
 
-const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
-
-if (canvas) {
-  const ctx = canvas.getContext("2d");
-  
-  if (ctx) {
-		// tapis
-    ctx.fillStyle = "#007730";
-    ctx.fillRect(50, 50, 1000, 1000);
-		
-		// tuiles
-		let x = 180;
-		let y = 80;
-		let size = 0.75;
-		let xos = 50;
-		let yos = 100;
-		const deck = new Deck(false);
-		deck.displayFamilies(ctx, x, y, size, xos, yos);
-
-		// texte
-		ctx.fillStyle = "#DFDFFF";
-		ctx.font = "30px serif";
-
-		let delta = 50 * size;
-		let eps = 30 * size;
-		ctx.fillText("Caractère:", 55, y + delta + eps);
-		ctx.fillText("Rond:", 55, y + 3 * delta + yos * size + eps);
-		ctx.fillText("Bambou:", 55, y + 5 * delta + 2 * yos * size + eps);
-		ctx.fillText("Vent:", 55, y + 7 * delta + 3 * yos * size + eps);
-		ctx.fillText("Dragon:", 55, y + 9 * delta + 4 * yos * size + eps);
-
-		// familles
-		for (let i = 0; i < 3; i++) {
-			for (let j = 0; j < 9; j++) {
-				ctx.fillText(
-					String(j+1),
-					x + j * (xos + 75) * size + 30 * size,
-					y + i * (yos + 100) * size + 150 * size
-				);
-			}
-		}
-
-		// vent
-		ctx.fillText(
-			"Est",
-			x + 0 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Sud",
-			x + 1 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Ouest",
-			x + 2 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Nord",
-			x + 3 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		
-		// dragon
-		ctx.fillText(
-			"Rouge",
-			x + 0 * (xos + 75) * size,
-			y + 4 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Vert",
-			x + 1 * (xos + 75) * size,
-			y + 4 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Blanc",
-			x + 2 * (xos + 75) * size,
-			y + 4 * (yos + 100) * size + 150 * size
-		);
-
-  } else {
-    console.error("Impossible d'obtenir le contexte du canvas.");
-  }
-} else {
-  console.error("Canvas introuvable dans le DOM.");
+declare global {
+	interface Window {
+		clanup: () => void;
+	}
 }
 
+export {};
+
+async function preloadDeck(deck: Deck) {
+	await deck.preload();
+}
+
+async function display() {
+	const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
+
+	if (canvas) {
+  	const ctx = canvas.getContext("2d");
+
+  	if (ctx) {
+			// tapis
+    	ctx.fillStyle = "#007730";
+    	ctx.fillRect(50, 50, 1000, 1000);
+
+			// tuiles
+			let x = 180;
+			let y = 80;
+			let size = 0.75;
+			let xos = 50;
+			let yos = 100;
+			const deck = new Deck(false);
+			await preloadDeck(deck);
+			deck.displayFamilies(ctx, x, y, size, xos, yos);
+
+			// texte
+			ctx.fillStyle = "#DFDFFF";
+			ctx.font = "30px serif";
+
+			let delta = 50 * size;
+			let eps = 30 * size;
+			ctx.fillText("Caractère:", 55, y + delta + eps);
+			ctx.fillText("Rond:", 55, y + 3 * delta + yos * size + eps);
+			ctx.fillText("Bambou:", 55, y + 5 * delta + 2 * yos * size + eps);
+			ctx.fillText("Vent:", 55, y + 7 * delta + 3 * yos * size + eps);
+			ctx.fillText("Dragon:", 55, y + 9 * delta + 4 * yos * size + eps);
+
+			// familles
+			for (let i = 0; i < 3; i++) {
+				for (let j = 0; j < 9; j++) {
+					ctx.fillText(
+						String(j+1),
+						x + j * (xos + 75) * size + 30 * size,
+						y + i * (yos + 100) * size + 150 * size
+					);
+				}
+			}
+
+			// vent
+			ctx.fillText(
+				"Est",
+				x + 0 * (xos + 75) * size,
+				y + 3 * (yos + 100) * size + 150 * size
+			);
+			ctx.fillText(
+				"Sud",
+				x + 1 * (xos + 75) * size,
+				y + 3 * (yos + 100) * size + 150 * size
+			);
+			ctx.fillText(
+				"Ouest",
+				x + 2 * (xos + 75) * size,
+				y + 3 * (yos + 100) * size + 150 * size
+			);
+			ctx.fillText(
+				"Nord",
+				x + 3 * (xos + 75) * size,
+				y + 3 * (yos + 100) * size + 150 * size
+			);
+		
+			// dragon
+			ctx.fillText(
+				"Rouge",
+				x + 0 * (xos + 75) * size,
+				y + 4 * (yos + 100) * size + 150 * size
+			);
+			ctx.fillText(
+				"Vert",
+				x + 1 * (xos + 75) * size,
+				y + 4 * (yos + 100) * size + 150 * size
+			);
+			ctx.fillText(
+				"Blanc",
+				x + 2 * (xos + 75) * size,
+				y + 4 * (yos + 100) * size + 150 * size
+			);
+
+			window.cleanup = () => {
+				deck.cleanup();
+			}
+
+  	} else {
+    	console.error("Impossible d'obtenir le contexte du canvas.");
+  	}
+	} else {
+  	console.error("Canvas introuvable dans le DOM.");
+	}
+}
+
+display()
+
diff --git a/src/display/dp2.ts b/src/display/dp2.ts
index 783f7ea..b70ae31 100644
--- a/src/display/dp2.ts
+++ b/src/display/dp2.ts
@@ -1,91 +1,131 @@
-import { Tile } from "../tile"
-import { Deck } from "../deck"
+import { Deck } from "../deck";
+import { Hand } from "../hand"
+
+declare global {
+	interface Window {
+		cleanup: () => void;
+	}
+}
+export {}
 
 const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
 
-if (canvas) {
-  const ctx = canvas.getContext("2d");
-  
-  if (ctx) {
-		// tapis
-    ctx.fillStyle = "#007730";
-    ctx.fillRect(50, 50, 1000, 1000);
-		
-		// tuiles
-		let x = 180;
-		let y = 80;
-		let size = 0.75;
-		let xos = 50;
-		let yos = 100;
-		const deck = new Deck(false);
-		deck.displayFamilies(ctx, x, y, size, xos, yos);
-
-		// texte
-		ctx.fillStyle = "#DFDFFF";
-		ctx.font = "30px serif";
-
-		let delta = 50 * size;
-		let eps = 30 * size;
-		ctx.fillText("Caractère:", 55, y + delta + eps);
-		ctx.fillText("Pin:", 55, y + 3 * delta + yos * size + eps);
-		ctx.fillText("Bambou:", 55, y + 5 * delta + 2 * yos * size + eps);
-		ctx.fillText("Vent:", 55, y + 7 * delta + 3 * yos * size + eps);
-		ctx.fillText("Dragon:", 55, y + 9 * delta + 4 * yos * size + eps);
-
-		// familles
-		for (let i = 0; i < 3; i++) {
-			for (let j = 0; j < 9; j++) {
-				ctx.fillText(
-					String(j+1),
-					x + j * (xos + 75) * size + 30 * size,
-					y + i * (yos + 100) * size + 150 * size
-				);
-			}
-		}
-
-		// vent
-		ctx.fillText(
-			"Est",
-			x + 0 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Sud",
-			x + 1 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Ouest",
-			x + 2 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Nord",
-			x + 3 * (xos + 75) * size,
-			y + 3 * (yos + 100) * size + 150 * size
-		);
-		
-		// dragon
-		ctx.fillText(
-			"Rouge",
-			x + 0 * (xos + 75) * size,
-			y + 4 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Vert",
-			x + 1 * (xos + 75) * size,
-			y + 4 * (yos + 100) * size + 150 * size
-		);
-		ctx.fillText(
-			"Blanc",
-			x + 2 * (xos + 75) * size,
-			y + 4 * (yos + 100) * size + 150 * size
-		);
-
-  } else {
-    console.error("Impossible d'obtenir le contexte du canvas.");
-  }
-} else {
-  console.error("Canvas introuvable dans le DOM.");
+async function preloadDeck(deck: Deck) {
+	await deck.preload();
 }
 
+async function display () {
+	if (canvas) {
+  	const ctx = canvas.getContext("2d") as NonNullable<CanvasRenderingContext2D>;
+
+	  if (ctx) {
+			// double buffering
+			const offScreenCanvas = document.createElement('canvas') as HTMLCanvasElement;
+			offScreenCanvas.width = canvas.width;
+			offScreenCanvas.height = canvas.height;
+			const offScreenCtx = offScreenCanvas.getContext('2d') as NonNullable<CanvasRenderingContext2D>;
+
+			//animation parameter
+			let lastTime = 0;
+			const FPS = 30;
+			const interval = 1000 / FPS;
+
+			// tuiles
+			let x = 150;
+			let y = 150;
+			let os = 75;
+			let size = 0.75;
+			const deck = new Deck(false);
+			await preloadDeck(deck);
+
+			let hands: Array<Hand> = [];
+			for (let i = 0; i < 4; i++) {
+				const hand = deck.getRandomHand();
+				hand.sort();
+				hands.push(hand);
+			}
+
+			// interactive hand
+			const edeck = new Deck(false);
+			await edeck.preload();
+			const ehand = edeck.getRandomHand();
+			ehand.sort();
+
+			let selectedTile: number|undefined = undefined;
+
+			// function to draw
+			const drawCanvas = async () => {
+				// clean screeen
+				offScreenCtx.clearRect(0, 0, canvas.width, canvas.height);
+
+				// tapis
+  	  	offScreenCtx.fillStyle = "#007730";
+    		offScreenCtx.fillRect(50, 50, 1000, 1000);
+
+				// texte
+				offScreenCtx.fillStyle = "#DFDFFF";
+				offScreenCtx.font = "50px serif";
+				offScreenCtx.fillText("Exemples de main:", 65, 100);
+
+				// example hands
+				for (let i = 0; i < hands.length; i++) {
+					hands[i].drawHand(offScreenCtx, x, y + i * size * (100 + os), 5, size);
+				}
+
+				// dynamic hand
+				ehand.drawHand(offScreenCtx, x, 800, 5, size, selectedTile);
+
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(offScreenCanvas, 0, 0);
+			}
+
+			const animationLoop = (currentTime: number) => {
+				const deltaTime = currentTime - lastTime;
+
+				if (deltaTime >= interval) {
+					lastTime = currentTime;
+					drawCanvas();
+				}
+				requestAnimationFrame(animationLoop);
+			}
+
+			// mouse event
+			canvas.addEventListener(
+				"mousemove",
+				(event) => {
+					const rect = canvas.getBoundingClientRect();
+					const mouseX = event.clientX - rect.left - x;
+					const mouseY = event.clientY - rect.top;
+
+					let q = Math.floor(mouseX / (80 * size));
+					let r = mouseX - q * 80 * size;
+					if (r <= 75 && q >= 0 && q < 14 && mouseY >= 800 && mouseY <= 800 + 100*size) {
+						selectedTile = q;
+					} else {
+						selectedTile = undefined;
+					}
+				}
+			);
+
+			requestAnimationFrame(animationLoop);
+
+			window.cleanup = () => {
+				deck.cleanup();
+				hands.forEach(hand => hand.cleanup());
+				hands = [];
+				edeck.cleanup();
+				ehand.cleanup();
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				offScreenCtx.clearRect(0, 0, offScreenCanvas.width, offScreenCanvas.height);
+				selectedTile = undefined;
+			}
+
+  	} else {
+    	console.error("Impossible d'obtenir le contexte du canvas.");
+  	}
+	} else {
+  	console.error("Canvas introuvable dans le DOM.");
+	}
+}
+
+display();
diff --git a/src/hand.ts b/src/hand.ts
index 976c6a1..412f2fa 100644
--- a/src/hand.ts
+++ b/src/hand.ts
@@ -1,10 +1,24 @@
 import { Tile } from "./tile"
 
-export class hand {
+export class Hand {
 	private tiles: Array<Tile>;
 	
-	public constructor(tiles: Array<Tile> = []) {
-		this.tiles = tiles;
+	public constructor(stiles: string = "") {
+		this.tiles = [];
+		for (let i = 0; 2 * i + 1 < stiles.length; i++) {
+			let ss = stiles.substring(2*i, 2*(i+1));
+			if (ss[0] === "m") {
+				this.tiles.push(new Tile(1, Number(ss[1]), false));
+			} else if (ss[0] === "p") {
+				this.tiles.push(new Tile(2, Number(ss[1]), false));
+			} else if (ss[0] === "s") {
+				this.tiles.push(new Tile(3, Number(ss[1]), false));
+			} else if (ss[0] === "w") {
+				this.tiles.push(new Tile(4, Number(ss[1]), false));
+			} else if (ss[0] === "d") {
+				this.tiles.push(new Tile(5, Number(ss[1]), false));
+			} else {}
+		}
 	}
 
 	public push(tile: Tile): undefined {
@@ -13,5 +27,53 @@ export class hand {
 
 	public pop(): Tile|undefined {
 		return this.tiles.pop();
-	}		
+	}
+
+	public sort(): undefined {
+		for (let i = 0; i < this.tiles.length; i++) {
+			for (let j = 0; j < this.tiles.length-1; j++) {
+				if (!this.tiles[j].isLessThan(this.tiles[j+1])) {
+					[this.tiles[j], this.tiles[j+1]] = [this.tiles[j+1], this.tiles[j]];
+				}
+			}
+		}
+	}
+	
+	public drawHand (
+		ctx: CanvasRenderingContext2D,
+		x: number,
+		y: number,
+		offset: number,
+		size: number,
+		focusedTiled: number|undefined = undefined
+	): void {	
+		for (var i = 0; i < this.tiles.length; i++) {
+			if (i === focusedTiled) {
+				this.tiles[i].drawTile(
+					ctx,
+					x + i * 75 * size + i * offset * size,
+					y - 25 * size,
+					size
+				);
+			} else {
+				this.tiles[i].drawTile(
+					ctx,
+					x + i * 75 * size + i * offset * size,
+					y,
+					size
+				);
+			}
+		}
+	}
+
+	public async preload(): Promise<void> {
+		for (let i = 0; i < this.tiles.length; i++) {
+			await this.tiles[i].preloadImg();
+		}
+	}
+
+	public cleanup(): void {
+		this.tiles.forEach(tile => tile.cleanup());
+		this.tiles = [];
+	}
 }
diff --git a/src/tile.ts b/src/tile.ts
index d50fbab..a68916c 100644
--- a/src/tile.ts
+++ b/src/tile.ts
@@ -2,13 +2,21 @@ export class Tile {
 	private family: number;
 	private value: number;
 	private red: boolean;
+	private loadded: boolean;
 	private imgSrc: string;
+	private imgFront: HTMLImageElement;
+	private imgBack: HTMLImageElement;
+	private img: HTMLImageElement;
 		
 	public constructor(family: number, value: number	, red: boolean) {
 		this.family = family;
 		this.value = value;
 		this.red = red;
+		this.loadded = false;
 		this.imgSrc = "";
+		this.imgFront = new Image();
+		this.imgBack = new Image();
+		this.img = new Image();
 		this.setImgSrc();
 	}
 
@@ -29,21 +37,31 @@ export class Tile {
 		x: number,
 		y: number,
 		size: number
-	): undefined {
-		const imgFront = new Image();
-		imgFront.src = "/img/Regular/Front.svg";
-		imgFront.onload = () => {
-			ctx.drawImage(imgFront, x, y, 75 * size, 100 * size);
-		};
-		
-		const img = new Image();
-		img.src = this.imgSrc;
-		img.onload = () => {
-			ctx.drawImage(img, x, y, 75 * size, 100 * size);
-		};
+	): void {
+		ctx.drawImage(this.imgFront, x, y, 75 * size, 100 * size);
+		ctx.drawImage(this.img, x, y, 75 * size, 100 * size);
 	}
 
-	private setImgSrc(): undefined {
+	public isLessThan(t: Tile): boolean {
+		if (this.family < t.family) {
+			return true;
+		} else if (this.family === t.family && this.value <= t.value) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	public cleanup(): void {
+		this.imgFront.onload = null;
+		this.imgFront.onerror = null;
+		this.imgBack.onload = null;
+		this.imgBack.onerror = null;
+		this.img.onload = null;
+		this.img.onerror = null;
+	}
+
+	private setImgSrc(): void {
 		this.imgSrc = "/img/Regular/"
 		if (this.family <= 3) {
 			this.imgSrc += ["", "Man", "Pin", "Sou"][this.family];
@@ -58,4 +76,20 @@ export class Tile {
 			this.imgSrc += ["", "Chun", "Hatsu", "Haku"][this.value] + ".svg";
 		}
 	}
+
+	public async preloadImg(): Promise<void> {
+		await Promise.all([
+			this.loadImg(this.imgFront, "/img/Regular/Front.svg"),
+			this.loadImg(this.imgBack, "/img/Regular/Back.svg"),
+			this.loadImg(this.img, this.imgSrc)
+		]);
+	}
+
+	private loadImg(img: HTMLImageElement, src: string): Promise<void> {
+		return new Promise((resolve, reject) => {
+			img.onload = () => resolve();
+			img.onerror = () => reject();
+			img.src = src;
+		});
+	}
 }