diff

.github/workflows/gh-pages-deploy.yml

@@ -3,20 +3,27 @@
     push:
       branches:
         - main
+  permissions:
+    contents: write
+    pages: write
+    id-token: write
+    pull-requests: write
+    issues: write
+    repository-projects: write
   jobs:
     gh-pages-deploy:
       name: Deploying to Github Pages
       runs-on: ubuntu-latest
       steps:
-          - uses: actions/checkout@v2
-            with:
-              token: ${{ secrets.PAGES_TOKEN }}
-          - uses: actions/setup-node@v2
+          - name: checkout
+            uses: actions/checkout@v2
+          - name: setup-node
+            uses: actions/setup-node@v2
             with:
               node-version: '16'
           - name: Install packages
             run: npm i
           - name: Set Creds
-            run: git config user.name "Tendsty" && git config user.email "137620092+Tendsty@users.noreply.github.com"
+            run: git config user.name "Anti27" && git config user.email "20539129+Anti27@users.noreply.github.com"
           - name: Deploy
-            run: npm run deploy
+            run: npm run deploy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gooboo",
-  "version": "1.4.1",
+  "version": "1.5.3",
   "description": "An idle game",
   "author": "Tendsty",
   "main": "main.js",

public/version.txt

@@ -1 +1 @@
-1.4.1
+1.5.3

src/App.vue

@@ -425,6 +425,9 @@
               <v-list-item-title>{{ $vuetify.lang.t('$vuetify.gooboo.saveImport') }}</v-list-item-title>
             </v-list-item>
           </label>
+          <v-list-item @click="changeScreen('resetProgress')">
+            <v-list-item-title>{{ $vuetify.lang.t('$vuetify.gooboo.resetProgress') }}</v-list-item-title>
+          </v-list-item>
         </v-list>
       </v-menu>
       <v-btn data-cy="settings-button" icon @click="changeScreen('settings')">
@@ -488,8 +491,10 @@ import { mapGetters, mapState } from 'vuex';
 import FeatureTile from './components/partial/main/FeatureTile.vue';
 import NewGame from './components/view/NewGame.vue';
 import OfflineSummary from './components/view/OfflineSummary.vue';
+import ResetProgress from './components/view/ResetProgress.vue';
 import Mining from './components/view/Mining.vue';
 import Info from './components/view/Info.vue';
+import StatOverview from './components/view/StatOverview.vue';
 import TabDuplicate from './components/view/TabDuplicate.vue';
 import Patchnote from './components/view/Patchnote.vue';
 import Settings from './components/view/Settings.vue';
