Merge pull request #1 from AyushSinha2603/v2

V2

Author: AyushSinha2603

js/App.vue

@@ -6,15 +6,15 @@
       'is-download-complete': isDownloadComplete,
     }"
   >
-    <div class="text-center">
-      <h1 class="text-6xl md:text-8xl mb-4">
-        <a href="/">Rosen Score</a>
+    <div class="text-center font-black">
+      <h1 class="text-6xl md:text-8xl mb-4 uppercase bg-yellow-300 inline-block px-8 py-4 border-8 border-black shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] -rotate-2">
+        <a href="/" class="hover:text-pink-500 transition-colors">Rosen Score</a>
       </h1>
-      <p class="md:text-2xl">How many of these chess accomplishments have you completed?</p>
+      <p class="md:text-2xl mt-8 bg-black text-white inline-block px-4 py-2 border-4 border-black font-bold">How many of these chess accomplishments have you completed?</p>
     </div>
 
     <div
-      class="my-8 bg-indigo-100 border border-indigo-200 drop-shadow-2xl mx-auto p-4 rounded-lg shadow-indigo-500/50 shadow-lg text-sky-600 md:w-1/2"
+      class="my-12 bg-blue-400 border-8 border-black mx-auto p-6 md:p-10 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] text-black font-bold md:w-3/4"
       v-if="!isDownloading && !isDownloadComplete"
     >
       <form @submit.prevent="startDownload">
@@ -24,19 +24,19 @@
             <ArrowIcon />
           </div>
           <div class="basis-3/4">
-            <div>
+            <div class="text-xl">
               Select which site:
 
-              <div class="text-sky-900">
-                <label class="cursor-pointer">
+              <div class="text-black mt-2 font-black text-2xl flex gap-4 flex-wrap">
+                <label class="cursor-pointer bg-white px-4 py-2 border-4 border-black hover:bg-yellow-300">
                   <input type="radio" name="site" value="lichess" v-model="inputs.type" />
                   Lichess
                 </label>
-                <label class="cursor-pointer ml-4">
+                <label class="cursor-pointer bg-white px-4 py-2 border-4 border-black hover:bg-yellow-300 ml-0 md:ml-4">
                   <input type="radio" name="site" value="chesscom" v-model="inputs.type" />
                   Chess.com
                 </label>
-                <label class="cursor-pointer ml-4">
+                <label class="cursor-pointer bg-white px-4 py-2 border-4 border-black hover:bg-yellow-300 ml-0 md:ml-4">
                   <input type="radio" name="site" value="both" v-model="inputs.type" />
                   Both
                 </label>
@@ -47,30 +47,30 @@
 
               <input
                 type="text"
-                class="block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+                class="block w-full px-6 py-4 text-xl font-black text-black bg-white border-8 border-black focus:bg-pink-300 focus:outline-none placeholder-gray-500 mt-4 rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
                 :placeholder="inputs.type === 'both' ? 'Lichess username here' : 'Username here'"
                 spellcheck="false"
                 data-lpignore="true"
                 v-model="inputs.value"
               />
-              <div class="mt-4" v-if="inputs.type === 'both'">
+              <div class="mt-8" v-if="inputs.type === 'both'">
                 Enter Chess.com username:
                 <input
                   type="text"
-                  class="block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+                  class="block w-full px-6 py-4 text-xl font-black text-black bg-white border-8 border-black focus:bg-pink-300 focus:outline-none placeholder-gray-500 mt-4 rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
                   placeholder="Chess.com Username here"
                   spellcheck="false"
                   data-lpignore="true"
                   v-model="inputs.valueChesscom"
                 />
               </div>
-              <div class="text-sm">
+              <div class="text-lg mt-6 bg-white border-4 border-black p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] inline-block">
                 Or
-                <span class="dotted-underline text-sky-900 cursor-pointer" @click.prevent="formFill('lichess', 'EricRosen')">
+                <span class="bg-yellow-300 border-b-4 border-black text-black font-black hover:bg-black hover:text-white cursor-pointer px-1 transition-colors" @click.prevent="formFill('lichess', 'EricRosen')">
                   click here to see EricRosen's on Lichess
                 </span>
                 or
