ui polish (#3333)

## Description:

- disabled dragging in many places, select skin, select flag, select
lang, and footer stuff
- removed shadow from flags in flag selector
- added bounce to the lang selector

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/client/FlagInput.ts

@@ -121,7 +121,8 @@ export class FlagInput extends LitElement {
     } else {
       const img = document.createElement("img");
       img.src = this.flag ? `/flags/${this.flag}.svg` : `/flags/xx.svg`;
-      img.className = "w-full h-full object-cover drop-shadow";
+      img.className = "w-full h-full object-cover pointer-events-none";
+      img.draggable = false;
       img.onerror = () => {
         if (!img.src.endsWith("/flags/xx.svg")) {
           img.src = "/flags/xx.svg";

src/client/FlagInputModal.ts

@@ -59,7 +59,8 @@ export class FlagInputModal extends BaseModal {
                       w-[100px] sm:w-[120px]"
                 >
                   <img
-                    class="w-full h-auto rounded shadow-sm group-hover:scale-105 transition-transform duration-200"
+                    class="w-full h-auto rounded group-hover:scale-105 transition-transform duration-200 pointer-events-none"
+                    draggable="false"
                     src="/flags/${country.code}.svg"
                     loading="lazy"
                     @error=${(e: Event) => {

src/client/LangSelector.ts

@@ -349,15 +349,16 @@ export class LangSelector extends LitElement {
         id="lang-selector"
         title="Change Language"
         @click=${this.openModal}
-        class="border-none bg-none cursor-pointer p-0 flex items-center justify-center"
+        class="border-none bg-none cursor-pointer p-0 flex items-center justify-center transition-transform duration-200 hover:scale-[1.1] active:scale-[0.9]"
         style="width: 28px; height: 28px;"
       >
         <img
           id="lang-flag"
-          class="object-contain hover:scale-110 transition-transform duration-200"
+          class="object-contain pointer-events-none"
           style="width: 28px; height: 28px;"
           src="/flags/${currentLang.svg}.svg"
           alt="flag"
+          draggable="false"
         />
       </button>
     `;

src/client/PatternInput.ts

@@ -130,7 +130,7 @@ export class PatternInput extends LitElement {
         <span
           class=${showSelect
             ? "hidden"
-            : "w-full h-full overflow-hidden flex items-center justify-center [&>img]:object-cover [&>img]:w-full [&>img]:h-full"}
+            : "w-full h-full overflow-hidden flex items-center justify-center [&>img]:object-cover [&>img]:w-full [&>img]:h-full [&>img]:pointer-events-none"}
         >
           ${!showSelect ? previewContent : null}
         </span>

src/client/components/Footer.ts

@@ -10,9 +10,9 @@ export class Footer extends LitElement {
   render() {
     return html`
       <footer
-        class="[.in-game_&]:hidden bg-slate-950/70 backdrop-blur-md flex flex-col items-center justify-center gap-2 pt-[2px] pb-2 text-white/50 w-full border-t border-white/10 shrink-0 mt-auto"
+        class="[.in-game_&]:hidden bg-slate-950/70 backdrop-blur-md flex flex-col items-center justify-center gap-1 pt-1 pb-3 text-white/50 w-full border-t border-white/10 shrink-0 mt-auto"
       >
-        <div class="flex items-center justify-center gap-6 pt-2">
+        <div class="flex items-center justify-center gap-4 lg:gap-6 pt-2">
           <a
             href="https://github.com/openfrontio/OpenFrontIO"
             target="_blank"
@@ -22,7 +22,8 @@ export class Footer extends LitElement {
             <img
               src="/icons/github-mark-white.svg"
               data-i18n-alt="news.github_link"
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
+              draggable="false"
             />
           </a>
           <a
@@ -32,7 +33,7 @@ export class Footer extends LitElement {
             class="opacity-60 hover:opacity-100 hover:scale-110 transition-all"
           >
             <svg
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
               viewBox="0 0 24 24"
               fill="white"
               xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +50,7 @@ export class Footer extends LitElement {
             class="opacity-60 hover:opacity-100 hover:scale-110 transition-all"
           >
             <svg
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
               viewBox="0 0 24 24"
               fill="white"
             >
@@ -67,23 +68,24 @@ export class Footer extends LitElement {
             <img
               src="/icons/wiki-logo.svg"
               data-i18n-alt="main.wiki"
-              class="h-7 w-7 object-contain"
+              class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
+              draggable="false"
             />
           </a>
         </div>
-        <div class="text-xs mt-2 flex items-center justify-center gap-4">
+        <div class="text-xs mt-1 lg:mt-2 grid grid-cols-3 w-full px-4">
           <a
             href="/terms-of-service.html"
             data-i18n="main.terms_of_service"
             target="_blank"
-            class="hover:text-white transition-colors"
+            class="hover:text-white transition-colors text-left"
           ></a>
-          <span data-i18n="main.copyright"></span>
+          <span data-i18n="main.copyright" class="text-center"></span>
           <a
             href="/privacy-policy.html"
             data-i18n="main.privacy_policy"
             target="_blank"
-            class="hover:text-white transition-colors"
+            class="hover:text-white transition-colors text-right"
           ></a>
         </div>
       </footer>

src/client/components/PatternButton.ts

@@ -169,7 +169,8 @@ export function renderPatternPreview(
   return html`<img
     src="${generatePreviewDataUrl(pattern, width, height)}"
     alt="Pattern preview"
-    class="w-full h-full object-contain [image-rendering:pixelated]"
+    class="w-full h-full object-contain [image-rendering:pixelated] pointer-events-none"
+    draggable="false"
   />`;
 }