@@ -535,8 +540,10 @@ export default {
   components: {
     NewGame,
     OfflineSummary,
+    ResetProgress,
     Mining,
     Info,
+    StatOverview,
     TabDuplicate,
     Patchnote,
     Settings,
@@ -687,8 +694,8 @@ export default {
       this.$store.commit('system/resetAutosaveTimer');
     },
     exportSave() {
-      exportFile();
       this.$store.commit('system/updateKey', {key: 'backupTimer', value: 0});
+      exportFile();
     },
     importSave() {
       let file = document.getElementById('gooboo-savefile-input').files[0];

src/components/partial/card/CardItem.vue

@@ -45,6 +45,36 @@
   top: -5px;
   font-size: 10px;
 }
+.card-playing-power-dark {
+  border: 4px solid white !important;
+}
+.card-playing-power-light {
+  border: 4px solid black !important;
+}
+.card-playing-power {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  right: -18px;
+  top: -26px;
+}
+.card-playing-power-inner {
+  width: 20px;
+  height: 20px;
+  margin-left: -2px;
+  margin-top: -2px;
+}
+.card-playing-power-mobile {
+  width: 20px;
+  height: 20px;
+  right: -15px;
+  top: -16px;
+}
+.card-playing-power-mobile > .card-playing-power-inner {
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+}
 .card-playing-inner {
   border-top: 2px solid black !important;
   border-bottom: 2px solid black !important;
@@ -76,6 +106,30 @@
 .card-ma-05 {
   margin: 2px;
 }
+
+/* shiny card visuals */
+@keyframes shiny-card {
+  0%   {opacity: 30%;}
+  10%  {opacity: 40%;}
+  20%  {opacity: 55%;}
+  30%  {opacity: 30%;}
+  40%  {opacity: 40%;}
+  50%  {opacity: 30%;}
+  60%  {opacity: 60%;}
+  70%  {opacity: 40%;}
+  80%  {opacity: 30%;}
+  90%  {opacity: 45%;}
+  100% {opacity: 30%;}
+}
+.card-shiny {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(25deg, #FFFFFFFF, #E0F0FFC0);
+  animation: shiny-card 10s linear infinite;
+}
 </style>
 
 <template>
@@ -108,14 +162,24 @@
               class="card-playing-amount rounded px-1"
               :class="[{'card-playing-amount-mobile': $vuetify.breakpoint.xsOnly}, $vuetify.theme.dark ? `${ card.color } lighten-2` : `${ card.color } lighten-5`]"
             ><v-icon size="10">mdi-close</v-icon>{{ $formatNum(card.amount - 1) }}</div>
+            <div v-if="!card.instant" class="card-playing-power rounded-circle" :class="[{'card-playing-power-mobile': $vuetify.breakpoint.xsOnly}, `card-playing-power-${ $vuetify.theme.dark ? 'dark' : 'light' }`]">
+              <div
+                class="d-flex justify-center align-center card-playing-power-inner rounded-circle"
+                :class="[{'card-playing-power-mobile': $vuetify.breakpoint.xsOnly}, $vuetify.theme.dark ? `${ card.color } lighten-2` : `${ card.color } lighten-5`]"
+              >{{ cardPower }}</div>
+            </div>
           </div>
         </div>
-        <div class="card-playing-bottom d-flex align-center" :class="$vuetify.theme.dark ? `${ card.color } darken-2` : `${ card.color } lighten-1`">{{ id }}</div>
+        <div class="card-playing-bottom d-flex align-center" :class="$vuetify.theme.dark ? `${ card.color } darken-2` : `${ card.color } lighten-1`">
+          <span>{{ id }}</span>
+          <v-icon v-if="card.foundShiny" class="ml-1" x-small>mdi-shimmer</v-icon>
+        </div>
         <div
           class="card-feature-icon d-flex justify-center align-center"
           :style="`border-top: 2px solid ${ $vuetify.theme.dark ? 'white' : 'black' } !important; border-left: 2px solid ${ $vuetify.theme.dark ? 'white' : 'black' } !important;`"
           :class="$vuetify.theme.dark ? `${ card.color } darken-3` : card.color"
         ><v-icon size="20" :color="$vuetify.theme.dark ? 'white' : 'black'">{{ featureIcon }}</v-icon></div>
+        <div v-if="card.foundShiny" class="card-shiny"></div>
       </div>
       <div v-else class="card-hidden bg-tile-default rounded elevation-2 d-flex justify-center align-center" :class="[{'card-playing-mobile': $vuetify.breakpoint.xsOnly}, $vuetify.breakpoint.xsOnly ? 'card-ma-05' : 'ma-1']" v-bind="attrs" v-on="on">
         <v-icon color="#80808040" :size="$vuetify.breakpoint.smAndUp ? 64 : 48">{{ obtainable.length ? 'mdi-help' : 'mdi-lock' }}</v-icon>
@@ -128,6 +192,7 @@
         <span>):</span>
       </div>
       <ul>
+        <li v-if="cardPower > 0">{{ $vuetify.lang.t(`$vuetify.card.cardPower`) }} +{{ cardPower }}</li>
         <li v-for="(reward, rkey) in card.reward" :key="rkey">
           <span v-if="reward.type === 'currency'">+{{ $formatNum(reward.useMult ? multGet(gainMult(...reward.name.split('_')), reward.value) : reward.value) }} {{ $vuetify.lang.t(`$vuetify.currency.${ reward.name }.name`) }}</span>
           <span v-else-if="reward.type === 'consumable'">+{{ $formatNum(reward.value) }} {{ $vuetify.lang.t(`$vuetify.consumable.${ reward.name }.name`) }}</span>
@@ -193,6 +258,9 @@ export default {
         }
       }
       return arr;
+    },
+    cardPower() {
+      return this.card.power + (this.card.foundShiny ? 1 : 0);
     }
   }
 }

src/components/partial/card/CardOverview.vue

@@ -1,29 +1,48 @@
 <template>
   <div>
     <div v-if="cardsEquipped.length > 0" class="text-center">{{ $vuetify.lang.t(`$vuetify.card.active`) }}:</div>
