From 123e9f5465ac3f0e6fcf5c468bab79d088e1196c Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Fri, 18 Dec 2020 13:40:32 -0300
Subject: [PATCH 1/6] Add language selector concept

---
 index.html |  7 ++++++-
 main.js    | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index effbf72..77c21b2 100644
--- a/index.html
+++ b/index.html
@@ -58,13 +58,18 @@ <h2 id="header">typings</h2>
         </div>
       </div>
     </div>
+    <div id="language-center" class="hidden">
+      <div id="left-wing" onClick="hideLanguageCenter();">< back</div>
+      <div id="language-area"></div>
+    </div>
     <div id="theme-center" class="hidden">
       <div id="left-wing" onClick="hideThemeCenter();">< back</div>
       <div id="theme-area"></div>
     </div>
     <div id="footer">
       <a href="https://github.com/briano1905/typings#typings" target="_blank" tabindex="3">user guide</a>/
-      <div id="show-themes"class="button" onClick="showThemeCenter();" tabindex="4">themes</div>
+      <div id="show-languages"class="button" onClick="showLanguageCenter();" tabindex="4">languages</div>/
+      <div id="show-themes"class="button" onClick="showThemeCenter();" tabindex="5">themes</div>
     </div>
     <script src="main.js"></script>
   </body>
diff --git a/main.js b/main.js
index e8f7db5..74fe1b8 100644
--- a/main.js
+++ b/main.js
@@ -307,6 +307,7 @@ function setLanguage(_lang) {
         }
 
         setText();
+        hideLanguageCenter();
       } else {
         console.error(`language ${lang} is undefine`);
       }
@@ -391,6 +392,29 @@ function getCookie(cname) {
   return '';
 }
 
+showAllLanguages();
+function showAllLanguages() {
+  fetch(`texts/random.json`)
+    .then(response => {
+      if (response.status === 200) {
+        response
+          .text()
+          .then(body => {
+            let languages = JSON.parse(body);
+            let keys = Object.keys(languages);
+            let i;
+            for (i = 0; i < keys.length; i++) {
+              let language = document.createElement('div');
+              language.setAttribute('class', 'language-button')
+              language.setAttribute('onClick', `setLanguage('${keys[i]}')`)
+              language.textContent = keys[i];
+              document.getElementById('language-area').appendChild(language);
+            }
+          })
+      }
+    })
+}
+
 showAllThemes();
 function showAllThemes(){
     fetch(`themes/theme-list.json`)
@@ -446,6 +470,16 @@ document.getElementById('show-themes').addEventListener('keydown', (e) => {
   }
 });
 
