Merge pull request #1101 from Heroes-Profile/develop

Heroes Profile v1.2.1

app/Http/Controllers/AnimationsController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class AnimationsController extends Controller
+{
+  public function showDeathwing(Request $request)
+  {
+    return view('Animations.deathwing')->with([
+      'bladeGlobals' => $this->globalDataService->getBladeGlobals(),
+    ]);
+  }
+  public function showTassadar(Request $request)
+  {
+      return view('Animations.tassadar')->with([
+          'bladeGlobals' => $this->globalDataService->getBladeGlobals(),
+      ]);
+  }
+
+}

public/Animations/Deathwing/countup.min.js

@@ -0,0 +1,36 @@
+// Dependency: CountUp.js: https://github.com/inorganik/CountUp.js
+
+(function ($) {
+  $.fn.countup = function (params) {
+    // make sure dependency is present
+    if (typeof CountUp !== 'function') {
+      console.error('countUp.js is a required dependency of countUp-jquery.js.');
+      return;
+    }
+
+    var defaults = {
+      startVal: 0,
+      decimalPlaces: 0,
+      duration: 2,
+    };
+
+    if (typeof params === 'number') {
+      defaults.endVal = params;
+    }
+    else if (typeof params === 'object') {
+      $.extend(defaults, params);
+    }
+    else {
+      console.error('countUp-jquery requires its argument to be either an object or number');
+      return;
+    }
+
+    this.each(function (i, elem) {
+      var countUp = new CountUp(elem, defaults.endVal, defaults.options);
+      countUp.start();
+    });
+
+    return this;
+  };
+
+}(jQuery));

public/Animations/Deathwing/dw.css