-    <div class="d-flex flex-wrap ma-1">
+    <div v-if="cardsEquipped.length > 0" class="d-flex justify-center">
+      <gb-tooltip key="card-power-equipped">
+        <template v-slot:activator="{ on, attrs }">
+          <div style="width: fit-content;" v-bind="attrs" v-on="on">{{ $vuetify.lang.t(`$vuetify.card.cardPowerValue`, $formatNum(cardPowerEquipped)) }}</div>
+        </template>
+        <div class="mt-0">{{ $vuetify.lang.t(`$vuetify.card.cardPowerDescription`) }}</div>
+        <display-row :class="`mt-${ key > 0 ? '0' : '2' }`" v-for="(item, key) in cardPowerEquippedEffect" :key="`${item.name}-${item.type}-${key}`" :name="item.name" :type="item.type" :after="item.value"></display-row>
+      </gb-tooltip>
+    </div>
+    <div v-if="cardsEquipped.length > 0" class="d-flex flex-wrap ma-1">
       <card-select-display class="text-center justify-center pa-1" style="min-width: 50%;" hide-amount v-for="(item, key) in cardsEquipped" :key="key" :item="{...cards[item], name: item}"></card-select-display>
     </div>
     <div class="text-center">
-      <span>{{ cardsSelected }} / {{ maxCards }} {{ $vuetify.lang.t(`$vuetify.card.equipped`) }}</span>
+      <span>{{ cardsSelected.length }} / {{ maxCards }} {{ $vuetify.lang.t(`$vuetify.card.equipped`) }}</span>
       <gb-tooltip>
         <template v-slot:activator="{ on, attrs }">
           <v-icon class="ml-2" small v-bind="attrs" v-on="on">mdi-help-circle</v-icon>
         </template>
         <div class="mt-0">{{ $vuetify.lang.t(`$vuetify.card.activeDescription`) }}</div>
       </gb-tooltip>
     </div>
+    <div class="d-flex justify-center">
+      <gb-tooltip key="card-power-selected">
+        <template v-slot:activator="{ on, attrs }">
+          <div style="width: fit-content;" v-bind="attrs" v-on="on">{{ $vuetify.lang.t(`$vuetify.card.cardPowerValue`, $formatNum(cardPowerSelected)) }}</div>
+        </template>
+        <div class="mt-0">{{ $vuetify.lang.t(`$vuetify.card.cardPowerDescription`) }}</div>
+        <display-row :class="`mt-${ key > 0 ? '0' : '2' }`" v-for="(item, key) in cardPowerSelectedEffect" :key="`${item.name}-${item.type}-${key}`" :name="item.name" :type="item.type" :after="item.value"></display-row>
+      </gb-tooltip>
+    </div>
     <card-select :key="`card-select-${ feature }-${ crop }`" :feature="feature" :crop="crop" :group="group"></card-select>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
+import DisplayRow from '../upgrade/DisplayRow.vue';
 import CardSelect from './CardSelect.vue';
 import CardSelectDisplay from './CardSelectDisplay.vue';
 
 export default {
-  components: { CardSelect, CardSelectDisplay },
+  components: { CardSelect, CardSelectDisplay, DisplayRow },
   props: {
     feature: {
       type: String,
@@ -45,13 +64,29 @@ export default {
       cards: state => state.card.card
     }),
     cardsSelected() {
-      return this.crop === null ? this.$store.state.card.feature[this.feature].cardSelected.length : this.$store.state.farm.crop[this.crop].cardSelected.length;
+      return this.crop === null ? this.$store.state.card.feature[this.feature].cardSelected : this.$store.state.farm.crop[this.crop].cardSelected;
     },
     cardsEquipped() {
       return this.crop === null ? this.$store.state.card.feature[this.feature].cardEquipped : this.$store.state.farm.crop[this.crop].cardEquipped;
     },
     maxCards() {
       return this.$store.getters['mult/get'](this.feature + 'CardCap');
+    },
+    cardPowerEquipped() {
+      return this.cardsEquipped.reduce((a, b) => a + this.cards[b].power, 0);
+    },
+    cardPowerSelected() {
+      return this.cardsSelected.reduce((a, b) => a + this.cards[b].power, 0);
+    },
+    cardPowerEquippedEffect() {
+      return this.cardPowerEquipped <= 0 ? [] : this.$store.state.card.feature[this.feature].powerReward.map(elem => {
+        return {...elem, value: elem.value(this.cardPowerEquipped)};
+      });
+    },
+    cardPowerSelectedEffect() {
+      return this.cardPowerSelected <= 0 ? [] : this.$store.state.card.feature[this.feature].powerReward.map(elem => {
+        return {...elem, value: elem.value(this.cardPowerSelected)};
+      });
     }
   }
 }

