From 4b22ffdd49351e8c07e25ac8a5a22dfdb70f00ef Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 18 Sep 2022 13:18:40 -0700
Subject: [PATCH] Add a "squid tape" component

---
 src/assets/img/squid-tape/br.svg |  3 ++
 src/assets/img/squid-tape/tl.svg |  3 ++
 src/components/ScheduleBox.vue   |  7 ++--
 src/components/SquidTape.vue     | 68 ++++++++++++++++++++++++++++++++
 4 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/img/squid-tape/br.svg
 create mode 100644 src/assets/img/squid-tape/tl.svg
 create mode 100644 src/components/SquidTape.vue

diff --git a/src/assets/img/squid-tape/br.svg b/src/assets/img/squid-tape/br.svg
new file mode 100644
index 0000000..51e1bef
--- /dev/null
+++ b/src/assets/img/squid-tape/br.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.71962 4.31686C0.74313 4.31676 0.76647 4.32136 0.7882 4.33036C0.80992 4.33936 0.82968 4.35256 0.84622 4.36926C0.86276 4.38606 0.87581 4.40586 0.88458 4.42776C0.89335 4.44956 0.89758 4.47286 0.89721 4.49636L0.89825 4.97746C0.89788 5.00096 0.90211 5.02426 0.91088 5.04606C0.91965 5.06796 0.9327 5.08776 0.94924 5.10446C0.96578 5.12126 0.98554 5.13446 1.00727 5.14346C1.02899 5.15246 1.05234 5.15706 1.07585 5.15696L1.57015 5.17416C1.61736 5.17476 1.66248 5.19396 1.69569 5.22756C1.7289 5.26106 1.74755 5.30636 1.74775 5.35356L1.74825 5.84516C1.74788 5.86876 1.75228 5.89216 1.76105 5.91396C1.76982 5.93576 1.78287 5.95556 1.79941 5.97226C1.81595 5.98896 1.83572 6.00226 1.85744 6.01126C1.87916 6.02026 1.90234 6.02476 1.92585 6.02466L2.37146 6.02246C2.39497 6.02236 2.41815 6.02696 2.43987 6.03596C2.46159 6.04496 2.48135 6.05816 2.49789 6.07486C2.51443 6.09156 2.52748 6.11146 2.53625 6.13326C2.54503 6.15516 2.54942 6.17846 2.54906 6.20196L2.53332 6.65416C2.53344 6.67786 2.52883 6.70136 2.51987 6.72326C2.51091 6.74516 2.49773 6.76516 2.48106 6.78206C2.46438 6.79886 2.44457 6.81216 2.42272 6.82136C2.40087 6.83046 2.37739 6.83526 2.3537 6.83536L1.86285 6.81826C1.83916 6.81836 1.81585 6.82316 1.794 6.83226C1.77215 6.84146 1.75234 6.85476 1.73567 6.87156C1.71899 6.88846 1.70581 6.90846 1.69685 6.93036C1.68789 6.95226 1.68328 6.97576 1.6834 6.99946L1.6839 7.49106C1.68353 7.51456 1.68793 7.53796 1.6967 7.55986C1.70547 7.58166 1.71852 7.60156 1.73506 7.61826C1.7516 7.63496 1.77136 7.64816 1.79309 7.65716C1.81481 7.66616 1.83798 7.67076 1.86149 7.67066L7.49674 7.66866C7.52034 7.66906 7.54374 7.66476 7.56554 7.65596C7.58744 7.64716 7.60714 7.63406 7.62384 7.61756C7.64064 7.60096 7.65384 7.58126 7.66284 7.55946C7.67184 7.53776 7.67644 7.51446 7.67624 7.49096L7.67484 1.94526C7.67474 1.92206 7.67004 1.89906 7.66104 1.87756C7.65204 1.85616 7.63894 1.83676 7.62244 1.82036C7.60594 1.80406 7.58644 1.79116 7.56494 1.78236C7.54344 1.77366 7.52044 1.76909 7.49714 1.76923L7.00634 1.75215C6.98264 1.75224 6.95914 1.757 6.93734 1.76615C6.91544 1.77536 6.89564 1.78876 6.87894 1.80556C6.86224 1.82236 6.84914 1.84226 6.84014 1.86426C6.83114 1.88616 6.82654 1.90966 6.82674 1.93336L6.82734 2.42506C6.82754 2.44856 6.82294 2.47186 6.81394 2.49356C6.80494 2.51526 6.79164 2.53506 6.77494 2.55166C6.75824 2.56816 6.73834 2.58116 6.71654 2.58996C6.69464 2.59866 6.67134 2.60306 6.64784 2.60276L6.16064 2.58576C6.13714 2.58586 6.11374 2.58136 6.09204 2.57236C6.07034 2.56336 6.05074 2.55006 6.03424 2.53336C6.01764 2.51666 6.00464 2.49676 5.99584 2.47496C5.98704 2.45316 5.98264 2.42976 5.98304 2.40626L5.98254 1.91456C5.98234 1.86736 5.96354 1.82206 5.93034 1.78856C5.89714 1.75497 5.85214 1.73581 5.80494 1.73513L5.30985 1.7356C5.28634 1.73573 5.26316 1.73117 5.24144 1.72217C5.21972 1.71317 5.19995 1.69991 5.18341 1.68319C5.16687 1.66648 5.15382 1.6466 5.14505 1.62478C5.13628 1.60296 5.13206 1.57965 5.13242 1.55613L5.13175 1.06453C5.13212 1.04101 5.1279 1.01761 5.11912 0.99579C5.11035 0.97396 5.0973 0.95409 5.08076 0.93738C5.06422 0.92066 5.04446 0.9074 5.02274 0.8984C5.00101 0.8894 4.97767 0.88483 4.95416 0.88496L4.45985 0.867761C4.43634 0.867891 4.41299 0.863321 4.39127 0.854321C4.36955 0.845321 4.34995 0.83215 4.33341 0.81544C4.31687 0.79872 4.30382 0.77885 4.29505 0.75703C4.28628 0.73521 4.28189 0.7118 4.28225 0.68828L4.28175 0.196691C4.28212 0.173171 4.27772 0.14985 4.26895 0.12803C4.26018 0.10621 4.24713 0.0863301 4.23059 0.0696201C4.21405 0.0529001 4.19429 0.0396406 4.17256 0.0306406C4.15084 0.0216406 4.12767 0.01708 4.10416 0.01721L3.60968 0C3.58645 0.0001 3.56363 0.00481062 3.54222 0.0138006C3.52081 0.0228006 3.50128 0.0358801 3.48495 0.0523901C3.46861 0.0689101 3.45563 0.0885307 3.44686 0.110041C3.4381 0.131561 3.43366 0.15457 3.4338 0.1778L3.43313 1.52178C3.43325 1.5453 3.42869 1.56857 3.41969 1.5903C3.4107 1.61203 3.39745 1.63172 3.38074 1.64827C3.36403 1.66481 3.34408 1.67787 3.32226 1.68664C3.30045 1.69542 3.27714 1.69982 3.25363 1.69945L1.9102 1.70218C1.88669 1.70181 1.86321 1.70612 1.8414 1.7149C1.81958 1.72367 1.79981 1.73673 1.7831 1.75328C1.76639 1.76983 1.75313 1.78956 1.74414 1.81136C1.73514 1.83306 1.73058 1.85636 1.7307 1.87986L1.73334 2.31496L1.72609 2.52346L1.71884 2.73176L1.71934 3.22346C1.71946 3.24696 1.7149 3.27026 1.7059 3.29196C1.69691 3.31376 1.68365 3.33346 1.66694 3.35006C1.65023 3.36656 1.63046 3.37956 1.60865 3.38836C1.58683 3.39706 1.56335 3.40146 1.53984 3.40116L0.19641 3.40386C0.1729 3.40346 0.14959 3.40776 0.12778 3.41656C0.10597 3.42536 0.0860197 3.43846 0.0693097 3.45496C0.0525997 3.47146 0.03951 3.49126 0.03052 3.51306C0.02153 3.53476 0.0169598 3.55806 0.0170898 3.58156L0 4.07256C0.0002 4.11976 0.0188497 4.16506 0.0520597 4.19856C0.0852696 4.23216 0.13039 4.25136 0.1776 4.25206L0.71962 4.31686Z" fill="black"/>
+</svg>
diff --git a/src/assets/img/squid-tape/tl.svg b/src/assets/img/squid-tape/tl.svg
new file mode 100644
index 0000000..e5a91fc
--- /dev/null
+++ b/src/assets/img/squid-tape/tl.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.95666 3.35375C6.93315 3.35388 6.90981 3.34931 6.88808 3.34031C6.86636 3.33132 6.8466 3.31805 6.83006 3.30134C6.81352 3.28462 6.80047 3.26475 6.7917 3.24293C6.78293 3.22111 6.7787 3.19779 6.77907 3.17427L6.77803 2.6932C6.7784 2.66968 6.77417 2.64636 6.7654 2.62454C6.75663 2.60272 6.74358 2.58285 6.72704 2.56613C6.7105 2.54941 6.69074 2.53615 6.66901 2.52715C6.64729 2.51816 6.62394 2.51359 6.60043 2.51372L6.10613 2.49652C6.05892 2.49584 6.0138 2.47667 5.98059 2.4431C5.94738 2.40954 5.92873 2.36426 5.92853 2.31704L5.92803 1.82544C5.9284 1.80192 5.924 1.77852 5.91523 1.7567C5.90646 1.73487 5.89341 1.71509 5.87687 1.69837C5.86033 1.68166 5.84056 1.66839 5.81884 1.6594C5.79712 1.6504 5.77394 1.64583 5.75043 1.64596L5.30482 1.64816C5.28131 1.64829 5.25813 1.64372 5.23641 1.63472C5.21469 1.62573 5.19493 1.61246 5.17839 1.59575C5.16185 1.57903 5.1488 1.55916 5.14003 1.53734C5.13125 1.51552 5.12686 1.4922 5.12722 1.46868L5.14296 1.01651C5.14284 0.992813 5.14745 0.969313 5.15641 0.947383C5.16537 0.925443 5.17855 0.905463 5.19522 0.888633C5.2119 0.871803 5.23171 0.858463 5.25356 0.849303C5.2754 0.840143 5.29889 0.835383 5.32258 0.835303L5.81343 0.852383C5.83712 0.852293 5.86043 0.847523 5.88228 0.838373C5.90413 0.829213 5.92394 0.815873 5.94061 0.799043C5.95729 0.782213 5.97047 0.762223 5.97943 0.740293C5.98839 0.718353 5.993 0.694863 5.99288 0.671163L5.99238 0.179573C5.99275 0.156053 5.98835 0.132643 5.97958 0.110823C5.97081 0.0890028 5.95776 0.0691326 5.94122 0.0524126C5.92468 0.0356926 5.90492 0.0224326 5.88319 0.0134326C5.86147 0.00444258 5.8383 -0.000127302 5.81479 2.69762e-06L0.179503 0.00199278C0.155993 0.00162278 0.132513 0.00593263 0.110693 0.0147026C0.0888826 0.0234826 0.0691026 0.0365426 0.0523926 0.0530926C0.0356826 0.0696326 0.0224326 0.0894027 0.0134326 0.111143C0.00444258 0.132873 -0.000127302 0.156143 2.69762e-06 0.179663L0.00139268 5.72538C0.00150268 5.74861 0.00628269 5.77162 0.0152727 5.79304C0.0242627 5.81446 0.0373426 5.83391 0.0538426 5.85025C0.0703526 5.86659 0.0898826 5.87949 0.111383 5.88826C0.132893 5.89703 0.155893 5.90155 0.179113 5.90141L0.669973 5.91849C0.693663 5.9184 0.717143 5.91364 0.738993 5.90449C0.760833 5.89533 0.780653 5.8819 0.797323 5.86507C0.814003 5.84824 0.827173 5.82834 0.836133 5.80641C0.845093 5.78447 0.849713 5.76098 0.849593 5.73728L0.848923 5.24559C0.848793 5.22207 0.853353 5.1988 0.862353 5.17707C0.871343 5.15534 0.884603 5.13557 0.901313 5.11902C0.918023 5.10247 0.937973 5.0895 0.959783 5.08073C0.981593 5.07195 1.0049 5.06755 1.02841 5.06792L1.51565 5.08487C1.53916 5.08475 1.56251 5.08932 1.58423 5.09831C1.60595 5.10731 1.62554 5.12057 1.64208 5.13728C1.65862 5.154 1.67167 5.17387 1.68044 5.19569C1.68921 5.21752 1.69361 5.24083 1.69324 5.26435L1.69374 5.75603C1.69394 5.80326 1.71277 5.84854 1.74598 5.8821C1.77919 5.91567 1.82414 5.93483 1.87134 5.93551L2.36643 5.93504C2.38994 5.93491 2.41312 5.93948 2.43484 5.94847C2.45656 5.95747 2.47633 5.97073 2.49287 5.98745C2.50941 6.00416 2.52246 6.02404 2.53123 6.04586C2.54 6.06768 2.54422 6.09099 2.54386 6.11451L2.54453 6.60611C2.54416 6.62963 2.54838 6.65303 2.55716 6.67485C2.56593 6.69668 2.57898 6.71655 2.59552 6.73326C2.61206 6.74998 2.63182 6.76324 2.65354 6.77224C2.67527 6.78124 2.69861 6.78581 2.72212 6.78568L3.21643 6.80288C3.23994 6.80275 3.26329 6.80732 3.28501 6.81632C3.30673 6.82532 3.32633 6.83849 3.34287 6.8552C3.35941 6.87192 3.37246 6.89179 3.38123 6.91361C3.39 6.93543 3.39439 6.95884 3.39403 6.98236L3.39453 7.47395C3.39416 7.49747 3.39856 7.52079 3.40733 7.54261C3.4161 7.56444 3.42915 7.58431 3.44569 7.60102C3.46223 7.61774 3.48199 7.631 3.50371 7.64C3.52544 7.649 3.54861 7.65356 3.57212 7.65343L4.0666 7.67064C4.08982 7.67054 4.11265 7.66583 4.13406 7.65684C4.15547 7.64785 4.175 7.63476 4.19133 7.61825C4.20767 7.60174 4.22065 7.58211 4.22942 7.5606C4.23818 7.53908 4.24261 7.51607 4.24248 7.49284L4.24315 6.14886C4.24303 6.12534 4.24759 6.10207 4.25659 6.08034C4.26558 6.05861 4.27883 6.03892 4.29554 6.02237C4.31225 6.00583 4.3322 5.99277 4.35402 5.984C4.37583 5.97522 4.39914 5.97082 4.42265 5.97119L5.76608 5.96846C5.78959 5.96883 5.81307 5.96452 5.83488 5.95574C5.8567 5.94697 5.87647 5.93391 5.89318 5.91736C5.90989 5.90081 5.92315 5.88104 5.93214 5.85931C5.94114 5.83758 5.9457 5.81431 5.94558 5.79079L5.94294 5.35567L5.95019 5.14723L5.95744 4.93886L5.95694 4.44718C5.95682 4.42366 5.96138 4.40039 5.97037 4.37866C5.97937 4.35693 5.99263 4.33715 6.00934 4.32061C6.02605 4.30406 6.04582 4.29109 6.06763 4.28231C6.08945 4.27353 6.11293 4.26914 6.13644 4.26951L7.47984 4.26678C7.50334 4.26715 7.52664 4.26283 7.54854 4.25406C7.57034 4.24528 7.59024 4.23223 7.60694 4.21568C7.62364 4.19913 7.63674 4.17936 7.64574 4.15762C7.65474 4.13589 7.65934 4.11262 7.65924 4.0891L7.67624 3.59812C7.67604 3.55089 7.65744 3.50562 7.62424 3.47205C7.59104 3.43849 7.54584 3.41923 7.49864 3.41855L6.95666 3.35375Z" fill="black"/>
+</svg>
diff --git a/src/components/ScheduleBox.vue b/src/components/ScheduleBox.vue
index 557f7db..0444f9a 100644
--- a/src/components/ScheduleBox.vue
+++ b/src/components/ScheduleBox.vue
@@ -48,9 +48,9 @@
       </div>
 
       <div class="mx-2 space-y-2">
