Dino game - Add RTL support and game adjustments

+ Add proper RTL support so the game plays in reverse direction. + Stop game over animation frame request when not needed. This was causing the animation to not run correctly on subsequent plays. + Dino game gameplay adjustments + Fix bug where dino gets stuck flashing Bug: 1185173,1189820 Change-Id: I3d0ceca7ed8f8885ebba2e660d3b49540e19b97a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2791395 Commit-Queue: Edward Jung (EMEA) <edwardjung@chromium.org> Reviewed-by: Esmael Elmoslimany <aee@chromium.org> Reviewed-by: Ian Wells <iwells@chromium.org> Cr-Commit-Position: refs/heads/master@{#868071}
chromium · Mar 31, 2021 · 52205c2 · 52205c2
1 parent c0f1230
commit 52205c2
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 60 deletions.
diff --git a/components/neterror/resources/neterror.css b/components/neterror/resources/neterror.css
@@ -107,7 +107,7 @@ a {
 
 .single-suggestion {
   list-style-type: none;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 #short-suggestion {
@@ -169,7 +169,7 @@ a {
 }
 
 #error-information-popup-close {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   margin-inline-end: 35px;
   margin-top: 15px;
   text-align: end;
@@ -209,7 +209,7 @@ a {
   flex-grow: 1;
   font-size: 1em;
   height: 26px;
-  margin-right: 0;
+  margin-inline-end: 0;
   padding: 1px 9px;
 }
 
@@ -264,8 +264,8 @@ a {
 
 .snackbar-show {
   -webkit-animation:
-    show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards,
-    hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s;
+    show-snackbar 250ms cubic-bezier(0, 0, 0.2, 1) forwards,
+    hide-snackbar 250ms cubic-bezier(0.4, 0, 1, 1) forwards 5s;
 }
 
 @-webkit-keyframes show-snackbar {
@@ -325,7 +325,8 @@ a {
   }
 }
 
-#download-link, #download-link-clicked {
+#download-link,
+#download-link-clicked {
   margin-bottom: 30px;
   margin-top: 30px;
 }
@@ -334,16 +335,17 @@ a {
   color: #BBB;
 }
 
-#download-link:before, #download-link-clicked:before {
+#download-link::before,
+#download-link-clicked::before {
   content: url(images/download-blue.svg);
   display: inline-block;
   margin-inline-end: 4px;
   vertical-align: -webkit-baseline-middle;
 }
 
-#download-link-clicked:before {
-  width: 0px;
+#download-link-clicked::before {
   opacity: 0;
+  width: 0;
 }
 
 #offline-content-list-visibility-card {
@@ -367,7 +369,8 @@ a {
   color: var(--google-gray-700);
 }
 
-#offline-content-list-show-text, #offline-content-list-hide-text {
+#offline-content-list-show-text,
+#offline-content-list-hide-text {
   color: rgb(66, 133, 244);
 }
 
@@ -389,19 +392,19 @@ a {
    * when the actual height is smaller then the animation is not as smooth.
    */
   max-height: 27em;
-  transition: max-height 0.2s ease-in, visibility 0s 0.2s,
-              opacity 0.2s 0.2s linear;
+  transition: max-height 200ms ease-in, visibility 0s 200ms,
+              opacity 200ms 200ms linear;
 }
 
 /* Controls the animation of the offline content list when it is
  * collapsed/hidden.
  */
 #offline-content-list.list-hidden #offline-content-suggestions {
   max-height: 0;
-  visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s linear, visibility 0s 0.2s,
-              max-height 0.2s 0.2s ease-out;
+  transition: opacity 200ms linear, visibility 0s 200ms,
+              max-height 200ms 200ms ease-out;
+  visibility: hidden;
 }
 
 #offline-content-list {
