[DevEx]: components name instance in pascalcase

.eslintrc.js

@@ -33,6 +33,9 @@ module.exports = {
         allowElseIf: true,
       },
     ],
+    'vue/component-name-in-template-casing': ['error', 'PascalCase', {
+      'registeredComponentsOnly': true,
+      }],
     'no-case-declarations': 'error',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <v-app id="app">
-    <the-header v-if="showNav" :variant="variant" />
+    <TheHeader v-if="showNav" :variant="variant" />
     <v-main>
-      <router-view />
+      <RouterView />
     </v-main>
-    <the-footer v-if="showNav && isSmallDevice" :variant="variant" />
+    <TheFooter v-if="showNav && isSmallDevice" :variant="variant" />
   </v-app>
 </template>
 

src/components/CreateGameDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-dialog
+  <BaseDialog
     :id="`create-game-dialog`"
     v-model="show"
     :title="t('home.submitCreateGame')"
@@ -36,7 +36,7 @@
           data-cy="create-game-ranked-switch"
           color="surface-2"
         />
-        <stats-scoring-dialog activator-color="surface-2" :show-button-text="false" />
+        <StatsScoringDialog activator-color="surface-2" :show-button-text="false" />
       </form>
       <v-form @submit.prevent="submitNewGame">
         <v-text-field
@@ -75,7 +75,7 @@
         </v-btn>
       </v-form>
     </template>
-  </base-dialog>
+  </BaseDialog>
 </template>
 
 <script>

src/components/GameView/CannotCounterDialog.vue

@@ -1,31 +1,31 @@
 <template>
-  <base-dialog
+  <BaseDialog
     v-if="oneOff"
     id="cannot-counter-dialog"
     v-model="show"
     title="Cannot Counter"
   >
     <template #body>
       <div v-if="!opponentLastTwo" class="my-2">
-        Your opponent has played the
-        <game-card-name :card-name="oneOff.name" />
+        Your opponent has played the 
+        <GameCardName :card-name="oneOff.name" />
         as a one-off
         <span v-if="target">
           targeting your
-          <game-card-name :card-name="target.name" />
+          <GameCardName :card-name="target.name" />
         </span>
       </div>
       <div v-else class="my-2">
-        Your opponent has played
-        <game-card-name :card-name="opponentLastTwo.name" />
+        Your opponent has played 
+        <GameCardName :card-name="opponentLastTwo.name" />
         to Counter
         <span v-if="playerLastTwo">
-          your
-          <game-card-name :card-name="playerLastTwo.name" />.
+          your 
+          <GameCardName :card-name="playerLastTwo.name" />.
         </span>
       </div>
       <div class="d-flex justify-center align-center my-8">
-        <game-card :suit="oneOff.suit" :rank="oneOff.rank" />
+        <GameCard :suit="oneOff.suit" :rank="oneOff.rank" />
         <p class="ml-8">
           {{ t(`game.moves.effects[${oneOff.rank}]`) }}
         </p>
@@ -39,7 +39,7 @@
               aria-hidden="true"
             />
           </span>
-          <game-card :suit="target.suit" :rank="target.rank" />
+          <GameCard :suit="target.suit" :rank="target.rank" />
         </div>
       </div>
       You cannot Counter, because {{ reason }}.
@@ -55,7 +55,7 @@
         Resolve
       </v-btn>
     </template>
-  </base-dialog>
+  </BaseDialog>
 </template>
 
 <script>

src/components/GameView/CardListSortable.vue

@@ -25,7 +25,7 @@
         </div>
       </template>
       <!-- Cards in the scrap -->
-      <game-card
+      <GameCard
         v-for="card in sortedCards"
         :key="card.id"
         class="mx-1 my-1 sortable-list-card"

src/components/GameView/ChooseTwoDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-dialog
+  <BaseDialog
     v-if="oneOff"
     id="choose-two-dialog"
     v-model="show"
@@ -10,7 +10,7 @@
         Which Two would you like to counter with? (Click the card)
       </p>
       <div id="twos-in-hand" class="d-flex justify-center mb-4">
-        <game-card
+        <GameCard
           v-for="two in twosInHand"
           :key="two.id"
           :suit="two.suit"
@@ -30,7 +30,7 @@
         Cancel
       </v-btn>
     </template>
-  </base-dialog>
+  </BaseDialog>
 </template>
 
 <script>

src/components/GameView/ChooseWhetherToCounterDialog.vue

@@ -1,27 +1,27 @@
 <template>
