- Reldens - Skeleton - Beta.35

dist/assets/features/skills/templates/ui-skill-box.html

@@ -1 +1,3 @@
-<img id="{{key}}" src="/assets/custom/actions/controls/{{key}}.png" alt="{{skillName}}"/>
+<div class="skill-icon-container skill-icon-{{key}}">
+    <img id="{{key}}" src="/assets/custom/actions/controls/{{key}}.png" alt="{{skillName}}"/>
+</div>

dist/assets/features/teams/templates/clan-create.html

@@ -1,4 +1,4 @@
 <div class="clan-create clan-create-{{playerId}}">
-    <input class="clan-name-input" type="text" placeholder="{{clanNamePlaceholder}}"/>
+    <input name="clan-name-input" class="clan-name-input" type="text" placeholder="{{clanNamePlaceholder}}"/>
     <button class="submit-clan-create">{{createLabel}}</button>
 </div>

dist/assets/html/ui-audio-category-row.html

@@ -1,6 +1,6 @@
 <div class="settings-row">
     <div class="col-1">
-        <label for="{{categoryId}}">{{categoryLabel}}</label>
+        <label for="{{categoryKey}}">{{categoryLabel}}</label>
     </div>
     <div class="col-2">
         <input type="checkbox" id="{{categoryKey}}" data-category-key="{{categoryKey}}" class="audio-setting {{categoryKey}}" value="{{categoryKey}}"{{&categoryChecked}}/>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "reldens-skeleton",
-    "version": "4.0.0-beta.34",
+    "version": "4.0.0-beta.35",
     "description": "Reldens - Skeleton",
     "author": "Damian A. Pastorini",
     "license": "MIT",
@@ -23,7 +23,7 @@
         "process": false
     },
     "dependencies": {
-        "@reldens/utils": "^0.30.0",
-        "reldens": "^4.0.0-beta.34"
+        "@reldens/utils": "^0.32.0",
+        "reldens": "^4.0.0-beta.35"
     }
 }

theme/custom-game-theme-test/assets/features/skills/templates/ui-skill-box.html

@@ -1 +1,3 @@
-<img id="{{key}}" src="/assets/custom/actions/controls/{{key}}.png" alt="{{skillName}}"/>
+<div class="skill-icon-container skill-icon-{{key}}">
+    <img id="{{key}}" src="/assets/custom/actions/controls/{{key}}.png" alt="{{skillName}}"/>
+</div>

theme/custom-game-theme-test/assets/features/teams/templates/clan-create.html

@@ -1,4 +1,4 @@
 <div class="clan-create clan-create-{{playerId}}">
-    <input class="clan-name-input" type="text" placeholder="{{clanNamePlaceholder}}"/>
+    <input name="clan-name-input" class="clan-name-input" type="text" placeholder="{{clanNamePlaceholder}}"/>
     <button class="submit-clan-create">{{createLabel}}</button>
 </div>

theme/custom-game-theme-test/assets/html/ui-audio-category-row.html

@@ -1,6 +1,6 @@
 <div class="settings-row">
     <div class="col-1">
-        <label for="{{categoryId}}">{{categoryLabel}}</label>
+        <label for="{{categoryKey}}">{{categoryLabel}}</label>
     </div>
     <div class="col-2">
         <input type="checkbox" id="{{categoryKey}}" data-category-key="{{categoryKey}}" class="audio-setting {{categoryKey}}" value="{{categoryKey}}"{{&categoryChecked}}/>

theme/custom-game-theme-test/css/base.scss