-        <div class="font-splatoon1 bg-splatoon-blue inline-block px-2 rounded-lg drop-shadow">
-          Next
-        </div>
+        <SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
+          <div class="px-2">Next</div>
+        </SquidTape>
 
         <ScheduleRow :schedule="nextSchedule" />
       </div>
@@ -69,6 +69,7 @@ import battleRegularSvg from '@/assets/img/modes/regular.svg';
 import battleBankaraSvg from '@/assets/img/modes/bankara.svg';
 import RuleIcon from './RuleIcon.vue';
 import { formatTime } from '../common/time';
+import SquidTape from './SquidTape.vue';
 
 const props = defineProps({
   type: {
diff --git a/src/components/SquidTape.vue b/src/components/SquidTape.vue
new file mode 100644
index 0000000..dd5b24f
--- /dev/null
+++ b/src/components/SquidTape.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="inline-block text-center px-2 py-1" :class="bg">
+    <div class="relative">
+      <div class="absolute squid-tl top-0 left-0" :class="squidBg" :style="squidStyles"></div>
+      <div class="absolute squid-br bottom-0 right-0" :class="squidBg" :style="squidStyles"></div>
+      <div class="label border" :style="labelStyles">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '@vue/reactivity';
+
+const props = defineProps({
+  bg: {
+    default: 'bg-splatoon-blue',
+  },
+  squidBg: {
+    default: 'bg-white',
+  },
+  border: {
+    default: 'border border-white',
+  },
+  squidSize: {
+    default: '10px',
+  },
+});
+
+const squidStyles = computed(() => [
+  `width: ${props.squidSize}`,
+  `height: ${props.squidSize}`,
+]);
+
+const labelStyles = computed(() => [
+  `--squid-size: ${props.squidSize}`,
+  `padding-left: ${props.squidSize}`,
+  `padding-right: ${props.squidSize}`,
+]);
+</script>
+
+<style scoped>
+.squid-tl {
+  mask-image: url('@/assets/img/squid-tape/tl.svg');
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.squid-br {
+  mask-image: url('@/assets/img/squid-tape/br.svg');
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.label {
+  clip-path: polygon(
+    -5px var(--squid-size),
+    var(--squid-size) var(--squid-size),
+    var(--squid-size) -5px,
+    100% -5px,
+    100% calc(100% - var(--squid-size)),
+    calc(100% - var(--squid-size)) calc(100% - var(--squid-size)),
+    calc(100% - var(--squid-size)) calc(100% + var(--squid-size)),
+    0 calc(100% + var(--squid-size))
+  );
+}
+</style>