feat(frontend): use material-style svg for pieces, use better allegia…

…nce indication
DecentM · Oct 2, 2023 · 8563702 · 8563702
1 parent 348293f
commit 8563702
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 466 deletions.
diff --git a/apps/frontend/src/assets/tutorial-1.png b/apps/frontend/src/assets/tutorial-1.png
diff --git a/apps/frontend/src/assets/tutorial-2.png b/apps/frontend/src/assets/tutorial-2.png
diff --git a/apps/frontend/src/assets/tutorial-3.png b/apps/frontend/src/assets/tutorial-3.png
diff --git a/apps/frontend/src/components/chess-piece.vue b/apps/frontend/src/components/chess-piece.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import {
-  Piece,
-  PieceAllegiance,
-  allegianceSide,
-} from '@decentm/allegiance-chess-core'
+import { Notation, PieceAllegiance } from '@decentm/allegiance-chess-core'
+
+import PieceSvg from './piece-svg.vue'
 
 import BishopIcon from './pieces/bishop-icon.vue'
 import KingIcon from './pieces/king-icon.vue'
@@ -13,31 +10,12 @@ import PawnIcon from './pieces/pawn-icon.vue'
 import QueenIcon from './pieces/queen-icon.vue'
 import RookIcon from './pieces/rook-icon.vue'
 