+function showLanguageCenter() {
+  document.getElementById('language-center').classList.remove('hidden');
+  document.getElementById('command-center').classList.add('hidden');
+}
+
+function hideLanguageCenter() {
+  document.getElementById('language-center').classList.add('hidden');
+  document.getElementById('command-center').classList.remove('hidden');
+}
+
 function showThemeCenter() {
   document.getElementById('theme-center').classList.remove('hidden');
   document.getElementById('command-center').classList.add('hidden');

From 795392e13b461c8b4b43b17ff9e558a3f10c7fb1 Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Fri, 18 Dec 2020 15:10:21 -0300
Subject: [PATCH 2/6] Refactor CSS a bit and style language menu

An attempt to simplify general elements by selecting with classes instead
of IDs.
---
 index.html                |  6 +++---
 style.css                 | 14 +++++---------
 themes/1976.css           |  5 ++---
 themes/8008.css           |  4 ++--
 themes/9009.css           |  4 ++--
 themes/Leviathan.css      |  5 ++---
 themes/aurora.css         |  4 ++--
 themes/burgundy.css       |  4 ++--
 themes/carbon.css         |  4 ++--
 themes/dark.css           |  4 ++--
 themes/denim.css          |  4 ++--
 themes/dots.css           |  4 ++--
 themes/dracula.css        |  4 ++--
 themes/eclipse.css        |  4 ++--
 themes/godspeed.css       |  5 ++---
 themes/gruvbox.css        |  4 ++--
 themes/handarbeit.css     |  4 ++--
 themes/honeywell.css      |  5 ++---
 themes/hyperfuse.css      |  4 ++--
 themes/kobayashi.css      |  5 ++---
 themes/light.css          |  4 ++--
 themes/mizu.css           |  4 ++--
 themes/moderndolch.css    |  4 ++--
 themes/monokai.css        |  4 ++--
 themes/mrsleeves.css      |  4 ++--
 themes/nautilus.css       |  4 ++--
 themes/nord.css           |  4 ++--
 themes/oblivion.css       |  4 ++--
 themes/olivia.css         |  4 ++--
 themes/phantom.css        |  4 ++--
 themes/rama.css           |  4 ++--
 themes/sakura.css         |  4 ++--
 themes/serika.css         |  4 ++--
 themes/solarizeddark.css  |  4 ++--
 themes/solarizedlight.css |  4 ++--
 themes/spacecadet.css     |  5 ++---
 themes/theme-list.json    |  2 +-
 themes/vilebloom.css      |  4 ++--
 themes/yuri.css           |  4 ++--
 39 files changed, 81 insertions(+), 91 deletions(-)

diff --git a/index.html b/index.html
index 77c21b2..aa61760 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@ <h2 id="header">typings</h2>
         </div>
         <div id="right-wing">WPM: XX / ACC: XX</div>
       </div>
-      <div id="typing-area">
+      <div id="typing-area" class="area">
         <div id="text-display"></div>
         <div class="bar">
           <input id="input-field" type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" tabindex="1"/>
@@ -60,11 +60,11 @@ <h2 id="header">typings</h2>
     </div>
     <div id="language-center" class="hidden">
       <div id="left-wing" onClick="hideLanguageCenter();">< back</div>
-      <div id="language-area"></div>
+      <div id="language-area" class="area"></div>
     </div>
     <div id="theme-center" class="hidden">
       <div id="left-wing" onClick="hideThemeCenter();">< back</div>
-      <div id="theme-area"></div>
+      <div id="theme-area" class="area"></div>
     </div>
     <div id="footer">
       <a href="https://github.com/briano1905/typings#typings" target="_blank" tabindex="3">user guide</a>/
diff --git a/style.css b/style.css
index 34d93c4..dede5b5 100644
--- a/style.css
+++ b/style.css
@@ -36,11 +36,14 @@ body {
   transform: translateY(-2vh);
 }
 
-#theme-area{
+.area {
   margin-top: 1rem;
   padding: 1.4rem 1rem;
   border-radius: 0.4rem;
   background: #eaeaea;
+}
+
+#theme-area, #language-area {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -73,13 +76,6 @@ body {
 
 /* #right-wing {} */
 
-#typing-area {
-  margin-top: 1rem;
-  padding: 1.4rem 1rem;
-  border-radius: 0.4rem;
-  background: #eaeaea;
-}
-
 #text-display {
   margin-bottom: 1rem;
   overflow: hidden;
@@ -127,7 +123,7 @@ body {
   display: none !important;
 }
 
-body, #header, #left-wing, #right-wing, #typing-area, #theme-area, #theme-center,
+body, #header, #left-wing, #right-wing, .area, #theme-center,
 #text-display, #redo-button, #footer, #highlight {
   transition: all .4s ease-in-out 0s;
 
diff --git a/themes/1976.css b/themes/1976.css
index cb982cb..9515b2f 100644
--- a/themes/1976.css
+++ b/themes/1976.css
@@ -32,8 +32,7 @@ body {
   color: #ffffff;
 }
 
-#typing-area,
-#theme-area {
+.area {
   background: #5b3217;
 }
 
@@ -52,7 +51,7 @@ body {
   color: #ffffff;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #5dcfb8;
 }
 
diff --git a/themes/8008.css b/themes/8008.css
index 07484ed..1adce73 100644
--- a/themes/8008.css
+++ b/themes/8008.css
@@ -22,11 +22,11 @@ body {
   color: #f44c7f;
 }
 
-#typing-area, #theme-area{
+.area{
   background: #a2aebd;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #3c4756;
 }
 
diff --git a/themes/9009.css b/themes/9009.css
index 9d3757c..096df58 100644
--- a/themes/9009.css
+++ b/themes/9009.css
@@ -24,11 +24,11 @@ body {
   color: #2e2f33;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #d9d2c8;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #2e2f33;
 }
 
diff --git a/themes/Leviathan.css b/themes/Leviathan.css
index d52550d..c3f4ba8 100644
--- a/themes/Leviathan.css
+++ b/themes/Leviathan.css
@@ -14,12 +14,11 @@ body {
   color: #BAEE75;
 }
 
-#typing-area,
-#theme-area {
+.area {
   background: #BAEE75;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #182031;
 }
 
diff --git a/themes/aurora.css b/themes/aurora.css
index 13cc04d..60ccbbe 100644
--- a/themes/aurora.css
+++ b/themes/aurora.css
@@ -28,12 +28,12 @@ body {
   color: #fafafa;
 }
 
-#typing-area, #theme-area {
+.area {
   background: rgba(250, 250, 250, 0.6);
   backdrop-filter: blur(1rem);
 }
 
-#text-display {
+#text-display, #language-area {
   color: #1a1a1a;
 }
 