-  <base-dialog id="counter-dialog" v-model="show" title="Chance to Counter">
+  <BaseDialog id="counter-dialog" v-model="show" title="Chance to Counter">
     <template #body>
       <div v-if="!opponentLastTwo" class="my-2">
         Your opponent has played the 
-        <game-card-name :card-name="oneOff.name" />
+        <GameCardName :card-name="oneOff.name" />
         as a one-off
         <span v-if="target"> 
           targeting your 
-          <game-card-name :card-name="target.name" />
+          <GameCardName :card-name="target.name" />
         </span>
       </div>
       <div v-else class="my-2">
         Your opponent has played 
-        <game-card-name :card-name="opponentLastTwo.name" />
+        <GameCardName :card-name="opponentLastTwo.name" />
 
         to Counter
         <span v-if="playerLastTwo">
           your 
-          <game-card-name :card-name="playerLastTwo.name" />
+          <GameCardName :card-name="playerLastTwo.name" />
         </span>
       </div>
       <div class="d-flex justify-center align-center my-8">
-        <game-card :suit="oneOff.suit" :rank="oneOff.rank" />
+        <GameCard :suit="oneOff.suit" :rank="oneOff.rank" />
         <p class="ml-8">
           {{ t(`game.moves.effects[${oneOff.rank}]`) }}
         </p>
@@ -34,7 +34,7 @@
               aria-hidden="true"           
             />
           </span>
-          <game-card :suit="target.suit" :rank="target.rank" />
+          <GameCard :suit="target.suit" :rank="target.rank" />
         </div>
       </div>
       Would you like to play a two to counter?
@@ -59,7 +59,7 @@
         Counter
       </v-btn>
     </template>
-  </base-dialog>
+  </BaseDialog>
 </template>
 
 <script>

src/components/GameView/CounterDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <choose-whether-to-counter-dialog
+  <ChooseWhetherToCounterDialog
     v-if="oneOff"
     :model-value="show && !choseToCounter"
     :one-off="oneOff"
@@ -10,7 +10,7 @@
     @resolve="resolve"
   />
 
-  <choose-two-dialog
+  <ChooseTwoDialog
     v-if="oneOff"
     :model-value="show && choseToCounter"
     :one-off="oneOff"

src/components/GameView/FourDialog.vue

@@ -1,13 +1,13 @@
 <template>
-  <base-dialog id="four-discard-dialog" v-model="show" title="Discard Two Cards">
+  <BaseDialog id="four-discard-dialog" v-model="show" title="Discard Two Cards">
     <template #body>
       <p class="mb-4">
         Your Opponent has resolved a Four One-Off. You must discard two cards. Click to select cards to
         discard.
       </p>
       <!-- Cards in hand -->
       <div class="d-flex flex-wrap card-container">
-        <game-card
+        <GameCard
           v-for="(card, index) in hand"
           :key="card.id"
           :suit="card.suit"
@@ -29,7 +29,7 @@
         Discard
       </v-btn>
     </template>
-  </base-dialog>
+  </BaseDialog>
 </template>
 
 <script>

src/components/GameView/GameCard.vue

@@ -23,11 +23,11 @@
       contained
       class="valid-move target-overlay"
     />
-    <transition :name="scuttledByTransition">
+    <Transition :name="scuttledByTransition">
       <template v-if="scuttledBy">
         <img :class="scuttledByClass" :src="`/img/cards/card-${scuttledBy.suit}-${scuttledBy.rank}.svg`">
       </template>
-    </transition>
+    </Transition>
     <img
       v-if="isGlasses"
       :src="`/img/cards/glasses-${suitName.toLowerCase()}.png`"

src/components/GameView/GameDialogs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="game-dialogs">
-    <counter-dialog
+    <CounterDialog
       :model-value="showCounterDialog"
       :one-off="gameStore.oneOff"
       :target="gameStore.oneOffTarget"
@@ -9,7 +9,7 @@
       @resolve="resolve"
       @counter="counter($event)"
     />
-    <cannot-counter-dialog
+    <CannotCounterDialog
       :model-value="showCannotCounterDialog"
       :one-off="gameStore.oneOff"
       :opponent-queen-count="gameStore.opponentQueenCount"
@@ -18,27 +18,27 @@
       :target="gameStore.oneOffTarget"
       @resolve="resolve"
     />
-    <four-dialog :model-value="gameStore.discarding" @discard="discard" />
-    <three-dialog
+    <FourDialog :model-value="gameStore.discarding" @discard="discard" />
+    <ThreeDialog
       :model-value="pickingFromScrap"
       :one-off="gameStore.oneOff"
       :scrap="scrap"
       @resolve-three="resolveThree($event)"
     />