@@ -548,7 +551,7 @@ div.offline-content-suggestion {
 }
 
 .suggestion-with-icon .offline-content-suggestion-texts {
-  padding-inline-start: 0px;
+  padding-inline-start: 0;
 }
 
 .offline-content-suggestion-attribution-freshness {
@@ -564,8 +567,8 @@ div.offline-content-suggestion {
   display: -webkit-box;
   flex-shrink: 1;
   margin-inline-end: 0.3em;
-  overflow-wrap: break-word;
   overflow: hidden;
+  overflow-wrap: break-word;
   text-overflow: ellipsis;
   word-break: break-all;
 }
@@ -574,15 +577,15 @@ div.offline-content-suggestion {
   display: none;
 }
 
-.offline-content-suggestion-freshness:before {
+.offline-content-suggestion-freshness::before {
   content: '-';
   display: inline-block;
   flex-shrink: 0;
   margin-inline-end: .1em;
   margin-inline-start: .1em;
 }
 
-.no-attribution .offline-content-suggestion-freshness:before {
+.no-attribution .offline-content-suggestion-freshness::before {
   display: none;
 }
 
@@ -591,8 +594,8 @@ div.offline-content-suggestion {
 }
 
 .suggestion-with-image .offline-content-suggestion-pin-spacer {
-  flex-shrink: 1;
   flex-grow: 100;
+  flex-shrink: 1;
 }
 
 .suggestion-with-image .offline-content-suggestion-pin {
@@ -608,16 +611,16 @@ div.offline-content-suggestion {
  */
 #offline-content-list-action {
   text-align: center;
-  transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear;
+  transition: visibility 0s 200ms, opacity 200ms 200ms linear;
 }
 
 /* Controls the animation of the launch-downloads-home action button when the
  * offline content list is collapsed/hidden.
  */
 #offline-content-list.list-hidden #offline-content-list-action {
-  visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s linear, visibility 0s 0.2s;
+  transition: opacity 200ms linear, visibility 0s 200ms;
+  visibility: hidden;
 }
 
 #cancel-save-page-button {
@@ -635,7 +638,7 @@ div.offline-content-suggestion {
   text-align: start;
 }
 
-html[dir="rtl"] #cancel-save-page-button {
+html[dir='rtl'] #cancel-save-page-button {
   background-position: left 27px center;
 }
 
@@ -644,7 +647,7 @@ html[dir="rtl"] #cancel-save-page-button {
   justify-content: start;
 }
 
-#save-page-for-later-button a:before {
+#save-page-for-later-button a::before {
   content: url(images/download-blue.svg);
   display: inline-block;
   margin-inline-end: 4px;
@@ -662,16 +665,16 @@ html[subframe] body {
 
 #sub-frame-error {
   -webkit-align-items: center;
+  -webkit-flex-flow: column;
+  -webkit-justify-content: center;
   background-color: #DDD;
   display: -webkit-flex;
-  -webkit-flex-flow: column;
   height: 100%;
-  -webkit-justify-content: center;
   left: 0;
   position: absolute;
   text-align: center;
   top: 0;
-  transition: background-color .2s ease-in-out;
+  transition: background-color 200ms ease-in-out;
   width: 100%;
 }
 
@@ -730,7 +733,7 @@ html[subframe] body {
 }
 
 .suggested-left .secondary-button {
-  margin-inline-end: 0px;
+  margin-inline-end: 0;
   margin-inline-start: 16px;
 }
 
@@ -745,18 +748,18 @@ html[subframe] body {
   position: relative;
 }
 
-#download-button:before {
+#download-button::before {
   background: -webkit-image-set(
       url(../../resources/default_100_percent/neterror/download.png) 1x,
       url(../../resources/default_200_percent/neterror/download.png) 2x)
     no-repeat;
   content: '';
   display: inline-block;
-  width: 24px;
   height: 24px;
   margin-inline-end: 4px;
   margin-inline-start: -4px;
   vertical-align: middle;
+  width: 24px;
 }
 
 #download-button:disabled {
