370 lines
20 KiB
HTML
370 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" ng-app="app">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>L'Éternelle moisson - Dofus Ocre</title>
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
<style>
|
|
body {
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.label {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body ng-controller="AppCtrl as appCtrl">
|
|
<a href="https://github.com/Mopolo/Eternelle-Moisson"><img style="position: absolute; top: 0; right: 0; border: 0;z-index: 10000;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">L'Éternelle moisson ({{ appCtrl.owned() }}/{{ appCtrl.monsters.length }})</a>
|
|
</div>
|
|
<div id="navbar" class="collapse navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li ng-class="{active: appCtrl.sorting == 0}"><a href="#" ng-click="appCtrl.chooseSorting(0)">Ordre alphabétique</a></li>
|
|
<li ng-class="{active: appCtrl.sorting == 1}"><a href="#" ng-click="appCtrl.chooseSorting(1)">Zones</a></li>
|
|
<li ng-class="{active: appCtrl.sorting == 2}"><a href="#" ng-click="appCtrl.chooseSorting(2)">Étapes</a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#" data-toggle="modal" data-target="#saveModal">Sauvegarde</a></li>
|
|
<li><a href="#" data-toggle="modal" data-target="#helpModal">Aide</a></li>
|
|
<li><a href="#" data-toggle="modal" data-target="#aboutModal">A propos</a></li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-3">
|
|
Monstres : {{ appCtrl.owned('monster') }}/{{ appCtrl.total('monster') }}
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="{{ appCtrl.ownedPercentage('monster') }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ appCtrl.ownedPercentage('monster') }}%;">
|
|
{{ appCtrl.ownedPercentage('monster') }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3">
|
|
Boss : {{ appCtrl.owned('boss') }}/{{ appCtrl.total('boss') }}
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="{{ appCtrl.ownedPercentage('boss') }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ appCtrl.ownedPercentage('boss') }}%;">
|
|
{{ appCtrl.ownedPercentage('boss') }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3">
|
|
Archimonstres : {{ appCtrl.owned('archi') }}/{{ appCtrl.total('archi') }}
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="{{ appCtrl.ownedPercentage('archi') }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ appCtrl.ownedPercentage('archi') }}%;">
|
|
{{ appCtrl.ownedPercentage('archi') }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3">
|
|
Etapes : {{ appCtrl.completedSteps() }}/{{ appCtrl.totalSteps }}
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="{{ appCtrl.ownedPercentage('archi') }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ appCtrl.ownedPercentage('archi') }}%;">
|
|
{{ appCtrl.ownedPercentage('archi') }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
Total : {{ appCtrl.owned() }}/{{ appCtrl.monsters.length }}
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="{{ appCtrl.ownedPercentage() }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ appCtrl.ownedPercentage() }}%;">
|
|
{{ appCtrl.ownedPercentage() }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-3">
|
|
Nombre de chasses simultanées :
|
|
<input class="form-control" type="number" ng-model="appCtrl.simultaneous" ng-change="appCtrl.saveSimultaneous()">
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="appCtrl.sorting == 0">
|
|
|
|
<div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="appCtrl.displayOwnedMonsters" ng-change="appCtrl.toggleOwnedMonsters()" /> Masquer les monstres possédés
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-stripped table-hover table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:100px;">Possédé</th>
|
|
<th>Nom</th>
|
|
<th>Étape</th>
|
|
<th>Zones</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr ng-repeat="monster in appCtrl.monsters | orderBy:'name'" ng-class="{success: appCtrl.isOwned(monster)}" ng-hide="appCtrl.displayOwnedMonsters && appCtrl.isOwned(monster)">
|
|
<td><button class="btn btn-info btn-xs" ng-click="appCtrl.increase(monster)"><i class="glyphicon glyphicon-plus"></i></button> {{ monster.owned ? monster.owned : 0 }} <button class="btn btn-info btn-xs" ng-click="appCtrl.decrease(monster)"><i class="glyphicon glyphicon-minus"></i></button></td>
|
|
<td>
|
|
<i class="glyphicon glyphicon-star" ng-if="monster.type == 'boss'"></i>
|
|
<i class="glyphicon glyphicon-fire" ng-if="monster.type == 'archi'"></i>
|
|
{{ monster.name }}
|
|
</td>
|
|
<td>{{ monster.step }}</td>
|
|
<td>
|
|
<span class="label label-primary" ng-repeat="zone in monster.zones">{{ zone }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div ng-if="appCtrl.sorting == 1">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="appCtrl.displayFinishedZones" ng-change="appCtrl.toggleFinishedZones()" /> Masquer les zones terminées
|
|
</label>
|
|
</div>
|
|
<div class="panel panel-default" ng-repeat="(zone, monsters) in appCtrl.zones" ng-hide="appCtrl.displayFinishedZones && appCtrl.owned(false, zone) == appCtrl.total(false, zone)">
|
|
<div class="panel-heading">
|
|
{{ zone }} ({{ appCtrl.owned(false, zone) }}/{{ appCtrl.total(false, zone) }})
|
|
|
|
<div class="pull-right">
|
|
<button class="btn btn-info btn-xs" ng-click="appCtrl.toggleZone(zone)">
|
|
Tout <span ng-if="appCtrl.owned(false, zone) == appCtrl.total(false, zone)">dé</span>cocher
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:100px;">Possédé</th>
|
|
<th>Nom</th>
|
|
<th>Étape</th>
|
|
<th>Zones</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr ng-repeat="monster in monsters" ng-class="{success: appCtrl.isOwned(monster)}">
|
|
<td><button class="btn btn-info btn-xs" ng-click="appCtrl.increase(monster)"><i class="glyphicon glyphicon-plus"></i></button> {{ monster.owned ? monster.owned : 0 }} <button class="btn btn-info btn-xs" ng-click="appCtrl.decrease(monster)"><i class="glyphicon glyphicon-minus"></i></button></td>
|
|
<td>
|
|
<i class="glyphicon glyphicon-star" ng-if="monster.type == 'boss'"></i>
|
|
<i class="glyphicon glyphicon-fire" ng-if="monster.type == 'archi'"></i>
|
|
{{ monster.name }}
|
|
</td>
|
|
<td>{{ monster.step }}</td>
|
|
<td>
|
|
<span class="label label-primary" ng-repeat="zone in monster.zones">{{ zone }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="appCtrl.sorting == 2">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="appCtrl.displayFinishedSteps" ng-change="appCtrl.toggleFinishedSteps()" /> Masquer les étapes terminées
|
|
</label>
|
|
</div>
|
|
<div class="panel panel-default" ng-repeat="(step, monsters) in appCtrl.steps" ng-hide="step == 0 || (appCtrl.displayFinishedSteps && appCtrl.owned(false, false, step) == appCtrl.total(false, false, step))">
|
|
<div class="panel-heading">
|
|
Étape {{ step }} ({{ appCtrl.owned(false, false, step) }}/{{ appCtrl.total(false, false, step) }})
|
|
|
|
<div class="pull-right">
|
|
<button class="btn btn-info btn-xs" ng-click="appCtrl.toggleStep(step)">
|
|
Tout <span ng-if="appCtrl.owned(false, false, step) == appCtrl.total(false, false, step)">dé</span>cocher
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:100px;">Possédé</th>
|
|
<th>Nom</th>
|
|
<th>Zones</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr ng-repeat="monster in monsters" ng-class="{success: appCtrl.isOwned(monster)}">
|
|
<td><button class="btn btn-info btn-xs" ng-click="appCtrl.increase(monster)"><i class="glyphicon glyphicon-plus"></i></button> {{ monster.owned ? monster.owned : 0 }} <button class="btn btn-info btn-xs" ng-click="appCtrl.decrease(monster)"><i class="glyphicon glyphicon-minus"></i></button></td>
|
|
<td>
|
|
<i class="glyphicon glyphicon-star" ng-if="monster.type == 'boss'"></i>
|
|
<i class="glyphicon glyphicon-fire" ng-if="monster.type == 'archi'"></i>
|
|
{{ monster.name }}
|
|
</td>
|
|
<td>
|
|
<span class="label label-primary" ng-repeat="zone in monster.zones">{{ zone }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<p>
|
|
Cet outil facilite la gestion de la quête du Dofus Ocre.
|
|
<a href="https://github.com/Mopolo/Eternelle-Moisson">Voir sur Github</a>
|
|
<span class="pull-right">Dofus est la propriété d'Ankama</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title" id="saveModalLabel">Gestion de la sauvegarde</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="inputSave">Sauvegarde actuelle</label>
|
|
<input type="text" name="save" id="inputSave" class="form-control" ng-model="appCtrl.saveData" />
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="form-group">
|
|
<label for="inputLoad">Charger une sauvegarde</label>
|
|
<div class="input-group">
|
|
<input type="text" name="load" id="inputLoad" class="form-control" ng-model="appCtrl.loadData" />
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-warning" type="button" ng-click="appCtrl.load()" ng-disabled="!appCtrl.loadData.length">Charger</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="text-center">
|
|
<h4>ATTENTION CELA VA TOUT EFFACER !!</h4>
|
|
<button class="btn btn-danger" ng-click="appCtrl.resetAll()">Remise à zéro</button>
|
|
</div>
|
|
|
|
<p class="text-danger" ng-show="appCtrl.loadData.length">Attention ! Charger une sauvegarde effacera les données actuelles.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title" id="helpModalLabel">Aide</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Cet outils permet de faciliter la gestion de la quête du Dofus Ocre.
|
|
</p>
|
|
|
|
<p>
|
|
Pour ajouter ou supprimer un monstre il suffit de cliquer sur sa ligne.<br />
|
|
La sauvegarde se fait automatiquement et il n'y a pas besoin de compte.<br />
|
|
Les données sont enregistrées localement dans le navigateur. Vous pouvez donc fermer la page
|
|
et revenir plus tard.
|
|
</p>
|
|
|
|
<p>
|
|
Si vous changez de navigateur vous pouvez exporter la sauvegarde pour la charger plus tard.
|
|
</p>
|
|
|
|
<p>
|
|
Si vous trouvez un bug, avez une idée ou si la liste des monstres n'est pas à jour,
|
|
contribuez sur <a href="https://github.com/Mopolo/Eternelle-Moisson">Github</a> en faisant
|
|
une Pull Request ou en créant une issue.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title" id="aboutModalLabel">A Propos</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Ce site est libre et open source sur <a href="https://github.com/Mopolo/Eternelle-Moisson">Github</a>
|
|
et est écrit en AngularJS (version 1.x).
|
|
</p>
|
|
|
|
<p>
|
|
Les contributions sont les bienvenues.
|
|
</p>
|
|
|
|
<p>
|
|
Le code source est distribué sous licence MIT, vous avez donc le droit de le copier/modifier/distribuer
|
|
et de l'héberger vous même si vous préférez.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/angular.locker/2.0.4/angular-locker.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
|
|
<script src="app.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |