Add Progress (WIP) (#152)

* Copy GameNotes and use it as boilerplate * Save and display progress data * Save and display progress data * Mobile adjustments and add label * Mobile adjustments and add label * save progress as integer * Add sorting by progress * Display progress on select GameCards * Fix `progress()` return * Reduce amount of props * Copy change * remove unnecessary check * use `input[type=range]` * remove unnecessary check * Add progress-pie in the Grid view Credit goes to @oliviale for her lovely CSS progress pie * Save and display progress data * Add progress-pie in the Grid view Credit goes to @oliviale for her lovely CSS progress pie * fix rebase conflict * add translation * Fixed merge conflict typo
2024-11-23 19:53:14 +00:00 · 2019-12-17 06:05:35 +01:00 · 2019-12-17 06:05:35 +01:00 · d2a3f78942
commit d2a3f78942
parent cce8aa2fed
26 changed files with 2283 additions and 1492 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -97,11 +97,13 @@ export default {
  mounted() {
    // TODO: REMOVE, call action directly
    this.$bus.$on('SAVE_NOTES', this.saveNotes);
+    this.$bus.$on('SAVE_PROGRESSES', this.saveProgresses);
    this.init();
  },

  beforeDestroy() {
    this.$bus.$off('SAVE_NOTES');
+    this.$bus.$off('SAVE_PROGRESSES');
  },

  methods: {
@ -167,6 +169,20 @@ export default {
      }
    },

+    saveProgresses(progresses, force) {
+      if (progresses) {
+        // TODO: move to actions
+        db.collection('progresses').doc(this.user.uid).set(progresses, { merge: !force })
+          .then(() => {
+            this.$bus.$emit('TOAST', { message: 'Progress updated' });
+          })
+          .catch(() => {
+            this.$bus.$emit('TOAST', { message: 'There was an error saving your progress', type: 'error' });
+            this.$router.push({ name: 'sessionExpired' });
+          });
+      }
+    },
+
    syncData() {
      // TODO: move to actions
      db.collection('lists').doc(this.user.uid)
@ -207,6 +223,16 @@ export default {
            this.$store.commit('SET_NOTES', notes);
          }
        });
+
+      // TODO: move to actions
+      db.collection('progresses').doc(this.user.uid)
+        .onSnapshot((doc) => {
+          if (doc.exists) {
+            const progresses = doc.data();
+
+            this.$store.commit('SET_PROGRESSES', progresses);
+          }
+        });
    },

    initUser(user) {
--- a/src/components/GameCards/GameCard.js
+++ b/src/components/GameCards/GameCard.js
@ -13,7 +13,7 @@ export default {
  },

  computed: {
-    ...mapState(['settings', 'games', 'gameLists', 'platform', 'user', 'tags', 'activeList', 'notes']),
+    ...mapState(['settings', 'games', 'gameLists', 'platform', 'user', 'tags', 'activeList', 'notes', 'progresses']),
    ...mapGetters(['hasTags']),

    showGameRatings() {
@ -39,6 +39,10 @@ export default {
      return this.notes && this.notes[this.gameId] && this.notes[this.gameId].text;
    },

+    progress() {
+      return this.progresses && this.progresses[this.gameId] && this.progresses[this.gameId].number;
+    },
+
    list() {
      return this.activePlatform[this.listId];
    },
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@ -17,12 +17,18 @@
      <i class="fas fa-grip-vertical game-drag-handle" />

      <game-rating
-        v-if="showGameRatings && list.view !== 'covers'"
+        v-if="showGameRatings"
        :rating="game.rating"
        small
        @click.native="openDetails"
      />

+      <game-progress
+        v-if="progress"
+        small
+        @click.native="openDetails"
+      />
+
      <i
        v-if="note"
        :title="note"
@ -53,12 +59,14 @@

 <script>
 import GameRating from '@/components/GameDetail/GameRating';
+import GameProgress from '@/components/GameDetail/GameProgress';
 import GameCardUtils from '@/components/GameCards/GameCard';
 import Tag from '@/components/Tag';

 export default {
  components: {
    GameRating,
+    GameProgress,
    Tag,
  },

--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@ -10,8 +10,38 @@
    >

    <div :class="{ 'game-info': showGameInfo }" >
+      <div
+        v-if="showGameInfo && progress"
+        class="title-progress"
+      >
        <a
-        v-if="showGameInfo && list.view !== 'covers'"
+          v-text="game.name"
+          @click="openDetails"
+        />
+
+        <game-rating
+          v-if="showGameRatings"
+          :rating="game.rating"
+          small
+          @click.native="openDetails"
+        />
+
+        <game-progress
+          small
+          pie
+          @click.native="openDetails"
+        />
+
+        <i
+          v-if="note"
+          :title="note"
+          class="fas fa-sticky-note note"
+          @click="openDetails"
+        />
+      </div>
+
+      <a
+        v-if="showGameInfo && !progress"
        v-text="game.name"
        @click="openDetails"
      />
@ -19,14 +49,14 @@
      <i class="fas fa-grip-vertical game-drag-handle" />

      <game-rating
-        v-if="showGameInfo && showGameRatings && list.view !== 'covers'"
+        v-if="showGameInfo && showGameRatings && !progress"
        :rating="game.rating"
        small
        @click.native="openDetails"
      />

      <i
-        v-if="showGameInfo && note"
+        v-if="showGameInfo && note && !progress"
        :title="note"
        class="fas fa-sticky-note note"
        @click="openDetails"
@ -55,12 +85,14 @@

 <script>
 import GameRating from '@/components/GameDetail/GameRating';
+import GameProgress from '@/components/GameDetail/GameProgress';
 import GameCardUtils from '@/components/GameCards/GameCard';
 import Tag from '@/components/Tag';

 export default {
  components: {
    GameRating,
+    GameProgress,
    Tag,
  },

@ -143,6 +175,26 @@ export default {
      margin-right: $gp / 2;
      color: var(--game-card-text-color);
    }
+
+    .title-progress {
+      display: grid;
+      grid-template: auto auto / auto auto;
+
+      a {
+        grid-column: 1;
+      }
+
+      .game-rating {
+        grid-column: 1;
+        grid-row: 2;
+      }
+
+      .game-progresses {
+        justify-self: end;
+        grid-column: 2;
+        grid-row: span 2;
+      }
+    }
  }

  .game-drag-handle {
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@ -11,6 +11,12 @@
        @click.native="openDetails"
      />

+      <game-progress
+        v-if="progress"
+        small
+        @click.native="openDetails"
+      />
+
      <i
        v-if="note"
        :title="note"
@ -43,12 +49,14 @@

 <script>
 import GameRating from '@/components/GameDetail/GameRating';
+import GameProgress from '@/components/GameDetail/GameProgress';
 import GameCardUtils from '@/components/GameCards/GameCard';
 import Tag from '@/components/Tag';

 export default {
  components: {
    GameRating,
+    GameProgress,
    Tag,
  },

--- a/src/components/GameCards/GameCardWide.vue
+++ b/src/components/GameCards/GameCardWide.vue
@ -22,6 +22,12 @@
        @click.native="openDetails"
      />

+      <game-progress
+        v-if="progress"
+        small
+        @click.native="openDetails"
+      />
+
      <i
        v-if="note"
        :title="note"
@ -52,12 +58,14 @@

 <script>
 import GameRating from '@/components/GameDetail/GameRating';
+import GameProgress from '@/components/GameDetail/GameProgress';
 import GameCardUtils from '@/components/GameCards/GameCard';
 import Tag from '@/components/Tag';

 export default {
  components: {
    GameRating,
+    GameProgress,
    Tag,
  },

--- a/src/components/GameDetail/GameNotes.vue
+++ b/src/components/GameDetail/GameNotes.vue
@ -8,6 +8,7 @@
      </div>

      <button class="primary" @click="editNote">
+        <i class="fas fa-pen" />
        Edit note
      </button>
    </div>
@ -37,6 +38,7 @@
        </button>

        <button class="danger" @click="deleteNote">
+          <i class="fas fa-trash-alt" />
          Delete note
        </button>
      </footer>
--- a/src/components/GameDetail/GameProgress.vue
+++ b/src/components/GameDetail/GameProgress.vue
@ -0,0 +1,423 @@
+<template lang="html">
+  <div :class="['game-progresses', { small }]">
+    <div v-if="hasProgress && !showProgressField" class="progress">
+      <div
+        class="progress-data"
+        v-if="!pie"
+      >
+        <progress
+          class="progress-bar"
+          max="100"
+          :value="localProgress.number"
+        >
+          <div class="progress-bar-fallback">
+            <span :style="style">
+              Progress: {{localProgress.number}}%
+            </span>
+          </div>
+        </progress>
+        <div
+          v-if="localProgress.number"
+          class="progress-bar-label"
+        >
+          {{localProgress.number}}%
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="progress-pie"
+        :data-value="localProgress.number"
+      >
+      </div>
+
+      <button
+        v-if="!small && !pie"
+        class="primary"
+        @click="editProgress"
+      >
+        Edit progress
+      </button>
+    </div>
+
+    <div
+      class="progress-field"
+      v-if="showProgressField && !small && !pie"
+    >
+      <div class="progress-data">
+        <div
+          v-if="localProgress.number"
+          class="progress-bar-label"
+        >
+          {{localProgress.number}}%
+        </div>
+
+        <input
+          class="progress-range"
+          v-model.number="localProgress.number"
+          placeholder="50"
+          type="range"
+          min="0"
+          max="100"
+          step="5"
+          autofocus
+        >
+      </div>
+
+      <div class="progress-action">
+        <div class="progress-edit">
+          <button class="secondary" @click="reset">
+            {{ $t('global.cancel') }}
+          </button>
+
+          <button class="primary" @click="saveProgress">
+            {{ $t('global.save') }}
+          </button>
+        </div>
+
+        <button class="danger" @click="deleteProgress">
+          Delete progress
+        </button>
+      </div>
+    </div>
+
+    <button
+      v-if="!hasProgress &&
+            !showProgressField &&
+            !small &&
+            !pie"
+      class="primary"
+      @click="addProgress"
+    >
+      <i class="fas fa-clock" />
+      {{ $t('progresses.addProgress') }}
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+  props: {
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    pie: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      showProgressField: false,
+      localProgress: {
+        number: null,
+      },
+    };
+  },
+
+  computed: {
+    ...mapState(['game', 'progresses']),
+    ...mapGetters(['gameProgress']),
+
+    hasProgress() {
+      return this.gameProgress && this.gameProgress.number;
+    },
+
+    style() {
+      return `width: ${this.localProgress.number}%`;
+    },
+  },
+
+  mounted() {
+    this.reset();
+  },
+
+  methods: {
+    reset() {
+      this.localProgress = this.gameProgress
+        ? JSON.parse(JSON.stringify(this.gameProgress))
+        : { number: null };
+
+      this.showProgressField = false;
+    },
+
+    addProgress() {
+      this.showProgressField = true;
+    },
+
+    editProgress() {
+      this.showProgressField = true;
+    },
+
+    deleteProgress() {
+      const updatedProgresses = {
+        ...this.progresses,
+      };
+
+      this.$delete(updatedProgresses, this.game.id);
+
+      this.$bus.$emit('SAVE_PROGRESSES', updatedProgresses, true);
+      this.showProgressField = false;
+      this.localProgress = {
+        number: null,
+      };
+    },
+
+    saveProgress() {
+      const updatedProgresses = {
+        ...this.progresses,
+      };
+
+      updatedProgresses[this.game.id] = this.localProgress;
+
+      this.$bus.$emit('SAVE_PROGRESSES', updatedProgresses);
+      this.showProgressField = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+  @import "~styles/styles";
+
+  .game-progresses {
+    max-width: calc(100% - #{$gp});
+    margin-top: $gp;
+    margin-bottom: $gp;
+
+    @media($small) {
+      margin: $gp auto;
+    }
+
+    .progress-data {
+      display: flex;
+      align-items: center;
+      margin-top: $gp;
+      margin-bottom: $gp;
+
+      @media($small) {
+        flex-wrap: wrap;
+        margin: $gp auto;
+        justify-content: center;
+
+        .progress-bar-label {
+          order: 1;
+
+          + .progress-range {
+            margin-top: $gp / 3;
+            order: 2;
+          }
+        }
+      }
+    }
+
+    .progress-pie {
+      width: 30px;
+      height: 30px;
+
+      &::after {
+        font: 100 10px/21px Tahoma;
+      }
+    }
+
+    .progress-bar {
+      -webkit-appearance: none;
+      appearance: none;
+      display: block;
+      border-radius: $border-radius;
+      background: var(--list-background);
+      height: 20px;
+      border-color: transparent;
+      overflow: hidden;
+
+      @media($small) {
+        order: 2;
+      }
+
+      &::-moz-progress-bar {
+        background: var(--accent-color);
+      }
+
+      &::-webkit-progress-bar {
+        border-radius: $border-radius;
+      }
+
+      &::-webkit-progress-value {
+        background-image: linear-gradient(var(--accent-color), var(--accent-color));
+      }
+    }
+
+    .progress-bar-label {
+      margin-left: $gp;
+      font-size: 18px;
+      font-weight: bold;
+      color: var(--accent-color);
+      order: 2;
+
+      @media($small) {
+        order: 1;
+        margin-left: 0;
+        margin-bottom: $gp / 3;
+        flex-basis: 100%;
+      }
+    }
+
+    .progress-range {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 36px;
+      border: 0;
+      border-radius: 0;
+      padding: 0;
+      margin-bottom: 0;
+      background: transparent;
+      overflow: hidden;
+      order: 1;
+
+      &:focus {
+        outline: none;
+
+        &::-webkit-slider-runnable-track {
+          background: var(--accent-color);
+        }
+
+        &::-ms-fill-lower {
+          background: var(--accent-color);
+        }
+
+        &::-ms-fill-upper {
+          background: var(--accent-color);
+        }
+      }
+
+      &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 36px;
+        cursor: pointer;
+        animate: 0.2s;
+        background: var(--accent-color);
+        border-radius: $border-radius;
+        overflow: hidden;
+      }
+
+      &::-webkit-slider-thumb {
+        height: 36px;
+        width: 16px;
+        background: var(--primary-background);
+        cursor: pointer;
+        -webkit-appearance: none;
+        box-shadow: 500px 0 0 500px var(--list-background);
+      }
+
+      &::-moz-range-track {
+        width: 100%;
+        height: 36px;
+        cursor: pointer;
+        animate: 0.2s;
+        overflow: hidden;
+        background: var(--accent-color);
+        border-radius: $border-radius;
+      }
+
+      &::-moz-range-thumb {
+        height: 36px;
+        width: 16px;
+        border: none;
+        border-radius: 0;
+        background: var(--primary-background);
+        box-shadow: 500px 0 0 500px var(--list-background);
+        cursor: pointer;
+      }
+
+      &::-ms-track {
+        width: 100%;
+        height: 36px;
+        cursor: pointer;
+        animate: 0.2s;
+        overflow: hidden;
+        background: transparent;
+        border-color: transparent;
+        border-width: 16px 0;
+        color: transparent;
+      }
+
+      &::-ms-fill-lower {
+        background: var(--accent-color);
+        border-radius: $border-radius;
+      }
+
+      &::-ms-fill-upper {
+        background: var(--accent-color);
+        border-radius: $border-radius;
+      }
+
+      &::-ms-thumb {
+        height: 36px;
+        width: 16px;
+        border-radius: 0;
+        background: var(--primary-background);
+        box-shadow: 500px 0 0 500px var(--list-background);
+        cursor: pointer;
+      }
+
+      @media($small) {
+        margin-top: $gp * 2;
+        margin-right: 0;
+        margin-bottom: $gp;
+      }
+    }
+
+    .progress-action {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: $gp;
+
+      .secondary {
+        margin-right: $gp;
+      }
+
+      @media($small) {
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 0;
+
+        .danger {
+          margin-top: $gp;
+        }
+      }
+
+      .progress-edit {
+        min-width: 300px;
+        max-width: 355px;
+        width: calc(100% - 75px - (#{$gp} * 8));
+      }
+    }
+
+    &.small {
+      max-width: 100%;
+      margin-top: $gp / 4;
+      margin-bottom: $gp / 4;
+
+      .progress-data {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .progress-bar {
+        height: 10px;
+        width: 100%;
+      }
+
+      .progress-bar-label {
+        display: none;
+      }
+    }
+  }
+
+</style>
--- a/src/components/Lists/List.vue
+++ b/src/components/Lists/List.vue
@ -114,7 +114,7 @@ export default {
  },

  computed: {
-    ...mapState(['user', 'gameLists', 'platform', 'settings', 'games', 'dragging']),
+    ...mapState(['user', 'gameLists', 'platform', 'settings', 'games', 'dragging', 'progresses']),

    autoSortEnabled() {
      const list = this.list[this.listIndex];
@ -129,6 +129,26 @@ export default {
      switch (sortOrder) {
      case 'sortByCustom':
        return gameList;
+      case 'sortByProgress':
+        return gameList.sort((a, b) => {
+          const gameA = this.games[a] &&
+                        this.progresses[this.games[a].id] &&
+                        this.progresses[this.games[a].id].number
+            ? this.progresses[this.games[a].id].number
+            : 0;
+
+          const gameB = this.games[b] &&
+                        this.progresses[this.games[b].id] &&
+                        this.progresses[this.games[b].id].number
+            ? this.progresses[this.games[b].id].number
+            : 0;
+
+          if (gameA > gameB) {
+            return -1;
+          }
+
+          return gameA < gameB ? 1 : 0;
+        });
      case 'sortByRating':
        return gameList.sort((a, b) => {
          const gameA = this.games[a] && this.games[a].rating
--- a/src/components/Lists/ListSettingsModal.vue
+++ b/src/components/Lists/ListSettingsModal.vue
@ -187,6 +187,7 @@ export default {
      sortOrders: {
        sortByName: 'fas fa-sort-alpha-down',
        sortByRating: 'fas fa-star',
+        sortByProgress: 'fas fa-clock',
        sortByCustom: 'fas fa-user',
      },
    };
--- a/src/i18n/ar.json
+++ b/src/i18n/ar.json
@ -22,7 +22,13 @@
        "donateMessage": "Gamebrary مجاني ومفتوح المصدر ، والنظر في المساعدة في تطويرها",
        "donating": "تبرع",
        "reportBugs": "الإبلاغ عن الأخطاء",
-    "submitFeedback": "تقديم ردود الفعل"
+        "submitFeedback": "تقديم ردود الفعل",
+        "home": "لوحات المفاتيح المنزلية",
+        "handheld": "الأجهزة المحمولة",
+        "computer": "الكمبيوتر المنزلي",
+        "releaseYear": "صدر العام",
+        "name": "أبجديا",
+        "type": "نوع"
    },
    "igdbCredit": {
        "poweredByIgdb": "مدعوم من IGDB"
@ -45,12 +51,12 @@
        "perspective": "إنطباع",
        "releaseDate": "يوم الاصدار",
        "timeToBeat": "الوقت يداهمك",
-    "gameModes": "نوع اللعبة",
+        "gameModes": "وضع اللعب",
        "genres": "نوع أدبي",
        "gamePlatforms": "متاح أيضًا لـ:",
        "developers": "مطور",
        "publishers": "الناشرون",
-    "removeFromList": "ازله من القائمة",
+        "removeFromList": "إزالة",
        "links": {
            "official": "موقع رسمي",
            "wikia": "فندوم",
@ -59,7 +65,7 @@
            "twitter": "تغريد",
            "twitch": "نشل",
            "instagram": "إينستاجرام",
-      "youtube": "موقع YouTube",
+            "youtube": "موقع يوتيوب",
            "iphone": "دائرة الرقابة الداخلية",
            "ipad": "اى باد",
            "android": "لعب المتجر",
@ -76,36 +82,33 @@
    "list": {
        "edit": "تحرير اسم القائمة",
        "type": "نوع القائمة",
+        "settings": "قائمة الإعدادات",
        "placeholder": "اكتب اسم قائمتك هنا",
-    "suggestions": {
-      "owned": "مملوكة",
        "wishlist": "الأماني",
-      "currentlyPlaying": "يلعب حاليا",
-      "completed": "منجز"
-    },
        "input": "أدخل بنفسك",
        "add": "اضف قائمة",
        "duplicateWarning": "لديك بالفعل قائمة بهذا الاسم",
        "getStarted": "البدء!",
        "addFirstTime": "مرحبا ، أضف قائمتك الأولى!",
        "sortByName": "THE",
+        "sortByProgress": "تقدم",
        "sortByRating": "أحرز هدفا",
        "sortByReleaseDate": "تاريخ",
        "sortByCustom": "العادة",
-    "delete": "حذف",
+        "delete": "حذف القائمة",
        "moveLeft": "تحرك يسارا",
        "moveRight": "تحرك يمينا",
        "emptyList": "هذه القائمة فارغة",
        "addGame": "إضافة اللعبة",
        "view": "عرض القائمة",
        "moveList": "نقل القائمة",
-    "sortList": "قائمة الفرز",
+        "sortList": "قائمة الفرز التلقائي",
        "coversSizeTitle": "يغطي عبر",
        "views": {
            "single": "افتراضي",
            "wide": "المدمج",
            "text": "نص فقط",
-      "masonry": "Masonry",
+            "masonry": "ماسونية",
            "grid": "شبكة"
        }
    },
@ -113,10 +116,10 @@
        "about": "حول",
        "platforms": "منصات",
        "gameBoard": "مجلس لعبة",
+        "public": "عامة",
        "tags": "الكلمات",
        "account": "الحساب",
        "global": "عالمي",
-    "darkTheme": "موضوع الظلام",
        "reloading": "إعادة ...",
        "releases": "إطلاق",
        "newsletter": "تلقي رسائل البريد الإلكتروني المحدثة (قريبًا)",
@ -140,8 +143,9 @@
        "signOut": "خروج",
        "wallpaper": {
            "title": "تحميل خلفية",
-      "transparency": "السماح بالشفافية",
+            "transparency": "اسمح بالشفافية",
            "currentWallpaper": "خلفية الحالية",
+            "wallpaper": "ورق الجدران",
            "removeWallpaper": "إزالة خلفية"
        },
        "deleteAccount": {
@ -154,9 +158,10 @@
        "title": "علامات اللعبة",
        "addTag": "إضافة علامة",
        "createTag": "إنشاء علامة",
-    "inputPlaceholder": "اسم اليوم",
-    "applyTag": "تطبيق العلامة",
-    "useTags": "استخدم العلامات لتنظيم الألعاب بشكل أفضل"
+        "inputPlaceholder": "اسم العلامة",
+        "editTags": "تحرير علامات اللعبة",
+        "message": "انقر فوق العلامة لإضافتها إلى <a>{gameName}</a> . انقر فوق <i class=\"fas fa-times close\"></i> لإزالة العلامة.",
+        "settingsMessage": "يمكنك إضافة أو تعديل العلامات الموجودة في الإعدادات."
    },
    "gameSearch": {
        "title": "إضافة ألعاب إلى",
@ -167,6 +172,11 @@
        "addToIGDB": "إضافته إلى IGDB"
    },
    "notes": {
-    "addNote": "اضف ملاحظة"
+        "addNote": "اضف ملاحظة",
+        "notes": "ملاحظات"
+    },
+    "progresses": {
+        "addProgress": "إضافة التقدم",
+        "progresses": "تقدم"
    }
 }
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@ -19,10 +19,16 @@
        "published": "Zveřejněno {date}"
    },
    "platforms": {
-    "donateMessage": "Gamebrary je bezplatný a otevřený zdroj, zvažte pomoc při jeho vývoji",
+        "donateMessage": "Gamebrary je bezplatný a otevřený zdroj, zvažte pomoc při jeho rozvoji",
        "donating": "darování",
        "reportBugs": "hlášení chyb",
-    "submitFeedback": "odeslání zpětné vazby"
+        "submitFeedback": "odeslání zpětné vazby",
+        "home": "Domácí konzole",
+        "handheld": "Kapesní počítače",
+        "computer": "Domácí počítač",
+        "releaseYear": "Rok vydání",
+        "name": "Abecedně",
+        "type": "Typ"
    },
    "igdbCredit": {
        "poweredByIgdb": "Běží na IGDB"
@ -50,7 +56,7 @@
        "gamePlatforms": "K dispozici také pro:",
        "developers": "Vývojář",
        "publishers": "Vydavatelé",
-    "removeFromList": "Odstranit ze seznamu",
+        "removeFromList": "Odstranit",
        "links": {
            "official": "Oficiální stránka",
            "wikia": "Fandom",
@ -63,7 +69,7 @@
            "iphone": "iOS",
            "ipad": "iPad",
            "android": "Obchod Play",
-      "steam": "Pára",
+            "steam": "Parní",
            "reddit": "Reddit",
            "discord": "Svár",
            "google_plus": "Google Plus",
@ -76,36 +82,33 @@
    "list": {
        "edit": "Upravit název seznamu",
        "type": "Typ seznamu",
+        "settings": "Nastavení seznamu",
        "placeholder": "Sem zadejte název seznamu",
-    "suggestions": {
-      "owned": "Vlastní",
        "wishlist": "Seznam přání",
-      "currentlyPlaying": "Právě hraje",
-      "completed": "Dokončeno"
-    },
        "input": "Zadejte svůj vlastní",
        "add": "Přidat seznam",
        "duplicateWarning": "Již máte seznam s tímto názvem",
        "getStarted": "Začít!",
        "addFirstTime": "Vítejte, přidejte svůj první seznam!",
        "sortByName": "",
+        "sortByProgress": "Pokrok",
        "sortByRating": "Skóre",
        "sortByReleaseDate": "datum",
        "sortByCustom": "Zvyk",
-    "delete": "Odstranit",
+        "delete": "Smazat seznam",
        "moveLeft": "Pohyb doleva",
        "moveRight": "Pohyb vpravo",
        "emptyList": "Tento seznam je prázdný",
        "addGame": "Přidat hru",
        "view": "Zobrazení seznamu",
        "moveList": "Přesunout seznam",
-    "sortList": "Seřadit seznam",
+        "sortList": "Seznam automatického třídění",
        "coversSizeTitle": "Přikrývá se",
        "views": {
            "single": "Výchozí",
            "wide": "Kompaktní",
            "text": "Pouze text",
-      "masonry": "Masonry",
+            "masonry": "Zdivo",
            "grid": "Mřížka"
        }
    },
@ -113,10 +116,10 @@
        "about": "O",
        "platforms": "Platformy",
        "gameBoard": "Hrací deska",
+        "public": "Veřejnost",
        "tags": "Značky",
        "account": "Účet",
        "global": "Globální",
-    "darkTheme": "Tmavé téma",
        "reloading": "Přebíjení...",
        "releases": "Vydání",
        "newsletter": "Dostávat aktualizační e-maily (již brzy)",
@ -142,6 +145,7 @@
            "title": "Nahrajte tapetu",
            "transparency": "Povolit průhlednost",
            "currentWallpaper": "Aktuální tapeta",
+            "wallpaper": "Tapeta na zeď",
            "removeWallpaper": "Odstraňte tapetu"
        },
        "deleteAccount": {
@ -154,19 +158,25 @@
        "title": "Herní štítky",
        "addTag": "Přidat značku",
        "createTag": "Vytvořit značku",
-    "inputPlaceholder": "Název dne",
-    "applyTag": "Použít značku",
-    "useTags": "Pomocí značek můžete lépe organizovat své hry"
+        "inputPlaceholder": "Název značky",
+        "editTags": "Úpravy herních značek",
+        "message": "Kliknutím na značku ji přidáte do <a>{gameName}</a> . Klikněte na <i class=\"fas fa-times close\"></i> odebrat značku.",
+        "settingsMessage": "Existující značky můžete přidat nebo upravit v nastavení."
    },
    "gameSearch": {
-    "title": "Přidat hry do",
-    "inputPlaceholder": "Hledej tady",
+        "title": "Přidejte hry do",
+        "inputPlaceholder": "Hledej zde",
        "alreadyInList": "z výsledků vyhledávání již ve vašem seznamu",
        "noResultsFound": "Žádné výsledky",
        "missingGame": "Chybí vám hra? Pomozte komunitě a",
        "addToIGDB": "Přidejte ji do IGDB"
    },
    "notes": {
-    "addNote": "Přidat poznámku"
+        "addNote": "Přidat poznámku",
+        "notes": "Poznámky"
+    },
+    "progresses": {
+        "addProgress": "Přidejte pokrok",
+        "progresses": "Pokrok"
    }
 }
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@ -1,7 +1,7 @@
 {
    "global": {
        "back": "Zurück",
-    "save": "sparen",
+        "save": "speichern",
        "cancel": "Stornieren",
        "create": "Erstellen",
        "filter": "Filter",
@ -22,7 +22,13 @@
        "donateMessage": "Gamebrary ist kostenlos und Open Source",
        "donating": "spenden",
        "reportBugs": "Fehler melden",
-    "submitFeedback": "Feedback senden"
+        "submitFeedback": "Feedback senden",
+        "home": "Hauptkonsolen",
+        "handheld": "Handhelds",
+        "computer": "Heimcomputer",
+        "releaseYear": "Jahr veröffentlicht",
+        "name": "Alphabetisch",
+        "type": "Art"
    },
    "igdbCredit": {
        "poweredByIgdb": "Bereitgestellt von IGDB"
@ -36,7 +42,7 @@
    },
    "sessionExpired": {
        "title": "Sitzung abgelaufen",
-    "login": "Anmeldung",
+        "login": "Einloggen",
        "exit": "Ausgang"
    },
    "gameDetail": {
@ -50,7 +56,7 @@
        "gamePlatforms": "Auch erhältlich für:",
        "developers": "Entwickler",
        "publishers": "Verlag",
-    "removeFromList": "Aus Liste entfernen",
+        "removeFromList": "Löschen",
        "links": {
            "official": "Offizielle Seite",
            "wikia": "Fangemeinde",
@ -76,36 +82,33 @@
    "list": {
        "edit": "Listenname bearbeiten",
        "type": "Listentyp",
+        "settings": "Listeneinstellungen",
        "placeholder": "Geben Sie hier Ihren Listennamen ein",
-    "suggestions": {
-      "owned": "Besessen",
        "wishlist": "Wunschzettel",
-      "currentlyPlaying": "Spielt gerade",
-      "completed": "Abgeschlossen"
-    },
        "input": "Geben Sie Ihre eigenen ein",
        "add": "Liste hinzufügen",
        "duplicateWarning": "Sie haben bereits eine Liste mit diesem Namen",
        "getStarted": "Loslegen!",
        "addFirstTime": "Willkommen, füge deine erste Liste hinzu!",
        "sortByName": "DAS",
+        "sortByProgress": "Fortschritt",
        "sortByRating": "Ergebnis",
        "sortByReleaseDate": "Datum",
        "sortByCustom": "Brauch",
-    "delete": "Löschen",
+        "delete": "Liste löschen",
        "moveLeft": "Geh nach links",
        "moveRight": "Nach rechts bewegen",
        "emptyList": "Diese Liste ist leer",
        "addGame": "Spiel hinzufügen",
        "view": "Listenansicht",
        "moveList": "Liste verschieben",
-    "sortList": "Sortierliste",
+        "sortList": "Automatische Sortierliste",
        "coversSizeTitle": "Abdeckungen herüber",
        "views": {
            "single": "Standard",
            "wide": "Kompakt",
            "text": "Nur Text",
-      "masonry": "Masonry",
+            "masonry": "Mauerwerk",
            "grid": "Gitter"
        }
    },
@ -113,10 +116,10 @@
        "about": "Über",
        "platforms": "Plattformen",
        "gameBoard": "Spielbrett",
+        "public": "Öffentlichkeit",
        "tags": "Stichworte",
        "account": "Konto",
        "global": "Global",
-    "darkTheme": "Dunkles Thema",
        "reloading": "Neuladen...",
        "releases": "Releases",
        "newsletter": "Erhalte Update-E-Mails (in Kürze)",
@ -142,6 +145,7 @@
            "title": "Hintergrundbild hochladen",
            "transparency": "Transparenz zulassen",
            "currentWallpaper": "Aktuelles Hintergrundbild",
+            "wallpaper": "Tapete",
            "removeWallpaper": "Tapete entfernen"
        },
        "deleteAccount": {
@ -155,18 +159,24 @@
        "addTag": "Tag hinzufügen",
        "createTag": "Tag erstellen",
        "inputPlaceholder": "Tag name",
-    "applyTag": "Tag anwenden",
-    "useTags": "Verwenden Sie Tags, um Ihre Spiele besser zu organisieren"
+        "editTags": "Spiel-Tags bearbeiten",
+        "message": "Klicken Sie auf das Tag, um es zu <a>{gameName} hinzuzufügen</a> . Klicke auf <i class=\"fas fa-times close\"></i> tag entfernen.",
+        "settingsMessage": "Sie können vorhandene Tags in den Einstellungen hinzufügen oder bearbeiten."
    },
    "gameSearch": {
        "title": "Spiele hinzufügen zu",
        "inputPlaceholder": "Suche hier",
-    "alreadyInList": "von den Suchergebnissen bereits in Ihrer Liste",
+        "alreadyInList": "aus Suchergebnissen, die bereits in Ihrer Liste enthalten sind",
        "noResultsFound": "Keine Ergebnisse",
        "missingGame": "Vermissen Sie ein Spiel? Helfen Sie der Community und",
        "addToIGDB": "Fügen Sie es zu IGDB hinzu"
    },
    "notes": {
-    "addNote": "Notiz hinzufügen"
+        "addNote": "Notiz hinzufügen",
+        "notes": "Anmerkungen"
+    },
+    "progresses": {
+        "addProgress": "Fortschritt hinzufügen",
+        "progresses": "Fortschritt"
    }
 }
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -91,6 +91,7 @@
    "getStarted": "Get started!",
    "addFirstTime": "Welcome, add your first list!",
    "sortByName": "A-Z",
+    "sortByProgress": "Progress",
    "sortByRating": "Score",
    "sortByReleaseDate": "Date",
    "sortByCustom": "Custom",
@ -173,5 +174,9 @@
  "notes": {
    "addNote": "Add note",
    "notes": "Notes"
+  },
+  "progresses": {
+    "addProgress": "Add progress",
+    "progresses": "Progress"
  }
 }
--- a/src/i18n/es.json
+++ b/src/i18n/es.json
@ -22,7 +22,13 @@
        "donateMessage": "Gamebrary es gratuito y de código abierto, considere ayudar a su desarrollo mediante",
        "donating": "donando",
        "reportBugs": "informar errores",
-    "submitFeedback": "enviando comentarios"
+        "submitFeedback": "enviando comentarios",
+        "home": "Consolas para el hogar",
+        "handheld": "Dispositivos de mano",
+        "computer": "Computador del hogar",
+        "releaseYear": "Año de lanzamiento",
+        "name": "Alfabéticamente",
+        "type": "Tipo"
    },
    "igdbCredit": {
        "poweredByIgdb": "Desarrollado por IGDB"
@ -50,7 +56,7 @@
        "gamePlatforms": "También disponible para:",
        "developers": "Desarrollador",
        "publishers": "Editores",
-    "removeFromList": "Quitar de la lista",
+        "removeFromList": "retirar",
        "links": {
            "official": "Sitio oficial",
            "wikia": "Fandom",
@ -76,36 +82,33 @@
    "list": {
        "edit": "Editar nombre de lista",
        "type": "Tipo de lista",
+        "settings": "Configuraciones de lista",
        "placeholder": "Escriba el nombre de su lista aquí",
-    "suggestions": {
-      "owned": "De propiedad",
        "wishlist": "Lista de deseos",
-      "currentlyPlaying": "Reproduciendo",
-      "completed": "Terminado"
-    },
        "input": "Ingrese el suyo",
        "add": "Añadir lista",
        "duplicateWarning": "Ya tienes una lista con este nombre",
        "getStarted": "¡Empezar!",
        "addFirstTime": "Bienvenido, agrega tu primera lista!",
        "sortByName": "LA",
+        "sortByProgress": "Progreso",
        "sortByRating": "Puntuación",
        "sortByReleaseDate": "Fecha",
        "sortByCustom": "Personalizado",
-    "delete": "Borrar",
+        "delete": "Eliminar lista",
        "moveLeft": "Mover hacia la izquierda",
-    "moveRight": "Mover a la derecha",
+        "moveRight": "Moverse a la derecha",
        "emptyList": "Esta lista esta vacia",
        "addGame": "Agregar juego",
        "view": "Vista de la lista",
        "moveList": "Mover lista",
-    "sortList": "Lista Ordenada",
+        "sortList": "Lista de ordenación automática",
        "coversSizeTitle": "Cubre a través de",
        "views": {
            "single": "Defecto",
            "wide": "Compacto",
            "text": "Solo texto",
-      "masonry": "Masonry",
+            "masonry": "Albañilería",
            "grid": "Cuadrícula"
        }
    },
@ -113,10 +116,10 @@
        "about": "Acerca de",
        "platforms": "Plataformas",
        "gameBoard": "Juego de mesa",
+        "public": "Público",
        "tags": "Etiquetas",
        "account": "Cuenta",
        "global": "Global",
-    "darkTheme": "Tema oscuro",
        "reloading": "Recargando ...",
        "releases": "Lanzamientos",
        "newsletter": "Recibir correos electrónicos de actualización (próximamente)",
@ -142,6 +145,7 @@
            "title": "Subir fondo de pantalla",
            "transparency": "Permitir transparencia",
            "currentWallpaper": "Fondo de pantalla actual",
+            "wallpaper": "Papel pintado",
            "removeWallpaper": "Eliminar fondo de pantalla"
        },
        "deleteAccount": {
@ -154,9 +158,10 @@
        "title": "Etiquetas de juego",
        "addTag": "Añadir etiqueta",
        "createTag": "Crear etiqueta",
-    "inputPlaceholder": "Nombre del día",
-    "applyTag": "Aplicar etiqueta",
-    "useTags": "Usa etiquetas para organizar mejor tus juegos"
+        "inputPlaceholder": "Nombre de etiqueta",
+        "editTags": "Editar etiquetas de juego",
+        "message": "Haga clic en la etiqueta para agregarla a <a>{gameName}</a> . Haga clic en <i class=\"fas fa-times close\"></i> para eliminar la etiqueta",
+        "settingsMessage": "Puede agregar o editar etiquetas existentes en la configuración."
    },
    "gameSearch": {
        "title": "Agregar juegos a",
@ -167,6 +172,11 @@
        "addToIGDB": "Agréguelo a IGDB"
    },
    "notes": {
-    "addNote": "Añadir la nota"
+        "addNote": "Añadir la nota",
+        "notes": "Notas"
+    },
+    "progresses": {
+        "addProgress": "Agregar progreso",
+        "progresses": "Progreso"
    }
 }
--- a/src/i18n/eu.json
+++ b/src/i18n/eu.json
@ -22,7 +22,13 @@
        "donateMessage": "Gamebrary iturri librea eta irekia da eta kontuan hartu bere garapenari laguntzen",
        "donating": "eman",
        "reportBugs": "akatsen berri ematea",
-    "submitFeedback": "feedbacka bidaltzea"
+        "submitFeedback": "feedbacka bidaltzea",
+        "home": "Etxeko kontsolak",
+        "handheld": "eskuko gailuek",
+        "computer": "Etxeko ordenagailua",
+        "releaseYear": "Urtea kaleratu du",
+        "name": "alfabetikoki",
+        "type": "Mota"
    },
    "igdbCredit": {
        "poweredByIgdb": "IGDB-k eginda"
@ -50,7 +56,7 @@
        "gamePlatforms": "Eskuragarri ere:",
        "developers": "Developer",
        "publishers": "Argitaletxeak",
-    "removeFromList": "Kendu zerrendatik",
+        "removeFromList": "Kendu",
        "links": {
            "official": "Gune ofiziala",
            "wikia": "fandom",
@ -76,36 +82,33 @@
    "list": {
        "edit": "Editatu zerrendaren izena",
        "type": "Zerrenda mota",
+        "settings": "Zerrendako ezarpenak",
        "placeholder": "Idatzi hemen zure zerrenda izena",
-    "suggestions": {
-      "owned": "sozietateak",
        "wishlist": "Gustuko",
-      "currentlyPlaying": "Gaur egun jolasten",
-      "completed": "Osatua"
-    },
        "input": "Sartu zurea",
        "add": "Gehitu zerrenda",
-    "duplicateWarning": "Dagoeneko zerrenda bat duzu izen horrekin",
+        "duplicateWarning": "Izen horrekin zerrenda bat duzu jada",
        "getStarted": "Hasi!",
        "addFirstTime": "Ongi etorri, gehitu zure lehen zerrenda!",
        "sortByName": "THE",
+        "sortByProgress": "Eraikitzen",
        "sortByRating": "Puntuazioa",
        "sortByReleaseDate": "data",
        "sortByCustom": "pertsonalizatua",
-    "delete": "ezabatu",
+        "delete": "Zerrenda ezabatu",
        "moveLeft": "Mugitu ezkerrera",
        "moveRight": "Mugitu eskuinera",
        "emptyList": "Zerrenda hau hutsik dago",
        "addGame": "Gehitu jokoa",
        "view": "Zerrenda ikuspegia",
        "moveList": "Mugitu zerrenda",
-    "sortList": "Sailkapen zerrenda",
+        "sortList": "Auto ordenazioen zerrenda",
        "coversSizeTitle": "Estaldurak zehar",
        "views": {
            "single": "Default",
            "wide": "Compact",
            "text": "Testua soilik",
-      "masonry": "Masonry",
+            "masonry": "Masoneria",
            "grid": "Grid"
        }
    },
@ -113,10 +116,10 @@
        "about": "About",
        "platforms": "plataformak",
        "gameBoard": "Joko taula",
+        "public": "Publiko",
        "tags": "Tags",
        "account": "Kontu-",
        "global": "Global",
-    "darkTheme": "Gai iluna",
        "reloading": "Berkargatzean ...",
        "releases": "oharrak",
        "newsletter": "Jaso eguneratze mezu elektronikoak (laster etorriko dira)",
@ -142,6 +145,7 @@
            "title": "Kargatu horma-irudia",
            "transparency": "Gardentasuna eman",
            "currentWallpaper": "Uneko horma-irudia",
+            "wallpaper": "Wallpaper",
            "removeWallpaper": "Kendu papera"
        },
        "deleteAccount": {
@ -154,9 +158,10 @@
        "title": "Jokoaren etiketak",
        "addTag": "Gehitu etiketa",
        "createTag": "Etiketa sortu",
-    "inputPlaceholder": "Egunaren izena",
-    "applyTag": "Aplikatu etiketa",
-    "useTags": "Erabili etiketak zure jokoak hobeto antolatzeko"
+        "inputPlaceholder": "Etiketaren izena",
+        "editTags": "Editatu jokoen etiketak",
+        "message": "Egin klik etiketan <a>{gameName}</a> (e) n gehitzeko. Egin klik <i class=\"fas fa-times close\"></i> etiketa kentzeko.",
+        "settingsMessage": "Dauden ezarpenetan etiketak gehitu edo editatu ditzakezu."
    },
    "gameSearch": {
        "title": "Gehitu jokoak",
@ -167,6 +172,11 @@
        "addToIGDB": "Gehitu IGDB-ri"
    },
    "notes": {
-    "addNote": "Oharra gehitu"
+        "addNote": "Oharra gehitu",
+        "notes": "Oharrak"
+    },
+    "progresses": {
+        "addProgress": "Gehitu aurrerapenak",
+        "progresses": "Eraikitzen"
    }
 }
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@ -1,7 +1,7 @@
 {
    "global": {
        "back": "Retour",
-    "save": "sauvegarder",
+        "save": "sauver",
        "cancel": "Annuler",
        "create": "Créer",
        "filter": "Filtre",
@ -19,17 +19,23 @@
        "published": "Date de publication}"
    },
    "platforms": {
-    "donateMessage": "Gamebrary est gratuit et open source, envisagez d’aider son développement en",
+        "donateMessage": "Gamebrary est gratuit et open source, envisagez d'aider à son développement en",
        "donating": "faire un don",
-    "reportBugs": "signaler des bugs",
-    "submitFeedback": "soumettre des commentaires"
+        "reportBugs": "signaler des bogues",
+        "submitFeedback": "soumettre des commentaires",
+        "home": "Consoles de salon",
+        "handheld": "Ordinateurs de poche",
+        "computer": "Ordinateur de famille",
+        "releaseYear": "Année de sortie",
+        "name": "Alphabétiquement",
+        "type": "Type"
    },
    "igdbCredit": {
        "poweredByIgdb": "Propulsé par IGDB"
    },
    "gameBoard": {
        "settings": {
-      "wallpaper": "Papier peint personnalisé",
+            "wallpaper": "Fond d'écran personnalisé",
            "shareLink": "Liens partageables (expérimental)",
            "dangerZone": "Zone dangereuse"
        }
@ -44,13 +50,13 @@
        "screenshots": "Captures d'écran",
        "perspective": "La perspective",
        "releaseDate": "Date de sortie",
-    "timeToBeat": "Temps à battre",
+        "timeToBeat": "Il est temps de battre",
        "gameModes": "Mode de jeu",
        "genres": "Genre",
        "gamePlatforms": "Aussi disponible pour:",
        "developers": "Développeur",
-    "publishers": "Les éditeurs",
-    "removeFromList": "Retirer de la liste",
+        "publishers": "Éditeurs",
+        "removeFromList": "Retirer",
        "links": {
            "official": "Site officiel",
            "wikia": "Fandom",
@ -74,52 +80,49 @@
        }
    },
    "list": {
-    "edit": "Editer le nom de la liste",
+        "edit": "Modifier le nom de la liste",
        "type": "Type de liste",
-    "placeholder": "Tapez votre nom de liste ici",
-    "suggestions": {
-      "owned": "Possédé",
+        "settings": "Liste des paramètres",
+        "placeholder": "Tapez le nom de votre liste ici",
        "wishlist": "Liste de souhaits",
-      "currentlyPlaying": "En train de jouer",
-      "completed": "Terminé"
-    },
-    "input": "Entrez votre propre",
+        "input": "Entrez le vôtre",
        "add": "Ajouter la liste",
        "duplicateWarning": "Vous avez déjà une liste avec ce nom",
        "getStarted": "Commencer!",
        "addFirstTime": "Bienvenue, ajoutez votre première liste!",
        "sortByName": "LA",
+        "sortByProgress": "Le progrès",
        "sortByRating": "But",
        "sortByReleaseDate": "Rendez-vous amoureux",
        "sortByCustom": "Douane",
-    "delete": "Effacer",
+        "delete": "Supprimer la liste",
        "moveLeft": "Se déplacer à gauche",
        "moveRight": "Déplacer vers la droite",
        "emptyList": "Cette liste est vide",
        "addGame": "Ajouter un jeu",
-    "view": "Vue liste",
+        "view": "Affichage liste",
        "moveList": "Déplacer la liste",
-    "sortList": "Liste de tri",
+        "sortList": "Liste de tri automatique",
        "coversSizeTitle": "Couvre à travers",
        "views": {
            "single": "Défaut",
            "wide": "Compact",
            "text": "Texte seulement",
-      "masonry": "Masonry",
+            "masonry": "Maçonnerie",
            "grid": "la grille"
        }
    },
    "settings": {
-    "about": "À propos",
+        "about": "Sur",
        "platforms": "Plateformes",
        "gameBoard": "Plateau de jeu",
+        "public": "Publique",
        "tags": "Mots clés",
        "account": "Compte",
        "global": "Global",
-    "darkTheme": "Thème sombre",
        "reloading": "Rechargement ...",
        "releases": "Communiqués",
-    "newsletter": "Recevoir des emails de mise à jour (à venir)",
+        "newsletter": "Recevez des e-mails de mise à jour (à venir bientôt)",
        "branding": "Marque de la plateforme (couleurs, logo, etc ...)",
        "language": "La langue",
        "languages": {
@ -142,31 +145,38 @@
            "title": "Télécharger un fond d'écran",
            "transparency": "Autoriser la transparence",
            "currentWallpaper": "Fond d'écran actuel",
+            "wallpaper": "Fond d'écran",
            "removeWallpaper": "Supprimer le papier peint"
        },
        "deleteAccount": {
            "button": "Supprimer le compte",
-      "message": "Les données de votre compte seront définitivement supprimées.",
+            "message": "Les données de votre compte seront supprimées pour toujours.",
            "title": "Êtes-vous sûr?"
        }
    },
    "tags": {
-    "title": "Balises de jeu",
+        "title": "Tags du jeu",
        "addTag": "Ajouter une étiquette",
-    "createTag": "Créer un tag",
-    "inputPlaceholder": "Nom du jour",
-    "applyTag": "Appliquer le tag",
-    "useTags": "Utilisez des tags pour mieux organiser vos jeux"
+        "createTag": "Créer une balise",
+        "inputPlaceholder": "Nom du tag",
+        "editTags": "Modifier les balises de jeu",
+        "message": "Cliquez sur le tag pour l'ajouter à <a>{gameName}</a> . Cliquer sur <i class=\"fas fa-times close\"></i> pour supprimer la balise.",
+        "settingsMessage": "Vous pouvez ajouter ou modifier des balises existantes dans les paramètres."
    },
    "gameSearch": {
        "title": "Ajouter des jeux à",
        "inputPlaceholder": "Cherche ici",
-    "alreadyInList": "des résultats de recherche déjà dans votre liste",
+        "alreadyInList": "à partir des résultats de recherche déjà dans votre liste",
        "noResultsFound": "Aucun résultat",
-    "missingGame": "Manquer un jeu? Aidez la communauté et",
+        "missingGame": "Vous manquez un match? Aidez la communauté et",
        "addToIGDB": "Ajoutez-le à IGDB"
    },
    "notes": {
-    "addNote": "Ajouter une note"
+        "addNote": "Ajouter une note",
+        "notes": "Remarques"
+    },
+    "progresses": {
+        "addProgress": "Ajouter des progrès",
+        "progresses": "Le progrès"
    }
 }
--- a/src/i18n/it.json
+++ b/src/i18n/it.json
@ -19,10 +19,16 @@
        "published": "Pubblicato {data}"
    },
    "platforms": {
-    "donateMessage": "Gamebrary è gratuito e open source, considera di aiutarne lo sviluppo",
+        "donateMessage": "Gamebrary è gratuito e open source, considera l'idea di aiutarne lo sviluppo",
        "donating": "la donazione",
        "reportBugs": "segnalazione di bug",
-    "submitFeedback": "invio feedback"
+        "submitFeedback": "invio feedback",
+        "home": "Console domestiche",
+        "handheld": "Palmari",
+        "computer": "Computer domestico",
+        "releaseYear": "Anno rilasciato",
+        "name": "In ordine alfabetico",
+        "type": "genere"
    },
    "igdbCredit": {
        "poweredByIgdb": "Alimentato da IGDB"
@ -50,7 +56,7 @@
        "gamePlatforms": "Disponibile anche per:",
        "developers": "Sviluppatore",
        "publishers": "editori",
-    "removeFromList": "Rimuovere dalla lista",
+        "removeFromList": "Rimuovere",
        "links": {
            "official": "Sito ufficiale",
            "wikia": "Mondo dei fan",
@ -76,36 +82,33 @@
    "list": {
        "edit": "Modifica il nome dell'elenco",
        "type": "Tipo di elenco",
+        "settings": "Elenco impostazioni",
        "placeholder": "Digita qui il nome della tua lista",
-    "suggestions": {
-      "owned": "Di proprietà",
        "wishlist": "Lista dei desideri",
-      "currentlyPlaying": "Attualmente in riproduzione",
-      "completed": "Completato"
-    },
        "input": "Inserisci il tuo",
        "add": "Aggiungi elenco",
        "duplicateWarning": "Hai già un elenco con questo nome",
        "getStarted": "Iniziare!",
        "addFirstTime": "Benvenuto, aggiungi il tuo primo elenco!",
        "sortByName": "IL",
+        "sortByProgress": "Progresso",
        "sortByRating": "Punto",
        "sortByReleaseDate": "Data",
        "sortByCustom": "costume",
-    "delete": "Elimina",
+        "delete": "Elimina elenco",
        "moveLeft": "Muovere a sinistra",
        "moveRight": "Vai a destra",
        "emptyList": "Questo elenco è vuoto",
        "addGame": "Aggiungi gioco",
        "view": "Visualizzazione elenco",
        "moveList": "Sposta elenco",
-    "sortList": "Elenco di ordinamento",
+        "sortList": "Elenco di ordinamento automatico",
        "coversSizeTitle": "Copre attraverso",
        "views": {
            "single": "Predefinito",
            "wide": "Compatto",
            "text": "Solo testo",
-      "masonry": "Masonry",
+            "masonry": "Opere murarie",
            "grid": "Griglia"
        }
    },
@ -113,17 +116,17 @@
        "about": "Di",
        "platforms": "piattaforme",
        "gameBoard": "Tavolo da gioco",
+        "public": "Pubblico",
        "tags": "tag",
        "account": "account",
        "global": "Globale",
-    "darkTheme": "Tema scuro",
        "reloading": "Ricaricamento ...",
        "releases": "Uscite",
        "newsletter": "Ricevi email di aggiornamento (in arrivo)",
        "branding": "Marchio della piattaforma (colori, logo, ecc ...)",
        "language": "linguaggio",
        "languages": {
-      "en": "Inglese",
+            "en": "inglese",
            "es": "spagnolo",
            "pl": "polacco",
            "de": "Tedesco",
@ -142,6 +145,7 @@
            "title": "Carica sfondo",
            "transparency": "Consenti trasparenza",
            "currentWallpaper": "Sfondo corrente",
+            "wallpaper": "Sfondo",
            "removeWallpaper": "Rimuovi sfondo"
        },
        "deleteAccount": {
@ -154,9 +158,10 @@
        "title": "Tag di gioco",
        "addTag": "Aggiungi Tag",
        "createTag": "Crea tag",
-    "inputPlaceholder": "Nome del giorno",
-    "applyTag": "Applica tag",
-    "useTags": "Usa i tag per organizzare meglio i tuoi giochi"
+        "inputPlaceholder": "Nome del tag",
+        "editTags": "Modifica i tag di gioco",
+        "message": "Fai clic sul tag per aggiungerlo a <a>{gameName}</a> . Clicca su <i class=\"fas fa-times close\"></i> per rimuovere il tag.",
+        "settingsMessage": "Puoi aggiungere o modificare tag esistenti nelle impostazioni."
    },
    "gameSearch": {
        "title": "Aggiungi giochi a",
@ -167,6 +172,11 @@
        "addToIGDB": "Aggiungilo a IGDB"
    },
    "notes": {
-    "addNote": "Aggiungi nota"
+        "addNote": "Aggiungi nota",
+        "notes": "Gli appunti"
+    },
+    "progresses": {
+        "addProgress": "Aggiungi progressi",
+        "progresses": "Progresso"
    }
 }
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@ -1,7 +1,7 @@
 {
    "global": {
        "back": "バック",
-    "save": "保存する",
+        "save": "セーブ",
        "cancel": "キャンセル",
        "create": "作成する",
        "filter": "フィルタ",
@ -22,7 +22,13 @@
        "donateMessage": "Gamebraryは無料でオープンソースです。その開発を支援することを検討してください",
        "donating": "寄付",
        "reportBugs": "バグを報告する",
-    "submitFeedback": "フィードバックを送信する"
+        "submitFeedback": "フィードバックを送信する",
+        "home": "ホームコンソール",
+        "handheld": "ハンドヘルド",
+        "computer": "ホームコンピューター",
+        "releaseYear": "リリース年",
+        "name": "アルファベット順",
+        "type": "タイプ"
    },
    "igdbCredit": {
        "poweredByIgdb": "IGDBを搭載"
@ -50,9 +56,9 @@
        "gamePlatforms": "以下にも利用可能：",
        "developers": "開発者",
        "publishers": "出版社",
-    "removeFromList": "リストから削除する",
+        "removeFromList": "削除する",
        "links": {
-      "official": "オフィシャルサイト",
+            "official": "公式サイト",
            "wikia": "ファンダム",
            "wikipedia": "ウィキペディア",
            "facebook": "フェイスブック",
@ -76,36 +82,33 @@
    "list": {
        "edit": "リスト名を編集",
        "type": "リストタイプ",
+        "settings": "リスト設定",
        "placeholder": "ここにリスト名を入力してください",
-    "suggestions": {
-      "owned": "所有",
        "wishlist": "ウィッシュリスト",
-      "currentlyPlaying": "現在プレイ中",
-      "completed": "完了しました"
-    },
        "input": "あなた自身を入力してください",
        "add": "リストを追加",
        "duplicateWarning": "この名前のリストは既にあります",
        "getStarted": "始めましょう！",
        "addFirstTime": "ようこそ、最初のリストを追加してください！",
        "sortByName": "THE",
+        "sortByProgress": "進捗",
        "sortByRating": "スコア",
        "sortByReleaseDate": "日付",
        "sortByCustom": "カスタム",
-    "delete": "削除する",
+        "delete": "リストを削除",
        "moveLeft": "左に移動",
        "moveRight": "右に動く",
        "emptyList": "このリストは空です",
        "addGame": "ゲームを追加",
        "view": "リストビュー",
        "moveList": "リストを移動する",
-    "sortList": "ソートリスト",
+        "sortList": "自動ソートリスト",
        "coversSizeTitle": "全体をカバー",
        "views": {
            "single": "デフォルト",
            "wide": "コンパクト",
            "text": "テキストのみ",
-      "masonry": "Masonry",
+            "masonry": "石積み",
            "grid": "グリッド"
        }
    },
@ -113,10 +116,10 @@
        "about": "約",
        "platforms": "プラットフォーム",
        "gameBoard": "ゲームボード",
+        "public": "パブリック",
        "tags": "タグ",
        "account": "アカウント",
        "global": "グローバル",
-    "darkTheme": "暗いテーマ",
        "reloading": "再読み込みしています...",
        "releases": "リリース",
        "newsletter": "更新メールを受け取る（近日公開予定）",
@ -129,7 +132,7 @@
            "de": "ドイツ人",
            "ar": "アラビア語",
            "fr": "フランス語",
-      "it": "イタリアの",
+            "it": "イタリア語",
            "eu": "バスク",
            "cs": "チェコ語",
            "ja": "日本人"
@ -142,6 +145,7 @@
            "title": "壁紙をアップロード",
            "transparency": "透明化を許可する",
            "currentWallpaper": "現在の壁紙",
+            "wallpaper": "壁紙",
            "removeWallpaper": "壁紙を削除"
        },
        "deleteAccount": {
@ -154,19 +158,25 @@
        "title": "ゲームタグ",
        "addTag": "タグ付けする",
        "createTag": "タグを作成",
-    "inputPlaceholder": "曜日名",
-    "applyTag": "タグを適用",
-    "useTags": "タグを使用してゲームを整理します"
+        "inputPlaceholder": "タグ名",
+        "editTags": "ゲームタグを編集する",
+        "message": "タグをクリックして<a>{gameName}</a>に追加します。クリック<i class=\"fas fa-times close\"></i>タグを削除します。",
+        "settingsMessage": "設定で既存のタグを追加または編集できます。"
    },
    "gameSearch": {
        "title": "にゲームを追加",
        "inputPlaceholder": "検索",
-    "alreadyInList": "すでにリストにある検索結果から",
+        "alreadyInList": "既にリストにある検索結果から",
        "noResultsFound": "結果がありません",
        "missingGame": "ゲームが見つかりませんか？コミュニティを助け、",
        "addToIGDB": "IGDBに追加します"
    },
    "notes": {
-    "addNote": "メモを追加"
+        "addNote": "メモを追加",
+        "notes": "ノート"
+    },
+    "progresses": {
+        "addProgress": "進行状況を追加",
+        "progresses": "進捗"
    }
 }
--- a/src/i18n/pl.json
+++ b/src/i18n/pl.json
@ -2,14 +2,14 @@
    "global": {
        "back": "Z powrotem",
        "save": "Zapisać",
-    "cancel": "Anuluj",
+        "cancel": "anulować",
        "create": "Stwórz",
        "filter": "Filtr",
        "by": "przez",
        "no": "Nie",
        "yes": "tak",
        "or": "lub",
-    "returnHome": "Wrócić do domu",
+        "returnHome": "Powrót do domu",
        "pageNotFound": "Strona nie znaleziona"
    },
    "errors": {
@ -19,10 +19,16 @@
        "published": "Data publikacji}"
    },
    "platforms": {
-    "donateMessage": "Gamebrary jest darmowym i otwartym oprogramowaniem, rozważ pomoc w jego rozwoju",
+        "donateMessage": "Gamebrary jest darmowy i open source, rozważ pomoc w jego rozwoju",
        "donating": "darowizny",
        "reportBugs": "zgłaszanie błędów",
-    "submitFeedback": "przesyłanie opinii"
+        "submitFeedback": "przesyłanie opinii",
+        "home": "Konsole domowe",
+        "handheld": "Podręczne urządzenia",
+        "computer": "Komputer domowy",
+        "releaseYear": "Rok wydania",
+        "name": "Alfabetycznie",
+        "type": "Rodzaj"
    },
    "igdbCredit": {
        "poweredByIgdb": "Obsługiwane przez IGDB"
@ -50,7 +56,7 @@
        "gamePlatforms": "Dostępne również dla:",
        "developers": "Deweloper",
        "publishers": "Wydawcy",
-    "removeFromList": "Usunąć z listy",
+        "removeFromList": "Usunąć",
        "links": {
            "official": "Oficjalna strona",
            "wikia": "Fandom",
@ -76,36 +82,33 @@
    "list": {
        "edit": "Edytuj nazwę listy",
        "type": "Rodzaj listy",
+        "settings": "Ustawienia listy",
        "placeholder": "Wpisz tutaj swoją nazwę listy",
-    "suggestions": {
-      "owned": "Posiadane",
        "wishlist": "Lista życzeń",
-      "currentlyPlaying": "Obecnie gra",
-      "completed": "Zakończony"
-    },
        "input": "Wpisz własne",
        "add": "Dodaj listę",
        "duplicateWarning": "Masz już listę o tej nazwie",
        "getStarted": "Zaczynać!",
        "addFirstTime": "Witamy, dodaj swoją pierwszą listę!",
        "sortByName": "",
+        "sortByProgress": "Postęp",
        "sortByRating": "Wynik",
        "sortByReleaseDate": "Data",
        "sortByCustom": "Zwyczaj",
-    "delete": "Kasować",
+        "delete": "Usuń listę",
        "moveLeft": "Przesuń w lewo",
        "moveRight": "Ruch w prawo",
        "emptyList": "Ta lista jest pusta",
        "addGame": "Dodaj grę",
        "view": "Widok listy",
        "moveList": "Przenieś listę",
-    "sortList": "Sortuj listę",
+        "sortList": "Lista automatycznego sortowania",
        "coversSizeTitle": "Obejmuje w poprzek",
        "views": {
            "single": "Domyślna",
            "wide": "Kompaktowy",
            "text": "Tylko tekst",
-      "masonry": "Masonry",
+            "masonry": "Kamieniarstwo",
            "grid": "Krata"
        }
    },
@ -113,12 +116,12 @@
        "about": "O",
        "platforms": "Platformy",
        "gameBoard": "Gra planszowa",
+        "public": "Publiczny",
        "tags": "Tagi",
        "account": "Konto",
        "global": "Światowy",
-    "darkTheme": "ciemny schemat",
        "reloading": "Ponowne ładowanie ...",
-    "releases": "Wydawnictwa",
+        "releases": "Prasowe",
        "newsletter": "Otrzymuj e-maile z aktualizacją (wkrótce)",
        "branding": "Znakowanie platformy (kolory, logo itp.)",
        "language": "Język",
@ -142,6 +145,7 @@
            "title": "Prześlij tapetę",
            "transparency": "Zezwól na przezroczystość",
            "currentWallpaper": "Aktualna tapeta",
+            "wallpaper": "Tapeta",
            "removeWallpaper": "Usuń tapetę"
        },
        "deleteAccount": {
@ -154,9 +158,10 @@
        "title": "Tagi gier",
        "addTag": "Dodaj tag",
        "createTag": "Utwórz tag",
-    "inputPlaceholder": "Nazwa dnia",
-    "applyTag": "Zastosuj tag",
-    "useTags": "Użyj tagów, aby lepiej zorganizować swoje gry"
+        "inputPlaceholder": "Nazwa znacznika",
+        "editTags": "Edytuj tagi gier",
+        "message": "Kliknij znacznik, aby dodać go do <a>{gameName}</a> . Kliknij <i class=\"fas fa-times close\"></i> aby usunąć tag.",
+        "settingsMessage": "Możesz dodawać lub edytować istniejące tagi w ustawieniach."
    },
    "gameSearch": {
        "title": "Dodaj gry do",
@ -167,6 +172,11 @@
        "addToIGDB": "Dodaj go do IGDB"
    },
    "notes": {
-    "addNote": "Dodaj notatkę"
+        "addNote": "Dodaj notatkę",
+        "notes": "Notatki"
+    },
+    "progresses": {
+        "addProgress": "Dodaj postęp",
+        "progresses": "Postęp"
    }
 }
--- a/src/pages/Game.vue
+++ b/src/pages/Game.vue
@ -23,6 +23,7 @@
          {{ platform.name }}

          <game-rating v-if="games[id].rating" :rating="games[id].rating" />
+          <game-progress />
          <game-tags />

          <div class="actions">
@ -80,6 +81,7 @@
 import { mapState, mapGetters } from 'vuex';
 import GameScreenshots from '@/components/GameDetail/GameScreenshots';
 import GameNotes from '@/components/GameDetail/GameNotes';
+import GameProgress from '@/components/GameDetail/GameProgress';
 import GameTags from '@/components/GameDetail/GameTags';
 import GameRating from '@/components/GameDetail/GameRating';
 import GameLinks from '@/components/GameDetail/GameLinks';
@ -99,6 +101,7 @@ export default {
    Placeholder,
    GameScreenshots,
    GameNotes,
+    GameProgress,
    GameTags,
    GameVideos,
    GameDetails,
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -97,6 +97,15 @@ export default {
      : '';
  },

+  gameProgress: ({ game, progresses }) => {
+    const gameSelected = game && game.id;
+    const hasProgress = gameSelected && progresses[game.id];
+
+    return hasProgress
+      ? progresses[game.id]
+      : '';
+  },
+
  // eslint-disable-next-line
    activeList: ({ gameLists, platform, activeListIndex }) => gameLists[platform.code][activeListIndex],

--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@ -57,6 +57,10 @@ export default {
    state.notes = notes;
  },

+  SET_PROGRESSES(state, progresses) {
+    state.progresses = progresses;
+  },
+
  ADD_GAME_TAG(state, { tagName, gameId }) {
    state.tags[tagName].games.push(gameId);
  },
--- a/src/store/state.js
+++ b/src/store/state.js
@ -3,6 +3,7 @@ export default {
  releases: null,
  tags: {},
  notes: {},
+  progresses: {},
  dragging: false,
  activeListIndex: null,
  gameLists: {},
--- a/src/styles/_progress-pie.scss
+++ b/src/styles/_progress-pie.scss
@ -0,0 +1,126 @@
+/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
+
+.progress-pie {
+    width: 60px; 
+    height: 60px;
+    border-radius: 50%;
+    background: var(--list-background);
+    background-image: linear-gradient(to right, transparent 50%, var(--accent-color) 0);
+    position: relative;
+    display: inline-block;
+}
+
+.progress-pie::before {
+    content: '';
+    display: block;
+    margin-left: 50%;
+    height: 100%;
+    border-radius: 0 100% 100% 0 / 50%;
+    background-color: inherit;
+    transform-origin: left;
+}
+
+.progress-pie::after {
+    content: attr(data-value);
+    position: absolute;
+    width: 70%;
+    height: 70%;
+    margin: auto;
+    border-radius: 50%;
+    background-color: var(--game-card-background);
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    text-align: center;
+    font: 100 20px/41px Tahoma;
+}
+
+@for $i from 0 through 50 {
+  .progress-pie[data-value="#{$i}"]:before {
+     transform: rotate(#{$i/100}turn);
+  }
+}
+
+@for $i from 51 through 100 {
+  .progress-pie[data-value="#{$i}"]:before {
+    background-color: var(--accent-color);
+    transform: rotate(#{$i/100 - .5}turn);
+  }
+}
+
+
+/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
+
+.progress-pie-color {
+    width: 60px; 
+    height: 60px;
+    border-radius: 50%;
+    background: #eee;
+    position: relative;
+    display: inline-block;
+}
+
+.progress-pie-color::before {
+    content: '';
+    display: block;
+    margin-left: 50%;
+    height: 100%;
+    border-radius: 0 100% 100% 0 / 50%;
+    background-color: inherit;
+    transform-origin: left;
+}
+
+.progress-pie-color::after {
+    content: attr(data-value);
+    position: absolute;
+    width: 70%;
+    height: 70%;
+    margin: auto;
+    border-radius: 50%;
+    background-color: #fff;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    text-align: center;
+    font: 900 20px/41px Lato;
+}
+
+@for $i from 0 through 40 {
+    .progress-pie-color[data-value="#{$i}"] {
+        background-image: linear-gradient(to right, transparent 50%, #cc0000 0);
+        &:before {
+            transform: rotate(#{$i/100}turn);
+        }
+    }
+}
+
+@for $i from 41 through 50 {
+    .progress-pie-color[data-value="#{$i}"] {
+        background-image: linear-gradient(to right, transparent 50%, #ffcf3a 0);
+        &:before {
+            transform: rotate(#{$i/100}turn);
+        }
+    }
+}
+
+@for $i from 51 through 70 {
+    .progress-pie-color[data-value="#{$i}"] {
+        background-image: linear-gradient(to right, transparent 50%, #ffcf3a 0);
+        &:before {
+            background-color: #ffcf3a;
+            transform: rotate(#{$i/100 - .5}turn);
+        }
+    }
+}
+
+@for $i from 71 through 100 {
+    .progress-pie-color[data-value="#{$i}"] {
+        background-image: linear-gradient(to right, transparent 50%, #09944a 0);
+        &:before {
+            background-color: #09944a;
+            transform: rotate(#{$i/100 - .5}turn);
+        }
+    }
+}
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@ -5,4 +5,5 @@
@import "_buttons";
@import "_inputs";
@import "_markdown";
+@import "_progress-pie";
@import "_settings";