-                <span class="dotted-underline text-sky-900 cursor-pointer" @click.prevent="formFill('chesscom', 'IMRosen')"> his Chess.com </span>
+                <span class="bg-yellow-300 border-b-4 border-black text-black font-black hover:bg-black hover:text-white cursor-pointer px-1 transition-colors" @click.prevent="formFill('chesscom', 'IMRosen')"> his Chess.com </span>
               </div>
             </div>
           </div>
@@ -92,11 +92,11 @@
             <ArrowIcon />
           </div>
           <div class="basis-3/4">
-            <div class="text-sm mt-1 mb-2">
+            <div class="text-xl font-bold mt-1 mb-8 bg-white border-4 border-black p-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-block">
               Check games since
               <select
                 v-model.number="inputs.filters.sinceHoursAgo"
-                class="bg-transparent border-b border-dotted border-sky-900 focus:outline-0 hover:border-dashed text-sky-900 md:w-28"
+                class="bg-pink-300 border-4 border-black font-black focus:outline-none text-black py-2 px-4 ml-2 cursor-pointer rounded-none hover:bg-pink-400 transition-colors"
               >
                 <option :value="6">6 hours ago</option>
                 <option :value="24">24 hours ago</option>
@@ -111,13 +111,13 @@
 
             <button
               type="submit"
-              class="px-6 py-2.5 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg transition duration-150 ease-in-out"
+              class="px-8 py-6 bg-green-400 text-black font-black text-2xl uppercase border-8 border-black shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:bg-green-300 active:translate-x-[12px] active:translate-y-[12px] active:shadow-none transition-all w-full md:w-auto flex items-center justify-center gap-4 rounded-none"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" class="inline h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  stroke-width="2"
+                  stroke-width="4"
                   d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                 />
               </svg>
@@ -152,14 +152,14 @@
       @cancel-download="cancelDownload"
     ></download-progress>
 
-    <div v-if="errors.api.message" class="text-center bg-orange-800 p-3">
+    <div v-if="errors.api.message" class="text-center bg-red-500 border-8 border-black text-white font-black text-xl p-8 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] mt-12 uppercase">
       There was an error from the {{ inputs.type === 'lichess' ? 'Lichess' : 'Chess.com' }} API:
-      <strong>{{ errors.api }}</strong>
+      <strong class="bg-black text-white px-2 py-1 ml-2">{{ errors.api }}</strong>
 
-      <p>Try only running 1 Rosen Score report at a time. You may have to wait before trying again.</p>
+      <p class="mt-4 text-black bg-yellow-300 border-4 border-black p-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-block">Try only running 1 Rosen Score report at a time. You may have to wait before trying again.</p>
     </div>
 
-    <div v-if="player.username" class="mt-8 bg-sky-800 p-4 text-center rounded-lg">
+    <div v-if="player.username" class="mt-16 bg-pink-400 p-10 text-center border-8 border-black shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] mb-12 font-black text-black">
       <h2 class="text-2xl">
         <username-formatter :title="player.title" :username="player.username"></username-formatter>
         has
@@ -181,9 +181,9 @@
 
       <div class="mb-1" v-if="sinceDateFormatted">since {{ sinceDateFormatted }}</div>
 
-      <trophy-collection :count="trophyCount" size="large"></trophy-collection>
+      <trophy-collection :count="trophyCount" size="large" class="mt-8 mb-8"></trophy-collection>
 
-      <div class="text-sm mt-2">
+      <div class="text-xl mt-8 font-black bg-white border-4 border-black p-4 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] inline-block">
         <strong>{{ counts.totalMoves.toLocaleString() }}</strong>
         positions and
         <strong>{{ counts.downloaded.toLocaleString() }}</strong>

js/components/AccomplishmentScore.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="px-3 py-2 rounded text-center"
+    class="px-4 py-3 text-center border-4 border-black font-bold rounded-none transition-all shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
     :class="{
-      'bg-green-600': hasTrophies,
-      'bg-yellow-300 text-yellow-800  accomplishment-does-not-have-games': !hasTrophies,
+      'bg-cyan-300 text-black hover:bg-cyan-400 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]': hasTrophies,
+      'bg-gray-100 text-gray-500 hover:bg-gray-200 accomplishment-does-not-have-games': !hasTrophies,
     }"
   >
     <span @click.prevent="isExpanded = !isExpanded" class="hover:underline cursor-pointer">{{ title }}</span>
@@ -15,10 +15,10 @@
     <template v-if="isExpanded">
       <div
         v-if="hasExpandableContent"
