jplusplus/the-accountant

<div class="main" ng-class="{'main--is-over': $ctrl.game.isOver()}">
  <main-toolbar game="$ctrl.game"></main-toolbar>

  <div class="main__intro" ng-if="!$ctrl.started">
    <div class="main__intro__content">
      <h1 class="main__intro__content__heading" data-fittext="1" translate>main.intro.heading</h1>
      <div class="main__intro__content__delayed">
        <p class="main__intro__content__meta lead" translate>main.intro.meta</p>
        <div class="main__intro__content__description lead" translate>main.intro.description</div>
        <button class="btn btn-lg btn-primary main__intro__content__start mt-2 ml-2" ng-click="$ctrl.start()" translate>main.intro.new-game</button>
        <button class="btn btn-lg btn-primary main__intro__content__start mt-2 ml-2" ng-click="$ctrl.load()" ng-if="$ctrl.history.length" translate>main.intro.continue</button>
      </div>
      <ul class="main__intro__content__languages list-unstyled list-inline">
        <li class="list-inline-item">
          <a href="./fr.html">Français</a>
        </li>
        <li class="list-inline-item">
          <a href="./">English</a>
        </li>
        <li class="list-inline-item">
          <a href="./de.html">Deutsch</a>
        </li>
        <li class="list-inline-item">
          <a href="//www.elconfidencial.com/espana/2017-04-29/bueno-malo-tesorero_1365048/#/">Español</a>
        </li>
        <li class="list-inline-item">
          <a href="//hrauctovnik.dennikn.sk/sk.html#/">Slovensky</a>
        </li>
        <li class="list-inline-item">
          <a href="./sl.html">Slovenščina</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="main__steps" id="main-panel" ui-view scroll-glue="'main' | isState" ng-class="{ 'main__steps--has-footer': $ctrl.displayFooter() }">
    <div ng-repeat="year in $ctrl.visibleYears()">
      <!-- Display year banner when it starts -->
      <div class="main__steps__year" ng-if="year <= $ctrl.game.step.year">
        <img class="main__steps__year__banner" ng-src="{{::$ctrl.game.findPicture(year)}}" />
        {{::year}}:&nbsp;{{::$ctrl.game.yearInfo(year).title}}
      </div>
      <div class="main__steps__item card card-block" ng-repeat="step in $ctrl.game.journey|filter:{year}">
        <!-- Display chats-->
        <stack stack="step" game="$ctrl.game"></stack>
        <!-- Display choices-->
        <fieldset class="main__steps__item__choices" ng-if="step.isLastSlice() && !step.selection">
          <div class="list-unstyled mb-0">
            <div class="mt-1 main__steps__item__choices__btn" ng-class="{ 'col-lg-6': step.choices.length > 3 }" ng-repeat="choice in :: step.choices">
              <button class="btn btn-block btn-sm btn-primary" ng-click="step.select(choice)" ng-class="{ active: step.selection == choice }">
                {{::choice.text}}
              </button>
            </div>
          </div>
        </fieldset>
        <!-- Display helpers -->
        <stack stack="step.helper" game="$ctrl.game" ng-if="step.displayHelper()"></stack>
        <!-- Display feedback after choices-->
        <stack stack="step.selection" game="$ctrl.game" ng-if="step.selection && step.selection.hasFeedback()"></stack>
      </div>
    </div>
    <!-- Game is over ! -->
    <div class="main__steps__over" ng-if="$ctrl.game.isOver()">
      <button class="btn btn-link btn-sm main__steps__over__undo" ng-click="$ctrl.game.undo()">
        <i class="fa fa-undo fa-fw"></i>
        <span translate>main.steps.over.undo</span>
      </button>
      <div ng-bind-html="$ctrl.game.end.text | unsafe" class="lead"></div>
      <div class="main__steps__over__share">
        <p translate="main.steps.over.share" translate-compile translate-values="{
          amount: ($ctrl.game.var('personal_account').value | number),
          years: $ctrl.yearsCount()
        }"></p>
      </div>
      <div class="float-left">
        <button class="btn btn-primary btn-sm" socialshare socialshare-provider="twitter" socialshare-url="{{'app.url' | translate}}" socialshare-via="{{ 'app.share.tweet.via' | translate }}" socialshare-text="{{ 'app.share.tweet.text' | translate }}" translate-attr="{title: 'main.toolbar.share.twitter'}">
          <i class="fa fa-twitter fa-fw"></i>
          <span class="hidden-sm-down" translate>main.toolbar.share.twitter</span>
        </button>
        <button class="btn btn-primary btn-sm" socialshare socialshare-provider="facebook" socialshare-url="{{'app.url' | translate}}" translate-attr="{title: 'main.toolbar.share.facebook'}">
          <i class="fa fa-facebook fa-fw"></i>
          <span class="hidden-sm-down" translate>main.toolbar.share.facebook</span>
        </button>
      </div>
      <div class="text-right">
        <button class="btn btn-secondary  btn-sm" ng-click="$ctrl.playAgain()" translate>main.steps.over.again</button>
      </div>
    </div>
  </div>

  <div class="main__picture" ng-repeat="picture in $ctrl.game.pictures track by $index" ng-if="picture === $ctrl.game.picture">
    <img ng-src="{{ picture }}"  class="main__picture__img" />
  </div>

  <div class="main__footer" ng-if="$ctrl.displayFooter()">
    <!-- Cancel button when the step is over-->
    <button class="main__footer__undo btn btn-link btn-sm px-3" ng-click="$ctrl.game.undo()" ng-disabled="!$ctrl.game.canUndo()">
      <i class="fa fa-undo fa-fw"></i>
      <span translate>main.steps.undo</span>
    </button>
    <div class="main__footer__timeline">
      <div class="container-fluid">
        <div class="row">
          <div ng-repeat="year in :: $ctrl.game.years" class="col main__footer__timeline__year"  ng-class="{ 'main__footer__timeline__year--active':  year <= $ctrl.game.step.year }">
            <div class="main__footer__timeline__year__label">
              {{::year}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>