@@ -768,8 +771,8 @@ html[subframe] body {
 TODO(https://crbug.com/852872): UI for offline suggested content is incomplete.
 */
 .suggested-thumbnail {
-  width: 25vw;
   height: 25vw;
+  width: 25vw;
 }
 
 /* Alternate dino page button styles */
@@ -788,6 +791,11 @@ TODO(https://crbug.com/852872): UI for offline suggested content is incomplete.
 }
 
 /* Offline page */
+html[dir='rtl'] .runner-container,
+html[dir='rtl'].offline .icon-offline {
+  transform: scaleX(-1);
+}
+
 .offline {
   transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
               background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
@@ -885,10 +893,10 @@ whereas Blink does not. */
   }
 
   .snackbar {
-    left: 0;
+    border-radius: 0;
     bottom: 0;
+    left: 0;
     width: 100%;
-    border-radius: 0;
   }
 }
 
@@ -950,8 +958,8 @@ whereas Blink does not. */
 
 @media (max-width: 240px) {
   button {
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-inline-end: 12px;
+    padding-inline-start: 12px;
   }
 
   .interstitial-wrapper {
@@ -991,7 +999,7 @@ whereas Blink does not. */
   margin: auto;
   right: 0;
   transform-origin: top center;
-  transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s;
+  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
   z-index: 2;
 }
 

diff --git a/components/neterror/resources/offline-sprite-definitions.js b/components/neterror/resources/offline-sprite-definitions.js
@@ -555,16 +555,17 @@ Runner.spriteDefinitionByType = {
     BOTTOM_PAD: 43,
     HAS_CLOUDS: 0,
     TREX: {
+      GRAVITY: 0.38,
       MAX_JUMP_HEIGHT: 25,
-      MIN_JUMP_HEIGHT: 20,
-      INITIAL_JUMP_VELOCITY: -8,
+      MIN_JUMP_HEIGHT: 18,
+      INITIAL_JUMP_VELOCITY: -16,
       INVERT_JUMP: 1,
       RUNNING_1: {x: 0, w: 65, h: 30, xOffset: 0},
       RUNNING_2: {x: 67, w: 65, h: 30, xOffset: 0},
       CRASHED: {x: 196, w: 65, h: 30, xOffset: 0},
       JUMPING: {x: 133.5, w: 65, h: 30, xOffset: 0},
       COLLISION_BOXES: [
-        new CollisionBox(14, 4, 49, 9), new CollisionBox(20, 17, 23, 4),
+        new CollisionBox(17, 4, 49, 9), new CollisionBox(20, 17, 23, 4),
         new CollisionBox(19, 20, 10, 7), new CollisionBox(17, 13, 42, 4)
       ]
     },
@@ -575,29 +576,29 @@ Runner.spriteDefinitionByType = {
         height: 11,
         yPos: 80,
         multipleSpeed: 4,
-        minGap: 90,
+        minGap: 120,
         minSpeed: 0,
-        collisionBoxes: [new CollisionBox(0, 2, 27, 10)]
+        collisionBoxes: [new CollisionBox(0, 2, 27, 8)]
       },
       {
         type: 'OBSTACLE_2',
         width: 54,
         height: 11,
         yPos: 80,
         multipleSpeed: 4,
-        minGap: 110,
+        minGap: 140,
         minSpeed: 7,
-        collisionBoxes: [new CollisionBox(0, 2, 52, 10)]
+        collisionBoxes: [new CollisionBox(0, 2, 52, 8)]
       },
       {
         type: 'OBSTACLE_3',
         width: 42,
         height: 16,
         yPos: 76,
         multipleSpeed: 4,
-        minGap: 140,
+        minGap: 170,
         minSpeed: 3,
-        collisionBoxes: [new CollisionBox(0, 2, 40, 16)]
+        collisionBoxes: [new CollisionBox(0, 2, 40, 14)]
       }
     ],
     BACKGROUND_EL_CONFIG: {