diff --git a/themes/burgundy.css b/themes/burgundy.css
index 85607a2..f44af12 100644
--- a/themes/burgundy.css
+++ b/themes/burgundy.css
@@ -14,11 +14,11 @@ body {
   color: #fafafa;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #691f28;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #fafafa;
 }
 
diff --git a/themes/carbon.css b/themes/carbon.css
index 253b421..d476562 100644
--- a/themes/carbon.css
+++ b/themes/carbon.css
@@ -14,11 +14,11 @@ body {
   color: #ed6b21;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #e3d9c6;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #575d5e;
 }
 
diff --git a/themes/dark.css b/themes/dark.css
index 0e352f1..0631a9e 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -14,11 +14,11 @@ body {
   color: #fafafa;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #333333;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #fafafa;
 }
 
diff --git a/themes/denim.css b/themes/denim.css
index e146a6c..30fdb14 100644
--- a/themes/denim.css
+++ b/themes/denim.css
@@ -24,11 +24,11 @@ body {
   color: #e3d5b9;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #687796;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #e3d5b9;
 }
 
diff --git a/themes/dots.css b/themes/dots.css
index 25f6b1d..cb9d04c 100644
--- a/themes/dots.css
+++ b/themes/dots.css
@@ -26,11 +26,11 @@ body {
   color: #ffd751;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #232533;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #fafafa;
 }
 
diff --git a/themes/dracula.css b/themes/dracula.css
index 2cf4798..39666d4 100644
--- a/themes/dracula.css
+++ b/themes/dracula.css
@@ -14,11 +14,11 @@ body {
   color: #bd93f9;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #44475a;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #f8f8f2;
 }
 
diff --git a/themes/eclipse.css b/themes/eclipse.css
index e62ce00..a54f273 100644
--- a/themes/eclipse.css
+++ b/themes/eclipse.css
@@ -22,11 +22,11 @@ body {
   color: #abc6dc;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #3a3a3a;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #abc6dc;
 }
 
diff --git a/themes/godspeed.css b/themes/godspeed.css
index e7ea0d6..6acf3dc 100644
--- a/themes/godspeed.css
+++ b/themes/godspeed.css
@@ -14,12 +14,11 @@ body {
   color: #e5e8e6;
 }
 
-#typing-area,
-#theme-area {
+.area {
   background: #eae3d5;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #575d5e;
 }
 
diff --git a/themes/gruvbox.css b/themes/gruvbox.css
index 8f7e2c4..3dfebda 100644
--- a/themes/gruvbox.css
+++ b/themes/gruvbox.css
@@ -18,11 +18,11 @@ body {
   color: #ebdbb2;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #1d2021;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #ebdbb2;
 }
 
diff --git a/themes/handarbeit.css b/themes/handarbeit.css
index a8ff64b..1ba96d5 100644
--- a/themes/handarbeit.css
+++ b/themes/handarbeit.css
@@ -29,11 +29,11 @@ body {
   color: #147d36;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #bb2e17;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #fafafa;
 }
 
diff --git a/themes/honeywell.css b/themes/honeywell.css
index e0135c3..2e34466 100644
--- a/themes/honeywell.css
+++ b/themes/honeywell.css
@@ -14,12 +14,11 @@ body {
   color: #e5e8e6;
 }
 
-#typing-area,
-#theme-area {
+.area {
   background: #f7f7f7;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #575d5e;
 }
 
diff --git a/themes/hyperfuse.css b/themes/hyperfuse.css
index d00df55..2eb7abd 100644
--- a/themes/hyperfuse.css
+++ b/themes/hyperfuse.css
@@ -14,11 +14,11 @@ body {
   color: #25cdc5;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #d4d4d4;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #555761;
 }
 
diff --git a/themes/kobayashi.css b/themes/kobayashi.css
index 50b5679..f33b09d 100644
--- a/themes/kobayashi.css
+++ b/themes/kobayashi.css
@@ -14,12 +14,11 @@ body {
     color: #e5e8e6;
 }
 
-#typing-area,
-#theme-area {
+.area {
     background: #fefef5;
 }
 
-#text-display {
+#text-display, #language-area {
     color: #f00d00;
 }
 
diff --git a/themes/light.css b/themes/light.css
index 15c4e61..439c1fe 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -14,11 +14,11 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #eaeaea;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #1a1a1a;
 }
 
diff --git a/themes/mizu.css b/themes/mizu.css
index 19e78da..f6d10eb 100644
--- a/themes/mizu.css
+++ b/themes/mizu.css
@@ -21,11 +21,11 @@ body {
   color: #fafafa;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #b9d9eb;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #253746;
 }
 
