style(web): applies a new skin (#139)

- fix(web): does not closes login's credential fields when clearing them - feat(web): displays a message in radial menu when there are no actions - feat(web): uses more granular step when rotating camera - refactor(web): improves control help with stylable SVG - style(web): applies new blue-sky skin! - style(web): logo - style(games): 3d covers
feugy · Mar 3, 2023 · 3accde3 · 3accde3 · vercel · Mar 3, 2023
1 parent e63bab8
commit 3accde3
Show file tree

Hide file tree

Showing 175 changed files with 11,553 additions and 9,486 deletions.
diff --git a/apps/games/chess/catalog/cover.webp b/apps/games/chess/catalog/cover.webp
diff --git a/apps/games/draughts/catalog/cover.webp b/apps/games/draughts/catalog/cover.webp
diff --git a/apps/games/playground/catalog/cover.webp b/apps/games/playground/catalog/cover.webp
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -29,6 +29,8 @@
     "@fastify/cors": "^8.2.0",
     "@fastify/static": "^6.6.0",
     "@fastify/websocket": "^7.1.1",
+    "@fontsource/carter-one": "^4.5.9",
+    "@fontsource/lexend": "^4.5.15",
     "@playwright/test": "^1.29.0",
     "@rollup/plugin-graphql": "^2.0.2",
     "@rollup/plugin-yaml": "^4.0.1",

diff --git a/apps/web/public/favicon.png b/apps/web/public/favicon.png
diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
diff --git a/apps/web/public/images/help/double-left-object.webp b/apps/web/public/images/help/double-left-object.webp
diff --git a/apps/web/public/images/help/double-pointer-object.webp b/apps/web/public/images/help/double-pointer-object.webp
diff --git a/apps/web/public/images/help/left-drag-object.webp b/apps/web/public/images/help/left-drag-object.webp
diff --git a/apps/web/public/images/help/left-drag-select.webp b/apps/web/public/images/help/left-drag-select.webp
diff --git a/apps/web/public/images/help/left-drag.webp b/apps/web/public/images/help/left-drag.webp
diff --git a/apps/web/public/images/help/left-object.webp b/apps/web/public/images/help/left-object.webp
diff --git a/apps/web/public/images/help/left-outside-selection.webp b/apps/web/public/images/help/left-outside-selection.webp
diff --git a/apps/web/public/images/help/long-left-drag-select.webp b/apps/web/public/images/help/long-left-drag-select.webp
diff --git a/apps/web/public/images/help/long-left-object.webp b/apps/web/public/images/help/long-left-object.webp
diff --git a/apps/web/public/images/help/long-pointer-drag-select.webp b/apps/web/public/images/help/long-pointer-drag-select.webp
diff --git a/apps/web/public/images/help/long-pointer-object.webp b/apps/web/public/images/help/long-pointer-object.webp
diff --git a/apps/web/public/images/help/middle-drag.webp b/apps/web/public/images/help/middle-drag.webp
diff --git a/apps/web/public/images/help/mouse-wheel.webp b/apps/web/public/images/help/mouse-wheel.webp
diff --git a/apps/web/public/images/help/new-camera.webp b/apps/web/public/images/help/new-camera.webp
diff --git a/apps/web/public/images/help/pinch.webp b/apps/web/public/images/help/pinch.webp
diff --git a/apps/web/public/images/help/pointer-drag-object.webp b/apps/web/public/images/help/pointer-drag-object.webp
diff --git a/apps/web/public/images/help/pointer-drag-select.webp b/apps/web/public/images/help/pointer-drag-select.webp
diff --git a/apps/web/public/images/help/pointer-drag.webp b/apps/web/public/images/help/pointer-drag.webp
diff --git a/apps/web/public/images/help/pointer-object.webp b/apps/web/public/images/help/pointer-object.webp
diff --git a/apps/web/public/images/help/pointer-outside-selection.webp b/apps/web/public/images/help/pointer-outside-selection.webp
diff --git a/apps/web/public/images/help/restore-camera.webp b/apps/web/public/images/help/restore-camera.webp
diff --git a/apps/web/public/images/help/right-drag.webp b/apps/web/public/images/help/right-drag.webp
diff --git a/apps/web/public/images/help/right-object.webp b/apps/web/public/images/help/right-object.webp
diff --git a/apps/web/public/images/help/three-pointers-drag.webp b/apps/web/public/images/help/three-pointers-drag.webp
diff --git a/apps/web/public/images/help/two-pointers-drag.webp b/apps/web/public/images/help/two-pointers-drag.webp
diff --git a/apps/web/public/images/help/two-pointers-object.webp b/apps/web/public/images/help/two-pointers-object.webp
diff --git a/apps/web/public/images/help/update-camera.webp b/apps/web/public/images/help/update-camera.webp
diff --git a/apps/web/src/app.html b/apps/web/src/app.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+  <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   %sveltekit.head%
 </head>

diff --git a/apps/web/src/components/Aside.svelte b/apps/web/src/components/Aside.svelte
@@ -2,7 +2,7 @@
   import { isLobby as checkIfLobby } from '@src/utils'
   import { _ } from 'svelte-intl'
 
-  import ControlsHelp from './ControlsHelp/index.js'
+  import ControlsHelp from './ControlsHelp.svelte'
   import Discussion from './Discussion.svelte'
   import FriendList from './FriendList.svelte'
   import MinimizableSection from './MinimizableSection.svelte'
@@ -127,7 +127,7 @@
 
 <style lang="postcss">
   aside {
-    @apply bg-$base-lightest z-10;
+    @apply z-10 bg-$base-lighter;
   }
 
   .content {
@@ -146,7 +146,7 @@
     @apply italic p-8 pb-12;
   }
   .avatars {
-    @apply flex-1 grid place-items-center grid-flow-col;
-    grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
+    @apply flex-1 grid place-items-center grid-flow-row;
+    grid-template-columns: repeat(auto-fill, minmax(max(50%, 150px), 1fr));
   }
 </style>
diff --git a/apps/web/src/components/Breadcrumb.svelte b/apps/web/src/components/Breadcrumb.svelte
@@ -3,24 +3,28 @@
   const lastRank = steps?.length - 1
 </script>
 
-{#if steps?.length > 0}
-  <ol>
-    {#each steps as { href, label }, rank}
-      <li><a href={rank === lastRank ? null : href}>{label}</a></li>
-      {#if rank !== lastRank}
-        <li>></li>
-      {/if}
-    {/each}
-  </ol>
-{/if}
+<div>
+  {#if steps?.length > 0}
+    <span class="material-icons">home_filled</span>
+    <ol>
+      {#each steps as { href, label }, rank}
+        <li><a href={rank === lastRank ? null : href}>{label}</a></li>
+        {#if rank !== lastRank}
+          <li>•</li>
+        {/if}
+      {/each}
+    </ol>
+  {/if}
+</div>
 
 <style lang="postcss">
   ol {
-    @apply flex gap-2 text-sm text-$primary;
+    @apply inline-flex gap-2 text-sm;
   }
   li {
     @apply inline-block;
-    &:last-child {
+
+    &:last-child a {
       @apply text-$ink;
     }
   }

diff --git a/apps/web/src/components/Button.svelte b/apps/web/src/components/Button.svelte
@@ -2,15 +2,16 @@
   export let text = null
   export let icon = null
   export let badge = null
-  export let secondary = false
+  export let primary = false
   export let transparent = false
   export let ref = null
 </script>
 
 <button
   {...$$restProps}
-  class:secondary
+  class:primary
   class:transparent
+  class:has-text={Boolean(text)}
   bind:this={ref}
   on:click
   on:keyup
@@ -27,37 +28,135 @@
 
 <style lang="postcss">
   button {
-    @apply py-2 px-4 inline-flex justify-center items-center rounded relative bg-$primary text-$primary-lightest 
-           transition-all duration-$short;
-
-    &:focus {
-      @apply bg-$primary-light;
-    }
+    @apply py-2 px-4 inline-flex justify-center items-center relative transition-all duration-$short;
+    --shadow-drop: 3px 3px;
+    filter: drop-shadow(var(--shadow-drop) 0px var(--shadow-color));
 
     &:hover:not(:disabled) {
-      @apply bg-$primary-light transform-gpu scale-105;
+      @apply transform-gpu scale-105;
     }
 
-    &.secondary:disabled,
+    &.primary:disabled,
     &:disabled {
-      @apply bg-$disabled text-$disabled-dark;
+      @apply bg-$disabled text-$ink-dark;
+    }
+
+    &.has-text:not(.transparent) {
+      @apply bg-transparent;
+
+      &:before {
+        @apply absolute inset-0 transition-all duration-$short;
+        z-index: -1;
+        content: '';
+
+        --corner-cut: 8px;
+        clip-path: polygon(
+          0 var(--corner-cut),
+          var(--corner-cut) 0,
+          100% 0,
+          100% calc(100% - var(--corner-cut)),
+          calc(100% - var(--corner-cut)) 100%,
+          0 100%
+        );
+      }
+
+      &.primary:disabled,
+      &:disabled {
+        &:before {
+          @apply bg-$disabled;
+        }
+      }
+    }
+
+    & .badge {
+      @apply absolute rounded-full leading-4 text-xs p-0.5
+         flex justify-center items-center bg-$primary-darker 
+         text-$ink-dark -top-2 -left-2 min-w-5;
     }
   }
 
-  button.secondary {
-    @apply bg-$secondary text-$secondary-dark;
+  button {
+    @apply bg-$secondary text-$ink;
 
-    &:focus,
-    &:hover:not(:disabled) {
-      @apply bg-$secondary-light;
+    &.has-text {
+      @apply bg-transparent;
+
+      &:before {
+        @apply bg-$secondary;
+      }
+
+      &:focus,
+      &:hover:not(:disabled) {
+        @apply bg-transparent  text-$ink;
+
+        &:before {
+          @apply bg-$secondary-light;
+        }
+      }
+    }
+
+    &:not(.has-text) {
+      &:focus,
+      &:hover:not(:disabled) {
+        @apply bg-$secondary-light text-$ink;
+      }
+    }
+
+    & .badge {
+      @apply bg-$secondary-darker;
+    }
+  }
+
+  button.primary {
+    @apply bg-$primary text-$ink;
+
+    &.has-text {
+      @apply bg-transparent;
+
+      &:before {
+        @apply bg-$primary;
+      }
+
+      &:focus,
+      &:hover:not(:disabled) {
+        @apply bg-transparent  text-$ink;
+
+        &:before {
+          @apply bg-$primary-light;
+        }
+      }
+    }
+
+    &:not(.has-text) {
+      &:focus,
+      &:hover:not(:disabled) {
+        @apply bg-$primary-light text-$ink;
+      }
+    }
+
+    & .badge {
+      @apply bg-$primary-darker;
     }
   }
 
   button.transparent {
-    @apply bg-transparent text-$secondary-darkest;
+    @apply bg-transparent text-$secondary-darker;
+    filter: none;
+
+    &.primary {
+      @apply text-$primary-dark;
+    }
 
     &:focus,
     &:hover:not(:disabled) {
+      @apply bg-transparent text-$secondary-darkest;
+
+      &.primary {
+        @apply text-$primary-darker;
+      }
+    }
+
+    &.has-text:before {
       @apply bg-transparent;
     }
   }
@@ -72,10 +171,4 @@
   .icon:not(:last-child) {
     @apply -ml-1;
   }
-
-  .badge {
-    @apply absolute rounded-full leading-4 text-xs p-0.5
-           flex justify-center items-center bg-$disabled 
-           text-$disabled-dark -top-2 -left-2 min-w-5;
-  }
 </style>
diff --git a/apps/web/src/components/ConfirmDialogue.svelte b/apps/web/src/components/ConfirmDialogue.svelte
@@ -31,12 +31,12 @@
   <slot />
   <svelte:fragment slot="buttons">
     <Button
-      secondary
       text={cancelText}
       bind:ref={cancelButtonRef}
       on:click={() => (open = false)}
     />
     <Button
+      primary
       text={confirmText}
       on:click={() => {
         confirmed = true