Additional ui epics and clan comp.

deploy/lib/control/EpicsController.php

@@ -12,6 +12,7 @@
 use NinjaWars\core\data\Npc;
 use NinjaWars\core\data\Item;
 use NinjaWars\core\control\Combat;
+use model\News as News;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Response;
 use NinjaWars\core\extensions\StreamedViewResponse;
@@ -71,6 +72,8 @@ public function index(Container $p_dependencies): Response
         $transientClass->enteredCPass = 'dragon';
         $transientClass->enteredClass = 'dragon';
         $signupRequest2    = $transientClass;
+        $news = new News();
+        $all_news = $news->all();
 
         $error            = null;
         $static_nodes = include(ROOT . 'lib/data/raw/nodes.php');
@@ -89,8 +92,9 @@ public function index(Container $p_dependencies): Response
             'myClan'            => $clan,
             'item_costs'        => Shop::itemForSaleCosts(),
             'full_item_costs'   => Shop::fullItems(true),
-            'clans'     => Clan::rankings(),
-            'signupRequest2'     => $signupRequest2,
+            'clans'             => Clan::rankings(),
+            'signupRequest2'    => $signupRequest2,
+            'all_news'          => $all_news,
         ];
 
         return new StreamedViewResponse('UI Epics', 'epics.tpl', $parts);

deploy/templates/epics.tpl

@@ -30,6 +30,7 @@
                 <a class='btn btn-info' href='#intro-section'>Intro</a>
                 <a class='btn btn-info' href='#intro-small-section'>Intro - Small</a>
                 <a class='btn btn-info' href='#login-section'>Login</a>
+                <a class='btn btn-info' href='#logout-section'>Logout</a>
                 <a class='btn btn-info' href='#signup-section'>Signup</a>
                 <a class='btn btn-info' href='#profile-section'>Profile</a>
                 <a class='btn btn-info' href='#npcs-section'>Npcs</a>
@@ -64,7 +65,11 @@
                 <a class='btn btn-info' href='#list-section'>List</a>
                 <a class='btn btn-info' href='#fight-section'>Fight</a>
                 <a class='btn btn-info' href='#wip-fight-section'>WIP Fight</a>
-                <a class='btn btn-info' href='#footer'>Footer</a>
+                <a class='btn btn-info' href='#footer-section'>Footer</a>
+                <a class='btn btn-info' href='#footer-linkbar-section'>Footer.linkbar</a>
+                <a class='btn btn-info' href='#footer-footerlinks-section'>Footer.footerlinks</a>
+                <a class='btn btn-info' href='#news-section'>News</a>
+                <a class='btn btn-info' href='#interview-section'>Interview</a>
                 <a class='btn btn-info' href='#ninjamaster-section'>Ninjamaster</a>
             </div>
         </nav>
@@ -104,6 +109,13 @@
             </div>
         </section>
 
+        <section id='logout-section'>
+            <h2>Logout</h2>
+            <div class='logout-page'>
+                {include file="logout.tpl"}
+            </div>
+        </section>
+
         <section id='profile-section'>
             <h2>Profile Pieces</h2>
             {* ninja and cln are assigned in the controller *}
@@ -453,14 +465,40 @@
             {include file="enemies.attack-next.tpl"}
         </section>
 
-        <section id='footer'>
+
+        <section id='news-section'>
+            <h2>News</h2>
+            {assign var="create_successful" value=null}
+            {assign var="create_role" value=true}
+            {assign var="search_title" value='Bug search/filter'}
+            {assign var="all_news" value=$all_news}
+            {assign var="error" value="Some error string for news page"}
+            {include file="news.tpl"}
+        </section>
+
+        <section id='footer-section'>
             <h2>Footer</h2>
             {include file="footer.tpl"}
         </section>
 
+        <section id='footer-footerlinks-section'>
+            <h2>Footer.footerlinks</h2>
+            {include file="footerlinks.tpl"}
+        </section>
+
+        <section id='footer-linkbar-section'>
+            <h2>Footer.linkbar</h2>
+            {include file="footer.linkbar.tpl"}
+        </section>
+
+        <section id='interview-section'>
+            <h2>Interview</h2>
+            {include file="interview.tpl"}
+        </section>
+
         <section id='ninjamaster-section'>
             <h2>Ninjamaster</h2>
-            <p>Currently commented out</p>
+            <p class='epic-note'>Currently commented out</p>
             {* {include file="ninjamaster.tpl"} *}
         </section>
 
@@ -472,8 +510,8 @@
             </iframe>
         </section>
 
