Gestion de personnage et de pool de personnage en javascript vanilla
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. <html>
  2. <head>
  3. <meta charset="utf8">
  4. <link rel="stylesheet" type="text/css" href="style/anim.css">
  5. <script src="game/dice.js"></script>
  6. <script src="data/names.js"></script>
  7. <script src="data/l5r_data.js"></script>
  8. <script src="helper/random.js"></script>
  9. <script src="game/display.js"></script>
  10. <script src="game/character.js"></script>
  11. <script src="game/l5r.js"></script>
  12. <script src="data/players.js"></script>
  13. <script src="data/npc.js"></script>
  14. <script>
  15. var npcs = [];
  16. var result = [];
  17. var result1 = [];
  18. var result2 = [];
  19. var current_target= 0;
  20. function target(){
  21. return characters.at(current_target) ;
  22. }
  23. var npc_summary = document.getElementById("npc.summary");
  24. function generateNPC(){
  25. var newNPC = new Character();
  26. newNPC.generate( document.getElementById("npc-level").value );
  27. return newNPC;
  28. }
  29. function generateNPCs( size ){
  30. let result = [];
  31. for(let i = 0; i < size ; i++){
  32. result[i] = generateNPC( i );
  33. }
  34. return result;
  35. }
  36. function skirmish( size ){
  37. let npcs = generateNPCs( size );
  38. for(let i = 0; i < size ; i+=2){
  39. if( (npcs[i]) && (npcs[i + 1]))
  40. result[i] = fight(npcs[i], npcs[i + 1]);
  41. }
  42. for( let i = 0; i < size ; i++ ){
  43. ;
  44. }
  45. }
  46. function swissContest( size ){
  47. let result = [];
  48. let npcs = generateNPCs( size );
  49. for(let i = 0; i < npcs.length; i++){
  50. result[i] = [];
  51. for(let j = 0; j < npcs.length; j++){
  52. result[i][j] = ( fight( npcs[i], npcs[j] ) );
  53. npcs[i].fullHeal();
  54. npcs[j].fullHeal();
  55. }
  56. }
  57. return result;
  58. }
  59. function winRateSwissContest( array, stat){
  60. let result = [];
  61. for(let i = 0; i < array.length; i++){
  62. let winrate = 0;
  63. let total = 0;
  64. for(let j = 0; j < array[i].length; j++){
  65. winrate += ( array[i][j].winner_side == "attacker" )? 1: 0;
  66. total++;
  67. }
  68. result[i] = winrate/total;
  69. }
  70. return result;
  71. }
  72. function hasClass( elem, className){
  73. for( let i = 0 ; i < elem.classList.length ; i++ )
  74. if( elem.classList[ i ] === className )
  75. return elem;
  76. return 0;
  77. };
  78. function getClassFromList( list, className ){
  79. let result = [];
  80. for( let i = 0 ; i < list.childNodes.length ; i++ )
  81. if( hasClass( list.childNodes[ i ], className ))
  82. result.push( list.childNodes[ i ] );
  83. return result;
  84. }
  85. function inputFromElementList( list, input_type ){
  86. let result = [];
  87. for( let i = 0 ; i ; i++ )
  88. if( list[ i ].getAttributeNames().includes( input_type ))
  89. result.push( list[i] );
  90. return result;
  91. }
  92. function display_data( data, anchor ){
  93. let html_display = document.getElementById( anchor );
  94. let headers = [ "name", "initiative", "TN", "attack", "damage", "wounds" ];
  95. let hs = document.createElement("tr");
  96. for(let i = 0; i < headers.length ; i++){
  97. let h = document.createElement("th");
  98. h.innerText = headers[ i ];
  99. hs.appendChild( h );
  100. }
  101. html_display.appendChild( hs ) ;
  102. for(let i = 0; i < data.length ; i++){
  103. let line = document.createElement( "tr" );
  104. line.setAttribute("id", i + "-" + anchor );
  105. let name = document.createElement("td");
  106. name.innerText = data[i]["get"+capitalize( headers[0] )]();
  107. line.appendChild( name );
  108. for(let j = 1; j < headers.length ; j++){
  109. let cell = document.createElement("td");
  110. let button = document.createElement("button");
  111. button.setAttribute("class", headers[j]);
  112. let id = i + "-"+j+"-" + anchor;
  113. button.innerText = headers[j];
  114. button.addEventListener('click', function(event) {
  115. document.getElementById( id ).value = data[i]["get"+capitalize( headers[j] )]();
  116. });
  117. cell.appendChild( button );
  118. let result = document.createElement("input");
  119. result.setAttribute("id", id);
  120. result.setAttribute("type", "text");
  121. result.setAttribute("class", "result");
  122. cell.appendChild( result );
  123. line.appendChild( cell );
  124. }
  125. let cell1 = document.createElement("td");
  126. let targeted = document.createElement("input");
  127. targeted.setAttribute("type", "checkbox");
  128. targeted.setAttribute("class", "targeted");
  129. targeted.checked = false;
  130. targeted.addEventListener('click', function(event) {
  131. let targeteds = document.getElementsByClassName( "targeted" );
  132. for(let targeted in targeteds){
  133. if(targeteds[targeted] != this)
  134. targeteds[targeted].checked = false;
  135. current_target = this.parentNode.parentNode.id.split("-")[0];
  136. }
  137. });
  138. cell1.appendChild( targeted );
  139. line.appendChild( cell1 );
  140. cell2 = document.createElement("td");
  141. let attacking = document.createElement("input");
  142. attacking.setAttribute("type", "button");
  143. attacking.setAttribute("class", "attacking");
  144. attacking.value = "Attack";
  145. attacking.checked = false;
  146. attacking.addEventListener('click', function(event) {
  147. characters.at( this.parentNode.parentNode.id.split("-")[0] ).attacking( target() );
  148. triggerField( "Wounds" );
  149. triggerField( "TN" );
  150. });
  151. cell2.appendChild( attacking );
  152. line.appendChild( cell2 );
  153. let cell_switchStance = document.createElement("td");
  154. let switchStance = document.createElement("input");
  155. switchStance.setAttribute("type", "button");
  156. switchStance.value = "Attack Stance";
  157. cell_switchStance.appendChild( switchStance );
  158. cell_switchStance.addEventListener('click', function(event) {
  159. let charac = characters.at( this.parentNode.id.split("-")[0] );
  160. charac.switchStance();
  161. event.target.value = charac.stance;
  162. triggerField( "TN" );
  163. });
  164. line.appendChild( cell_switchStance );
  165. html_display.appendChild( line );
  166. }
  167. }
  168. function popAssociativeMaker( associative, anchor ){
  169. let result = document.createElement( "div" );
  170. result.setAttribute( "class", "popup" );
  171. let exit = document.createElement("input");
  172. exit.setAttribute("type", "button");
  173. exit.setAttribute("class", "exit");
  174. exit.value = "×";
  175. exit.addEventListener('click', function(event) {
  176. anchor.value = JSON.stringify( formToData( result ) );
  177. result.parentNode.removeChild( result );
  178. });
  179. result.appendChild( exit );
  180. for( let i in associative ){
  181. switch( typeof varType ){
  182. case "function":
  183. break;
  184. case "object":
  185. result.appendChild( inputField( i, associative[ i ] || "", true, null, function(event) {
  186. this.value = popObjectMaker( associative[ i ], line );
  187. } ));
  188. break;
  189. default:
  190. result.appendChild( inputField( i, associative[ i ] || "") );
  191. }
  192. }
  193. let add = document.createElement("input");
  194. add.setAttribute("type", "button");
  195. add.setAttribute("class", "add");
  196. add.value = "+";
  197. add.addEventListener('click', function(event) {
  198. result.appendChild( inputField( "", "", true) );
  199. });
  200. result.appendChild( add );
  201. document.getElementsByTagName('body')[0].appendChild( result );
  202. return result;
  203. }
  204. function inputField( field, value, modifiable, label_onclick, input_onclick ){
  205. field = (( typeof field === "unsigned" ) || !field )? "" : field;
  206. value = (( typeof value === "unsigned" ) || !value )? "" : value;
  207. modifiable = (( typeof modifiable === "unsigned" ) || !modifiable )? false : true ;
  208. let line= document.createElement("div");
  209. let input = document.createElement("input");
  210. let label ;
  211. if( modifiable ){
  212. label = document.createElement("input");
  213. label.setAttribute("type", "text");
  214. }else{
  215. label = document.createElement("label");
  216. }
  217. line.setAttribute("class", "line");
  218. label.setAttribute("class", "label");
  219. label.innerText = field;
  220. if( label_onclick instanceof Function )
  221. label.addEventListener('click', label_onclick );
  222. line.appendChild( label );
  223. input.setAttribute("type", "text");
  224. input.setAttribute("class", "maker");
  225. input.value = value;
  226. if( input_onclick instanceof Function )
  227. input.addEventListener('click', label_onclick );
  228. input.checked = false;
  229. line.appendChild( input );
  230. return line;
  231. }
  232. function popObjectMaker( object, anchor, dictionnary ){
  233. let prototype = new object;
  234. let result = document.createElement( "div" );
  235. result.setAttribute( "class", "popup" );
  236. let exit = document.createElement("input");
  237. exit.setAttribute("type", "button");
  238. exit.setAttribute("class", "exit");
  239. exit.value = "×";
  240. if( typeof dictionnary === "object" )
  241. exit.addEventListener('click', function(event) {
  242. formToDictonnary( result, dictionnary);});
  243. else
  244. exit.addEventListener('click', function(event) {
  245. saveAndExitForm( result);});
  246. result.appendChild( exit );
  247. for( let i in prototype ){
  248. let varType = prototype[i];
  249. let line= document.createElement("div");
  250. let input = document.createElement("input");
  251. let label = document.createElement("label");
  252. switch( typeof varType ){
  253. case "function":
  254. break;
  255. case "object":
  256. line= document.createElement("div");
  257. line.setAttribute("class", "line");
  258. label.setAttribute("type", "button");
  259. label.classList.add("label");
  260. label.innerText = i;
  261. line.appendChild( label );
  262. input.setAttribute("type", "text");
  263. input.classList.add("json");
  264. input.classList.add("maker");
  265. input.value = prototype[ i ] || "";
  266. input.checked = false;
  267. input.addEventListener('click', function(event) {
  268. this.value = popAssociativeMaker( prototype[ i ], input );
  269. });
  270. line.appendChild( input );
  271. result.appendChild( line );
  272. break;
  273. default:
  274. line.setAttribute("class", "line");
  275. label.setAttribute("type", "button");
  276. label.classList.add("label");
  277. label.innerText = i;
  278. line.appendChild( label );
  279. input.setAttribute("type", "text");
  280. input.classList.add("maker");
  281. input.value = prototype[ i ] || "";
  282. input.checked = false;
  283. line.appendChild( input );
  284. result.appendChild( line );
  285. }
  286. }
  287. if( anchor instanceof Element )
  288. anchor.appendChild( result );
  289. else
  290. document.getElementsByTagName('body')[0].appendChild( result );
  291. return result;
  292. }
  293. function formToData( form ){
  294. let lines = form.getElementsByClassName( "line" ) ;
  295. let data = {} ;
  296. for ( let i = 0 ; i < lines.length ; i++ ){
  297. let labels = getClassFromList( lines[ i ], "label");
  298. let makers = getClassFromList( lines[ i ], "maker");
  299. if(( lines[ i ] instanceof Element ) && ( labels[0] || makers[0] )){
  300. let index = labels[0].value || labels[0].innerText;
  301. let value = makers[0].value || makers[0].innerText ;
  302. value = (hasClass( makers[0], "json" ))? JSON.parse( value ) : value ;
  303. data[ index ] = value ;
  304. }
  305. }
  306. return data ;
  307. }
  308. function saveAndExitForm( form ){
  309. form.value = JSON.stringify( formToData( form ) );
  310. form.parentNode.removeChild( form );
  311. }
  312. function formToDictonnary( form, dictionnary){
  313. return dictionnary.create( formToData( form ) );
  314. }
  315. function triggerField( field ){
  316. let fields = document.getElementsByClassName( field ) ;
  317. for (let i = 0 ; i < fields.length ; i++ ){
  318. fields[i].click();
  319. }
  320. }
  321. function main(){
  322. display_data( characters.pool, "players_summary");
  323. triggerField( "wounds" );
  324. triggerField( "TN" );
  325. }
  326. </script>
  327. <style>
  328. .result{
  329. width : 3em;
  330. }
  331. </style>
  332. </head>
  333. <body onload="main()">
  334. <button onclick="popObjectMaker( Character )">Créer un Personnage</button>
  335. <table id="players_summary"></div>
  336. <div id="npc_summary"></div>
  337. </table>
  338. <button onclick="generateNPC()">Générer NPC</button><input id="npc-level" type="number" value="1"/><select id="npc-role"></select>
  339. <button onclick="popObjectMaker( Character, null, characters )">Générer Personnage</button>
  340. </body>
  341. </html>