227 lines
6.2 KiB
HTML
227 lines
6.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Rulebook</title>
|
||
|
|
|
||
|
|
<!-- meta -->
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="author" content="">
|
||
|
|
|
||
|
|
<!--=include includes/_links.html -->
|
||
|
|
<script src="bestiaire.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
td.details-control {
|
||
|
|
cursor: pointer;
|
||
|
|
color:rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
tr.shown td.details-control {
|
||
|
|
color:rgba(0,0,0,0.8);
|
||
|
|
}
|
||
|
|
#datatable > tbody > tr:not(.even):not(.odd) > td {
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-datatable {
|
||
|
|
background-color:white;
|
||
|
|
padding:1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
table.dataTable {
|
||
|
|
border-radius:3px;
|
||
|
|
border:1px solid rgba(0,0,0,0.3);
|
||
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
table.dataTable table td {
|
||
|
|
background-color:rgba(0,0,0,0.025);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.pagination li {
|
||
|
|
margin-left:0px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="wrapper">
|
||
|
|
<!--=include includes/_headerbar.html -->
|
||
|
|
|
||
|
|
<div class="container mt-2">
|
||
|
|
<!--=include includes/_breadcrumb.html -->
|
||
|
|
<div class="row">
|
||
|
|
<main class="col-md-12">
|
||
|
|
<p><a class="btn btn-secondary" href="index.html"><i class="fa fa-caret-left"></i> Retour</a></p>
|
||
|
|
<div class="card card-brown card-datatable">
|
||
|
|
<table id="datatable" class="table table-card card-brown">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Nom</th>
|
||
|
|
<th>PV</th>
|
||
|
|
<th>PE</th>
|
||
|
|
<th>FOR</th>
|
||
|
|
<th>CON</th>
|
||
|
|
<th>HAB</th>
|
||
|
|
<th>INT</th>
|
||
|
|
<th>SAG</th>
|
||
|
|
<th>VOL</th>
|
||
|
|
<th>CHA</th>
|
||
|
|
<th>DIS</th>
|
||
|
|
<th>REL</th>
|
||
|
|
<th>PER</th>
|
||
|
|
<th><i class="fa fa-file"></i></th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--=include includes/_footer.html -->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function format ( d ) {
|
||
|
|
// `d` is the original data object for the row
|
||
|
|
return '<table cellpadding="11" cellspacing="0" border="0" style="width:100%;">'+
|
||
|
|
'<tr>'+
|
||
|
|
'<td><strong>Armures:</strong></td>'+
|
||
|
|
'<td>5 (physique) ; 1 (speciale) ; 2 (mentale)</td>'+
|
||
|
|
'</tr>'+
|
||
|
|
'<tr>'+
|
||
|
|
'<td><strong>Dés:</strong></td>'+
|
||
|
|
'<td>1D4 (VIG) ; 1D3 (JET) ; 1D4 (PSY)</td>'+
|
||
|
|
'</tr>'+
|
||
|
|
'<tr>'+
|
||
|
|
'<td><strong>Pouvoir:</strong></td>'+
|
||
|
|
'<td>' + d.pow1 + ' </td>'+
|
||
|
|
'</tr>'+
|
||
|
|
'<tr>'+
|
||
|
|
'<td><strong>Pouvoir:</strong></td>'+
|
||
|
|
'<td>' + d.pow2 + '</td>'+
|
||
|
|
'</tr>'+
|
||
|
|
'</table>';
|
||
|
|
}
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
var table = $('#datatable').DataTable( {
|
||
|
|
"ajax": '/datas/creatures/animals.json',
|
||
|
|
"columns": [
|
||
|
|
{ "data": "name" },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getPV(data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getPE(data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("FOR", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("CON", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("HAB", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("INT", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("SAG", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("VOL", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("CHA", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("DIS", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("REL", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{ "data": "level",
|
||
|
|
"render": function ( data, type, row, meta ) {
|
||
|
|
console.table(row);
|
||
|
|
return getStat("PER", data, row.size, row.trait);
|
||
|
|
} },
|
||
|
|
{
|
||
|
|
"className": 'details-control',
|
||
|
|
"orderable": false,
|
||
|
|
"data": null,
|
||
|
|
"defaultContent": '<i class="fa fa-plus-square"></i>'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add event listener for opening and closing details
|
||
|
|
$('#datatable tbody').on('click', 'td.details-control', function () {
|
||
|
|
var tr = $(this).closest('tr');
|
||
|
|
var row = table.row( tr );
|
||
|
|
|
||
|
|
if ( row.child.isShown() ) {
|
||
|
|
// This row is already open - close it
|
||
|
|
row.child.hide();
|
||
|
|
tr.removeClass('shown');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Open this row
|
||
|
|
row.child( format(row.data()) ).show();
|
||
|
|
tr.addClass('shown');
|
||
|
|
}
|
||
|
|
} );
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
// $(document).ready(function () {
|
||
|
|
// $.getJSON('/datas/creatures/animals.json', function(data) {
|
||
|
|
// $("#dataheader").text(data["name"])
|
||
|
|
// console.log("test")
|
||
|
|
// });
|
||
|
|
// });
|
||
|
|
// $.getJSON( "datas/creatures/animals.json", function( data ) {
|
||
|
|
// var items = [];
|
||
|
|
// $.each( data, function( key, val ) {
|
||
|
|
// items.push( "<li id='" + key + "'>" + val + "</li>" );
|
||
|
|
// });
|
||
|
|
//
|
||
|
|
// $( "<ul/>", {
|
||
|
|
// "class": "my-new-list",
|
||
|
|
// html: items.join( "" )
|
||
|
|
// }).appendTo( "body" );
|
||
|
|
// });
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|