@@ -0,0 +1,76 @@
+
+@import url('https://fonts.googleapis.com/css?family=Knewave|VT323&display=swap');
+
+
+
+.dw-logo-wrapper a{
+  display:block;   max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+.dw-message {
+font-family: "VT323", sans-serif;
+font-size: 18px;
+
+    color:white;
+    text-transform: uppercase;
+    box-sizing:border-box;
+
+
+
+}
+
+#homepage .dw-message{
+  color:#333;
+  position:absolute;
+  top:0;
+  width: 100%;
+}
+
+
+.deathwing-stats{
+
+/* width: 400px; */
+/* height: 200px; */
+z-index: 1000;
+
+
+padding: 5px;
+}
+.deathwing-stats a{color:white;
+
+
+}
+#homepage .deathwing-stats a{color:black;  }
+.deathwing-stats{display:flex; justify-content:space-between; padding: 5px;}
+.deathwing-stats .scoreboard{
+  display: flex;
+  flex-wrap:wrap;
+    align-items: center;
+    justify-content: space-between;
+    justify-content: space-between;
+    /* width: 100%; */
+    /* flex-basis: 50%; */
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 40%;
+}
+.deathwing-stats .scoreboard-item{
+  text-align: center;
+  margin-left:20px; margin-right: 20px;
+}
+.sb-stat{color: #b33616; font-size: 1.5em;}
+.deathwing-icon{font-size: 2.3em; color: #b33616;
+    }
+    .dw-links{font-size: 18px; display:flex; align-items: center; justify-content: space-between;}
+    .dw-links a{margin:5px;}
+    .dw-links a:hover{color: #b33616;}
+
+@media only screen and (max-width: 1000px) {
+  .deathwing-stats {flex-direction:column;}
+  .dw-message{font-size:12px; margin-top: 50px;}
+  .deathwing-icon{font-size: 1em;}
+  .dw-links{font-size: 1em;}
+  .beta-message{margin-top:0;}
+  .deathwing-icon img{display:none;}
+}

public/Animations/Tassadar/ta.css

@@ -0,0 +1,76 @@
+
+@import url('https://fonts.googleapis.com/css?family=Knewave|VT323&display=swap');
+
+
+
+.ta-logo-wrapper a{
+  display:block;   max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+.ta-message {
+font-family: "VT323", sans-serif;
+font-size: 18px;
+
+    color:white;
+    text-transform: uppercase;
+    box-sizing:border-box;
+
+
+
+}
+
+#homepage .ta-message{
+  color:#333;
+  position:absolute;
+  top:0;
+  width: 100%;
+}
+
+
+.tassadar-stats{
+
+/* width: 400px; */
+/* height: 200px; */
+z-index: 1000;
+
+
+padding: 5px;
+}
+.tassadar-stats a{color:white;
+
+
+}
+#homepage .tassadar-stats a{color:black;  }
+.tassadar-stats{display:flex; justify-content:space-between; padding: 5px;}
+.tassadar-stats .scoreboard{
+  display: flex;
+  flex-wrap:wrap;
+    align-items: center;
+    justify-content: space-between;
+    justify-content: space-between;
+    /* width: 100%; */
+    /* flex-basis: 50%; */
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 40%;
+}
+.tassadar-stats .scoreboard-item{
+  text-align: center;
+  margin-left:20px; margin-right: 20px;
+}
+.sb-stat{color: #b33616; font-size: 1.5em;}
+.tassadar-icon{font-size: 2.3em; color: #b33616;
+    }
+    .ta-links{font-size: 18px; display:flex; align-items: center; justify-content: space-between;}
+    .ta-links a{margin:5px;}
+    .ta-links a:hover{color: #b33616;}
+
+@media only screen and (max-width: 1000px) {
+  .tassadar-stats {flex-direction:column;}
+  .ta-message{font-size:12px; margin-top: 50px;}
+  .tassadar-icon{font-size: 1em;}
+  .ta-links{font-size: 1em;}
+  .beta-message{margin-top:0;}
+  .tassadar-icon img{display:none;}
+}

resources/views/Animations/deathwing.blade.php

@@ -0,0 +1,79 @@
+@extends('layouts.app', $bladeGlobals)  
+@section('title', 'Deathwing Animation')
+@section('meta_keywords', '')
+@section('meta_description', '')
+@section('content')
+<div class="test-animation-page">
+    <div class="deathwing-wrapper" style="width:100%; height: 300px; overflow:hidden;">
+        <div id="wFkEdtPc" style="position: relative; height: 100%;"></div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="{{ asset('Animations/Deathwing/assets/slplayer.js') }}"></script>
+<script>
+var deathwingJS = "1500-1800";
+
+function reloadDeathwing() {
+    if (window.innerWidth < 786) {
+        deathwingJS = "667-768";
+    }
+    else if (window.innerWidth < 1024) {
+        deathwingJS = "768-1024";
+    }
+    else if (window.innerWidth < 1500) {
+        deathwingJS = "1280-1500";
+    }
+    else if (window.innerWidth < 1800) {
+        deathwingJS = "1500-1800";
+    }
+    else if (window.innerWidth < 2200) {
+        deathwingJS = "1800-2200";
+    }
+    else if (window.innerWidth < 2500) {
+        deathwingJS = "2200-2500";
+    }
+    else if (window.innerWidth < 3000) {
+        deathwingJS = "2500-3000";
+    }
+
+    (function(Saola) {
+        var li = {
+            "color": "#2090e6",
+            "density": 9,
+            "diameter": 60,
+            "range": 1,
+            "shape": "oval",
+            "speed": 1,
+            "resourceFolder": "{{ asset('Animations/Deathwing/assets/resources') }}"
+        };
+        Saola.openDoc("{{ asset('Animations/Deathwing/assets/Deathwing_') }}" + deathwingJS + ".js", 'wFkEdtPc', {paused: false, preloaderOptions: li, center: 'horizontal'});
+    })(AtomiSaola);
+}
+
+$(window).resize(function() {
+    reloadDeathwing();
+});
+
+$(document).ready(function() {
+    reloadDeathwing();
+});
+</script>
+@endpush
+
+@push('styles')
+<style>
+.deathwing-wrapper img {
+    display: none!important;
+}
+
+@media only screen and (max-width: 800px) {
+    .deathwing-wrapper {
+        margin-top: 54px;
+        margin-bottom: -54px;
+    }
+}
+</style>
+@endpush

resources/views/Animations/tassadar.blade.php

@@ -0,0 +1,80 @@
+@extends('layouts.app', $bladeGlobals)
+
+@section('title', 'Tassadar Animation')
+@section('meta_keywords', '')
+@section('meta_description', '')
+@section('content')
+<div class="test-animation-page">
+    <div class="Tassadar-wrapper" style="width:100%; height: 300px; overflow:hidden;">
+        <div id="wFkEdtPc" style="position: relative; height: 100%;"></div>
+    </div>
+</div>
+@endsection
+
+@push('scripts')
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="{{ asset('Animations/Tassadar/assets/slplayer.js') }}"></script>
+<script>
+var TassadarJS = "1500-1800";
+
+function reloadTassadar() {
+    if (window.innerWidth < 786) {
+        TassadarJS = "667-768";
+    }
+    else if (window.innerWidth < 1024) {
+        TassadarJS = "768-1024";
+    }
+    else if (window.innerWidth < 1500) {
+        TassadarJS = "1280-1500";
+    }
+    else if (window.innerWidth < 1800) {
+        TassadarJS = "1500-1800";
+    }
+    else if (window.innerWidth < 2200) {
+        TassadarJS = "1800-2200";
+    }
+    else if (window.innerWidth < 2500) {
+        TassadarJS = "2200-2500";
+    }
+    else if (window.innerWidth < 3000) {
+        TassadarJS = "2500-3000";
+    }
+
+    (function(Saola) {
+        var li = {
+            "color": "#2090e6",
+            "density": 9,
+            "diameter": 60,
+            "range": 1,
+            "shape": "oval",
+            "speed": 1,
+            "resourceFolder": "{{ asset('Animations/Tassadar/assets/resources') }}"
+        };
+        Saola.openDoc("{{ asset('Animations/Tassadar/assets/Tassadar_') }}" + TassadarJS + ".js", 'wFkEdtPc', {paused: false, preloaderOptions: li, center: 'horizontal'});
+    })(AtomiSaola);
+}
+
+$(window).resize(function() {
+    reloadTassadar();
+});
+
+$(document).ready(function() {
+    reloadTassadar();
+});
+</script>
+@endpush
+
+@push('styles')
+<style>
+.Tassadar-wrapper img {
+    display: none!important;
+}
+
+@media only screen and (max-width: 800px) {
+    .Tassadar-wrapper {
+        margin-top: 54px;
+        margin-bottom: -54px;
+    }
+}
+</style>
+@endpush

resources/views/layouts/app.blade.php

@@ -107,5 +107,7 @@ function setCookie(name, value) {
       </div>
     </div>
   </div>
+
+  @stack('scripts')
 </body>
 </html>