Merge pull request #381 from Asvarox/tailwind-migration

refactor menu and landing page to tailwind
Asvarox · Nov 18, 2024 · dc55cf6 · dc55cf6
2 parents 2dd046b + 4f61c22
commit dc55cf6
Show file tree

Hide file tree

Showing 46 changed files with 650 additions and 690 deletions.
diff --git a/.idea/tailwindcss.xml b/.idea/tailwindcss.xml
diff --git a/.unimportedrc.json b/.unimportedrc.json
@@ -16,6 +16,7 @@
   ],
   "rootDir": "./src",
   "ignoreUnimported": [
+    "src/modules/Elements/LayoutWithBackgroundEmotion.tsx",
     "src/modules/GameEngine/Input/MicStrategies/Yin.ts",
     "src/modules/Songs/utils/song-fixture.ts",
     "src/modules/hooks/useCallbackDebugger.ts",

diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-1-player-s-2-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-1-player-s-2-ci.png
diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-2-player-s-1-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-2-player-s-1-ci.png
diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-2-player-s-2-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-2-player-s-2-ci.png
diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-3-player-s-1-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-3-player-s-1-ci.png
diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-3-player-s-2-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-3-player-s-2-ci.png
diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-4-player-s-1-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-4-player-s-1-ci.png
diff --git a/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-4-player-s-2-ci.png b/...ies/GameOverlay.spec.tsx/should-properly-draw-the-game-with-4-player-s-2-ci.png
diff --git a/index.html b/index.html
@@ -15,37 +15,10 @@
     <title>AllKaraoke.Party - Free Online Karaoke Party Game</title>
     <meta
       name="description"
-      content="100% Free online SingStar-like Karaoke party game - 3,000+ songs and counting! No download needed, just use your phone or a regular/SingStar mic to sing" />
+      content="100% Free online SingStar-like Karaoke party game - 3,700+ songs and counting! No download needed, just use your phone or a regular/SingStar mic to sing" />
     <script>
       var global = window; // Some scripts rely on `global` which is node-only
     </script>
-
-    <!-- Start Single Page Apps for GitHub Pages -->
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // MIT License
-      // https://github.com/rafgraph/spa-github-pages
-      // This script checks to see if a redirect is present in the query string,
-      // converts it back into the correct url and adds it to the
-      // browser's history using window.history.replaceState(...),
-      // which won't cause the browser to attempt to load the new url.
-      // When the single page app is loaded further down in this file,
-      // the correct url will be waiting in the browser's history for
-      // the single page app to route accordingly.
-      (function (l) {
-        if (l.search[1] === '/') {
-          var decoded = l.search
-            .slice(1)
-            .split('&')
-            .map(function (s) {
-              return s.replace(/~and~/g, '&');
-            })
-            .join('?');
-          window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
-        }
-      })(window.location);
-    </script>
-    <!-- End Single Page Apps for GitHub Pages -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "react-youtube": "^10.1.0",
     "remotion": "^4.0.84",
     "remotion-animated": "^2.0.0",
+    "tailwind-merge": "^2.5.4",
     "tinycolor2": "^1.6.0",
     "typewriter-effect": "^2.21.0",
     "use-persisted-state": "^0.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/generateSongStats.ts b/scripts/generateSongStats.ts
@@ -16,7 +16,9 @@ songStats.languages = uniq(index.map((song) => song.language).flat());
 //     .slice(0, 200)
 //     .map((song) => song.video),
 // );
-songStats.artists = uniq(index.filter((song) => song.language[0] === 'English').map((song) => song.artist));
+songStats.artists = uniq(index.filter((song) => song.language[0] === 'English').map((song) => song.artist)).filter(
+  (artist) => artist.length < 30,
+);
 songStats.songs = index.length;
 
 writeFileSync('./src/routes/LandingPage/songStats.json', JSON.stringify(songStats, undefined, 2));
diff --git a/src/index.css b/src/index.css
@@ -12,129 +12,8 @@
         }
     }
 }
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-/*b,*/
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-    display: block;
-}
 body {
     line-height: 1;
-}
-ol,
-ul {
-    list-style: none;
-}
-blockquote,
-q {
-    quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-/* end of reset */
-body {
     position: relative;
     margin: 0;
 ;
@@ -157,7 +36,27 @@ html {
     overflow: overlay;
     overflow-x: hidden;
 
-    font-size: calc(min(0.9259259259259vh, 0.5208333333333vw) * var(--zoom-multipler, 1));
+    font-size: 2px;
+    @media (min-width: 560px) {
+        font-size: 3.25px;
+    }
+    @media (min-width: 720px) {
+        font-size: 4px;
+    }
+    @media (min-width: 1280px) {
+        font-size: 6.5px;
+    }
+    @media (min-width: 1920px) {
+        font-size: 10px;
+    }
+    @media (min-width: 2560px) {
+        font-size: 16px;
+    }
+    @media (min-width: 3840px) {
+        font-size: 20px;
+    }
+
+    /*font-size: calc(min(0.9259259259259vh, 0.5208333333333vw) * var(--zoom-multipler, 1));*/
 }
 
 code {