-    <seven-double-jacks-dialog
+    <SevenDoubleJacksDialog
       :model-value="showSevenDoubleJacksDialog"
       :top-card="topCard"
       :second-card="secondCard"
       @resolve-seven-double-jacks="resolveSevenDoubleJacks($event)"
     />
-    <game-over-dialog
+    <GameOverDialog
       v-if="gameIsOver"
       :model-value="gameIsOver"
       :player-wins-game="gameStore.playerWins"
       :stalemate="stalemate"
     />
-    <reauthenticate-dialog :model-value="mustReauthenticate" />
-    <opponent-requested-stalemate-dialog v-model="consideringOpponentStalemateRequest" />
+    <ReauthenticateDialog :model-value="mustReauthenticate" />
+    <OpponentRequestedStalemateDialog v-model="consideringOpponentStalemateRequest" />
   </div>
 </template>
 

src/components/GameView/GameMenu.vue

@@ -35,9 +35,9 @@
       </v-list>
     </v-menu>
 
-    <rules-dialog v-model="showRulesDialog" @open="closeMenu" @close="closeDialog" />
+    <RulesDialog v-model="showRulesDialog" @open="closeMenu" @close="closeDialog" />
 
-    <base-dialog id="request-gameover-dialog" v-model="showEndGameDialog" :title="dialogTitle">
+    <BaseDialog id="request-gameover-dialog" v-model="showEndGameDialog" :title="dialogTitle">
       <template #body>
         <p class="pt-4 pb-8">
           {{ dialogText }}
@@ -65,7 +65,7 @@
           {{ dialogTitle }}
         </v-btn>
       </template>
-    </base-dialog>
+    </BaseDialog>
   </div>
 </template>
 

src/components/GameView/GameOverDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-dialog id="game-over-dialog" v-model="show">
+  <BaseDialog id="game-over-dialog" v-model="show">
     <template #title>
       <h1 :data-cy="headingDataAttr" :class="isMobilePortrait ? 'text-h4' : ''">
         {{ heading }}
@@ -65,7 +65,7 @@
         Go Home
       </v-btn>
     </template>
-  </base-dialog>
+  </BaseDialog>
 </template>
 
 <script>

src/components/GameView/GameOverlays.vue

@@ -29,7 +29,7 @@
         {{ showWaitingForOpponetToCounterMessage }}
       </h1>
       <div id="counter-scrim-cards">
-        <game-card
+        <GameCard
           v-if="gameStore.oneOff"
           :rank="gameStore.oneOff.rank"
           :suit="gameStore.oneOff.suit"
@@ -38,7 +38,7 @@
           class="overlay-card"
         />
         <div>
-          <game-card
+          <GameCard
             v-for="(two, index) in gameStore.twos"
             :key="`overlay-two-${two.id}`"
             :rank="two.rank"
@@ -101,7 +101,7 @@
       </h1>
     </v-overlay>
 
-    <move-choice-overlay
+    <MoveChoiceOverlay
       v-if="selectedCard || cardSelectedFromDeck"
       :model-value="!targeting && (!!selectedCard || !!cardSelectedFromDeck)"
       :selected-card="selectedCard || cardSelectedFromDeck"

src/components/GameView/GameUnavailableView.vue

@@ -2,11 +2,11 @@
   <div>
     <!-- Reauthenticate-->
     <template v-if="mustReauthenticate">
-      <reauthenticate-dialog v-model="mustReauthenticate" />
+      <ReauthenticateDialog v-model="mustReauthenticate" />
     </template>
     <!-- Game doesn't exist-->
     <template v-else-if="unavailableGame">
-      <game-unavailable-overlay :show="unavailableGame" />
+      <GameUnavailableOverlay :show="unavailableGame" />
     </template>
   </div>
 </template>

src/components/GameView/MoveChoiceOverlay.vue

@@ -24,7 +24,7 @@
       </v-btn>
     </div>
     <div v-if="selectedCard" class="d-flex justify-center">
-      <game-card
+      <GameCard
         :suit="selectedCard.suit"
         :rank="selectedCard.rank"
         :data-player-overlay-card="`${selectedCard.rank}-${selectedCard.suit}`"
@@ -33,7 +33,7 @@
     </div>
     <!-- Move choices -->
     <div id="options-wrapper" class="d-flex justify-space-between my-4">
-      <move-choice-card
+      <MoveChoiceCard
         v-for="move in moveChoices"
         :key="move.displayName"
         :move-name="move.displayName"