-        class="rounded p-2"
+        class="p-4 mt-4 text-sm font-bold border-4 border-black text-left rounded-none shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]"
         :class="{
-          'bg-green-700': hasTrophies,
-          'bg-yellow-200': !hasTrophies,
+          'bg-white text-black': hasTrophies,
+          'bg-gray-50 text-gray-600': !hasTrophies,
         }"
       >
         {{ desc }}
@@ -44,7 +44,7 @@
       </div>
 
       <template v-if="hasTrophies">
-        <h4 class="font-bold">
+        <h4 class="font-black text-2xl mt-6 text-black uppercase bg-yellow-300 border-4 border-black inline-block px-4 py-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
           {{ trophyCount }}
           <template v-if="trophyCount === 1"> {{ units[0] }} </template>
           <template v-else> {{ units[1] }} </template>

js/components/DownloadProgress.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="my-8 bg-orange-400 drop-shadow-2xl p-4 rounded-lg text-orange-800 mx-auto">
+  <div class="my-8 bg-purple-400 border-8 border-black shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] p-8 text-black font-black mx-auto rounded-none transition-all">
     <div class="text-lg font-medium text-center">
       Downloading and analyzing
       {{ title }}&rsquo;s games
     </div>
 
     <template v-if="hideProgressBar">
-      <svg class="animate-spin my-2 mx-auto h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <svg class="animate-spin my-4 mx-auto h-16 w-16 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path
           class="opacity-75"
@@ -16,40 +16,40 @@
       </svg>
     </template>
     <template v-else>
-      <div class="w-full my-2 h-6 bg-orange-200">
-        <div class="h-6 bg-orange-800" :style="`width: ${percentDownloaded}%`"></div>
+      <div class="w-full my-6 h-8 bg-white border-4 border-black overflow-hidden rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] relative">
+        <div class="h-8 bg-green-400 border-r-4 border-black transition-all duration-300 relative z-10" :style="`width: ${percentDownloaded}%`"></div>
       </div>
 
       <div class="flex flex-row">
         <div class="basis-1/4 text-center">
-          <h4 class="text-xl md:text-4xl">
+          <h4 class="text-2xl md:text-5xl text-black bg-white border-4 border-black px-2 py-1 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] inline-block">
             {{ positions.toLocaleString() }}
           </h4>
-          Positions Analyzed
+          <span class="text-sm font-black uppercase text-white bg-black mt-4 block p-1 border-2 border-black">Positions Analyzed</span>
         </div>
         <div class="basis-1/4 text-center">
-          <h4 class="text-xl md:text-4xl">
+          <h4 class="text-2xl md:text-5xl text-black bg-white border-4 border-black px-2 py-1 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] inline-block">
             {{ downloaded.toLocaleString() }}
           </h4>
-          Games Analyzed
+          <span class="text-sm font-black uppercase text-white bg-black mt-4 block p-1 border-2 border-black">Games Analyzed</span>
         </div>
         <div class="basis-1/4 text-center">
-          <h4 class="text-xl md:text-4xl">
+          <h4 class="text-2xl md:text-5xl text-black bg-white border-4 border-black px-2 py-1 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] inline-block">
             {{ total.toLocaleString() }}
           </h4>
-          Total Games
+          <span class="text-sm font-black uppercase text-white bg-black mt-4 block p-1 border-2 border-black">Total Games</span>
         </div>
         <div class="basis-1/4 text-center">
-          <h4 class="text-xl md:text-4xl">{{ percentDownloadedDisplay }}%</h4>
-          Complete
+          <h4 class="text-2xl md:text-5xl text-black bg-yellow-300 border-4 border-black px-2 py-1 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] inline-block">{{ percentDownloadedDisplay }}%</h4>
+          <span class="text-sm font-black uppercase text-white bg-black mt-4 block p-1 border-2 border-black">Complete</span>
         </div>
       </div>
 
       <div class="text-center mt-4">
         <button
           @click="cancelDownload"
           type="button"
-          class="px-6 py-2.5 bg-red-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out"
+          class="px-8 py-4 mt-8 bg-red-500 text-white font-black text-xl uppercase border-8 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:bg-red-400 active:translate-x-[8px] active:translate-y-[8px] active:shadow-none transition-all rounded-none"
         >
           <svg xmlns="http://www.w3.org/2000/svg" class="inline h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path

js/components/LichessLogin.vue