-const props = defineProps<{
-  piece: Piece | null
+defineProps<{
+  piece: Notation.Piece | null
   allegiance: PieceAllegiance
   size: number
 }>()
 
-const side = computed(() => {
-  return allegianceSide(props.allegiance)
-})
-
-const colour = computed(() => {
-  switch (props.allegiance) {
-    case PieceAllegiance.Black:
-      return '#000'
-    case PieceAllegiance.DarkGrey:
-      return '#444'
-    case PieceAllegiance.LightGrey:
-      return '#999'
-    case PieceAllegiance.White:
-      return '#FFF'
-    default:
-      return ''
-  }
-})
-
 const emit = defineEmits<{ (event: 'click', e: MouseEvent): void }>()
 </script>
 
@@ -53,43 +31,33 @@ const emit = defineEmits<{ (event: 'click', e: MouseEvent): void }>()
     @click="(event) => emit('click', event)"
     :style="{ height: `${size}px`, width: `${size}px` }"
   >
-    <pawn-icon
-      class="piece"
-      :variant="side"
-      :colour="colour"
-      v-if="piece === null"
-    />
+    <piece-svg class="piece" :allegiance="allegiance" v-if="piece === null">
+      <pawn-icon />
+    </piece-svg>
 
-    <bishop-icon
+    <piece-svg
       class="piece"
-      :variant="side"
-      :colour="colour"
+      :allegiance="allegiance"
       :size="size"
       v-if="piece === 'B'"
-    />
-    <king-icon
-      class="piece"
-      :variant="side"
-      :colour="colour"
-      v-if="piece === 'K'"
-    />
-    <knight-icon
-      class="piece"
-      :variant="side"
-      :colour="colour"
-      v-if="piece === 'N'"
-    />
-    <queen-icon
-      class="piece"
-      :variant="side"
-      :colour="colour"
-      v-if="piece === 'Q'"
-    />
-    <rook-icon
-      class="piece"
-      :variant="side"
-      :colour="colour"
-      v-if="piece === 'R'"
-    />
+    >
+      <bishop-icon />
+    </piece-svg>
+
+    <piece-svg :allegiance="allegiance" v-if="piece === 'K'" class="piece">
+      <king-icon />
+    </piece-svg>
+
+    <piece-svg class="piece" :allegiance="allegiance" v-if="piece === 'N'">
+      <knight-icon />
+    </piece-svg>
+
+    <piece-svg class="piece" :allegiance="allegiance" v-if="piece === 'Q'">
+      <queen-icon />
+    </piece-svg>
+
+    <piece-svg class="piece" :allegiance="allegiance" v-if="piece === 'R'">
+      <rook-icon />
+    </piece-svg>
   </div>
 </template>
diff --git a/apps/frontend/src/components/piece-svg.vue b/apps/frontend/src/components/piece-svg.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { PieceAllegiance } from '@decentm/allegiance-chess-core'
+
+defineProps<{
+  allegiance: PieceAllegiance
+}>()
+</script>
+
+<style lang="scss" scoped>
+svg {
+  width: 100%;
+  stroke: mix($chess-black, $chess-white, 50%);
+  stroke-width: 1px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+
+  &.allegiance {
+    &-0 {
+      fill: url('#0');
+    }
+
+    &-1 {
+      fill: url('#1');
+    }
+
+    &-2 {
+      fill: url('#2');
+    }
+
+    &-3 {
+      fill: url('#3');
+    }
+  }
+}
+</style>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    :class="`allegiance-${allegiance}`"
+    class="q-pa-sm"
+  >
+    <defs>
+      <linearGradient id="0">
+        <stop offset="0%" stop-color="#000" />
+      </linearGradient>
+
+      <!-- <linearGradient id="1" gradientTransform="rotate(100)">
+        <stop offset="10%" stop-color="#FFF" />
+        <stop offset="11%" stop-color="#000" />
+      </linearGradient>
+
+      <linearGradient id="2" gradientTransform="rotate(100)">
+        <stop offset="10%" stop-color="#000" />
+        <stop offset="11%" stop-color="#FFF" />
+      </linearGradient> -->
+
+      <linearGradient id="1" gradientTransform="rotate(90)">
+        <stop offset="90%" stop-color="#000" />
+        <stop offset="90%" stop-color="#FFF" />
+      </linearGradient>
+
+      <linearGradient id="2" gradientTransform="rotate(90)">
+        <stop offset="90%" stop-color="#FFF" />
+        <stop offset="90%" stop-color="#000" />
+      </linearGradient>
+
+      <linearGradient id="3">
+        <stop offset="100%" stop-color="#FFF" />
+      </linearGradient>
+    </defs>
+
+    <slot name="default" />
+  </svg>
+</template>
diff --git a/apps/frontend/src/components/pieces/bishop-icon.vue b/apps/frontend/src/components/pieces/bishop-icon.vue
@@ -1,58 +1,9 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  variant: 'white' | 'black'
-  colour: string
-}>()
-
-const colours = computed(() => {
-  return {
-    primary: props.variant === 'white' ? '#000000' : '#FFFFFF',
-    secondary: props.variant === 'white' ? '#FFFFFF' : '#000000',
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  height: 100%;
-}
-</style>
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 46 46">
-    <g
-      opacity="1"
-      fill="none"
-      fill-rule="evenodd"
-      fill-opacity="1"
-      stroke="#000000"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="4"
-      stroke-dasharray="none"
-      stroke-opacity="1"
-      transform="translate(0,0.6)"
-    >
-      <g
-        :style="{ fill: colour }"
-        style="stroke: #000000; stroke-linecap: butt"
-      >
-        <path
-          d="M 9,36 C 12.39,35.03 19.11,36.43 22.5,34 C 25.89,36.43 32.61,35.03 36,36 C 36,36 37.65,36.54 39,38 C 38.32,38.97 37.35,38.99 36,38.5 C 32.61,37.53 25.89,38.96 22.5,37.5 C 19.11,38.96 12.39,37.53 9,38.5 C 7.65,38.99 6.68,38.97 6,38 C 7.35,36.54 9,36 9,36 z"
-        />
-        <path
-          d="M 15,32 C 17.5,34.5 27.5,34.5 30,32 C 30.5,30.5 30,30 30,30 C 30,27.5 27.5,26 27.5,26 C 33,24.5 33.5,14.5 22.5,10.5 C 11.5,14.5 12,24.5 17.5,26 C 17.5,26 15,27.5 15,30 C 15,30 14.5,30.5 15,32 z"
-        />
-        <path d="M 25 8 A 2.5 2.5 0 1 1  20,8 A 2.5 2.5 0 1 1  25 8 z" />
-      </g>
-      <path
-        d="M 17.5,26 L 27.5,26 M 15,30 L 30,30 M 22.5,15.5 L 22.5,20.5 M 20,18 L 25,18"
-        style="fill: none; stroke-linejoin: miter"
-        :style="{ stroke: colours.primary }"
-      />
-    </g>
-  </svg>
+  <path
+    d="M19,22H5V20H19V22M17.16,8.26C18.22,9.63 18.86,11.28 19,13C19,15.76
+      15.87,18 12,18C8.13,18 5,15.76 5,13C5,10.62 7.33,6.39 10.46,5.27C10.16,4.91
+      10,4.46 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.46 13.84,4.91
+      13.54,5.27C14.4,5.6 15.18,6.1
+      15.84,6.74L11.29,11.29L12.71,12.71L17.16,8.26Z"
+  />
 </template>
diff --git a/apps/frontend/src/components/pieces/king-icon.vue b/apps/frontend/src/components/pieces/king-icon.vue
@@ -1,65 +1,8 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  variant: 'white' | 'black'
-  colour: string
-}>()
-
-const colours = computed(() => {
-  return {
-    primary: props.variant === 'white' ? '#000000' : '#FFFFFF',
-    secondary: props.variant === 'white' ? '#FFFFFF' : '#000000',
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  height: 100%;
-}
-</style>
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46">
-    <g
-      fill="none"
-      fill-opacity="1"
-      fill-rule="evenodd"
-      stroke="#000000"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      :stroke-width="variant === 'white' ? 1.5 : 1.1"
-      stroke-miterlimit="4"
-      stroke-dasharray="none"
-      stroke-opacity="1"
-    >
-      <path
-        d="M 22.5,11.63 L 22.5,6"
-        style="fill: none; stroke-linejoin: miter"
-        stroke="#000000"
-      />
-
-      <path
-        d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25"
-        :style="{ fill: colour }"
-        style="fill-opacity: 1; stroke-linecap: butt; stroke-linejoin: miter"
-      />
-      <path
-        d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37"
-        :stroke="colours.primary"
-        :style="{ fill: colour }"
-      />
-      <path
-        d="M 20,8 L 25,8"
-        style="fill: none; stroke-linejoin: miter"
-        stroke="#000000"
-      />
-      <path
-        d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37"
-        style="fill: none"
-        :stroke="colours.primary"
-      />
-    </g>
-  </svg>
+  <path
+    d="M19,22H5V20H19V22M17,10C15.58,10 14.26,10.77
+      13.55,12H13V7H16V5H13V2H11V5H8V7H11V12H10.45C9.35,10.09 6.9,9.43
+      5,10.54C3.07,11.64 2.42,14.09 3.5,16C4.24,17.24 5.57,18 7,18H17A4,4 0 0,0
+      21,14A4,4 0 0,0 17,10Z"
+  />
 </template>
diff --git a/apps/frontend/src/components/pieces/knight-icon.vue b/apps/frontend/src/components/pieces/knight-icon.vue
@@ -1,61 +1,8 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  variant: 'white' | 'black'
-  colour: string
-}>()
-
-const colours = computed(() => {
-  return {
-    primary: props.variant === 'white' ? '#000000' : '#FFFFFF',
-    secondary: props.variant === 'white' ? '#FFFFFF' : '#000000',
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-svg {
-  height: 100%;
-}
-</style>
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 46 46">
-    <g
-      opacity="1"
-      fill="none"
-      fill-opacity="1"
-      fill-rule="evenodd"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="4"
-      stroke-dasharray="none"
-      stroke-opacity="1"
-      :stroke="colours.primary"
-      transform="translate(0,0.3)"
-    >
-      <path
-        d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18"
-        stroke="#000000"
-        :style="{ fill: colour }"
-      />
-      <path
-        d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31 C 9.958,30.06 12.41,27.96 11,28 C 10,28 11.19,29.23 10,30 C 9,30 5.997,31 6,26 C 6,24 12,14 12,14 C 12,14 13.89,12.1 14,10.5 C 13.27,9.506 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.28,8.008 21,7 C 22,7 22,10 22,10"
-        stroke="#000000"
-        :style="{ fill: colour }"
-      />
-      <path
-        d="M 9.5 25.5 A 0.5 0.5 0 1 1 8.5,25.5 A 0.5 0.5 0 1 1 9.5 25.5 z"
-        :stroke="colours.primary"
-        :fill="colours.primary"
-      />
-      <path
-        d="M 15 15.5 A 0.5 1.5 0 1 1  14,15.5 A 0.5 1.5 0 1 1  15 15.5 z"
-        transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
-        :stroke="colours.primary"
-      />
-    </g>
-  </svg>
+  <path
+    d="M19,22H5V20H19V22M13,2V2C11.75,2 10.58,2.62
+      9.89,3.66L7,8L9,10L11.06,8.63C11.5,8.32 12.14,8.44 12.45,8.9C12.47,8.93
+      12.5,8.96 12.5,9V9C12.8,9.59 12.69,10.3 12.22,10.77L7.42,15.57C6.87,16.13
+      6.87,17.03 7.43,17.58C7.69,17.84 8.05,18 8.42,18H17V6A4,4 0 0,0 13,2Z"
+  />
 </template>