update deps

rosen-score · Jan 13, 2024 · 830adf3 · 830adf3
1 parent 1e67048
commit 830adf3
Show file tree

Hide file tree

Showing 10 changed files with 1,703 additions and 766 deletions.
diff --git a/README.md b/README.md
@@ -6,5 +6,6 @@ npm run dev
 ```
 
 ```
+npm run format
 npm run test
 ```
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="emerald">
   <head>
     <meta charset="UTF-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,16 +9,15 @@
     "watch": "vitest"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
     "autoprefixer": "^10.4.12",
-    "chess-fetcher": "^0.4.1",
-    "daisyui": "^2.31.0",
+    "chess-fetcher": "^0.7.5",
     "postcss": "^8.4.16",
-    "prettier": "^2.7.1",
+    "prettier": "^3.2.0",
     "tailwindcss": "^3.1.8",
-    "typescript": "^4.8.4",
-    "vite": "^4.0.3",
-    "vitest": "^0.27.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.2.0",
     "vue": "^3.2.37",
     "vue-tsc": "^1.0.8"
   }

diff --git a/src/App.vue b/src/App.vue
@@ -18,7 +18,7 @@ import TimestamperForm from './components/TimestamperForm.vue'
     </div>
     <TimestamperForm />
     <div class="text-center mt-12">
-      <a class="link link-primary" href="https://github.com/rosen-score/lichess-youtube-timestamper"
+      <a class="text-sm underline" href="https://github.com/rosen-score/lichess-youtube-timestamper"
         >View this project on Github</a
       >
     </div>

diff --git a/src/components/TimestamperForm.vue b/src/components/TimestamperForm.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
-import { game, games } from 'chess-fetcher'
-import { Game } from 'chess-fetcher/dist/types'
+import { Game, game, games } from 'chess-fetcher'
 import { defineComponent } from 'vue'
 import { formatChapterName, formatTimestamp } from '../utils/format'
 
@@ -15,6 +14,9 @@ type Chapter = {
 export default defineComponent({
   data() {
     return {
+      placeholderUsername: defaultUsername,
+      placeholderFirstGameLink: defaultFirstGameLink,
+
       usernameInput: defaultUsername,
       firstGameLink: defaultFirstGameLink,
 
@@ -34,7 +36,9 @@ export default defineComponent({
       return this.usernameInput.toLowerCase().trim()
     },
     isUsingDefault(): boolean {
-      return this.username === defaultUsername.toLowerCase() && this.firstGameLink === defaultFirstGameLink
+      return (
+        this.username === this.placeholderUsername.toLowerCase() && this.firstGameLink === this.placeholderFirstGameLink
+      )
     },
     hasGames(): boolean {
       return this.games.length > 0
@@ -56,12 +60,13 @@ export default defineComponent({
 
         let opponentName: string
         let opponentRating: number | undefined
-        if (this.username === game.players.white.username.toLowerCase()) {
+        console.log(this.username, game.links.white)
+        if (this.username === game.players.white.username?.toLowerCase()) {
           opponentName = (game.players.black.title || '') + ' ' + game.players.black.username
           opponentRating = game.players.black.rating
         } else {
-          opponentName = (game.players.white.title || '') + ' ' + game.players.white.username
-          opponentRating = game.players.white.rating
+          opponentName = (game.players.white?.title || '') + ' ' + game.players.white?.username
+          opponentRating = game.players.white?.rating
         }
 
         if (this.options.showOpponentName) {
@@ -124,88 +129,115 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="lg:flex lg:flex-row">
-    <div class="lg:basis-5/12 flex-none bg-slate-100 p-4" :class="{ 'mx-auto lg:basis-2/3': !hasGames }">
-      <form @submit.prevent="onSubmit">
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Lichess username</span>
-            <input
-              type="text"
-              class="input input-bordered input-accent w-full max-w-xs"
-              spellcheck="false"
-              v-model="usernameInput"
-            />
-          </label>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12 items-start px-4 mx-auto py-6 bg-slate-100">
+    <div class="space-y-4">
+      <form class="space-y-4" @submit.prevent="onSubmit">
+        <div class="space-y-2">
+          <label
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            for="name"
+            >Lichess Username</label
+          ><input
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            id="name"
+            :placeholder="placeholderUsername"
+            v-model="usernameInput"
+            spellcheck="false"
+          />
         </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Link to the first game</span>
+        <div class="space-y-2">
+          <label
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            for="email"
+            >Link to the first game</label
+          ><input
+            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            id="email"
+            :placeholder="placeholderFirstGameLink"
+            v-model="firstGameLink"
+            spellcheck="false"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          Generate Chapters
+        </button>
+
+        <div class="grid gap-2 bg-slate-300 p-4" v-if="hasGames">
+          <h3 class="font-semibold underline">Options</h3>
+          <div class="flex items-center space-x-2">
+            <input type="checkbox" v-model="options.showOpeningName" id="showOpeningName" />
+            <label
+              class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm"
+              for="showOpeningName"
+            >
+              Include the opening name
+            </label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <input type="checkbox" v-model="options.showOpponentName" id="showOpponentName" />
+            <label
+              class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm"
+              for="showOpponentName"
+            >
+              Include the opponent's username
+            </label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <input type="checkbox" v-model="options.showOpponentRating" id="showOpponentRating" />
+            <label
+              class="font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-sm"
+              for="showOpponentRating"
+            >
+              Include the opponent's rating
+            </label>
+          </div>
+          <div class="space-y-2">
+            <label
+              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              for="gamesStartAt"
+            >
+              First game starts at (seconds into video):
+            </label>
             <input
-              type="text"
-              class="input input-bordered input-accent w-full max-w-xs"
-              spellcheck="false"
-              v-model="firstGameLink"
+              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              id="gamesStartAt"
+              v-model.number="gamesStartAt"
+              type="number"
+              min="0"
             />
-          </label>
-        </div>
-        <div class="text-center my-4">
-          <button type="submit" class="btn btn-wide btn-accent">Generate Chapters</button>
+          </div>
         </div>
       </form>
-      <div class="bg-slate-300 m-4 p-4 text-center rounded-lg" v-if="isUsingDefault">
-        <p class="mb-2">
-          Use the prefilled examples above to see what the output would look like for this "Lichess Plays" video:
-        </p>
+    </div>
+    <div class="space-y-4">
+      <div class="bg-slate-200 m-4 p-4 text-center" v-if="isUsingDefault">
+        <p class="mb-2">Use the prefilled examples to see the chapters for this "Lichess Plays" video:</p>
         <iframe
           class="rounded-xl w-full aspect-video"
-          src="https://www.youtube.com/embed/Aw3zcG_efuI"
+          src="https://www.youtube-nocookie.com/embed/Aw3zcG_efuI?si=-NESinQ2dy7kIgHk"
           title="YouTube video player"
           frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowfullscreen
         ></iframe>
       </div>
+      <p class="text-gray-500 dark:text-gray-400"></p>
     </div>
-    <div class="lg:basis-7/12 flex-none" v-if="hasGames">
-      <div class="bg-slate-200 p-4">
-        <h3 class="font-semibold">Options</h3>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Include the opening name</span>
-            <input type="checkbox" class="toggle toggle-accent" v-model="options.showOpeningName" />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Include the opponent's username</span>
-            <input type="checkbox" class="toggle toggle-accent" v-model="options.showOpponentName" />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Include the opponent's rating</span>
-            <input type="checkbox" class="toggle toggle-accent" v-model="options.showOpponentRating" />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">First game starts at (seconds into video)</span>
-            <input type="number" class="input input-bordered input-accent w-32" v-model.number="gamesStartAt" min="0" />
-          </label>
-        </div>
-      </div>
-      <div class="bg-yellow-100 p-4">
-        <h3 class="font-semibold">Copy &amp; paste this to the video description</h3>
-        <p>
-          YouTube will automatically add chapter markers and link the timestamps once this content is in the description
-        </p>
-        <div class="py-4 px-2 text-sm">
-          <div v-for="chapter in chapters">
-            {{ (chapter as Chapter).timestamp }}
-            {{ (chapter as Chapter).title }}
-          </div>
-        </div>
+  </div>
+
+  <div class="bg-yellow-100 p-4" v-if="hasGames">
+    <h3 class="font-semibold">Copy &amp; paste this to the video description</h3>
+    <p>
+      YouTube will automatically add chapter markers and link the timestamps once this content is in the description
+    </p>
+    <div class="py-4 px-2 text-sm">
+      <div v-for="chapter in chapters">
+        {{ (chapter as Chapter).timestamp }}
+        {{ (chapter as Chapter).title }}
       </div>
     </div>
   </div>

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -4,5 +4,4 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require('daisyui')],
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -8,6 +8,6 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "skipLibCheck": true,
-    "lib": ["es2018"]
+    "lib": ["es2018", "DOM"]
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,9 @@
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vitest/config'
 
-// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(async () => ({
   plugins: [vue()],
-})
+  test: {
+    includeSource: ['src/**/*.{js,ts}'],
+  },
+}))
diff --git a/vue-shims.d.ts b/vue-shims.d.ts