experiment with lag

index.html

@@ -3693,7 +3693,7 @@ <h1>Artists</h1>
                 <input type="password" id="password" name="password" placeholder="......">
                 <label for="password">Confirm Password</label>
                 <input type="password" id="confirm-password" name="confirm-password" placeholder="......">
-                <div class="cf-turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
+                <div class="turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
                 <input type="submit" value="Register">
               </form>
             </div>
@@ -3703,15 +3703,15 @@ <h1>Artists</h1>
                 <input type="text" id="email-si" name="email" placeholder="[email protected]">
                 <label for="password-si">Password</label>
                 <input type="password" id="password-si" name="password" placeholder="......">
-                <div class="cf-turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
+                <div class="turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
                 <input type="submit" value="Login">
               </form>
             </div>
             <div id="forgotpassword">
               <form action="https://synergism.cc/forgot-password" method="POST">
                 <label for="email-fp">Email Address</label>
                 <input type="text" id="email-fp" name="email" placeholder="[email protected]">
-                <div class="cf-turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
+                <div class="turnstile" data-sitekey="0x4AAAAAAA4kwOTMEdx48IMm"></div>
                 <p>This can only be once a day!</p>
                 <input type="submit" value="Send Reset Password Email">
               </form>

src/Login.ts

@@ -1,3 +1,5 @@
+/// <reference types="@types/cloudflare-turnstile" />
+
 import i18next from 'i18next'
 import localforage from 'localforage'
 import { DOMCacheGetOrSet } from './Cache/DOM'
@@ -230,18 +232,21 @@ export async function handleLogin () {
       subtabElement.querySelector<HTMLElement>('#register')?.style.setProperty('display', 'flex')
       subtabElement.querySelector<HTMLElement>('#login')?.style.setProperty('display', 'none')
       subtabElement.querySelector<HTMLElement>('#forgotpassword')?.style.setProperty('display', 'none')
+      renderCaptcha()
     })
 
     subtabElement.querySelector('#open-signin')?.addEventListener('click', () => {
       subtabElement.querySelector<HTMLElement>('#register')?.style.setProperty('display', 'none')
       subtabElement.querySelector<HTMLElement>('#login')?.style.setProperty('display', 'flex')
       subtabElement.querySelector<HTMLElement>('#forgotpassword')?.style.setProperty('display', 'none')
+      renderCaptcha()
     })
 
     subtabElement.querySelector('#open-forgotpassword')?.addEventListener('click', () => {
       subtabElement.querySelector<HTMLElement>('#register')?.style.setProperty('display', 'none')
       subtabElement.querySelector<HTMLElement>('#login')?.style.setProperty('display', 'none')
       subtabElement.querySelector<HTMLElement>('#forgotpassword')?.style.setProperty('display', 'flex')
+      renderCaptcha()
     })
   }
 }
@@ -283,3 +288,16 @@ async function getCloudSave () {
 
   await importSynergism(save?.save ?? null)
 }
+
+export function renderCaptcha () {
+  const captchaElements = Array.from<HTMLElement>(document.querySelectorAll('.turnstile'))
+  const visible = captchaElements.find((el) => el.offsetParent !== null)
+
+  if (visible) {
+    turnstile.render(visible, {
+      sitekey: visible.getAttribute('data-sitekey')!,
+      'error-callback' () {},
+      retry: 'never'
+    })
+  }
+}

src/Toggles.ts

@@ -4,6 +4,7 @@ import { DOMCacheGetOrSet } from './Cache/DOM'
 import { calculateRuneLevels } from './Calculate'
 import { getChallengeConditions } from './Challenges'
 import { corruptionDisplay, corruptionLoadoutTableUpdate, maxCorruptionLevel } from './Corruptions'
+import { renderCaptcha } from './Login'
 import { autoResearchEnabled } from './Research'
 import { reset, resetrepeat } from './Reset'
 import { format, player, resetCheck } from './Synergism'
@@ -571,6 +572,8 @@ export const setActiveSettingScreen = async (subtab: string) => {
       const err = e as Error
       credits.appendChild(document.createTextNode(err.toString()))
     }
+  } else if (subtab === 'accountSubTab') {
+    renderCaptcha()
   }
 }