templates/user_profile/opened-crates.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Profile{% endblock %}
  5. {% block body %}
  7.     <div class="grid-container fluid full-width" style="padding: 50px 0 50px 0;">
  8.         <div class="grid-x grid-padding-y grid-padding-x">
  9.             <div class="small-12 cell">
  10.                 <div class="grid-container" style="max-width: 1200px;">
  11.                     <div class="grid-x">
  12.                         <div class="small-12 large-2 cell" style="text-align: center;">
  13.                             <img class="user-profile-avatar" style="display: block;" src="{{ asset('build/images/web/icon-profile-otter.png') }}" />
  14.                             <h2 style="text-align: center; padding: 0; margin: 0;">{{ user.username ? user.username : '' }}</h2>
  15.                             {% if user.activeWallet is defined and user.activeWallet.address is defined %}
  16.                                 <a href="https://explorer.thetatoken.org/account/{{ user.activeWallet.address }}" target="_blank"><span style="font-weight: normal; font-size: 1em; color: #999; font-family: sans-serif;">{{ user.activeWallet.address ? user.activeWallet.address|slice(0,6) ~ '...' ~ user.activeWallet.address|slice(37,42) : '' }}</span></a>
  17.                             {% endif %}
  18.                         </div>
  19.                         <div class="small-12 large-8 cell">
  20.                             <div class="grid-x">
  21.                                 <div class="small-12 large-offset-1 cell">
  22.                                     <span class='family-orgovan' style="font-size: 3em;">{{ user.experience|number_format(0,'.',',') }}</span>
  23.                                     <span style="font-size: 2em; font-weight: bold; color: goldenrod;"> <em>{{ currentRank }}</em></span>
  24.                                 </div>
  25.                                 <div class="small-12 large-offset-1 cell">
  26.                                     <div class="grid-x">
  27.                                         {% set luck, distance, tension = 0, 3, 0 %}
  28.                                         {% for gear in userGear %}
  29.                                             <div class="small-12 large-1 cell" style="padding:5px;">
  30.                                                 {% if gear.inventoryEquipment is not null %}
  31.                                                     {% set luck = luck + gear.inventoryEquipment.statStar %}
  32.                                                     {% set distance = distance + gear.inventoryEquipment.statRectangle %}
  33.                                                     {% set tension = tension + gear.inventoryEquipment.statCircle %}
  34.                                                     <img style="border-radius: 10px;" src="{{ asset('https://tinyknightgames.s3.us-east-2.amazonaws.com' ~ gear.inventoryEquipment.template.imageUrl) }}" alt="{{ gear.inventoryEquipment.template.name }}"/></a>
  35.                                                 {% endif %}
  36.                                                 {% if gear.nftMetadata is not null %}
  37.                                                     {% set luck = luck + gear.nftMetadata.statStar %}
  38.                                                     {% set distance = distance + gear.nftMetadata.statRectangle %}
  39.                                                     {% set tension = tension + gear.nftMetadata.statCircle %}
  40.                                                     {% if gear.nftMetadata.nftMetadataQuest.progress > gear.nftMetadata.nftMetadataQuest.goal %}
  41.                                                         {% set luck = luck + gear.nftMetadata.nftMetadataQuest.statStarMod %}
  42.                                                         {% set distance = distance + gear.nftMetadata.nftMetadataQuest.statRectangleMod %}
  43.                                                         {% set tension = tension + gear.nftMetadata.nftMetadataQuest.statCircleMod %}
  44.                                                     {% endif %}
  45.                                                     <a href="{{ path('explorer_asset_detail', { id: gear.nftMetadata.nftHub.id }) }}"><img style="border:3px solid #fff; border-radius: 7px;" src="{{ asset(gear.nftMetadata.imageUrl) }}" alt="{{ gear.nftMetadata.name }}"/></a>
  46.                                                 {% endif %}
  47.                                             </div>
  48.                                         {% endfor %}
  49.                                         <div class="small-12 large-5 end cell"></div>
  50.                                         <div class="small-12 large-2 cell">
  51.                                             <div style="background: purple; margin: 5px; padding: 5px; border-radius: 5px; font-size: .9em; font-weight: bold; text-align: center;">
  52.                                                 L: {{ luck }}
  53.                                             </div>
  54.                                         </div>
  55.                                         <div class="small-12 large-2 cell">
  56.                                             <div style="background: purple; margin: 5px; padding: 5px; border-radius: 5px; font-size: .9em; font-weight: bold; text-align: center;">
  57.                                                 D: {{ distance }}
  58.                                             </div>
  59.                                         </div>
  60.                                         <div class="small-12 large-2 cell">
  61.                                             <div style="background: purple; margin: 5px; padding: 5px; border-radius: 5px; font-size: .9em; font-weight: bold; text-align: center;">
  62.                                                 T: {{ tension }}
  63.                                             </div>
  64.                                         </div>
  65.                                     </div>
  66.                                 </div>
  67.                                 <div class="small-12 large-offset-1 cell"  style="background: #222; border-radius: 10px; padding: 15px; margin-top: 15px;">
  68.                                     <div class="grid-container">
  69.                                         <div class="grid-x">
  70.                                             {% if userRecords is not null %}
  71.                                                 <div class="small-12 large-3">
  72.                                                     <p class="user-profile-record-num">{{ userRecords.totalCaught ? userRecords.totalCaught|number_format(0,'.',',') : 0 }}</p>
  73.                                                     <p class="user-profile-record-label">Caught</p>
  74.                                                 </div>
  75.                                                 <div class="small-12 large-3">
  76.                                                     <p class="user-profile-record-num">{{ userRecords.totalSalvaged ? userRecords.totalSalvaged|number_format(0,'.',',') : 0 }}</p>
  77.                                                     <p class="user-profile-record-label">Salvaged</p>
  78.                                                 </div>
  79.                                                 <div class="small-12 large-3">
  80.                                                     <p class="user-profile-record-num">{{ userRecords.totalCrafted ? userRecords.totalCrafted|number_format(0,'.',',') : 0 }}</p>
  81.                                                     <p class="user-profile-record-label">Crafted Items</p>
  82.                                                 </div>
  83.                                                 <div class="small-12 large-3">
  84.                                                     <p class="user-profile-record-num">{{ userRecords.totalConverted ? userRecords.totalConverted|number_format(0,'.',',') : 0 }}</p>
  85.                                                     <p class="user-profile-record-label">Converted to NFT</p>
  86.                                                 </div>
  87.                                             {% endif %}
  88.                                         </div>
  89.                                     </div>
  90.                                 </div>
  91.                             </div>
  92.                         </div>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     </div>
  98.     <div class="grid-container" style="margin-top: 50px; margin-bottom: 50px;">
  99.         <div class="grid-x" >
  100.             <div class="small-12 medium-2 cell">
  101.                 <ul class="vertical menu">
  102.                     <li><a href="{{ path('user_profile', { userId: user.id, domain: app_domain }) }}">NFT Inventory</a></li>
  103.                     <li><a href="{{ path('user_profile_crates', { userId: user.id, domain: app_domain }) }}">Ancient Crates</a></li>
  104.                     <li><a href="{{ path('user_profile_opened_crates', { userId: user.id, domain: app_domain }) }}">Opened Crates</a></li>
  105.                     <li>Market</li>
  106.                     <li><a href="{{ path('user_sent_offers', { userId: user.id }) }}">Sent Offers</a></li>
  107.                     <li><a href="{{ path('user_received_offers', { userId: user.id }) }}">Received Offers</a></li>
  108.                     <li><a href="{{ path('user_active_listings', { userId: user.id }) }}">Active Listings</a></li>
  109.                     <li><a href="{{ path('user_sold_listings', { userId: user.id }) }}">Sold Listings</a></li>
  110.                     <li><a href="{{ path('user_purchased_listings', { userId: user.id }) }}">Purchased Listings</a></li>
  111.                     <li><a href="{{ path('user_withdrawal_history', { userId: user.id }) }}">Withdrawal History</a></li>
  112.                 </ul>
  113.             </div>
  114.             <div class="small-12 medium-10 cell">
  115.                 <turbo-frame>
  116.                     <div class="grid-x">
  117.                         <div class="small-12 cell">
  118.                             <h2>Opened Ancient Crates ({{ openedNftCrates|length }})</h2>
  119.                         </div>
  120.                         {% if openedNftCrates is empty %}
  121.                             <div class="small-12 cell">
  122.                                 <p>You do not have any opened Ancient Crates. Earn crates by playing <em>Occult of the Oculi</em>.</p>
  123.                             </div>
  124.                         {% else %}
  126.                             {% for crate in openedNftCrates %}
  127.                             <div class="small-12 medium-4 cell">
  128.                                 <div style="padding: 5px; background: #302737; border-radius:3px; margin-bottom: 5px;">
  129.                                     <a href="{{ path('explorer_asset_detail', { id: crate.nftHub.id }) }}"><img style="height: 50px; width: 50px; margin-right: 10px;" src="https://tinyknightgames.s3.us-east-2.amazonaws.com/public/template/nft/Crate.png" /></a>
  130.                                     <span style="font-weight: bold;">{{ crate.openedBy.user.username is defined ? crate.openedBy.user.username|slice(0,10) : crate.openedBy.address|slice(0,6) }}</span>
  131.                                 </div>
  132.                             </div>
  133.                             <div class="small-12 medium-1 cell" style="text-align: center; padding-top: 20px;">
  134.                                 <svg xmlns="http://www.w3.org/2000/svg" width="23.828" height="14.769" style=" margin: 0 5px; filter: invert(96%) sepia(78%) saturate(2%) hue-rotate(181deg) brightness(111%) contrast(100%);"><path d="m13.616 2.828 2.585 2.586H0v4h16.143l-2.527 2.526 2.828 2.829 7.384-7.384L16.444 0l-2.828 2.828z"/></svg>
  135.                             </div>
  136.                             <div class="small-12 medium-6 cell">
  137.                                 <div style="padding: 5px; background: #302737; border-radius:3px; margin-bottom: 5px;">
  138.                                     {% for nft in crate.nftHub.children %}
  139.                                         <a href="{{ path('explorer_asset_detail', { id: nft.id}) }}"><img style="height: 50px; width: 50px; margin-right: 10px;" src="{{ nft.nftMetadata.imageUrl }}" /></a>
  140.                                         <span style="font-weight: bold; font-color: #f2f2f2;">#{{ nft.nftMetadata.mint }}</span> {{ nft.nftMetadata.name|slice(0,24) ~ '...' }}
  141.                                     {% endfor %}
  142.                                 </div>
  143.                             </div>
  144.                             {% endfor %}
  145.                         {% endif %}
  146.                     </div>
  147.                 </turbo-frame>
  148.             </div>
  149.         </div>
  151.     </div>
  152. {% endblock %}