diff --git a/themes/moderndolch.css b/themes/moderndolch.css
index 3ebef43..bf009a9 100644
--- a/themes/moderndolch.css
+++ b/themes/moderndolch.css
@@ -23,11 +23,11 @@ body {
   color: #fafafa;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #7c7e81;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #fafafa;
 }
 
diff --git a/themes/monokai.css b/themes/monokai.css
index 6e1c73e..dba42bc 100644
--- a/themes/monokai.css
+++ b/themes/monokai.css
@@ -18,11 +18,11 @@ body {
   color: #F8F8F2;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #272822;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #F8F8F2;
 }
 
diff --git a/themes/mrsleeves.css b/themes/mrsleeves.css
index 0406798..6eebd23 100644
--- a/themes/mrsleeves.css
+++ b/themes/mrsleeves.css
@@ -21,11 +21,11 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #eaeaea;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #1a1a1a;
 }
 
diff --git a/themes/nautilus.css b/themes/nautilus.css
index 3431db0..1e0f692 100644
--- a/themes/nautilus.css
+++ b/themes/nautilus.css
@@ -23,11 +23,11 @@ body {
   color: #eac004;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #155d94;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #1ae7ea;
 }
 
diff --git a/themes/nord.css b/themes/nord.css
index 6406aac..bc3f5a4 100644
--- a/themes/nord.css
+++ b/themes/nord.css
@@ -14,11 +14,11 @@ body {
   color: #eceff4;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #2e3440;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #eceff4;
 }
 
diff --git a/themes/oblivion.css b/themes/oblivion.css
index 5f75e8e..3667491 100644
--- a/themes/oblivion.css
+++ b/themes/oblivion.css
@@ -14,11 +14,11 @@ body {
   color: #ffac00;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #63696a;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #c8c3b8;
 }
 
diff --git a/themes/olivia.css b/themes/olivia.css
index 069ec29..ba2329b 100644
--- a/themes/olivia.css
+++ b/themes/olivia.css
@@ -14,11 +14,11 @@ body {
   color: #e8c4b8;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #fafafa;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #363434;
 }
 
diff --git a/themes/phantom.css b/themes/phantom.css
index 0623707..082cf55 100644
--- a/themes/phantom.css
+++ b/themes/phantom.css
@@ -14,11 +14,11 @@ body {
   color: #eed484;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #2e1a47;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #eed484;
 }
 
diff --git a/themes/rama.css b/themes/rama.css
index daf0722..44ee1a6 100644
--- a/themes/rama.css
+++ b/themes/rama.css
@@ -14,11 +14,11 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #d4d4d4;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #1a1a1a;
 }
 
diff --git a/themes/sakura.css b/themes/sakura.css
index 4f430c4..47c4153 100644
--- a/themes/sakura.css
+++ b/themes/sakura.css
@@ -24,11 +24,11 @@ body {
   color: #fff;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #fff;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #ff98ac;
 }
 
diff --git a/themes/serika.css b/themes/serika.css
index d052649..882473b 100644
--- a/themes/serika.css
+++ b/themes/serika.css
@@ -23,11 +23,11 @@ body {
   color: #302f2b;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #f0ebd7;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #302f2b;
 }
 
diff --git a/themes/solarizeddark.css b/themes/solarizeddark.css
index cd7d2fc..b20bc26 100644
--- a/themes/solarizeddark.css
+++ b/themes/solarizeddark.css
@@ -14,11 +14,11 @@ body {
   color: #fafafa;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #002b36;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #fafafa;
 }
 
diff --git a/themes/solarizedlight.css b/themes/solarizedlight.css
index 58d49f0..19fc7c9 100644
--- a/themes/solarizedlight.css
+++ b/themes/solarizedlight.css
@@ -14,11 +14,11 @@ body {
   color: #1a1a1a;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #fdf6e3;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #1a1a1a;
 }
 
diff --git a/themes/spacecadet.css b/themes/spacecadet.css
index 31f75d8..b247821 100644
--- a/themes/spacecadet.css
+++ b/themes/spacecadet.css
@@ -14,12 +14,11 @@ body {
   color: #e5e8e6;
 }
 
-#typing-area,
-#theme-area {
+.area {
   background: #f7f7f7;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #575d5e;
 }
 
diff --git a/themes/theme-list.json b/themes/theme-list.json
index 1460b41..7b3bfdd 100644
--- a/themes/theme-list.json
+++ b/themes/theme-list.json
@@ -144,4 +144,4 @@
         "background":"#EBCD01",
         "color":"#F00D00"
     }
-}
\ No newline at end of file
+}
diff --git a/themes/vilebloom.css b/themes/vilebloom.css
index d526f36..4ddfadc 100644
--- a/themes/vilebloom.css
+++ b/themes/vilebloom.css
@@ -27,7 +27,7 @@ body {
   color: #ffffff;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #f6bd9d;
 }
 
