From 94dd19ee8d927bfd93d0869cff87345859cefe7b Mon Sep 17 00:00:00 2001
From: ManzDev <JoseRomanHernandez@gmail.com>
Date: Fri, 24 Sep 2021 03:14:38 +0100
Subject: [PATCH] Fix perspective Chrome 94 change

---
 src/components/TARSBlock.js    |  3 ++-
 src/components/TARSFaceMain.js | 39 +++++++++++++++++++++-------------
 src/components/TARSRobot.js    |  2 +-
 src/index.css                  |  5 +++--
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/TARSBlock.js b/src/components/TARSBlock.js
index c069bf8..6c8f644 100644
--- a/src/components/TARSBlock.js
+++ b/src/components/TARSBlock.js
@@ -22,7 +22,6 @@ class TARSBlock extends HTMLElement {
         position: relative;
         perspective: 8000px;
         transform-style: preserve-3d;
-        /* transform: rotateX(15deg) rotateY(15deg); */
       }
 
       .face-1, .face-2, .face-5, .face-6 {
@@ -33,6 +32,8 @@ class TARSBlock extends HTMLElement {
         width: var(--width);
         height: var(--height);
         position: absolute;
+        perspective: 8000px;
+        transform-style: preserve-3d;
       }
 
       /* right face */
diff --git a/src/components/TARSFaceMain.js b/src/components/TARSFaceMain.js
index 1fba466..25a5035 100644
--- a/src/components/TARSFaceMain.js
+++ b/src/components/TARSFaceMain.js
@@ -37,6 +37,12 @@ class TARSFaceMain extends HTMLElement {
         position: relative;
       }
 
+      .black.screen > p {
+        transform: translate(0, 4px);
+        margin: 0;
+        padding: 0;
+      }
+
       .black.screen::before {
         content: "";
         width: 100%;
@@ -44,6 +50,7 @@ class TARSFaceMain extends HTMLElement {
         display: block;
         background: #222a;
         z-index: 2;
+        position: absolute;
       }
 
       .text {
@@ -94,29 +101,31 @@ class TARSFaceMain extends HTMLElement {
   }
 
   getTerminalText() {
-    return `
+    return /* html */`
       <div class="joke"></div>
-      Welcome to TARS Corporation (TM) Terminal
-      Copyright (C) 2984-2987, TARS Corp. Software
-      OS version: 22A1-9166-69
+      <p>
+        Welcome to TARS Corporation (TM) Terminal
+        Copyright (C) 2984-2987, TARS Corp. Software
+        OS version: 22A1-9166-69
 
-      Initializing...
-      ==================================
+        Initializing...
+        ==================================
 
-      Memory Test: 281474976710656B OK
+        Memory Test: 281474976710656B OK
 
-      Auto-Detecting modules ... TARS "H@CK-MODULE" found!
+        Auto-Detecting modules ... TARS "H@CK-MODULE" found!
 
-      Searching for devices nearby...
-      ==================================
+        Searching for devices nearby...
+        ==================================
 
-      Please choose an option:
+        Please choose an option:
 
-       (1) "Stellar Coffee"
-       (2) "Hack the box with S4vitaar"
-       (3) "CSS with ManzDev"
+        (1) "Stellar Coffee"
+        (2) "Hack the box with S4vitaar"
+        (3) "CSS with ManzDev"
 
-       What is your choice: _`;
+        What is your choice: _
+      </p>`;
   }
 
   connectedCallback() {
diff --git a/src/components/TARSRobot.js b/src/components/TARSRobot.js
index 5d48fb4..73676a5 100644
--- a/src/components/TARSRobot.js
+++ b/src/components/TARSRobot.js
@@ -14,7 +14,7 @@ class TARSRobot extends HTMLElement {
         justify-content: center;
         transform: rotateY(20deg);
         transform-style: preserve-3d;
-        perspective: 8000px;
+        perspective: 250000px;
         gap: 4px;
       }
 
diff --git a/src/index.css b/src/index.css
index 9e6369c..23b3b4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,7 +10,8 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  perspective: 900px;
+
+  /* perspective: 900px; */
 }
 
 .buttons {
@@ -27,7 +28,7 @@ body {
   border-radius: 10px;
   color: #eee;
   box-shadow: 0 7px 0 #0863a5, 0 8px 3px rgb(0 0 0 / 30%);
-  transition: all .25s;
+  transition: all 0.25s;
   cursor: pointer;
 }