-        <footer style='border-top:thick dashed white;margin-top:3rem;'>
-            <h6>The end</h6>
+        <footer style='border-top:3rem dashed white;margin-top:3rem;'>
+            <h6>END OF TEMPLATE</h6>
         </footer>
     </section>
     {* js script at the top to prevent breaking from templates *}

deploy/templates/footer.tpl

@@ -20,6 +20,8 @@ var pub_char_info = {if $json_public_char_info}{$json_public_char_info}{else}''{
 {literal} // Only refresh the stats when they're not initially loading and when requested.
 $(function() {
 	if(pub_char_info){
+    const { debug } = console ?? { debug: () => { /* no-op */ } };
+    debug('Refreshing player stats if available stats');
 		NW.refreshStats(pub_char_info); // Refresh the data piped in above.
 	}
 });
@@ -30,7 +32,7 @@ $(function() {
 {if !$smarty.const.LOCAL_JS}{* Skip for local js *}
 <!-- Google Analytics, just add all the tracking info to an array at once -->
 {literal}
-<!-- Google tag (gtag.js) -->
+<!-- Google tag (gtag.js) -- Updated 1/9/2024 -- RR -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-WWN26L7SKM"></script>
 <script>
   window.dataLayer = window.dataLayer || [];

deploy/templates/logout.tpl

@@ -31,7 +31,7 @@
 <section class='glassbox centered thick'>
 	<p class='lead'>
 		Sorry to see you go!  Come back soon!
-		You can return to <a href='/'>the homepage</a> or <a class='btn btn-primary' href='/login'>log in again.</a>
+		You can return to <a href='/'><i class="fa-solid fa-house"></i> the homepage</a> or <a class='btn btn-primary' href='/login'><i class="fa-solid fa-lock"></i> log in again.</a>
 	</p>
 </section>
 <section id='logout-ads' class='ad-sectionglassbox'>

deploy/templates/news.tpl

@@ -33,8 +33,8 @@
           {$single_news->created|date_format:"%A, %B %e, %Y"}
         </time>
       {else}
-      <time class='timeago' datetime='{$smarty.now}' title='{$smarty.now|date_format:"%A, %B %e, %Y"}'>
-        {$smarty.now|date_format:"%A, %B %e, %Y"}
+      <time class='timeago' datetime='' title='Unknown posting date'>
+        unknown
       </time>
       {/if} by 
       <a target="main" href="/player?player_id={$single_news->author_id}">

deploy/templates/ninja.menu.tpl

@@ -17,7 +17,9 @@
           </div>
         </nav>
         <div class='ninja-stats-link thick'>
-          <a href='/stats' target='main' title='Your ninja stats, level, info, etc.'><i class="fa fa-heart"></i> Ninja Stats</a>
+          <a href='/stats' target='main' title='Your ninja stats, level, info, etc.'>
+            <i class="fa fa-heart"></i> Ninja Stats
+          </a>
         </div>
         {if $clan}
         <div>

deploy/templates/ninjamaster.tpl

@@ -27,6 +27,12 @@ link.href = '/images/ninjamaster/shuriken-favicon.png';
   height: 5rem;
   width: 5rem;
 }
+.admin-nav-float {
+  position: absolute;
+  z-index: 1000;
+  left: 0.5rem;
+  top: 0.5rem;
+}
 </style>
 <div id='admin-favicon'>
   <span>
@@ -38,7 +44,9 @@ link.href = '/images/ninjamaster/shuriken-favicon.png';
 
 {include file="ninjamaster.css.tpl"}
 
-<span style='float:left'><a href='/'><button type='button' class='btn btn-default'><i class='fa fa-home'></i></button></a></span>
+<span class='admin-nav-float'>
+  <a href='/' class='btn btn-default' title='Return Home'><i class='fa fa-home'></i></a>
+</span>
 <div id='admin-actions'>
 
 <h1>Admin Dashboard</h1>
@@ -259,7 +267,7 @@ link.href = '/images/ninjamaster/shuriken-favicon.png';
     <div class='text-center thick'>
 		  <button class='btn btn-primary' id='load-clans'>VIEW CLANS</button>
     </div>
-		<ul id='clan-list-area'>
+		<ul id='clan-list-area' class='carded-area'>
 		</ul>
 	</div>
 </section>
@@ -379,6 +387,15 @@ link.href = '/images/ninjamaster/shuriken-favicon.png';
 			<li><a href='https://us-east-1.console.aws.amazon.com/costmanagement/home?region=us-east-1#/home'>
 				Billing
 			</a></li>
+      <li><a href='https://ads.google.com/aw/overview'>
+				Adwords
+			</a></li>
+      <li><a href='https://analytics.google.com/analytics/web/?pli=1#/p289349786/reports/intelligenthome'>
+				Analytics
+			</a></li>
+      <li><a href='https://www.google.com/recaptcha/admin/site/692084162/settings'>
+				Recaptcha
+			</a></li>
 	</nav>
 </section>
 

deploy/templates/signup.tpl

@@ -122,7 +122,7 @@
 	  		flex-wrap: wrap;
 	  		justify-content: space-between;
 	  	}
-		.ninja-picker-container label {
+		.ninja-picker-container label.class-desc {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
@@ -134,11 +134,23 @@
 			height: 20vw;
 			margin-left: 0.5vw;
 			margin-right: 0.5vw;
+			margin-bottom:2rem;
+			padding-bottom:0.7rem;
 			border: 2px solid #ccc;
 			border-radius: 0.5rem;
 			background-color: #eee;
 			cursor: pointer;
 		}
+		/*for small mobile screens */
+		@media (max-width: 600px) {
+			.ninja-picker-container label.class-desc {
+				width: 100%;
+				height: auto;
+			}
+		}
+		.ninja-picker-container img{
+			max-width:100%;
+		}
 		.ninja-picker-container label:hover {
 			background-color: #ddd;
 			border-color: #aaa;

deploy/www/css/epics.css

@@ -1,6 +1,20 @@
-main#epics #stories > section {
+main#epics #stories>section {
     display: none;
+    /* For initial js to prevent FOUC */
 }
 
 main#epics .pop {
+    background-color: #db90de;
 }
+
+main#epics #stories>section>h2:first-child {
+    background-color: #db90de;
+}
+
+main#epics .epic-note {
+    padding: 0.1rem 1rem 0.1rem;
+    background-color: #db90de;
+    color: black;
+    border-radius: 0.5rem;
+    border: thin solid #77117b;
+}

