[codex] add fall down and runaway cheats

.gitignore

@@ -1,4 +1,5 @@
 .worktrees/
+.superpowers/
 node_modules/
 vendor/
 .phpunit.result.cache

README.md

@@ -38,7 +38,7 @@ The initial WordPress plugin ships with these presets:
 - `disco`: adds a colorful party effect.
 - `upside_down`: turns the page upside down.
 - `grayscale`: removes color from the page.
-- `high_contrast`: increases contrast across the page.
+- `runaway`: makes clickable elements dodge the cursor.
 - `soft_blur`: applies a soft blur effect.
 
 ## Developer Presets

assets/css/cheatjs-effects.css

@@ -1,3 +1,75 @@
+
+@keyframes cheatjs-updown {
+  0% {
+    transform: scaleY(1);
+  }
+  100% {
+    transform: scaleY(-1);
+  }
+}
+@keyframes cheatjs-drunk {
+  0% {
+    filter:blur(0.1px);
+    transform: translateX(1px);
+
+  }
+  22% {
+    filter: blur(1px);
+    transform: translateX(-1px);
+
+  }
+  44% {
+    filter: blur(4px);
+    transform: translateX(2px);
+
+  }
+  77% {
+    filter: blur(1px);
+    transform: translateX(-2px);
+
+  }
+  100% {
+    filter: blur(0);
+    transform: translateX(1px);
+
+  }
+}
+
+@keyframes cheatjs-disco {
+  0% {
+    background-color: hsl(340 100% 32%);
+  }
+
+  33% {
+    background-color: hsl(100 100% 32%);
+  }
+
+  66% {
+    background-color: hsl(220 100% 32%);
+  }
+
+  100% {
+    background-color: hsl(340 100% 32%);
+  }
+}
+
+@keyframes cheatjs-fall-down-shake {
+  0% {
+    transform: translateX(-1px) rotate(-1deg);
+  }
+
+  100% {
+    transform: translateX(1px) rotate(1deg);
+  }
+}
+
+@keyframes cheatjs-fall-down-drop {
+  100% {
+    opacity: 0;
+    transform: translateX(var(--cheatjs-fall-x)) translateY(110vh) rotate(var(--cheatjs-fall-rotate));
+  }
+}
+
 body {
   --cheatjs-brightness: brightness(1);
   --cheatjs-contrast: contrast(1);
@@ -11,18 +83,15 @@ body {
   --cheatjs-soft-blur: blur(0);
   --cheatjs-scale: 1;
 }
-
-body.cheatjs-disco > :not(.cheatjs-notice),
-body.cheatjs-drunk > :not(.cheatjs-notice),
-body.cheatjs-grayscale > :not(.cheatjs-notice),
-body.cheatjs-high-contrast > :not(.cheatjs-notice),
-body.cheatjs-soft-blur > :not(.cheatjs-notice) {
+body.cheatjs-drunk > :not(.cheatjs-notice):not(.cheatjs-stop-button),
+body.cheatjs-grayscale > :not(.cheatjs-notice):not(.cheatjs-stop-button),
+body.cheatjs-soft-blur > :not(.cheatjs-notice):not(.cheatjs-stop-button) {
   filter: var(--cheatjs-grayscale) var(--cheatjs-contrast) var(--cheatjs-brightness) var(--cheatjs-saturate) var(--cheatjs-soft-blur) var(--cheatjs-drunk-blur) var(--cheatjs-hue);
 }
 
-body.cheatjs-confidence > :not(.cheatjs-notice),
-body.cheatjs-upside-down > :not(.cheatjs-notice),
-body.cheatjs-drunk > :not(.cheatjs-notice) {
+body.cheatjs-confidence > :not(.cheatjs-notice):not(.cheatjs-stop-button),
+body.cheatjs-upside-down > :not(.cheatjs-notice):not(.cheatjs-stop-button),
+body.cheatjs-drunk > :not(.cheatjs-notice):not(.cheatjs-stop-button) {
   transform: rotate(var(--cheatjs-rotate-base)) rotate(var(--cheatjs-rotate-wobble)) translateX(var(--cheatjs-translate-x)) scale(var(--cheatjs-scale));
   transform-origin: 50% 2rem;
 }
@@ -42,12 +111,40 @@ body.cheatjs-drunk > :not(.cheatjs-notice) {
   font: 600 0.9375rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
+.cheatjs-stop-button {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  z-index: 1000000;
+  transform: translateY(-50%);
+  padding: 0.55rem 0.7rem;
+  border: 2px solid #111;
+  border-right: 0;
+  border-radius: 6px 0 0 6px;
+  background: #fff;
+  color: #111;
+  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22);
+  cursor: pointer;
+  font: 700 0.8125rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.cheatjs-stop-button:hover,
+.cheatjs-stop-button:focus {
+  background: #111;
+  color: #fff;
+}
+
+.cheatjs-stop-button:focus-visible {
+  outline: 3px solid #ffcc00;
+  outline-offset: 2px;
+}
+
 body.cheatjs-confidence {
   --cheatjs-scale: 1.04;
   cursor: crosshair;
 }
 
-body.cheatjs-confidence > :not(.cheatjs-notice) {
+body.cheatjs-confidence > :not(.cheatjs-notice):not(.cheatjs-stop-button) {
   text-transform: uppercase;
 }
 
@@ -108,73 +205,56 @@ body.cheatjs-konami::after {
 body.cheatjs-drunk {
   --cheatjs-drunk-blur: blur(0.7px);
   animation: cheatjs-drunk 3.5s ease-in-out infinite;
+  overflow-x: hidden;
 }
 
 body.cheatjs-disco {
-  animation: cheatjs-disco 1.2s linear infinite;
+  background-color: hsl(340 100% 32%);
+  animation: cheatjs-disco 1.2s steps(1, end) infinite;
 }
 
-body.cheatjs-upside-down {
-  --cheatjs-rotate-base: 180deg;
+body.cheatjs-fall-down {
+  overflow-x: hidden;
 }
 
-body.cheatjs-grayscale {
-  --cheatjs-grayscale: grayscale(1);
+.cheatjs-fall-down-letter {
+  display: inline-block;
+  position: relative;
+  animation:
+    cheatjs-fall-down-shake var(--cheatjs-fall-shake-duration) steps(2, end) var(--cheatjs-fall-delay) 6,
+    cheatjs-fall-down-drop var(--cheatjs-fall-drop-duration) cubic-bezier(0.24, 0.82, 0.36, 1) calc(var(--cheatjs-fall-delay) + 0.72s + var(--cheatjs-fall-hold-delay)) forwards;
+  transform-origin: 50% 100%;
+  will-change: opacity, transform;
 }
 
-body.cheatjs-high-contrast {
-  --cheatjs-contrast: contrast(1.5);
-  --cheatjs-brightness: brightness(1.15);
-  background: #000;
-  color: #fff;
+body.cheatjs-upside-down > :not(.cheatjs-notice):not(.cheatjs-stop-button){
+  animation: cheatjs-updown 1s linear 1.4s forwards;
 }
 
-body.cheatjs-high-contrast a {
-  color: #ffff00;
+body.cheatjs-grayscale {
+  --cheatjs-grayscale: grayscale(1);
 }
 
-body.cheatjs-soft-blur {
-  --cheatjs-soft-blur: blur(2px);
+.cheatjs-runaway-target {
+  transition: transform 0.16s ease-out;
+  will-change: transform;
 }
 
-@keyframes cheatjs-drunk {
-  0%,
-  100% {
-    --cheatjs-rotate-wobble: -1deg;
-    --cheatjs-translate-x: -0.25rem;
-  }
-
-  50% {
-    --cheatjs-rotate-wobble: 1deg;
-    --cheatjs-translate-x: 0.25rem;
-  }
-}
-
-@keyframes cheatjs-disco {
-  0% {
-    --cheatjs-hue: hue-rotate(0deg);
-    --cheatjs-saturate: saturate(1.2);
-  }
-
-  33% {
-    --cheatjs-hue: hue-rotate(120deg);
-    --cheatjs-saturate: saturate(1.8);
-  }
-
-  66% {
-    --cheatjs-hue: hue-rotate(240deg);
-    --cheatjs-saturate: saturate(1.45);
-  }
-
-  100% {
-    --cheatjs-hue: hue-rotate(360deg);
-    --cheatjs-saturate: saturate(1.2);
-  }
+body.cheatjs-soft-blur {
+  --cheatjs-soft-blur: blur(2px);
 }
 
 @media (prefers-reduced-motion: reduce) {
   body.cheatjs-drunk,
   body.cheatjs-disco {
     animation: none;
   }
+
+  .cheatjs-fall-down-letter {
+    animation: none;
+  }
+
+  .cheatjs-runaway-target {
+    transition: none;
+  }
 }

assets/js/cheatjs-admin.js

@@ -1,15 +1,15 @@
 (function (window) {
   'use strict';
 
-  var ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-  var ARROW_LABELS = {
+  const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+  const ARROW_LABELS = {
     ArrowUp: '↑',
     ArrowDown: '↓',
     ArrowLeft: '←',
     ArrowRight: '→',
   };
-  var AUTO_CONTROLLER_KEY = 'CHEATJS_ADMIN_AUTO_CONTROLLER';
-  var AUTO_PENDING_KEY = 'CHEATJS_ADMIN_AUTO_PENDING';
+  const AUTO_CONTROLLER_KEY = 'CHEATJS_ADMIN_AUTO_CONTROLLER';
+  const AUTO_PENDING_KEY = 'CHEATJS_ADMIN_AUTO_PENDING';
 
   function normalizeKey(key) {
     if (typeof key !== 'string') {
@@ -32,7 +32,7 @@
   }
 
   function keyLabel(key) {
-    var normalized = normalizeKey(key);
+    const normalized = normalizeKey(key);
 
     if (!normalized) {
       return '';
@@ -71,7 +71,7 @@
   }
 
   function renderSequence(card, sequence) {
-    var parts = findParts(card);
+    const parts = findParts(card);
 
     if (parts.input) {
       parts.input.value = sequenceValue(sequence);
@@ -83,21 +83,21 @@
 
     parts.chips.textContent = '';
     sequence.forEach(function (key) {
-      var chip = card.ownerDocument.createElement('span');
+      const chip = card.ownerDocument.createElement('span');
       chip.className = 'cheatjs-key-chip';
       chip.textContent = keyLabel(key);
       parts.chips.appendChild(chip);
     });
   }
 
   function getSequence(card) {
-    var input = card.querySelector('.cheatjs-sequence-input');
+    const input = card.querySelector('.cheatjs-sequence-input');
     return parseSequence(input ? input.value : '');
   }
 
   function createController(doc) {
-    var activeCard = null;
-    var previousSequence = [];
+    let activeCard = null;
+    let previousSequence = [];
 
     function stopRecording(options) {
       if (!activeCard) {
@@ -128,13 +128,13 @@
     }
 
     function appendKey(key) {
-      var sequence = getSequence(activeCard);
+      const sequence = getSequence(activeCard);
       sequence.push(key);
       renderSequence(activeCard, sequence);
     }
 
     function removeLastKey() {
-      var sequence = getSequence(activeCard);
+      const sequence = getSequence(activeCard);
       sequence.pop();
       renderSequence(activeCard, sequence);
     }
@@ -148,8 +148,8 @@
     }
 
     function handleClick(event) {
-      var target = event.target;
-      var card = cardFromEvent(event);
+      const target = event.target;
+      const card = cardFromEvent(event);
 
       if (!card || !target || !target.closest) {
         return;
@@ -194,7 +194,7 @@
         return;
       }
 
-      var key = normalizeKey(event.key);
+      const key = normalizeKey(event.key);
       if (!key) {
         return;
       }