pelican-jdr/static/bestiaire.html
Kazhnuz 4e8af1fd5f a
2021-10-05 21:03:43 +02:00

226 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>