src/components/partial/card/CardSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex flex-wrap ma-1">
-    <v-select class="ma-1 w-100" v-for="(i, key) in valuesShow" :key="key + '-' + i.id" outlined hide-details clearable item-value="name" v-model="values[key]" :items="cardList" :no-data-text="$vuetify.lang.t('$vuetify.card.notFound')">
-      <template v-slot:selection="{ item }"><card-select-display show-disabled :item="item"></card-select-display></template>
+    <v-select class="ma-1 w-100" outlined multiple clearable hide-details item-value="name" v-model="values" :items="cardList" v-on:input="limitCards" :no-data-text="$vuetify.lang.t('$vuetify.card.notFound')">
+      <template v-slot:selection="{ item }"><card-select-display class="pa-1" style="width: 50%;" hide-amount show-disabled :item="item"></card-select-display></template>
       <template v-slot:item="{ item }"><card-select-display class="my-2" :item="item"></card-select-display></template>
     </v-select>
   </div>
@@ -10,18 +10,6 @@
 <script>
 import CardSelectDisplay from './CardSelectDisplay.vue';
 
-// Trick vues reactivity system by generating a different key on each change
-// Without it, if you have two of the same card and delete the first,
-// both slots would show as empty, even though the first still has the card
-function* gen() {
-  let id = 0;
-  while (true) {
-    yield id;
-    id++;
-  }
-}
-const getId = gen();
-
 export default {
   components: { CardSelectDisplay },
   data: () => ({
@@ -44,59 +32,41 @@ export default {
     }
   },
   computed: {
-    cardListBase() {
+    cardList() {
       let cards = [];
-
       for (const [key, elem] of Object.entries(this.$store.state.card.card)) {
         if (elem.feature === this.feature && (this.group === null || elem.group === null || this.group === elem.group) && elem.amount > 1) {
           cards.push({name: key, ...elem});
         }
       }
-
       return cards;
     },
-    cardList() {
-      return this.cardListBase.map(elem => {
-        let cardCount = this.values.filter(el => el === elem.name).length;
-        return {...elem, disabled: cardCount >= (elem.amount - 1)};
-      });
-    },
     maxCards() {
       return this.$store.getters['mult/get'](this.feature + 'CardCap');
     },
-    valuesShow() {
-      return (this.values.length < this.maxCards ? [...this.values, null] : this.values).map(elem => {
-        return {name: elem, id: getId.next().value};
-      });
-    },
     cardSelected() {
       return this.crop === null ? this.$store.state.card.feature[this.feature].cardSelected : this.$store.state.farm.crop[this.crop].cardSelected;
     }
   },
-  mounted() {
-    let cost = {};
-    this.values = this.cardSelected.filter(card => {
-      if (cost[card] === undefined) {
-        cost[card] = 0;
+  methods: {
+    limitCards(e) {
+      if (e.length > this.maxCards) {
+        e.pop();
       }
-      cost[card]++;
-      return this.$store.state.card.card[card].amount > cost[card];
-    });
+    }
+  },
+  mounted() {
+    this.values = [...this.cardSelected];
   },
   watch: {
     values: {
       deep: true,
       immediate: false,
       handler(newVal) {
-        let arr = newVal.filter(elem => elem !== null);
-        if (arr.length !== newVal.length) {
-          this.$set(this, 'values', arr);
+        if (this.crop === null) {
+          this.$store.commit('card/updateKey', {type: 'feature', name: this.feature, crop: this.crop, key: 'cardSelected', value: newVal});
         } else {
-          if (this.crop === null) {
-            this.$store.commit('card/updateKey', {type: 'feature', name: this.feature, crop: this.crop, key: 'cardSelected', value: arr});
-          } else {
-            this.$store.commit('farm/updateCropKey', {name: this.crop, key: 'cardSelected', value: arr});
-          }
+          this.$store.commit('farm/updateCropKey', {name: this.crop, key: 'cardSelected', value: newVal});
         }
       }
     },