index.html.ep

% layout 'default';
% title 'UNDEAD RISING SHOP';

<div class="container-fluid">
    <div class="row text-center">
        <div class="col-md-3">
            <h2><span id="player-name"><%= $player->{name} %></span>(<span id="side"><%= $player->{side} // 'no side' %></span>) </h2>
        </div>
        <div class="col-md-9">
            <h2>Cash on hand: <span id="cash"><%= $player->{money} %></span></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <h3> Current Units </h3>
            <table id="army" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th> Name </th>
                        <th> Health </th>
                        <th> Ammo </th>
                        <th> Experience </th>
                    </tr>
                </thead>
                <tbody>
            % for my $unit (@{$player->{units}}) {
                <tr>
                    <td><%= $unit->{stats}->{name} %></td>
                    <td><%= $unit->{stats}->{health} %></td>
                    <td><%= $unit->{stats}->{ammo} %></td>
                    <td><%= $unit->{stats}->{experience} %></td>
                </tr>
            %}
                </tbody>
            </table>
        </div>
        <div class="col-md-9">
            <h3 class="text-center"> Shop </h3>
            <div class="col-md-7">
                % for my $unitdef (@{$unitdefs}) {
                %   next if not $unitdef->{available_in_shop};
                <span class="unitdef" data-unitdef="<%= $unitdef->{name} %>">
                    <img src="/img/<%= $unitdef->{unitpic} %>"></img>
                </span>
                %}
            </div>
            <div class="col-md-5">
                <div class="unit-stats instructions">
                    Click a unit to get more information/buy!
                </div>
                % for my $unitdef (@{$unitdefs}) {
                %   next if not $unitdef->{available_in_shop};
                % my $has_armor = defined $unitdef->{armor_front};
                <div class="unit-stats hidden <%= $unitdef->{name} %> text-center">
                    <table class="table table-striped table-hover text-left">
                        <tbody>
                            <tr>
                                <th> Name </th>
                                <td><%= $unitdef->{human_name} %></td>
                            </tr>
                            <tr>
                                <th> Description </th>
                                <td><%= $unitdef->{description} %></td>
                            </tr>
                            <tr>
                                <th> Cost </th>
                                <td><%= $unitdef->{cost} %> command</td>
                            </tr>
                            % if ($has_armor) {
                            <tr>
                                <th> Armor </th>
                                <td>
                                    <table class="table">
                                        <tbody>
                                            <tr>
                                                <th> Front </th>
                                                <td><%= $unitdef->{armor_front} %>mm</td>
                                            </tr>
                                            <tr>
                                                <th> Rear </th>
                                                <td><%= $unitdef->{armor_rear} %>mm</td>
                                            </tr>
                                            <tr>
                                                <th> Side </th>
                                                <td><%= $unitdef->{armor_side} %>mm</td>
                                            </tr>
                                            <tr>
                                                <th> Top </th>
                                                <td><%= $unitdef->{armor_top} %>mm</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            %}
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-lg btn-success" data-unitdef="<%= $unitdef->{name} %>">Buy!</button>
                </div>
%           }
            </div>

        </div>
    </div>
</div>