@@ -45,7 +45,7 @@ body {
   color: #ffffff;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #cd6c8f;
 }
 
diff --git a/themes/yuri.css b/themes/yuri.css
index dbc4510..cf9eaba 100644
--- a/themes/yuri.css
+++ b/themes/yuri.css
@@ -22,11 +22,11 @@ body {
   color: #ea4221;
 }
 
-#typing-area, #theme-area {
+.area {
   background: #abc6dc;
 }
 
-#text-display {
+#text-display, #language-area {
   color: #293649;
 }
 

From f734cec6ff3402f454ff3ee22d5cd7c11b790434 Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Fri, 18 Dec 2020 15:20:53 -0300
Subject: [PATCH 3/6] "languages" -> "language"

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index aa61760..c59ed29 100644
--- a/index.html
+++ b/index.html
@@ -68,7 +68,7 @@ <h2 id="header">typings</h2>
     </div>
     <div id="footer">
       <a href="https://github.com/briano1905/typings#typings" target="_blank" tabindex="3">user guide</a>/
-      <div id="show-languages"class="button" onClick="showLanguageCenter();" tabindex="4">languages</div>/
+      <div id="show-languages"class="button" onClick="showLanguageCenter();" tabindex="4">language</div>/
       <div id="show-themes"class="button" onClick="showThemeCenter();" tabindex="5">themes</div>
     </div>
     <script src="main.js"></script>

From addee90570087459dd11382d9a3483a7873bdc4d Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Sat, 19 Dec 2020 16:00:26 -0300
Subject: [PATCH 4/6] Rename class "area" to "center-area"

---
 index.html                | 6 +++---
 style.css                 | 4 ++--
 themes/1976.css           | 2 +-
 themes/8008.css           | 2 +-
 themes/9009.css           | 2 +-
 themes/Leviathan.css      | 2 +-
 themes/aurora.css         | 2 +-
 themes/burgundy.css       | 2 +-
 themes/carbon.css         | 2 +-
 themes/dark.css           | 2 +-
 themes/denim.css          | 2 +-
 themes/dots.css           | 2 +-
 themes/dracula.css        | 2 +-
 themes/eclipse.css        | 2 +-
 themes/godspeed.css       | 2 +-
 themes/gruvbox.css        | 2 +-
 themes/handarbeit.css     | 2 +-
 themes/honeywell.css      | 2 +-
 themes/hyperfuse.css      | 2 +-
 themes/kobayashi.css      | 2 +-
 themes/light.css          | 2 +-
 themes/mizu.css           | 2 +-
 themes/moderndolch.css    | 2 +-
 themes/monokai.css        | 2 +-
 themes/mrsleeves.css      | 2 +-
 themes/nautilus.css       | 2 +-
 themes/nord.css           | 2 +-
 themes/oblivion.css       | 2 +-
 themes/olivia.css         | 2 +-
 themes/phantom.css        | 2 +-
 themes/rama.css           | 2 +-
 themes/sakura.css         | 2 +-
 themes/serika.css         | 2 +-
 themes/solarizeddark.css  | 2 +-
 themes/solarizedlight.css | 2 +-
 themes/spacecadet.css     | 2 +-
 themes/vilebloom.css      | 2 +-
 themes/yuri.css           | 2 +-
 38 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index c59ed29..ffaab3b 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@ <h2 id="header">typings</h2>
         </div>
         <div id="right-wing">WPM: XX / ACC: XX</div>
       </div>
-      <div id="typing-area" class="area">
+      <div id="typing-area" class="center-area">
         <div id="text-display"></div>
         <div class="bar">
           <input id="input-field" type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" tabindex="1"/>
@@ -60,11 +60,11 @@ <h2 id="header">typings</h2>
     </div>
     <div id="language-center" class="hidden">
       <div id="left-wing" onClick="hideLanguageCenter();">< back</div>
-      <div id="language-area" class="area"></div>
+      <div id="language-area" class="center-area"></div>
     </div>
     <div id="theme-center" class="hidden">
       <div id="left-wing" onClick="hideThemeCenter();">< back</div>
-      <div id="theme-area" class="area"></div>
+      <div id="theme-area" class="center-area"></div>
     </div>
     <div id="footer">
       <a href="https://github.com/briano1905/typings#typings" target="_blank" tabindex="3">user guide</a>/
diff --git a/style.css b/style.css
index dede5b5..298f1f4 100644
--- a/style.css
+++ b/style.css
@@ -36,7 +36,7 @@ body {
   transform: translateY(-2vh);
 }
 