@@ -11,15 +11,15 @@
         </svg>
         Logged in as
         <strong>{{ username }}</strong>
-        <span class="dotted-underline text-xs text-sky-900 cursor-pointer" @click.prevent="logout"> (Logout) </span>
+        <span class="bg-yellow-300 border-b-4 border-black text-black font-black hover:bg-black hover:text-white cursor-pointer px-1 ml-2 transition-colors" @click.prevent="logout"> Logout </span>
       </div>
     </template>
     <template v-else>
       <span class="uppercase text-xs">Optional:</span>
 
       <button
         type="button"
-        class="block px-4 py-2 bg-slate-400 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-slate-500 hover:shadow-lg focus:bg-slate-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-slate-600 active:shadow-lg transition duration-150 ease-in-out"
+        class="block px-8 py-4 mt-2 bg-blue-500 border-4 border-black text-white font-black text-xl uppercase shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:bg-blue-400 active:translate-x-[8px] active:translate-y-[8px] active:shadow-none transition-all rounded-none w-full md:w-auto"
         @click="login"
       >
         <svg xmlns="http://www.w3.org/2000/svg" class="inline h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -38,7 +38,7 @@
         <strong>3x</strong> faster when downloading your own games, <strong>1.5x</strong> faster for all others
         <br />
         You can learn more about this
-        <a href="https://lichess.org/api#operation/apiGamesUser" target="_blank" class="text-sky-900 dotted-underline">here</a>
+        <a href="https://lichess.org/api#operation/apiGamesUser" target="_blank" class="bg-yellow-300 border-b-4 border-black text-black font-black hover:bg-black hover:text-white px-1 transition-colors">here</a>
       </p>
     </template>
   </div>

js/components/RecentUpdates.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="border-t border-gray-300 mt-4 text-bold font-bold pt-2">Recent Updates</div>
-  <ul class="text-sm">
-    <li>
-      <changelog-date :year="2024" :month="11" :day="13"></changelog-date>
-      - Added <strong>Mona Lisa Checkmate</strong> trophy
-      <br />
-      &nbsp; Credit to
-      <span class="dotted-underline text-sky-900 cursor-pointer" @click.prevent="formFill('chesscom', 'KNVB')">GM Aman Hambleton</span>
-      from Chessbrah. <a href="https://youtu.be/XAlcDWQ6iTM?t=387" class="dotted-underline text-sky-900" target="_blank">See video here</a>
-    </li>
-  </ul>
+  <div class="border-t-8 border-black mt-12 pt-4 text-black font-black text-2xl bg-pink-300 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">Recent Updates
+    <ul class="text-lg text-black mt-4 font-bold border-t-4 border-black pt-4">
+      <li>
+        <changelog-date :year="2024" :month="11" :day="13"></changelog-date>
+        - Added <strong class="bg-yellow-300 px-1 border-2 border-black">Mona Lisa Checkmate</strong> trophy
+        <br />
+        &nbsp; Credit to
+        <span class="bg-white border-b-4 border-black hover:bg-black hover:text-white px-1 cursor-pointer transition-colors" @click.prevent="formFill('chesscom', 'KNVB')">GM Aman Hambleton</span>
+        from Chessbrah. <a href="https://youtu.be/XAlcDWQ6iTM?t=387" class="bg-white border-b-4 border-black hover:bg-black hover:text-white px-1 transition-colors" target="_blank">See video here</a>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">

styles/index.css

@@ -7,7 +7,11 @@
 }
 
 html {
-  @apply bg-sky-700 text-white;
+  @apply bg-white text-black;
+}
+
+body {
+  @apply min-h-screen selection:bg-pink-500 selection:text-white font-mono;
 }
 
 h1 {
@@ -23,20 +27,13 @@ h1 {
 }
 
 .heading {
-  @apply bg-sky-900
-        text-center
-        text-sm
-        uppercase
-        text-slate-100
-        mb-1
-        mt-2;
+  @apply bg-black text-white text-center text-xl uppercase font-black border-4 border-black mb-4 mt-6 py-2 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)];
 }
 
 .is-download-complete .accomplishment-does-not-have-games {
-  @apply bg-slate-400
-        text-white;
+  @apply bg-gray-200 text-gray-500 border-4 border-gray-400 opacity-60;
 }
 
 .is-download-complete .accomplishment-does-not-have-games div {
-  @apply bg-[#7c8ca3];
+  @apply bg-gray-300;
 }