deploy/www/css/style.css

@@ -1097,17 +1097,6 @@ form#signup .failure {
     color: red;
 }
 
-form#signup label.class-desc {
-    display: block;
-    font-weight: normal;
-    padding: 0;
-    margin: 0;
-}
-
-form#signup .ninja-char-creation .inline-block {
-    vertical-align: top;
-}
-
 form#signup small {
     color: grey;
 }
@@ -1613,6 +1602,15 @@ td.playerTable {
     padding-right: 1em;
 }
 
+/* mobile small screens media query */
+@media (max-width: 767px) {
+    .solo-page form#signup {
+        padding-left: 0.1rem;
+        padding-right: 0.1rem;
+    }
+}
+
+
 body.solo-page #solo-container {
     padding: 10px 30px 10px 30px;
 }

deploy/www/js/epics.js

@@ -20,6 +20,7 @@ $(() => {
     } else {
       $('.expose-area-error').show();
     }
+    // @ts-ignore
     window.location.hash = href;
   });
   if (hash) {

deploy/www/js/ninjamaster.js

@@ -15,16 +15,8 @@ const escape = (unsafe) => {
   return div.innerHTML;
 };
 
-const initializeClans = () => {
-  $('#clan-list-progress').hide();
-  $('#load-clans').on('click', () => {
-    $('#clan-list-progress').show();
-    api.clans().then((response) => {
-      response.json().then((data) => {
-        $('#clan-list-progress').hide();
-        // loop over the clan list and add the data of each clan to it
-        data.clans.forEach((clan) => {
-          $('#clan-list-area').append(`<li class='card'>
+const clanComponent = ({ clan }) => `
+        <li class='card'>
           <div class='glassbox'>
             ${clan.clan_name} 
             ${clan.clan_id} 
@@ -41,8 +33,29 @@ const initializeClans = () => {
               ${escape(JSON.stringify(clan))}
             </details>
           </div>
-            </li>`);
+        </li>
+`;
+
+function sleeper(ms) {
+  return function (x) {
+    return new Promise((resolve) => {
+      setTimeout(() => resolve(x), ms);
+    });
+  };
+}
+
+const initializeClans = () => {
+  $('#clan-list-progress').hide();
+  $('#load-clans').on('click', () => {
+    $('#clan-list-progress').show();
+    api.clans().then(sleeper(1000)).then((response) => {
+      response.json().then((data) => {
+        // loop over the clan list and add the data of each clan to it
+        data.clans.forEach((clan) => {
+          $('#clan-list-area').append(clanComponent({ clan }));
         });
+        $('#clan-list-progress').hide();
+        $('#load-clans').hide();
       });
     });
   });