@@ -222,6 +222,10 @@ input[type="submit"] {
     border: 1px solid #ccc;
     box-shadow: 10px 10px 14px 2px rgba(0, 0, 0, 0.6);
 
+    &.row-disclaimer {
+        max-width: 98%;
+    }
+
     &.hidden {
         display: none;
     }
@@ -286,12 +290,17 @@ input[type="submit"] {
 }
 
 #login-form,
+#guest-form,
 #register-form,
 #forgot-form {
     width: 80%;
     display: block;
     margin: 0 auto;
     padding: 0;
+
+    &.hidden {
+        display: none;
+    }
 }
 
 .response-error {
@@ -309,6 +318,10 @@ h3.form-title {
 }
 
 form {
+    &.hidden {
+        display: none;
+    }
+
     .input-box {
         display: flex;
         position: relative;
@@ -323,6 +336,10 @@ form {
 
         &.submit-container, &.terms-and-conditions-link-container {
             justify-content: end;
+
+            &.guest-submit {
+                justify-content: center;
+            }
         }
 
         label {
@@ -437,10 +454,28 @@ form {
     .action-buttons {
         width: auto;
 
-        img {
+        .skill-icon-container {
             margin-left: 10px;
-        }
+            float: left;
+            position: relative;
+
+            &.cooldown::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                background: conic-gradient(rgba(0, 0, 0, 0.7) var(--angle), rgba(0, 0, 0, 0.1) var(--angle));
+            }
 
+            img {
+                width: 54px;
+                height: 54px;
+                position: relative;
+            }
+        }
     }
 
     #left, #right {
@@ -456,11 +491,14 @@ form {
 
 .ui-box-player {
     float: left;
+    width: 100%;
     top: 34px;
     left: 48px;
+    max-width: 260px;
     padding: 10px;
     background-color: rgba(0, 0, 0, 0.5);
     text-align: left;
+    word-break: break-all;
 }
 
 .ui-dialog-box {

theme/custom-game-theme-test/css/chat.scss

@@ -11,6 +11,7 @@
     left: -426px;
     padding: 15px;
     min-width: 300px;
+    max-width: 300px;
     min-height: 200px;
     background: #000000;
     opacity: 0.8;

theme/custom-game-theme-test/es-index.html

@@ -15,6 +15,8 @@
     <meta name="msapplication-TileColor" content="#37517e"/>
     <meta name="theme-color" content="#37517e"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <!-- @NOTE: remove the comment below to avoid attaching the client configuration automatically: -->
+    <script type="text/javascript" id="reldens-initial-config"></script>
     <script type="module" src="./index.js"></script>
     <link rel="stylesheet" type="text/css" href="./css/styles.scss"/>
 </head>
@@ -37,6 +39,22 @@ <h1 class="title">
             </div>
             <div class="forms-container">
                 <div class="col-2 col-left">
+                    <div class="row row-0 hidden">
+                        <form name="guest-form" id="guest-form" class="guest-form" action="#" method="post">
+                            <h3 class="form-title">Jugar como invitado</h3>
+                            <div class="input-box guest-username">
+                                <label for="guest-username">Nombre de usuario</label>
+                                <input type="text" name="guest-username" id="guest-username" class="required" required/>
+                            </div>
+                            <div class="input-box submit-container guest-submit">
+                                <input type="submit" value="Jugar"/>
+                            </div>
+                            <div class="loading-container hidden">
+                                <img src="./assets/web/loading.gif" alt="Loading..."/>
+                            </div>
+                            <div class="input-box response-error"></div>
+                        </form>
+                    </div>
                     <div class="row row-1">
                         <form name="register-form" id="register-form" class="register-form" action="#" method="post">
                             <h3 class="form-title">Crear Cuenta</h3>
@@ -57,7 +75,7 @@ <h3 class="form-title">Crear Cuenta</h3>
                                 <input type="password" name="reg-re-password" id="reg-re-password" class="required" required/>
                             </div>
                             <div class="input-box hidden terms-and-conditions-link-container">
-                                <a class="terms-and-conditions-link">Acepta nuestros T&aacute;rminos y Condiciones (haz clic aqu&iacute;).</a>
+                                <a class="terms-and-conditions-link">Acepta nuestros T&eacute;rminos y Condiciones (haz clic aqu&iacute;).</a>
                             </div>
                             <div class="input-box submit-container reg-submit">
                                 <input type="submit" value="Registrarse"/>
@@ -91,7 +109,7 @@ <h3 class="form-title">Olvid&eacute; mi contrase&ntilde;a</h3>
                             <h3 class="form-title">Login</h3>
                             <div class="input-box login-username">
                                 <label for="username">Nombre de Usuario</label>
-                                <input type="text" name="username" id="username" class="required" required/>
+                                <input type="text" name="username" id="username" class="required" required autocomplete="on"/>
                             </div>
                             <div class="input-box login-password">
                                 <label for="password">Password</label>
@@ -123,13 +141,13 @@ <h3 class="form-title">Firebase Login</h3>
             </div>
             <div id="terms-and-conditions" class="hidden">
                 <div class="terms-and-conditions-text">
-                    <h3 class="terms-heading">T&aacute;rminos y Condiciones</h3>
+                    <h3 class="terms-heading">T&eacute;rminos y Condiciones</h3>
                     <div class="terms-body"></div>
                 </div>
                 <div class="terms-box">
                     <input type="checkbox" id="accept-terms-and-conditions">
                     <label class="accept-terms-and-conditions-label" for="accept-terms-and-conditions">
-                        Acepto estos T&aacute;rminos y Condiciones
+                        Acepto estos T&eacute;rminos y Condiciones
                     </label>
                 </div>
                 <img id="terms-and-conditions-close" class="box-close" src="./assets/controls/bx.png" alt="close"/>

theme/custom-game-theme-test/index.html

@@ -15,6 +15,8 @@
     <meta name="msapplication-TileColor" content="#37517e"/>
     <meta name="theme-color" content="#37517e"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+    <!-- @NOTE: remove the comment below to avoid attaching the client configuration automatically: -->
+    <script type="text/javascript" id="reldens-initial-config"></script>
     <script type="module" src="./index.js"></script>
     <link rel="stylesheet" type="text/css" href="./css/styles.scss"/>
 </head>
@@ -37,6 +39,24 @@ <h1 class="title">
             </div>
             <div class="forms-container">
                 <div class="col-2 col-left">
+                    <div class="row row-0">
+                        <form name="guest-form" id="guest-form" class="guest-form" action="#" method="post">
+                            <h3 class="form-title">Play as a Guest</h3>
+                            <!-- enable the config general/users/allowGuestUserName and uncomment the following to allow guest usernames:
+                            <div class="input-box guest-username">
+                                <label for="guest-username">Username</label>
+                                <input type="text" name="guest-username" id="guest-username" class="required" required/>
+                            </div>
+                            -->
+                            <div class="input-box submit-container guest-submit">
+                                <input type="submit" value="Play"/>
+                            </div>
+                            <div class="loading-container hidden">
+                                <img src="./assets/web/loading.gif" alt="Loading..."/>
+                            </div>
+                            <div class="input-box response-error"></div>
+                        </form>
+                    </div>
                     <div class="row row-1">
                         <form name="register-form" id="register-form" class="register-form" action="#" method="post">
                             <h3 class="form-title">Create Account</h3>
@@ -91,7 +111,7 @@ <h3 class="form-title">Forgot password</h3>
                             <h3 class="form-title">Login</h3>
                             <div class="input-box login-username">
                                 <label for="username">Username</label>
-                                <input type="text" name="username" id="username" class="required" required/>
+                                <input type="text" name="username" id="username" class="required" required autocomplete="on"/>
                             </div>
                             <div class="input-box login-password">
                                 <label for="password">Password</label>
@@ -108,7 +128,7 @@ <h3 class="form-title">Login</h3>
                     </div>
                     <div class="row row-2 firebase-row-container hidden">
                         <form name="firebase-login" id="firebase-login" class="firebase-login" action="#" method="post">
-                            <h3 class="form-title">Firebase Login</h3>
+                            <h3 class="form-title">Firebase Registration</h3>
                             <div class="input-box firebase-username">
                                 <label for="firebase-username">Username</label>
                                 <input type="text" name="firebase-username" id="firebase-username" class="required" required/>

theme/custom-game-theme-test/index.js

@@ -32,5 +32,45 @@ reldens.events.on('reldens.startGameAfter', () => {
     reldens.gameDom.getElement('.row-disclaimer')?.remove();
 });
 
+reldens.events.on('reldens.activateRoom', (room) => {
+    room.onMessage('*', (message) => {
+        // filter skills before cast message:
+        if('rski.Bc' !== message.act){
+            return;
+        }
+        // skills cold down animation sample:
+        let skillKey = (message.data?.skillKey || '').toString();
+        let skillDelay = Number(message.data?.extraData?.sd || 0);
+        if('' !== skillKey && 0 < skillDelay){
+            let skillElement = reldens.gameDom.getElement('.skill-icon-'+skillKey);
+            if(!skillElement){
+                return;
+            }
+
+            let startTime = Date.now();
+            let endTime = startTime + skillDelay;
+
+            function updateCooldown() {
+                let currentTime = Date.now();
+                let remainingTime = endTime - currentTime;
+                if (remainingTime <= 0) {
+                    skillElement.style.setProperty('--angle', '360deg');
+                    skillElement.classList.remove('cooldown');
+                    return;
+                    // stop the animation when time is up.
+                }
+                let progress = (skillDelay - remainingTime) / skillDelay;
+                let angle = progress * 360;
+                skillElement.style.setProperty('--angle', `${angle}deg`);
+                requestAnimationFrame(updateCooldown);
+            }
+
+            skillElement.classList.add('cooldown');
+            skillElement.style.setProperty('--angle', '0deg');
+            updateCooldown();
+        }
+    });
+});
+
 // global access is not actually required, the app can be fully encapsulated:
 window.reldens = reldens;