-.area {
+.center-area {
   margin-top: 1rem;
   padding: 1.4rem 1rem;
   border-radius: 0.4rem;
@@ -123,7 +123,7 @@ body {
   display: none !important;
 }
 
-body, #header, #left-wing, #right-wing, .area, #theme-center,
+body, #header, #left-wing, #right-wing, .center-area, #theme-center,
 #text-display, #redo-button, #footer, #highlight {
   transition: all .4s ease-in-out 0s;
 
diff --git a/themes/1976.css b/themes/1976.css
index 9515b2f..d888c8a 100644
--- a/themes/1976.css
+++ b/themes/1976.css
@@ -32,7 +32,7 @@ body {
   color: #ffffff;
 }
 
-.area {
+.center-area {
   background: #5b3217;
 }
 
diff --git a/themes/8008.css b/themes/8008.css
index 1adce73..71fd0f9 100644
--- a/themes/8008.css
+++ b/themes/8008.css
@@ -22,7 +22,7 @@ body {
   color: #f44c7f;
 }
 
-.area{
+.center-area{
   background: #a2aebd;
 }
 
diff --git a/themes/9009.css b/themes/9009.css
index 096df58..74b2896 100644
--- a/themes/9009.css
+++ b/themes/9009.css
@@ -24,7 +24,7 @@ body {
   color: #2e2f33;
 }
 
-.area {
+.center-area {
   background: #d9d2c8;
 }
 
diff --git a/themes/Leviathan.css b/themes/Leviathan.css
index c3f4ba8..ecbd451 100644
--- a/themes/Leviathan.css
+++ b/themes/Leviathan.css
@@ -14,7 +14,7 @@ body {
   color: #BAEE75;
 }
 
-.area {
+.center-area {
   background: #BAEE75;
 }
 
diff --git a/themes/aurora.css b/themes/aurora.css
index 60ccbbe..fc55bdb 100644
--- a/themes/aurora.css
+++ b/themes/aurora.css
@@ -28,7 +28,7 @@ body {
   color: #fafafa;
 }
 
-.area {
+.center-area {
   background: rgba(250, 250, 250, 0.6);
   backdrop-filter: blur(1rem);
 }
diff --git a/themes/burgundy.css b/themes/burgundy.css
index f44af12..17851b0 100644
--- a/themes/burgundy.css
+++ b/themes/burgundy.css
@@ -14,7 +14,7 @@ body {
   color: #fafafa;
 }
 
-.area {
+.center-area {
   background: #691f28;
 }
 
diff --git a/themes/carbon.css b/themes/carbon.css
index d476562..c1e39fa 100644
--- a/themes/carbon.css
+++ b/themes/carbon.css
@@ -14,7 +14,7 @@ body {
   color: #ed6b21;
 }
 
-.area {
+.center-area {
   background: #e3d9c6;
 }
 
diff --git a/themes/dark.css b/themes/dark.css
index 0631a9e..3857bbe 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -14,7 +14,7 @@ body {
   color: #fafafa;
 }
 
-.area {
+.center-area {
   background: #333333;
 }
 
diff --git a/themes/denim.css b/themes/denim.css
index 30fdb14..0b2e21f 100644
--- a/themes/denim.css
+++ b/themes/denim.css
@@ -24,7 +24,7 @@ body {
   color: #e3d5b9;
 }
 
-.area {
+.center-area {
   background: #687796;
 }
 
diff --git a/themes/dots.css b/themes/dots.css
index cb9d04c..f7d630b 100644
--- a/themes/dots.css
+++ b/themes/dots.css
@@ -26,7 +26,7 @@ body {
   color: #ffd751;
 }
 
-.area {
+.center-area {
   background: #232533;
 }
 
diff --git a/themes/dracula.css b/themes/dracula.css
index 39666d4..4061f55 100644
--- a/themes/dracula.css
+++ b/themes/dracula.css
@@ -14,7 +14,7 @@ body {
   color: #bd93f9;
 }
 
-.area {
+.center-area {
   background: #44475a;
 }
 
diff --git a/themes/eclipse.css b/themes/eclipse.css
index a54f273..b0f4fa1 100644
--- a/themes/eclipse.css
+++ b/themes/eclipse.css
@@ -22,7 +22,7 @@ body {
   color: #abc6dc;
 }
 
-.area {
+.center-area {
   background: #3a3a3a;
 }
 
diff --git a/themes/godspeed.css b/themes/godspeed.css
index 6acf3dc..6440e1c 100644
--- a/themes/godspeed.css
+++ b/themes/godspeed.css
@@ -14,7 +14,7 @@ body {
   color: #e5e8e6;
 }
 
-.area {
+.center-area {
   background: #eae3d5;
 }
 
diff --git a/themes/gruvbox.css b/themes/gruvbox.css
index 3dfebda..b769c42 100644
--- a/themes/gruvbox.css
+++ b/themes/gruvbox.css
@@ -18,7 +18,7 @@ body {
   color: #ebdbb2;
 }
 
-.area {
+.center-area {
   background: #1d2021;
 }
 
diff --git a/themes/handarbeit.css b/themes/handarbeit.css
index 1ba96d5..d70e020 100644
--- a/themes/handarbeit.css
+++ b/themes/handarbeit.css
@@ -29,7 +29,7 @@ body {
   color: #147d36;
 }
 
-.area {
+.center-area {
   background: #bb2e17;
 }
 
diff --git a/themes/honeywell.css b/themes/honeywell.css
index 2e34466..8b18afd 100644
--- a/themes/honeywell.css
+++ b/themes/honeywell.css
@@ -14,7 +14,7 @@ body {
   color: #e5e8e6;
 }
 
-.area {
+.center-area {
   background: #f7f7f7;
 }
 
diff --git a/themes/hyperfuse.css b/themes/hyperfuse.css
index 2eb7abd..e23d0aa 100644
--- a/themes/hyperfuse.css
+++ b/themes/hyperfuse.css
@@ -14,7 +14,7 @@ body {
   color: #25cdc5;
 }
 
-.area {
+.center-area {
   background: #d4d4d4;
 }
 
diff --git a/themes/kobayashi.css b/themes/kobayashi.css
index f33b09d..77ff213 100644
--- a/themes/kobayashi.css
+++ b/themes/kobayashi.css
@@ -14,7 +14,7 @@ body {
     color: #e5e8e6;
 }
 
-.area {
+.center-area {
     background: #fefef5;
 }
 
diff --git a/themes/light.css b/themes/light.css
index 439c1fe..d735dbe 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -14,7 +14,7 @@ body {
   color: #1a1a1a;
 }
 
-.area {
+.center-area {
   background: #eaeaea;
 }
 
diff --git a/themes/mizu.css b/themes/mizu.css
index f6d10eb..2fcf95f 100644
--- a/themes/mizu.css
+++ b/themes/mizu.css
@@ -21,7 +21,7 @@ body {
   color: #fafafa;
 }
 
-.area {
+.center-area {
   background: #b9d9eb;
 }
 
diff --git a/themes/moderndolch.css b/themes/moderndolch.css
index bf009a9..cda1bf6 100644
--- a/themes/moderndolch.css
+++ b/themes/moderndolch.css
@@ -23,7 +23,7 @@ body {
   color: #fafafa;
 }
 
-.area {
+.center-area {
   background: #7c7e81;
 }
 
diff --git a/themes/monokai.css b/themes/monokai.css
index dba42bc..1478783 100644
--- a/themes/monokai.css
+++ b/themes/monokai.css
@@ -18,7 +18,7 @@ body {
   color: #F8F8F2;
 }
 
-.area {
+.center-area {
   background: #272822;
 }
 
diff --git a/themes/mrsleeves.css b/themes/mrsleeves.css
index 6eebd23..2bb94d7 100644
--- a/themes/mrsleeves.css
+++ b/themes/mrsleeves.css
@@ -21,7 +21,7 @@ body {
   color: #1a1a1a;
 }
 
-.area {
+.center-area {
   background: #eaeaea;
 }
 
diff --git a/themes/nautilus.css b/themes/nautilus.css
index 1e0f692..63c0406 100644
--- a/themes/nautilus.css
+++ b/themes/nautilus.css
@@ -23,7 +23,7 @@ body {
   color: #eac004;
 }
 
-.area {
+.center-area {
   background: #155d94;
 }
 
diff --git a/themes/nord.css b/themes/nord.css
index bc3f5a4..d40dcdf 100644
--- a/themes/nord.css
+++ b/themes/nord.css
@@ -14,7 +14,7 @@ body {
   color: #eceff4;
 }
 
-.area {
+.center-area {
   background: #2e3440;
 }
 
diff --git a/themes/oblivion.css b/themes/oblivion.css
index 3667491..b8e98f3 100644
--- a/themes/oblivion.css
+++ b/themes/oblivion.css
@@ -14,7 +14,7 @@ body {
   color: #ffac00;
 }
 
-.area {
+.center-area {
   background: #63696a;
 }
 
diff --git a/themes/olivia.css b/themes/olivia.css
index ba2329b..0d85c26 100644
--- a/themes/olivia.css
+++ b/themes/olivia.css
@@ -14,7 +14,7 @@ body {
   color: #e8c4b8;
 }
 
-.area {
+.center-area {
   background: #fafafa;
 }
 
diff --git a/themes/phantom.css b/themes/phantom.css
index 082cf55..cc49641 100644
--- a/themes/phantom.css
+++ b/themes/phantom.css
@@ -14,7 +14,7 @@ body {
   color: #eed484;
 }
 
-.area {
+.center-area {
   background: #2e1a47;
 }
 
diff --git a/themes/rama.css b/themes/rama.css
index 44ee1a6..492b68e 100644
--- a/themes/rama.css
+++ b/themes/rama.css
@@ -14,7 +14,7 @@ body {
   color: #1a1a1a;
 }
 
-.area {
+.center-area {
   background: #d4d4d4;
 }
 
diff --git a/themes/sakura.css b/themes/sakura.css
index 47c4153..2e3e26e 100644
--- a/themes/sakura.css
+++ b/themes/sakura.css
@@ -24,7 +24,7 @@ body {
   color: #fff;
 }
 
-.area {
+.center-area {
   background: #fff;
 }
 
diff --git a/themes/serika.css b/themes/serika.css
index 882473b..4ba45ac 100644
--- a/themes/serika.css
+++ b/themes/serika.css
@@ -23,7 +23,7 @@ body {
   color: #302f2b;
 }
 
-.area {
+.center-area {
   background: #f0ebd7;
 }
 
diff --git a/themes/solarizeddark.css b/themes/solarizeddark.css
index b20bc26..94eabfe 100644
--- a/themes/solarizeddark.css
+++ b/themes/solarizeddark.css
@@ -14,7 +14,7 @@ body {
   color: #fafafa;
 }
 
-.area {
+.center-area {
   background: #002b36;
 }
 
diff --git a/themes/solarizedlight.css b/themes/solarizedlight.css
index 19fc7c9..7fd8ed7 100644
--- a/themes/solarizedlight.css
+++ b/themes/solarizedlight.css
@@ -14,7 +14,7 @@ body {
   color: #1a1a1a;
 }
 
-.area {
+.center-area {
   background: #fdf6e3;
 }
 
diff --git a/themes/spacecadet.css b/themes/spacecadet.css
index b247821..23f9c91 100644
--- a/themes/spacecadet.css
+++ b/themes/spacecadet.css
@@ -14,7 +14,7 @@ body {
   color: #e5e8e6;
 }
 
-.area {
+.center-area {
   background: #f7f7f7;
 }
 
diff --git a/themes/vilebloom.css b/themes/vilebloom.css
index 4ddfadc..ef85c8a 100644
--- a/themes/vilebloom.css
+++ b/themes/vilebloom.css
@@ -27,7 +27,7 @@ body {
   color: #ffffff;
 }
 
-.area {
+.center-area {
   background: #f6bd9d;
 }
 
diff --git a/themes/yuri.css b/themes/yuri.css
index cf9eaba..65f3d1f 100644
--- a/themes/yuri.css
+++ b/themes/yuri.css
@@ -22,7 +22,7 @@ body {
   color: #ea4221;
 }
 
-.area {
+.center-area {
   background: #abc6dc;
 }
 

From f9dcad7677bd3f82e516960552e09e6c769f7699 Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Sat, 19 Dec 2020 16:00:54 -0300
Subject: [PATCH 5/6] Hide one center when the other one is shown

So both centers can't be shown at the same time.
---
 main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/main.js b/main.js
index 74fe1b8..5dc58fc 100644
--- a/main.js
+++ b/main.js
@@ -471,6 +471,7 @@ document.getElementById('show-themes').addEventListener('keydown', (e) => {
 });
 
 function showLanguageCenter() {
+  hideThemeCenter();
   document.getElementById('language-center').classList.remove('hidden');
   document.getElementById('command-center').classList.add('hidden');
 }
@@ -481,6 +482,7 @@ function hideLanguageCenter() {
 }
 
 function showThemeCenter() {
+  hideLanguageCenter();
   document.getElementById('theme-center').classList.remove('hidden');
   document.getElementById('command-center').classList.add('hidden');
 }

From 53475adc182a23689bc791b6e963f8494c8f9087 Mon Sep 17 00:00:00 2001
From: SeerLite <seerlite@tuta.io>
Date: Sat, 19 Dec 2020 17:33:46 -0300
Subject: [PATCH 6/6] Hide language center with escape too

---
 main.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/main.js b/main.js
index 5dc58fc..bb3488f 100644
--- a/main.js
+++ b/main.js
@@ -259,6 +259,11 @@ document.addEventListener('keydown', e => {
     if (e.key === 'p') {
       setPunctuation(inputField.value);
     }
+  } else if (!document.querySelector('#language-center').classList.contains('hidden')) {
+    if (e.key === 'Escape'){
+      hideLanguageCenter();
+      inputField.focus();
+    }
   } else if (!document.querySelector('#theme-center').classList.contains('hidden')) {
     if (e.key === 'Escape'){
       hideThemeCenter();