From 1554795b3609195a40d437a4db62151ff6811008 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Tue, 19 Mar 2024 17:47:45 +0100
Subject: [PATCH 01/13] Adaptive Tutor WIP

---
 client/src/game/container.js                  |   4 +
 client/src/services/data/concepts.js          |  38 +++
 client/src/views/game/Game.vue                |   5 +-
 .../views/game/components/menu/HeaderBar.vue  |   6 +
 .../game/components/tutor/AdaptiveTutor.vue   | 217 ++++++++++++++++++
 5 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 client/src/services/data/concepts.js
 create mode 100644 client/src/views/game/components/tutor/AdaptiveTutor.vue

diff --git a/client/src/game/container.js b/client/src/game/container.js
index 6f258c4c8..d4b2e0f79 100644
--- a/client/src/game/container.js
+++ b/client/src/game/container.js
@@ -1,6 +1,7 @@
 import * as PIXI from 'pixi.js-legacy'
 import { Viewport } from 'pixi-viewport'
 import Map from './map'
+import eventBus from '../eventBus'
 import gameHelper from '../services/gameHelper'
 import textureService from './texture'
 
@@ -133,10 +134,12 @@ class GameContainer {
 
   zoomIn () {
     this.viewport.zoomPercent(0.5, true)
+    eventBus.$emit('onZoom')
   }
 
   zoomOut () {
     this.viewport.zoomPercent(-0.3, true)
+    eventBus.$emit('onZoom')
   }
 
   setupViewport (game) {
@@ -260,6 +263,7 @@ class GameContainer {
     let zoomPercent = this.getViewportZoomPercentage()
 
     this.map.refreshZoom(zoomPercent)
+    eventBus.$emit('onZoom')
   }
 
   setMode (mode, args) {
diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
new file mode 100644
index 000000000..494f96438
--- /dev/null
+++ b/client/src/services/data/concepts.js
@@ -0,0 +1,38 @@
+import GameHelper from '../gameHelper'
+import MENU_STATES from './menuStates'
+
+export default [
+    {
+      title: "Camera zoom",
+      text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
+      onZoom: function (concept) {
+        this.markLearned(concept, 10)
+      }
+    },
+    {
+      title: "Carriers",
+      text: "Carriers are used to transport Ships through hyperspace to reach other Stars. They can only be built at Stars and must hold a minimum of 1 Ship.\nCarriers are displayed as small ship icons with a circular coloured halo, much like stars. The number of ships that a carrier has will be displayed when zoomed in.\nClick on the carrier to view it in detail.",
+      onMenuRequested: function (concept, menuState) {
+        if (menuState.state === MENU_STATES.CARRIER_DETAIL) {
+            this.markLearned(concept, 40)
+        }
+      }
+    },
+    {
+      title: "Capital Star",
+      text: "The Capital Star is your home world. You can recognize as it has 9 points.\nSelect your Capital Star and view its details.",
+      onMenuRequested: function (concept, menuState) {
+        if (menuState.state === MENU_STATES.STAR_DETAIL) {
+          const starId = menuState.args
+          const star = GameHelper.getStarById(this.$store.state.game, starId)
+          if (star.homeStar) {
+            this.markLearned(concept)
+          }
+        }
+      }
+    },
+    {
+      title: "Bulk Upgrade",
+      text: "TODO."
+    },
+]
diff --git a/client/src/views/game/Game.vue b/client/src/views/game/Game.vue
index d4a460cdc..9d9da0f64 100644
--- a/client/src/views/game/Game.vue
+++ b/client/src/views/game/Game.vue
@@ -16,6 +16,7 @@
         <main-bar @onPlayerSelected="onPlayerSelected"
                   @onReloadGameRequested="reloadGame"/>
 
+        <adaptive-tutor/>
         <chat @onOpenPlayerDetailRequested="onPlayerSelected"/>
     </div>
   </div>
@@ -28,6 +29,7 @@ import GameContainer from './components/GameContainer.vue'
 import MENU_STATES from '../../services/data/menuStates'
 import MainBar from './components/menu/MainBar.vue'
 import Chat from './components/inbox/Chat.vue'
+import AdaptiveTutor from './components/tutor/AdaptiveTutor.vue'
 import GameApiService from '../../services/api/game'
 import UserApiService from '../../services/api/user'
 import GameHelper from '../../services/gameHelper'
@@ -42,7 +44,8 @@ export default {
     'loading-spinner': LoadingSpinnerVue,
     'game-container': GameContainer,
     'main-bar': MainBar,
-    'chat': Chat
+    'adaptive-tutor': AdaptiveTutor,
+    'chat': Chat,
   },
   data () {
     return {
diff --git a/client/src/views/game/components/menu/HeaderBar.vue b/client/src/views/game/components/menu/HeaderBar.vue
index c1adc84a4..52177dce7 100644
--- a/client/src/views/game/components/menu/HeaderBar.vue
+++ b/client/src/views/game/components/menu/HeaderBar.vue
@@ -42,6 +42,12 @@
               <span class="d-none d-md-inline-block ms-1">Tutorial</span>
             </button>
 
+            <!-- TODO toggle Adaptive Tutor on Mobile -->
+            <button class="btn btn-sm btn-warning">
+              <i class="fas fa-lightbulb"></i>
+              <span class="d-none d-md-inline-block ms-1">3</span>
+            </button>
+
             <button class="btn btn-sm btn-success ms-1" v-if="!userPlayer && gameIsJoinable" @click="setMenuState(MENU_STATES.WELCOME)">Join Now</button>
 
             <ready-status-button :smallButtons="true" v-if="!$isHistoricalMode() && userPlayer && isTurnBasedGame && canEndTurn && !userPlayer.defeated" class="ms-1" />
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
new file mode 100644
index 000000000..c07780cf1
--- /dev/null
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="d-none d-lg-block" v-if="isUserInGame">
+    <div id="conceptList" class="header-bar-bg container pt-1">
+      <div class="row">
+        <div class="col pt-2">
+          <h6>Learning Helper</h6>
+        </div>
+        <div class="col-auto">
+            <slot></slot>
+            <button v-if="isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i class="fas fa-minus"></i></button>
+            <button v-if="!isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i class="fas fa-plus"></i></button>
+        </div>
+      </div>
+      <div v-if="isExpanded" class="input-group">
+        <input v-model="filter" class="form-control form-control-sm" placeholder="Filter..."/>
+        <div class="input-group-append">
+          <button @click="clearFilter" class="btn btn-outline-secondary btn-sm" type="button"><i class="fas fa-times"></i></button>
+        </div>
+      </div>
+      <div>
+        <ul class="list-unstyled">
+          <li v-for="(concept, index) in filteredConcepts"  class="concept-item" :class="{'selected': concept === activeConcept && isSelectedConcept, 'learned': concept.learned}"
+            @click="selectConcept(concept);" @mouseenter="focusConcept(concept);" @mouseleave="unfocusConcept();">
+            <p class="small lh-sm m-0 p-1">
+              {{ concept.title }}<span class="text-muted" v-if="!concept.learned && concept.progress"> ({{ concept.progress }}%)</span>
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div id="conceptDetail" v-if="activeConcept" class="header-bar-bg container">
+      <menu-title v-if="isSelectedConcept" :title="activeConcept.title" @onCloseRequested="onCloseDetail"/>
+      <h4 v-if="!isSelectedConcept" class="pt-2">{{ activeConcept.title }}</h4>
+      <div>
+        <p v-for="para in activeConcept.text.split('\n')" v-html="para">
+        </p>
+        <p v-if="!activeConcept.learned">
+          <div class="progress" v-if="activeConcept.progress">
+            <div class="progress-bar" role="progressbar" :style="progressStyle" :aria-valuenow="activeConcept.progress" aria-valuemin="0" aria-valuemax="100"></div>
+          </div>
+        </p>
+        <div v-if="isSelectedConcept">
+          <p class="text-center"><button class="btn btn-sm btn-success" v-if="!activeConcept.learned" @click="onMarkLearned">Mark as Learned</button></p>
+          <p v-if="activeConcept.learned" class="text-center text-muted">Already Learned</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import eventBus from '../../../../eventBus'
+import GameHelper from '../../../../services/gameHelper'
+import MenuTitle from '../MenuTitle'
+import CONCEPTS from '../../../../services/data/concepts'
+
+export default {
+  components: {
+    'menu-title': MenuTitle
+  },
+  data () {
+    return {
+      CONCEPTS: CONCEPTS,
+      activeConcept: null,
+      filter: "",
+      isExpanded: false,
+      isFocusedConcept: false,
+      isSelectedConcept: false,
+    }
+  },
+  mounted () {
+    // TODO: These event names should be global constants
+    eventBus.$on('onMenuRequested', this.onMenuRequested)
+    eventBus.$on('onZoom', this.onZoom)
+  },
+  destroyed () {
+    eventBus.$off('onMenuRequested', this.onMenuRequested)
+    eventBus.$off('onZoom', this.onZoom)
+  },
+  methods: {
+    toggle () {
+      this.isExpanded = !this.isExpanded
+    },
+    clearFilter () {
+      this.filter = ""
+    },
+    selectConcept (concept) {
+      this.activeConcept = concept
+      this.isSelectedConcept = true
+    },
+    focusConcept (concept) {
+      if (!this.isSelectedConcept) {
+        this.activeConcept = concept
+        this.isFocusedConcept = true
+      }
+    },
+    unfocusConcept () {
+      if (!this.isSelectedConcept) {
+        this.activeConcept = null
+        this.isFocusedConcept = false
+      }
+    },
+    markLearned (concept, progress=null) {
+      if (progress) {
+        this.$set(concept, 'progress', Math.min((concept.progress || 0) + progress, 100))
+      }
+      if (!progress || concept.progress === 100) {
+        this.$set(concept, 'learned', true)
+      }
+      if (this.isSelectedConcept && concept.learned) {
+        this.onCloseDetail()
+      }
+    },
+    onCloseDetail () {
+      this.activeConcept = null
+      this.isSelectedConcept = false
+    },
+    onMarkLearned () {
+      this.markLearned(this.activeConcept)
+    },
+    onMenuRequested (menuState) {
+      for (const concept of this.CONCEPTS) {
+        if (!concept.learned && concept.onMenuRequested) {
+          concept.onMenuRequested.call(this, concept, menuState)
+        }
+      }
+    },
+    onZoom () {
+      for (const concept of this.CONCEPTS) {
+        if (!concept.learned && concept.onZoom) {
+          concept.onZoom.call(this, concept)
+        }
+      }
+    }
+  },
+  computed: {
+    filteredConcepts () {
+      if (this.isExpanded) {
+        if (this.filter) {
+          return this.CONCEPTS.filter(c => c.title.toLowerCase().includes(this.filter.toLowerCase()))
+        } else {
+          return this.CONCEPTS
+        }
+      } else {
+        return this.CONCEPTS.filter(c => !c.learned)
+      }
+    },
+    isUserInGame () {
+      return GameHelper.getUserPlayer(this.$store.state.game) != null
+    },
+    isTutorialGame () {
+      return GameHelper.isTutorialGame(this.$store.state.game)
+    },
+    progressStyle () {
+      return {
+        width: this.activeConcept.progress + "%",
+      };
+    },
+  }
+}
+</script>
+
+<style scoped>
+#conceptList {
+  position: absolute;
+  right: 0px;
+  width: 180px;
+  top: 45px;
+  overflow: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+#conceptList .concept-item:hover {
+  background-color: darkslategray;
+}
+
+#conceptList .concept-item.selected {
+  background-color: gray;
+}
+
+#conceptList .concept-item.learned {
+  background-color: black;
+}
+
+#conceptList .concept-item.selected.learned {
+  background-color: lightslategray;
+}
+
+#conceptDetail {
+  position: absolute;
+  right: 180px;
+  width: 290px;
+  top: 45px;
+  overflow: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+
+.highlight-enter-active {
+  animation: blinker 500ms linear;
+}
+
+@keyframes blinker {
+  0% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: yellow;
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+</style>

From ccbd9729e1474a39996dfba509d8bf57853c7aac Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Tue, 19 Mar 2024 20:24:37 +0100
Subject: [PATCH 02/13] track concepts used

---
 client/src/services/data/concepts.js          | 35 +++++++++++++++----
 client/src/services/learningHelper.js         | 19 ++++++++++
 .../components/carrier/CombatCalculator.vue   |  2 ++
 .../views/game/components/menu/HeaderBar.vue  |  6 ----
 .../star/BulkInfrastructureUpgrade.vue        |  3 ++
 .../game/components/tutor/AdaptiveTutor.vue   | 11 +++++-
 6 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 client/src/services/learningHelper.js

diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
index 494f96438..71e089ed2 100644
--- a/client/src/services/data/concepts.js
+++ b/client/src/services/data/concepts.js
@@ -1,38 +1,59 @@
 import GameHelper from '../gameHelper'
+import LearningHelper from '../learningHelper'
 import MENU_STATES from './menuStates'
 
 export default [
     {
+      id: LearningHelper.id.CAMERA_ZOOM,
       title: "Camera zoom",
       text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
-      onZoom: function (concept) {
-        this.markLearned(concept, 10)
+      priority: 10,
+      onZoom: function (self) {
+        this.markLearned(self, 10)
       }
     },
     {
+      id: LearningHelper.id.CARRIERS,
       title: "Carriers",
       text: "Carriers are used to transport Ships through hyperspace to reach other Stars. They can only be built at Stars and must hold a minimum of 1 Ship.\nCarriers are displayed as small ship icons with a circular coloured halo, much like stars. The number of ships that a carrier has will be displayed when zoomed in.\nClick on the carrier to view it in detail.",
-      onMenuRequested: function (concept, menuState) {
+      priority: 20,
+      onMenuRequested: function (self, menuState) {
         if (menuState.state === MENU_STATES.CARRIER_DETAIL) {
-            this.markLearned(concept, 40)
+          this.markLearned(self, 40)
         }
       }
     },
     {
+      id: LearningHelper.id.CAPITAL_STAR,
       title: "Capital Star",
       text: "The Capital Star is your home world. You can recognize as it has 9 points.\nSelect your Capital Star and view its details.",
-      onMenuRequested: function (concept, menuState) {
+      priority: 30,
+      onMenuRequested: function (self, menuState) {
         if (menuState.state === MENU_STATES.STAR_DETAIL) {
           const starId = menuState.args
           const star = GameHelper.getStarById(this.$store.state.game, starId)
           if (star.homeStar) {
-            this.markLearned(concept)
+            this.markLearned(self)
           }
         }
       }
     },
     {
+      id: LearningHelper.id.BULK_UPGRADE,
       title: "Bulk Upgrade",
-      text: "TODO."
+      text: "TODO.",
+      priority: 100,
+      onConceptUsed: function (self) {
+        this.markLearned(self)
+      }
+    },
+    {
+      id: LearningHelper.id.COMBAT_CALCULATOR,
+      title: "Combat Calculator",
+      text: "TODO.",
+      priority: 100,
+      onConceptUsed: function (self) {
+        this.markLearned(self)
+      }
     },
 ]
diff --git a/client/src/services/learningHelper.js b/client/src/services/learningHelper.js
new file mode 100644
index 000000000..021f79de7
--- /dev/null
+++ b/client/src/services/learningHelper.js
@@ -0,0 +1,19 @@
+import eventBus from "../eventBus"
+
+const CONCEPT_IDS = {
+  BULK_UPGRADE: 'bulk-upgrade',
+  CAMERA_ZOOM: 'camera-zoom',
+  CAPITAL_STAR: 'capital-star',
+  CARRIERS: 'carriers',
+  COMBAT_CALCULATOR: 'combat-calculator',
+}
+
+class LearningHelper {
+  id = CONCEPT_IDS
+
+  conceptUsed(conceptId) {
+    eventBus.$emit('onConceptUsed', conceptId)
+  }
+}
+
+export default new LearningHelper()
\ No newline at end of file
diff --git a/client/src/views/game/components/carrier/CombatCalculator.vue b/client/src/views/game/components/carrier/CombatCalculator.vue
index 348d2dd53..732ff1ac0 100644
--- a/client/src/views/game/components/carrier/CombatCalculator.vue
+++ b/client/src/views/game/components/carrier/CombatCalculator.vue
@@ -100,6 +100,7 @@ import LoadingSpinnerVue from '../../../components/LoadingSpinner'
 import MenuTitle from '../MenuTitle'
 import FormErrorList from '../../../components/FormErrorList'
 import GameHelper from '../../../../services/gameHelper'
+import LearningHelper from '../../../../services/learningHelper'
 import CarrierApiService from '../../../../services/api/carrier'
 import GameContainer from '../../../../game/container'
 
@@ -232,6 +233,7 @@ export default {
         console.error(err)
       }
 
+      LearningHelper.conceptUsed(LearningHelper.concept.COMBAT_CALCULATOR)
       this.isLoading = false
     }
   }
diff --git a/client/src/views/game/components/menu/HeaderBar.vue b/client/src/views/game/components/menu/HeaderBar.vue
index 52177dce7..c1adc84a4 100644
--- a/client/src/views/game/components/menu/HeaderBar.vue
+++ b/client/src/views/game/components/menu/HeaderBar.vue
@@ -42,12 +42,6 @@
               <span class="d-none d-md-inline-block ms-1">Tutorial</span>
             </button>
 
-            <!-- TODO toggle Adaptive Tutor on Mobile -->
-            <button class="btn btn-sm btn-warning">
-              <i class="fas fa-lightbulb"></i>
-              <span class="d-none d-md-inline-block ms-1">3</span>
-            </button>
-
             <button class="btn btn-sm btn-success ms-1" v-if="!userPlayer && gameIsJoinable" @click="setMenuState(MENU_STATES.WELCOME)">Join Now</button>
 
             <ready-status-button :smallButtons="true" v-if="!$isHistoricalMode() && userPlayer && isTurnBasedGame && canEndTurn && !userPlayer.defeated" class="ms-1" />
diff --git a/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue b/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
index d7389558f..8667353a9 100644
--- a/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
+++ b/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
@@ -119,6 +119,7 @@ import MenuTitle from '../MenuTitle'
 import FormErrorList from '../../../components/FormErrorList'
 import starService from '../../../../services/api/star'
 import GameHelper from '../../../../services/gameHelper'
+import LearningHelper from '../../../../services/learningHelper'
 import AudioService from '../../../../game/audio'
 import GameContainer from '../../../../game/container'
 import BulkInfrastructureUpgradeStarTableVue from './BulkInfrastructureUpgradeStarTable'
@@ -275,6 +276,7 @@ export default {
         this.errors = err.response.data.errors || []
       }
 
+      LearningHelper.conceptUsed(LearningHelper.concept.BULK_UPGRADE)
       this.hasChecked = false
       this.isUpgrading = false
     },
@@ -287,3 +289,4 @@ export default {
 
 <style scoped>
 </style>
+../../../../services/data/learningHelper
\ No newline at end of file
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index c07780cf1..05f850722 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-none d-lg-block" v-if="isUserInGame">
+  <div class="d-none d-lg-block" v-if="isUserInGame && !isTutorialGame">
     <div id="conceptList" class="header-bar-bg container pt-1">
       <div class="row">
         <div class="col pt-2">
@@ -71,10 +71,12 @@ export default {
   },
   mounted () {
     // TODO: These event names should be global constants
+    eventBus.$on('onConceptUsed', this.onConceptUsed)
     eventBus.$on('onMenuRequested', this.onMenuRequested)
     eventBus.$on('onZoom', this.onZoom)
   },
   destroyed () {
+    eventBus.$off('onConceptUsed', this.onConceptUsed)
     eventBus.$off('onMenuRequested', this.onMenuRequested)
     eventBus.$off('onZoom', this.onZoom)
   },
@@ -119,6 +121,13 @@ export default {
     onMarkLearned () {
       this.markLearned(this.activeConcept)
     },
+    onConceptUsed (conceptId) {
+      for (const concept of this.CONCEPTS) {
+        if (concept.id === conceptId && !concept.learned && concept.onConceptUsed) {
+          concept.onConceptUsed.call(this, concept)
+        }
+      }
+    },
     onMenuRequested (menuState) {
       for (const concept of this.CONCEPTS) {
         if (!concept.learned && concept.onMenuRequested) {

From 8ca5e3f74df2de3a1da36182f0023faf0cbef332 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Tue, 19 Mar 2024 20:31:03 +0100
Subject: [PATCH 03/13] use LearningHelper directly

---
 client/src/game/container.js                         |  8 ++++----
 client/src/services/data/concepts.js                 | 12 ++++++------
 client/src/services/learningHelper.js                |  2 +-
 .../views/game/components/tutor/AdaptiveTutor.vue    |  9 ---------
 4 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/client/src/game/container.js b/client/src/game/container.js
index d4b2e0f79..be6f1d192 100644
--- a/client/src/game/container.js
+++ b/client/src/game/container.js
@@ -1,8 +1,8 @@
 import * as PIXI from 'pixi.js-legacy'
 import { Viewport } from 'pixi-viewport'
 import Map from './map'
-import eventBus from '../eventBus'
 import gameHelper from '../services/gameHelper'
+import LearningHelper from '../services/learningHelper'
 import textureService from './texture'
 
 class GameContainer {
@@ -134,12 +134,12 @@ class GameContainer {
 
   zoomIn () {
     this.viewport.zoomPercent(0.5, true)
-    eventBus.$emit('onZoom')
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_ZOOM)
   }
 
   zoomOut () {
     this.viewport.zoomPercent(-0.3, true)
-    eventBus.$emit('onZoom')
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_ZOOM)
   }
 
   setupViewport (game) {
@@ -263,7 +263,7 @@ class GameContainer {
     let zoomPercent = this.getViewportZoomPercentage()
 
     this.map.refreshZoom(zoomPercent)
-    eventBus.$emit('onZoom')
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_ZOOM)
   }
 
   setMode (mode, args) {
diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
index 71e089ed2..2b78ffa7c 100644
--- a/client/src/services/data/concepts.js
+++ b/client/src/services/data/concepts.js
@@ -4,16 +4,16 @@ import MENU_STATES from './menuStates'
 
 export default [
     {
-      id: LearningHelper.id.CAMERA_ZOOM,
+      id: LearningHelper.concept.CAMERA_ZOOM,
       title: "Camera zoom",
       text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
       priority: 10,
-      onZoom: function (self) {
+      onConceptUsed: function (self) {
         this.markLearned(self, 10)
       }
     },
     {
-      id: LearningHelper.id.CARRIERS,
+      id: LearningHelper.concept.CARRIERS,
       title: "Carriers",
       text: "Carriers are used to transport Ships through hyperspace to reach other Stars. They can only be built at Stars and must hold a minimum of 1 Ship.\nCarriers are displayed as small ship icons with a circular coloured halo, much like stars. The number of ships that a carrier has will be displayed when zoomed in.\nClick on the carrier to view it in detail.",
       priority: 20,
@@ -24,7 +24,7 @@ export default [
       }
     },
     {
-      id: LearningHelper.id.CAPITAL_STAR,
+      id: LearningHelper.concept.CAPITAL_STAR,
       title: "Capital Star",
       text: "The Capital Star is your home world. You can recognize as it has 9 points.\nSelect your Capital Star and view its details.",
       priority: 30,
@@ -39,7 +39,7 @@ export default [
       }
     },
     {
-      id: LearningHelper.id.BULK_UPGRADE,
+      id: LearningHelper.concept.BULK_UPGRADE,
       title: "Bulk Upgrade",
       text: "TODO.",
       priority: 100,
@@ -48,7 +48,7 @@ export default [
       }
     },
     {
-      id: LearningHelper.id.COMBAT_CALCULATOR,
+      id: LearningHelper.concept.COMBAT_CALCULATOR,
       title: "Combat Calculator",
       text: "TODO.",
       priority: 100,
diff --git a/client/src/services/learningHelper.js b/client/src/services/learningHelper.js
index 021f79de7..60b2eeb68 100644
--- a/client/src/services/learningHelper.js
+++ b/client/src/services/learningHelper.js
@@ -9,7 +9,7 @@ const CONCEPT_IDS = {
 }
 
 class LearningHelper {
-  id = CONCEPT_IDS
+  concept = CONCEPT_IDS
 
   conceptUsed(conceptId) {
     eventBus.$emit('onConceptUsed', conceptId)
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index 05f850722..205cf044d 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -73,12 +73,10 @@ export default {
     // TODO: These event names should be global constants
     eventBus.$on('onConceptUsed', this.onConceptUsed)
     eventBus.$on('onMenuRequested', this.onMenuRequested)
-    eventBus.$on('onZoom', this.onZoom)
   },
   destroyed () {
     eventBus.$off('onConceptUsed', this.onConceptUsed)
     eventBus.$off('onMenuRequested', this.onMenuRequested)
-    eventBus.$off('onZoom', this.onZoom)
   },
   methods: {
     toggle () {
@@ -135,13 +133,6 @@ export default {
         }
       }
     },
-    onZoom () {
-      for (const concept of this.CONCEPTS) {
-        if (!concept.learned && concept.onZoom) {
-          concept.onZoom.call(this, concept)
-        }
-      }
-    }
   },
   computed: {
     filteredConcepts () {

From 4d770fc5b668ba1495c1673dc2896ac1e2497555 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Tue, 19 Mar 2024 22:54:40 +0100
Subject: [PATCH 04/13] lower distractions

---
 client/src/services/data/concepts.js          | 86 ++++++++++---------
 client/src/services/learningHelper.js         |  4 +-
 .../game/components/tutor/AdaptiveTutor.vue   | 84 +++++++++++++++++-
 3 files changed, 128 insertions(+), 46 deletions(-)

diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
index 2b78ffa7c..510eaa395 100644
--- a/client/src/services/data/concepts.js
+++ b/client/src/services/data/concepts.js
@@ -4,56 +4,60 @@ import MENU_STATES from './menuStates'
 
 export default [
     {
-      id: LearningHelper.concept.CAMERA_ZOOM,
-      title: "Camera zoom",
-      text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
-      priority: 10,
-      onConceptUsed: function (self) {
-        this.markLearned(self, 10)
-      }
+        id: LearningHelper.concept.CAMERA_ZOOM,
+        title: "Camera zoom",
+        text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
+        priority: 10,
+        onConceptUsed: function (self) {
+            this.markLearned(self, 20)
+        }
     },
     {
-      id: LearningHelper.concept.CARRIERS,
-      title: "Carriers",
-      text: "Carriers are used to transport Ships through hyperspace to reach other Stars. They can only be built at Stars and must hold a minimum of 1 Ship.\nCarriers are displayed as small ship icons with a circular coloured halo, much like stars. The number of ships that a carrier has will be displayed when zoomed in.\nClick on the carrier to view it in detail.",
-      priority: 20,
-      onMenuRequested: function (self, menuState) {
-        if (menuState.state === MENU_STATES.CARRIER_DETAIL) {
-          this.markLearned(self, 40)
+        id: LearningHelper.concept.CARRIERS,
+        title: "Carriers",
+        text: "Carriers are used to transport Ships through hyperspace to reach other Stars. They can only be built at Stars and must hold a minimum of 1 Ship.\nCarriers are displayed as small ship icons <i class='fas fa-rocket'></i> with a circular coloured halo, much like stars. The number of ships that a carrier has will be displayed when zoomed in.\nClick on the carrier to view it in detail.",
+        priority: 20,
+        pre: [LearningHelper.concept.CAMERA_ZOOM],
+        onMenuRequested: function (self, menuState) {
+            if (menuState.state === MENU_STATES.CARRIER_DETAIL) {
+                this.markLearned(self, 40)
+            }
         }
-      }
     },
     {
-      id: LearningHelper.concept.CAPITAL_STAR,
-      title: "Capital Star",
-      text: "The Capital Star is your home world. You can recognize as it has 9 points.\nSelect your Capital Star and view its details.",
-      priority: 30,
-      onMenuRequested: function (self, menuState) {
-        if (menuState.state === MENU_STATES.STAR_DETAIL) {
-          const starId = menuState.args
-          const star = GameHelper.getStarById(this.$store.state.game, starId)
-          if (star.homeStar) {
-            this.markLearned(self)
-          }
+        id: LearningHelper.concept.CAPITAL_STAR,
+        title: "Capital Star",
+        text: "The Capital Star is your home world. You can recognize as it has 9 points.\nSelect your Capital Star and view its details.",
+        priority: 20,
+        pre: [LearningHelper.concept.CAMERA_ZOOM],
+        onMenuRequested: function (self, menuState) {
+            if (menuState.state === MENU_STATES.STAR_DETAIL) {
+                const starId = menuState.args
+                const star = GameHelper.getStarById(this.$store.state.game, starId)
+                if (star.homeStar) {
+                    this.markLearned(self)
+                }
+            }
         }
-      }
     },
     {
-      id: LearningHelper.concept.BULK_UPGRADE,
-      title: "Bulk Upgrade",
-      text: "TODO.",
-      priority: 100,
-      onConceptUsed: function (self) {
-        this.markLearned(self)
-      }
+        id: LearningHelper.concept.BULK_UPGRADE,
+        title: "Bulk Upgrade",
+        text: "Improve your infrastructure by spending your budget on the cheapest expansions first.\nAccess Bulk Upgrade <i class='fas fa-money-bill'></i> from the menu / sidebar or using the <code>b</code> keyboard shortcut.",
+        priority: 100,
+        pre: [LearningHelper.concept.CARRIERS],
+        onConceptUsed: function (self) {
+            this.markLearned(self)
+        }
     },
     {
-      id: LearningHelper.concept.COMBAT_CALCULATOR,
-      title: "Combat Calculator",
-      text: "TODO.",
-      priority: 100,
-      onConceptUsed: function (self) {
-        this.markLearned(self)
-      }
+        id: LearningHelper.concept.COMBAT_CALCULATOR,
+        title: "Combat Calculator",
+        text: "Use this handy tool to predict the outcome of combat based on the weapon levels and numbers of the Attacker and Defender.\nAccess the Combat Calculator <i class='fas fa-calculator'></i> from the menu / sidebar, using the <code>c</code> keyboard shortcut or from the Carrier detail window.",
+        priority: 100,
+        pre: [LearningHelper.concept.CARRIERS],
+        onConceptUsed: function (self) {
+            this.markLearned(self)
+        }
     },
 ]
diff --git a/client/src/services/learningHelper.js b/client/src/services/learningHelper.js
index 60b2eeb68..71be786c7 100644
--- a/client/src/services/learningHelper.js
+++ b/client/src/services/learningHelper.js
@@ -1,4 +1,4 @@
-import eventBus from "../eventBus"
+import eventBus from '../eventBus'
 
 const CONCEPT_IDS = {
   BULK_UPGRADE: 'bulk-upgrade',
@@ -16,4 +16,4 @@ class LearningHelper {
   }
 }
 
-export default new LearningHelper()
\ No newline at end of file
+export default new LearningHelper()
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index 205cf044d..b4ed677bf 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -19,7 +19,7 @@
       </div>
       <div>
         <ul class="list-unstyled">
-          <li v-for="(concept, index) in filteredConcepts"  class="concept-item" :class="{'selected': concept === activeConcept && isSelectedConcept, 'learned': concept.learned}"
+          <li v-for="(concept, index) in filteredConcepts" role="button" class="concept-item" :class="{'selected': concept === activeConcept && isSelectedConcept, 'learned': concept.learned}"
             @click="selectConcept(concept);" @mouseenter="focusConcept(concept);" @mouseleave="unfocusConcept();">
             <p class="small lh-sm m-0 p-1">
               {{ concept.title }}<span class="text-muted" v-if="!concept.learned && concept.progress"> ({{ concept.progress }}%)</span>
@@ -51,32 +51,42 @@
 
 <script>
 import eventBus from '../../../../eventBus'
+import AudioService from '../../../../game/audio'
 import GameHelper from '../../../../services/gameHelper'
 import MenuTitle from '../MenuTitle'
+import MENU_STATES from '../../../../services/data/menuStates'
 import CONCEPTS from '../../../../services/data/concepts'
 
+const MAX_VISIBLE_CONCEPTS = 5
+const NEXT_CONCEPT_DELAY = 5000
+
 export default {
   components: {
     'menu-title': MenuTitle
   },
   data () {
     return {
-      CONCEPTS: CONCEPTS,
+      CONCEPTS: CONCEPTS.sort((a, b) => a.title.localeCompare(b.title)),
       activeConcept: null,
+      learnedConceptIds: [],
       filter: "",
       isExpanded: false,
       isFocusedConcept: false,
       isSelectedConcept: false,
+      interval: null,
+      lastDistraction: 0,
     }
   },
   mounted () {
     // TODO: These event names should be global constants
     eventBus.$on('onConceptUsed', this.onConceptUsed)
     eventBus.$on('onMenuRequested', this.onMenuRequested)
+    this.interval = setInterval(this.updateVisibleConcepts, 2000)
   },
   destroyed () {
     eventBus.$off('onConceptUsed', this.onConceptUsed)
     eventBus.$off('onMenuRequested', this.onMenuRequested)
+    clearInterval(this.interval)
   },
   methods: {
     toggle () {
@@ -101,20 +111,83 @@ export default {
         this.isFocusedConcept = false
       }
     },
+    updateVisibleConcepts () {
+      if (Date.now() - this.lastDistraction < NEXT_CONCEPT_DELAY)
+        return
+
+      if (this.visibleConcepts.length >= MAX_VISIBLE_CONCEPTS)
+        return
+
+      if (this.$store.state.menuState !== MENU_STATES.NONE)
+        return
+
+      if (this.isExpanded)
+        return
+
+      const concept = this.findNextConcept()
+      if (concept === null) {
+        return
+      }
+      this.$set(concept, 'visible', Date.now())
+      this.trackDistraction()
+      AudioService.click()
+    },
+    findNextConcept () {
+      let bestPriority = -1
+      let candidates = []
+      for (const c of this.CONCEPTS) {
+        if (this.isCandidate(c)) {
+          if (c.priority < bestPriority || bestPriority === -1) {
+            bestPriority = c.priority
+            candidates = [c]
+          } else if (c.priority === bestPriority) {
+            candidates.push(c)
+          }
+        }
+      }
+      if (candidates.length) {
+        return candidates[candidates.length * Math.random() | 0]
+      }
+      return null
+    },
+    isCandidate (concept) {
+      if (concept.learned)
+        return false
+      if (concept.visible)
+        return false
+      if (concept.pre) {
+        for (const id of concept.pre) {
+          if (!this.learnedConceptIds.includes(id))
+            return false
+        }
+      }
+      return true
+    },
     markLearned (concept, progress=null) {
       if (progress) {
         this.$set(concept, 'progress', Math.min((concept.progress || 0) + progress, 100))
       }
       if (!progress || concept.progress === 100) {
         this.$set(concept, 'learned', true)
+        if (concept.visible) {
+          AudioService.backspace()
+          this.trackDistraction()
+          this.$set(concept, 'visible', false)
+        }
+        this.$delete(concept, 'progress')
+        this.learnedConceptIds.push(concept.id)
       }
       if (this.isSelectedConcept && concept.learned) {
         this.onCloseDetail()
       }
     },
+    trackDistraction () {
+      this.lastDistraction = Date.now()
+    },
     onCloseDetail () {
       this.activeConcept = null
       this.isSelectedConcept = false
+      this.trackDistraction()
     },
     onMarkLearned () {
       this.markLearned(this.activeConcept)
@@ -123,6 +196,7 @@ export default {
       for (const concept of this.CONCEPTS) {
         if (concept.id === conceptId && !concept.learned && concept.onConceptUsed) {
           concept.onConceptUsed.call(this, concept)
+          this.trackDistraction()
         }
       }
     },
@@ -132,9 +206,13 @@ export default {
           concept.onMenuRequested.call(this, concept, menuState)
         }
       }
+      this.trackDistraction()
     },
   },
   computed: {
+    visibleConcepts () {
+      return this.CONCEPTS.filter(c => c.visible).sort(function (a, b) { return a.visible - b.visible })
+    },
     filteredConcepts () {
       if (this.isExpanded) {
         if (this.filter) {
@@ -143,7 +221,7 @@ export default {
           return this.CONCEPTS
         }
       } else {
-        return this.CONCEPTS.filter(c => !c.learned)
+        return this.visibleConcepts
       }
     },
     isUserInGame () {

From 3cabc5ba603b75952e6941e8a781902ee9f51c36 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Tue, 19 Mar 2024 23:22:23 +0100
Subject: [PATCH 05/13] detect camera pan

---
 client/src/game/container.js          | 5 +++++
 client/src/game/map.js                | 2 ++
 client/src/services/data/concepts.js  | 9 +++++++++
 client/src/services/learningHelper.js | 1 +
 4 files changed, 17 insertions(+)

diff --git a/client/src/game/container.js b/client/src/game/container.js
index be6f1d192..0416d8ad6 100644
--- a/client/src/game/container.js
+++ b/client/src/game/container.js
@@ -172,6 +172,7 @@ class GameContainer {
         maxHeight: (Math.abs(this.starFieldBottom) + Math.abs(this.starFieldTop))
       })
 
+    this.viewport.on('drag-end', this.onViewportDragged.bind(this))
     this.viewport.on('zoomed-end', this.onViewportZoomed.bind(this))
     this.viewport.on('pointerdown', this.map.onViewportPointerDown.bind(this.map))
   }
@@ -259,6 +260,10 @@ class GameContainer {
     this.map.onTick(deltaTime)
   }
 
+  onViewportDragged (e) {
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_PAN)
+  }
+
   onViewportZoomed (e) {
     let zoomPercent = this.getViewportZoomPercentage()
 
diff --git a/client/src/game/map.js b/client/src/game/map.js
index e841681cd..82e89f96b 100644
--- a/client/src/game/map.js
+++ b/client/src/game/map.js
@@ -8,6 +8,7 @@ import Territories from './territories'
 import PlayerNames from './playerNames'
 import EventEmitter from 'events'
 import gameHelper from '../services/gameHelper'
+import LearningHelper from '../services/learningHelper'
 import AnimationService from './animation'
 import PathManager from './PathManager'
 import OrbitalLocationLayer from './orbital'
@@ -605,6 +606,7 @@ class Map extends EventEmitter {
     }
 
     this.panToPlayer(game, player)
+    LearningHelper.conceptUsed(LearningHelper.concept.CAMERA_PAN)
   }
 
   panToStar (star) {
diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
index 510eaa395..11f7abbc0 100644
--- a/client/src/services/data/concepts.js
+++ b/client/src/services/data/concepts.js
@@ -3,6 +3,15 @@ import LearningHelper from '../learningHelper'
 import MENU_STATES from './menuStates'
 
 export default [
+    {
+        id: LearningHelper.concept.CAMERA_PAN,
+        title: "Camera pan",
+        text: "Move across the map by clicking and dragging with any MOUSE BUTTON.\nPress the <code>h</code> or <code>space</code> keyboard shortcut to return to your Home star.",
+        priority: 10,
+        onConceptUsed: function (self) {
+            this.markLearned(self, 20)
+        }
+    },
     {
         id: LearningHelper.concept.CAMERA_ZOOM,
         title: "Camera zoom",
diff --git a/client/src/services/learningHelper.js b/client/src/services/learningHelper.js
index 71be786c7..ec747042e 100644
--- a/client/src/services/learningHelper.js
+++ b/client/src/services/learningHelper.js
@@ -2,6 +2,7 @@ import eventBus from '../eventBus'
 
 const CONCEPT_IDS = {
   BULK_UPGRADE: 'bulk-upgrade',
+  CAMERA_PAN: 'camera-pan',
   CAMERA_ZOOM: 'camera-zoom',
   CAPITAL_STAR: 'capital-star',
   CARRIERS: 'carriers',

From f6f53428bc8bb81594b777317a74754104524e90 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Thu, 21 Mar 2024 14:42:35 +0100
Subject: [PATCH 06/13] relaxDesire, mark progress, reset knowledge

---
 client/src/services/data/concepts.js          | 14 ++-
 .../game/components/tutor/AdaptiveTutor.vue   | 88 ++++++++++++-------
 2 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/client/src/services/data/concepts.js b/client/src/services/data/concepts.js
index 11f7abbc0..ce86076fd 100644
--- a/client/src/services/data/concepts.js
+++ b/client/src/services/data/concepts.js
@@ -9,7 +9,7 @@ export default [
         text: "Move across the map by clicking and dragging with any MOUSE BUTTON.\nPress the <code>h</code> or <code>space</code> keyboard shortcut to return to your Home star.",
         priority: 10,
         onConceptUsed: function (self) {
-            this.markLearned(self, 20)
+            this.markProgress(self, 30)
         }
     },
     {
@@ -18,7 +18,7 @@ export default [
         text: "Zoom in and out with the MOUSE WHEEL or <code>+</code> and <code>-</code> keys.",
         priority: 10,
         onConceptUsed: function (self) {
-            this.markLearned(self, 20)
+            this.markProgress(self, 20)
         }
     },
     {
@@ -29,7 +29,7 @@ export default [
         pre: [LearningHelper.concept.CAMERA_ZOOM],
         onMenuRequested: function (self, menuState) {
             if (menuState.state === MENU_STATES.CARRIER_DETAIL) {
-                this.markLearned(self, 40)
+                this.markLearned(self)
             }
         }
     },
@@ -54,7 +54,10 @@ export default [
         title: "Bulk Upgrade",
         text: "Improve your infrastructure by spending your budget on the cheapest expansions first.\nAccess Bulk Upgrade <i class='fas fa-money-bill'></i> from the menu / sidebar or using the <code>b</code> keyboard shortcut.",
         priority: 100,
-        pre: [LearningHelper.concept.CARRIERS],
+        pre: [],
+        isAvailable: function (self) {
+            return this.isGameInProgress
+        },
         onConceptUsed: function (self) {
             this.markLearned(self)
         }
@@ -65,6 +68,9 @@ export default [
         text: "Use this handy tool to predict the outcome of combat based on the weapon levels and numbers of the Attacker and Defender.\nAccess the Combat Calculator <i class='fas fa-calculator'></i> from the menu / sidebar, using the <code>c</code> keyboard shortcut or from the Carrier detail window.",
         priority: 100,
         pre: [LearningHelper.concept.CARRIERS],
+        isAvailable: function (self) {
+            return this.isGameInProgress
+        },
         onConceptUsed: function (self) {
             this.markLearned(self)
         }
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index b4ed677bf..96fddc2fe 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -4,6 +4,7 @@
       <div class="row">
         <div class="col pt-2">
           <h6>Learning Helper</h6>
+          <code v-if="isDevelopment">DEBUG R={{ this.relaxDesire }}</code>
         </div>
         <div class="col-auto">
             <slot></slot>
@@ -15,6 +16,8 @@
         <input v-model="filter" class="form-control form-control-sm" placeholder="Filter..."/>
         <div class="input-group-append">
           <button @click="clearFilter" class="btn btn-outline-secondary btn-sm" type="button"><i class="fas fa-times"></i></button>
+          <button @click="resetKnowledge" class="btn btn-outline-danger btn-sm" type="button"><i class="fas fa-eraser"></i></button>
+
         </div>
       </div>
       <div>
@@ -54,11 +57,10 @@ import eventBus from '../../../../eventBus'
 import AudioService from '../../../../game/audio'
 import GameHelper from '../../../../services/gameHelper'
 import MenuTitle from '../MenuTitle'
-import MENU_STATES from '../../../../services/data/menuStates'
 import CONCEPTS from '../../../../services/data/concepts'
 
 const MAX_VISIBLE_CONCEPTS = 5
-const NEXT_CONCEPT_DELAY = 5000
+const DEFAULT_RELAX_DESIRE = 5
 
 export default {
   components: {
@@ -74,14 +76,18 @@ export default {
       isFocusedConcept: false,
       isSelectedConcept: false,
       interval: null,
-      lastDistraction: 0,
+      relaxDesire: 0,
+      isDevelopment: process.env.NODE_ENV == 'development'
     }
   },
   mounted () {
     // TODO: These event names should be global constants
     eventBus.$on('onConceptUsed', this.onConceptUsed)
     eventBus.$on('onMenuRequested', this.onMenuRequested)
-    this.interval = setInterval(this.updateVisibleConcepts, 2000)
+    if (this.isUserInGame && !this.isTutorialGame) {
+      this.interval = setInterval(this.updateVisibleConcepts, 1000)
+      this.clearVisible()
+    }
   },
   destroyed () {
     eventBus.$off('onConceptUsed', this.onConceptUsed)
@@ -91,13 +97,27 @@ export default {
   methods: {
     toggle () {
       this.isExpanded = !this.isExpanded
+      this.trackDistraction()
     },
     clearFilter () {
       this.filter = ""
     },
+    clearVisible () {
+      for (const c of this.CONCEPTS) {
+        this.$delete(c, 'visible')
+      }
+    },
+    resetKnowledge () {
+      for (const c of this.CONCEPTS) {
+        this.$set(c, 'learned', false)
+        this.$delete(c, 'progress')
+        this.learnedConceptIds = []
+      }
+    },
     selectConcept (concept) {
       this.activeConcept = concept
       this.isSelectedConcept = true
+      this.trackDistraction()
     },
     focusConcept (concept) {
       if (!this.isSelectedConcept) {
@@ -112,25 +132,23 @@ export default {
       }
     },
     updateVisibleConcepts () {
-      if (Date.now() - this.lastDistraction < NEXT_CONCEPT_DELAY)
-        return
-
       if (this.visibleConcepts.length >= MAX_VISIBLE_CONCEPTS)
         return
 
-      if (this.$store.state.menuState !== MENU_STATES.NONE)
-        return
-
       if (this.isExpanded)
         return
 
-      const concept = this.findNextConcept()
-      if (concept === null) {
-        return
+      this.relaxDesire = Math.max(this.relaxDesire - 1, 0)
+
+      if (this.relaxDesire <= 0) {
+        const concept = this.findNextConcept()
+        if (concept === null) {
+          return
+        }
+        this.$set(concept, 'visible', Date.now())
+        this.trackDistraction(DEFAULT_RELAX_DESIRE + this.visibleConcepts.length * DEFAULT_RELAX_DESIRE)
+        AudioService.click()
       }
-      this.$set(concept, 'visible', Date.now())
-      this.trackDistraction()
-      AudioService.click()
     },
     findNextConcept () {
       let bestPriority = -1
@@ -161,28 +179,31 @@ export default {
             return false
         }
       }
+      if (concept.isAvailable && !concept.isAvailable.call(this, concept))
+        return false
       return true
     },
-    markLearned (concept, progress=null) {
-      if (progress) {
-        this.$set(concept, 'progress', Math.min((concept.progress || 0) + progress, 100))
+    markLearned (concept) {
+      this.$set(concept, 'learned', true)
+      if (concept.visible) {
+        AudioService.backspace()
+        this.trackDistraction()
+        this.$set(concept, 'visible', false)
       }
-      if (!progress || concept.progress === 100) {
-        this.$set(concept, 'learned', true)
-        if (concept.visible) {
-          AudioService.backspace()
-          this.trackDistraction()
-          this.$set(concept, 'visible', false)
-        }
-        this.$delete(concept, 'progress')
-        this.learnedConceptIds.push(concept.id)
-      }
-      if (this.isSelectedConcept && concept.learned) {
+      this.$delete(concept, 'progress')
+      this.learnedConceptIds.push(concept.id)
+      if (this.isSelectedConcept) {
         this.onCloseDetail()
       }
     },
-    trackDistraction () {
-      this.lastDistraction = Date.now()
+    markProgress(concept, progress=10) {
+      this.$set(concept, 'progress', Math.min((concept.progress || 0) + progress, 100))
+      if (concept.progress >= 100) {
+        this.markLearned(concept)
+      }
+    },
+    trackDistraction (weight = DEFAULT_RELAX_DESIRE) {
+      this.relaxDesire = Math.max(this.relaxDesire, weight)
     },
     onCloseDetail () {
       this.activeConcept = null
@@ -224,6 +245,9 @@ export default {
         return this.visibleConcepts
       }
     },
+    isGameInProgress () {
+      return GameHelper.isGameInProgress(this.$store.state.game)
+    },
     isUserInGame () {
       return GameHelper.getUserPlayer(this.$store.state.game) != null
     },

From 7aea2424f6e41f01f264d3d3650e82bb0fc89b91 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Thu, 21 Mar 2024 16:00:44 +0100
Subject: [PATCH 07/13] use localStorage

---
 client/src/store.js                              | 12 +++++++++++-
 .../game/components/tutor/AdaptiveTutor.vue      | 16 ++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/client/src/store.js b/client/src/store.js
index 9fa671708..2f73fdbdb 100644
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -24,7 +24,8 @@ export default new Vuex.Store({
     starSpecialists: null,
     carrierSpecialists: null,
     settings: null,
-    confirmationDialog: {}
+    confirmationDialog: {},
+    learnedConcepts: null
   },
   mutations: {
     // Menu
@@ -143,6 +144,15 @@ export default new Vuex.Store({
       state.confirmationDialog = settings
     },
 
+    setLearnedConcept (state, conceptId) {
+      if (!state.learnedConcepts)
+        state.learnedConcepts = {}
+      state.learnedConcepts[conceptId] = true
+    },
+    clearLearnedConcepts (state) {
+      state.learnedConcepts = null
+    },
+
     setUnreadMessages (state, count) {
       state.unreadMessages = count
     },
diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index 96fddc2fe..43fee82a2 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -70,7 +70,6 @@ export default {
     return {
       CONCEPTS: CONCEPTS.sort((a, b) => a.title.localeCompare(b.title)),
       activeConcept: null,
-      learnedConceptIds: [],
       filter: "",
       isExpanded: false,
       isFocusedConcept: false,
@@ -88,6 +87,7 @@ export default {
       this.interval = setInterval(this.updateVisibleConcepts, 1000)
       this.clearVisible()
     }
+    this.loadKnowledge()
   },
   destroyed () {
     eventBus.$off('onConceptUsed', this.onConceptUsed)
@@ -107,12 +107,17 @@ export default {
         this.$delete(c, 'visible')
       }
     },
+    loadKnowledge () {
+      for (const c of this.CONCEPTS) {
+        this.$set(c, 'learned', c.id in this.learnedConcepts)
+      }
+    },
     resetKnowledge () {
       for (const c of this.CONCEPTS) {
         this.$set(c, 'learned', false)
         this.$delete(c, 'progress')
-        this.learnedConceptIds = []
       }
+      this.$store.commit('clearLearnedConcepts')
     },
     selectConcept (concept) {
       this.activeConcept = concept
@@ -175,7 +180,7 @@ export default {
         return false
       if (concept.pre) {
         for (const id of concept.pre) {
-          if (!this.learnedConceptIds.includes(id))
+          if (!(id in this.learnedConcepts))
             return false
         }
       }
@@ -185,13 +190,13 @@ export default {
     },
     markLearned (concept) {
       this.$set(concept, 'learned', true)
+      this.$store.commit('setLearnedConcept', concept.id)
       if (concept.visible) {
         AudioService.backspace()
         this.trackDistraction()
         this.$set(concept, 'visible', false)
       }
       this.$delete(concept, 'progress')
-      this.learnedConceptIds.push(concept.id)
       if (this.isSelectedConcept) {
         this.onCloseDetail()
       }
@@ -245,6 +250,9 @@ export default {
         return this.visibleConcepts
       }
     },
+    learnedConcepts () {
+      return this.$store.state.learnedConcepts || {}
+    },
     isGameInProgress () {
       return GameHelper.isGameInProgress(this.$store.state.game)
     },

From 08a00a72a09ac2dd997754f8671ab5fa057b4fdf Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Fri, 22 Mar 2024 13:57:00 +0100
Subject: [PATCH 08/13] remove stray path

---
 .../src/views/game/components/star/BulkInfrastructureUpgrade.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue b/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
index 8667353a9..c8ec225d1 100644
--- a/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
+++ b/client/src/views/game/components/star/BulkInfrastructureUpgrade.vue
@@ -289,4 +289,3 @@ export default {
 
 <style scoped>
 </style>
-../../../../services/data/learningHelper
\ No newline at end of file

From e6951b6f5cb5beeb7022667ed6ceccb49c34fd82 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:21:56 +0100
Subject: [PATCH 09/13] split tutor components

---
 .../game/components/tutor/AdaptiveTutor.vue   | 184 +++++-------------
 .../game/components/tutor/ConceptDetail.vue   |  52 +++++
 .../game/components/tutor/ConceptList.vue     |  81 ++++++++
 .../game/components/tutor/ConceptListItem.vue |  66 +++++++
 4 files changed, 252 insertions(+), 131 deletions(-)
 create mode 100644 client/src/views/game/components/tutor/ConceptDetail.vue
 create mode 100644 client/src/views/game/components/tutor/ConceptList.vue
 create mode 100644 client/src/views/game/components/tutor/ConceptListItem.vue

diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index 43fee82a2..a06257095 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -1,54 +1,11 @@
 <template>
   <div class="d-none d-lg-block" v-if="isUserInGame && !isTutorialGame">
-    <div id="conceptList" class="header-bar-bg container pt-1">
-      <div class="row">
-        <div class="col pt-2">
-          <h6>Learning Helper</h6>
-          <code v-if="isDevelopment">DEBUG R={{ this.relaxDesire }}</code>
-        </div>
-        <div class="col-auto">
-            <slot></slot>
-            <button v-if="isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i class="fas fa-minus"></i></button>
-            <button v-if="!isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i class="fas fa-plus"></i></button>
-        </div>
-      </div>
-      <div v-if="isExpanded" class="input-group">
-        <input v-model="filter" class="form-control form-control-sm" placeholder="Filter..."/>
-        <div class="input-group-append">
-          <button @click="clearFilter" class="btn btn-outline-secondary btn-sm" type="button"><i class="fas fa-times"></i></button>
-          <button @click="resetKnowledge" class="btn btn-outline-danger btn-sm" type="button"><i class="fas fa-eraser"></i></button>
-
-        </div>
-      </div>
-      <div>
-        <ul class="list-unstyled">
-          <li v-for="(concept, index) in filteredConcepts" role="button" class="concept-item" :class="{'selected': concept === activeConcept && isSelectedConcept, 'learned': concept.learned}"
-            @click="selectConcept(concept);" @mouseenter="focusConcept(concept);" @mouseleave="unfocusConcept();">
-            <p class="small lh-sm m-0 p-1">
-              {{ concept.title }}<span class="text-muted" v-if="!concept.learned && concept.progress"> ({{ concept.progress }}%)</span>
-            </p>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div id="conceptDetail" v-if="activeConcept" class="header-bar-bg container">
-      <menu-title v-if="isSelectedConcept" :title="activeConcept.title" @onCloseRequested="onCloseDetail"/>
-      <h4 v-if="!isSelectedConcept" class="pt-2">{{ activeConcept.title }}</h4>
-      <div>
-        <p v-for="para in activeConcept.text.split('\n')" v-html="para">
-        </p>
-        <p v-if="!activeConcept.learned">
-          <div class="progress" v-if="activeConcept.progress">
-            <div class="progress-bar" role="progressbar" :style="progressStyle" :aria-valuenow="activeConcept.progress" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </p>
-        <div v-if="isSelectedConcept">
-          <p class="text-center"><button class="btn btn-sm btn-success" v-if="!activeConcept.learned" @click="onMarkLearned">Mark as Learned</button></p>
-          <p v-if="activeConcept.learned" class="text-center text-muted">Already Learned</p>
-        </div>
-      </div>
-    </div>
+    <concept-list id="conceptList" :activeConcept="activeConcept" :filter="filter" :filteredConcepts="filteredConcepts"
+      :isExpanded="isExpanded" :isSelectedConcept="isSelectedConcept" :relaxDesire="relaxDesire"
+      @selectConcept="selectConcept" @focusConcept="focusConcept" @unfocusConcept="unfocusConcept"
+      @clearFilter="clearFilter" @updateFilter="updateFilter" @resetKnowledge="resetKnowledge" @toggle="toggle" />
+    <concept-detail id="conceptDetail" v-if="activeConcept" :concept="activeConcept"
+      :isSelectedConcept="isSelectedConcept" @onMarkLearned="onMarkLearned" @onCloseRequested="onCloseDetail" />
   </div>
 </template>
 
@@ -56,30 +13,30 @@
 import eventBus from '../../../../eventBus'
 import AudioService from '../../../../game/audio'
 import GameHelper from '../../../../services/gameHelper'
-import MenuTitle from '../MenuTitle'
 import CONCEPTS from '../../../../services/data/concepts'
+import ConceptDetail from './ConceptDetail.vue'
+import ConceptList from './ConceptList.vue'
 
 const MAX_VISIBLE_CONCEPTS = 5
 const DEFAULT_RELAX_DESIRE = 5
 
 export default {
   components: {
-    'menu-title': MenuTitle
+    'concept-detail': ConceptDetail,
+    'concept-list': ConceptList,
   },
-  data () {
+  data() {
     return {
       CONCEPTS: CONCEPTS.sort((a, b) => a.title.localeCompare(b.title)),
       activeConcept: null,
       filter: "",
       isExpanded: false,
-      isFocusedConcept: false,
       isSelectedConcept: false,
       interval: null,
       relaxDesire: 0,
-      isDevelopment: process.env.NODE_ENV == 'development'
     }
   },
-  mounted () {
+  mounted() {
     // TODO: These event names should be global constants
     eventBus.$on('onConceptUsed', this.onConceptUsed)
     eventBus.$on('onMenuRequested', this.onMenuRequested)
@@ -89,54 +46,57 @@ export default {
     }
     this.loadKnowledge()
   },
-  destroyed () {
+  destroyed() {
     eventBus.$off('onConceptUsed', this.onConceptUsed)
     eventBus.$off('onMenuRequested', this.onMenuRequested)
     clearInterval(this.interval)
   },
   methods: {
-    toggle () {
+    toggle() {
       this.isExpanded = !this.isExpanded
       this.trackDistraction()
     },
-    clearFilter () {
+    clearFilter() {
       this.filter = ""
     },
-    clearVisible () {
+    updateFilter(value) {
+      this.filter = value
+    },
+    clearVisible() {
       for (const c of this.CONCEPTS) {
         this.$delete(c, 'visible')
       }
     },
-    loadKnowledge () {
+    loadKnowledge() {
       for (const c of this.CONCEPTS) {
         this.$set(c, 'learned', c.id in this.learnedConcepts)
       }
     },
-    resetKnowledge () {
-      for (const c of this.CONCEPTS) {
-        this.$set(c, 'learned', false)
-        this.$delete(c, 'progress')
+    async resetKnowledge() {
+      if (await this.$confirm('Reset Learned Concepts', 'Are you sure you want to reset all learned concepts?')) {
+        for (const c of this.CONCEPTS) {
+          this.$set(c, 'learned', false)
+          this.$delete(c, 'progress')
+        }
+        this.$store.commit('clearLearnedConcepts')
       }
-      this.$store.commit('clearLearnedConcepts')
     },
-    selectConcept (concept) {
+    selectConcept(concept) {
       this.activeConcept = concept
       this.isSelectedConcept = true
       this.trackDistraction()
     },
-    focusConcept (concept) {
+    focusConcept(concept) {
       if (!this.isSelectedConcept) {
         this.activeConcept = concept
-        this.isFocusedConcept = true
       }
     },
-    unfocusConcept () {
+    unfocusConcept() {
       if (!this.isSelectedConcept) {
         this.activeConcept = null
-        this.isFocusedConcept = false
       }
     },
-    updateVisibleConcepts () {
+    updateVisibleConcepts() {
       if (this.visibleConcepts.length >= MAX_VISIBLE_CONCEPTS)
         return
 
@@ -155,7 +115,7 @@ export default {
         AudioService.click()
       }
     },
-    findNextConcept () {
+    findNextConcept() {
       let bestPriority = -1
       let candidates = []
       for (const c of this.CONCEPTS) {
@@ -173,7 +133,7 @@ export default {
       }
       return null
     },
-    isCandidate (concept) {
+    isCandidate(concept) {
       if (concept.learned)
         return false
       if (concept.visible)
@@ -188,7 +148,7 @@ export default {
         return false
       return true
     },
-    markLearned (concept) {
+    markLearned(concept) {
       this.$set(concept, 'learned', true)
       this.$store.commit('setLearnedConcept', concept.id)
       if (concept.visible) {
@@ -201,24 +161,24 @@ export default {
         this.onCloseDetail()
       }
     },
-    markProgress(concept, progress=10) {
+    markProgress(concept, progress = 10) {
       this.$set(concept, 'progress', Math.min((concept.progress || 0) + progress, 100))
       if (concept.progress >= 100) {
         this.markLearned(concept)
       }
     },
-    trackDistraction (weight = DEFAULT_RELAX_DESIRE) {
+    trackDistraction(weight = DEFAULT_RELAX_DESIRE) {
       this.relaxDesire = Math.max(this.relaxDesire, weight)
     },
-    onCloseDetail () {
+    onCloseDetail() {
       this.activeConcept = null
       this.isSelectedConcept = false
       this.trackDistraction()
     },
-    onMarkLearned () {
-      this.markLearned(this.activeConcept)
+    onMarkLearned(concept) {
+      this.markLearned(concept)
     },
-    onConceptUsed (conceptId) {
+    onConceptUsed(conceptId) {
       for (const concept of this.CONCEPTS) {
         if (concept.id === conceptId && !concept.learned && concept.onConceptUsed) {
           concept.onConceptUsed.call(this, concept)
@@ -226,7 +186,7 @@ export default {
         }
       }
     },
-    onMenuRequested (menuState) {
+    onMenuRequested(menuState) {
       for (const concept of this.CONCEPTS) {
         if (!concept.learned && concept.onMenuRequested) {
           concept.onMenuRequested.call(this, concept, menuState)
@@ -236,10 +196,10 @@ export default {
     },
   },
   computed: {
-    visibleConcepts () {
+    visibleConcepts() {
       return this.CONCEPTS.filter(c => c.visible).sort(function (a, b) { return a.visible - b.visible })
     },
-    filteredConcepts () {
+    filteredConcepts() {
       if (this.isExpanded) {
         if (this.filter) {
           return this.CONCEPTS.filter(c => c.title.toLowerCase().includes(this.filter.toLowerCase()))
@@ -250,78 +210,40 @@ export default {
         return this.visibleConcepts
       }
     },
-    learnedConcepts () {
+    learnedConcepts() {
       return this.$store.state.learnedConcepts || {}
     },
-    isGameInProgress () {
+    isGameInProgress() {
       return GameHelper.isGameInProgress(this.$store.state.game)
     },
-    isUserInGame () {
+    isUserInGame() {
       return GameHelper.getUserPlayer(this.$store.state.game) != null
     },
-    isTutorialGame () {
+    isTutorialGame() {
       return GameHelper.isTutorialGame(this.$store.state.game)
     },
-    progressStyle () {
-      return {
-        width: this.activeConcept.progress + "%",
-      };
-    },
   }
 }
 </script>
 
 <style scoped>
-#conceptList {
+#conceptDetail {
   position: absolute;
-  right: 0px;
-  width: 180px;
+  right: 180px;
+  width: 290px;
   top: 45px;
   overflow: auto;
   overflow-x: hidden;
   scrollbar-width: none;
 }
 
-#conceptList .concept-item:hover {
-  background-color: darkslategray;
-}
-
-#conceptList .concept-item.selected {
-  background-color: gray;
-}
-
-#conceptList .concept-item.learned {
-  background-color: black;
-}
-
-#conceptList .concept-item.selected.learned {
-  background-color: lightslategray;
-}
-
-#conceptDetail {
+#conceptList {
   position: absolute;
-  right: 180px;
-  width: 290px;
+  right: 0px;
+  width: 180px;
   top: 45px;
   overflow: auto;
   overflow-x: hidden;
   scrollbar-width: none;
 }
-
-.highlight-enter-active {
-  animation: blinker 500ms linear;
-}
-
-@keyframes blinker {
-  0% {
-    background-color: transparent;
-  }
-  50% {
-    background-color: yellow;
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-
 </style>
diff --git a/client/src/views/game/components/tutor/ConceptDetail.vue b/client/src/views/game/components/tutor/ConceptDetail.vue
new file mode 100644
index 000000000..238b6437b
--- /dev/null
+++ b/client/src/views/game/components/tutor/ConceptDetail.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="header-bar-bg container">
+    <menu-title v-if="isSelectedConcept" :title="concept.title" @onCloseRequested="onCloseRequested" />
+    <h4 v-if="!isSelectedConcept" class="pt-2">{{ concept.title }}</h4>
+    <div>
+      <p v-for="para in concept.text.split('\n')" v-html="para">
+      </p>
+      <p v-if="!concept.learned">
+      <div class="progress" v-if="concept.progress">
+        <div class="progress-bar" role="progressbar" :style="progressStyle" :aria-valuenow="concept.progress"
+          aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      </p>
+      <div v-if="isSelectedConcept">
+        <p class="text-center"><button class="btn btn-sm btn-success" v-if="!concept.learned"
+            @click="onMarkLearned(concept)">Mark as Learned</button></p>
+        <p v-if="concept.learned" class="text-center text-muted">Already Learned</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuTitle from '../MenuTitle'
+
+export default {
+  components: {
+    'menu-title': MenuTitle,
+  },
+  props: {
+    concept: Object,
+    isSelectedConcept: Boolean
+  },
+  methods: {
+    onCloseRequested() {
+      this.$emit('onCloseRequested')
+    },
+    onMarkLearned(concept) {
+      this.$emit('onMarkLearned', concept)
+    },
+  },
+  computed: {
+    progressStyle() {
+      return {
+        width: this.concept.progress + "%",
+      };
+    },
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/client/src/views/game/components/tutor/ConceptList.vue b/client/src/views/game/components/tutor/ConceptList.vue
new file mode 100644
index 000000000..2f90f1b58
--- /dev/null
+++ b/client/src/views/game/components/tutor/ConceptList.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="header-bar-bg container pt-1">
+    <div class="row">
+      <div class="col pt-2">
+        <h6>Learning Helper</h6>
+        <code v-if="isDevelopment">DEBUG R={{ relaxDesire }}</code>
+      </div>
+      <div class="col-auto">
+        <slot></slot>
+        <button v-if="isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i
+            class="fas fa-minus"></i></button>
+        <button v-if="!isExpanded" @click="toggle" class="btn btn-outline-warning btn-sm"><i
+            class="fas fa-plus"></i></button>
+      </div>
+    </div>
+    <div v-if="isExpanded" class="input-group">
+      <input :value="filter" @input="updateFilter" class="form-control form-control-sm" placeholder="Filter..." />
+      <div class="input-group-append">
+        <button @click="clearFilter" class="btn btn-outline-secondary btn-sm" type="button"><i
+            class="fas fa-times"></i></button>
+        <button @click="resetKnowledge" class="btn btn-outline-danger btn-sm" type="button"><i
+            class="fas fa-eraser"></i></button>
+      </div>
+    </div>
+    <div>
+      <ul class="list-unstyled">
+        <concept-list-item v-for="concept in filteredConcepts" :concept="concept"
+          :isSelected="concept === activeConcept && isSelectedConcept" @selectConcept="selectConcept"
+          @focusConcept="focusConcept" @unfocusConcept="unfocusConcept" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ConceptListItem from './ConceptListItem.vue'
+
+export default {
+  components: {
+    'concept-list-item': ConceptListItem,
+  },
+  data() {
+    return {
+      isDevelopment: process.env.NODE_ENV == 'development'
+    }
+  },
+  props: {
+    activeConcept: Object,
+    filter: String,
+    filteredConcepts: Array,
+    isExpanded: Boolean,
+    isSelectedConcept: Boolean,
+    relaxDesire: Number
+  },
+  methods: {
+    selectConcept(concept) {
+      this.$emit('selectConcept', concept)
+    },
+    focusConcept(concept) {
+      this.$emit('focusConcept', concept)
+    },
+    unfocusConcept() {
+      this.$emit('unfocusConcept')
+    },
+    clearFilter() {
+      this.$emit('clearFilter')
+    },
+    updateFilter(e) {
+      this.$emit('updateFilter', e.target.value)
+    },
+    resetKnowledge() {
+      this.$emit('resetKnowledge')
+    },
+    toggle() {
+      this.$emit('toggle')
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/client/src/views/game/components/tutor/ConceptListItem.vue b/client/src/views/game/components/tutor/ConceptListItem.vue
new file mode 100644
index 000000000..771acea23
--- /dev/null
+++ b/client/src/views/game/components/tutor/ConceptListItem.vue
@@ -0,0 +1,66 @@
+<template>
+  <li role="button" class="concept-item" :class="{ 'selected': isSelected, 'learned': concept.learned }"
+    @click="selectConcept(concept);" @mouseenter="focusConcept(concept);" @mouseleave="unfocusConcept();">
+    <p class="small lh-sm m-0 p-1">
+      {{ concept.title }}<span class="text-muted" v-if="!concept.learned && concept.progress"> ({{ concept.progress
+        }}%)</span>
+    </p>
+  </li>
+</template>
+
+<script>
+
+export default {
+  props: {
+    concept: Object,
+    isSelected: Boolean,
+  },
+  methods: {
+    selectConcept(concept) {
+      this.$emit('selectConcept', concept)
+    },
+    focusConcept(concept) {
+      this.$emit('focusConcept', concept)
+    },
+    unfocusConcept() {
+      this.$emit('unfocusConcept')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.concept-item.selected {
+  background-color: gray;
+}
+
+.concept-item.learned {
+  background-color: black;
+}
+
+.concept-item.selected.learned {
+  background-color: lightslategray;
+}
+
+.concept-item:hover {
+  background-color: darkslategray;
+}
+
+.highlight-enter-active {
+  animation: blinker 500ms linear;
+}
+
+@keyframes blinker {
+  0% {
+    background-color: transparent;
+  }
+
+  50% {
+    background-color: yellow;
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+</style>

From a84e61e1570ce3957aa3c4d6cf127ca6d2ba63e7 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:58:55 +0100
Subject: [PATCH 10/13] blink recently visible concepts

---
 client/src/views/game/components/tutor/AdaptiveTutor.vue | 2 ++
 .../src/views/game/components/tutor/ConceptListItem.vue  | 9 +++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index a06257095..ef1e870a9 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -77,8 +77,10 @@ export default {
         for (const c of this.CONCEPTS) {
           this.$set(c, 'learned', false)
           this.$delete(c, 'progress')
+          this.$delete(c, 'visible')
         }
         this.$store.commit('clearLearnedConcepts')
+        this.relaxDesire = DEFAULT_RELAX_DESIRE
       }
     },
     selectConcept(concept) {
diff --git a/client/src/views/game/components/tutor/ConceptListItem.vue b/client/src/views/game/components/tutor/ConceptListItem.vue
index 771acea23..d92f88a44 100644
--- a/client/src/views/game/components/tutor/ConceptListItem.vue
+++ b/client/src/views/game/components/tutor/ConceptListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <li role="button" class="concept-item" :class="{ 'selected': isSelected, 'learned': concept.learned }"
+  <li role="button" class="concept-item" :class="{ 'selected': isSelected, 'learned': concept.learned, 'blink': isNew }"
     @click="selectConcept(concept);" @mouseenter="focusConcept(concept);" @mouseleave="unfocusConcept();">
     <p class="small lh-sm m-0 p-1">
       {{ concept.title }}<span class="text-muted" v-if="!concept.learned && concept.progress"> ({{ concept.progress
@@ -26,6 +26,11 @@ export default {
       this.$emit('unfocusConcept')
     },
   },
+  computed: {
+    isNew() {
+      return this.concept.visible && ((Date.now() - this.concept.visible) < 1000)
+    }
+  }
 }
 </script>
 
@@ -46,7 +51,7 @@ export default {
   background-color: darkslategray;
 }
 
-.highlight-enter-active {
+.concept-item.blink {
   animation: blinker 500ms linear;
 }
 

From b1bcd08b4a2e2fbf0ef66f21e6c7c81085c65c75 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Fri, 22 Mar 2024 18:39:46 +0100
Subject: [PATCH 11/13] make it responsive

---
 .../game/components/tutor/AdaptiveTutor.vue   | 35 ++++++++++++++++++-
 .../game/components/tutor/ConceptListItem.vue |  2 +-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index ef1e870a9..162d592fa 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-none d-lg-block" v-if="isUserInGame && !isTutorialGame">
+  <div v-if="isVisible">
     <concept-list id="conceptList" :activeConcept="activeConcept" :filter="filter" :filteredConcepts="filteredConcepts"
       :isExpanded="isExpanded" :isSelectedConcept="isSelectedConcept" :relaxDesire="relaxDesire"
       @selectConcept="selectConcept" @focusConcept="focusConcept" @unfocusConcept="unfocusConcept"
@@ -13,12 +13,14 @@
 import eventBus from '../../../../eventBus'
 import AudioService from '../../../../game/audio'
 import GameHelper from '../../../../services/gameHelper'
+import MENU_STATES from '../../../../services/data/menuStates'
 import CONCEPTS from '../../../../services/data/concepts'
 import ConceptDetail from './ConceptDetail.vue'
 import ConceptList from './ConceptList.vue'
 
 const MAX_VISIBLE_CONCEPTS = 5
 const DEFAULT_RELAX_DESIRE = 5
+const OVERLAY_WIDTH = 992
 
 export default {
   components: {
@@ -31,16 +33,20 @@ export default {
       activeConcept: null,
       filter: "",
       isExpanded: false,
+      isVisible: false,
       isSelectedConcept: false,
       interval: null,
       relaxDesire: 0,
     }
   },
   mounted() {
+    window.addEventListener('resize', this.updateVisible)
+
     // TODO: These event names should be global constants
     eventBus.$on('onConceptUsed', this.onConceptUsed)
     eventBus.$on('onMenuRequested', this.onMenuRequested)
     if (this.isUserInGame && !this.isTutorialGame) {
+      this.updateVisible()
       this.interval = setInterval(this.updateVisibleConcepts, 1000)
       this.clearVisible()
     }
@@ -49,6 +55,7 @@ export default {
   destroyed() {
     eventBus.$off('onConceptUsed', this.onConceptUsed)
     eventBus.$off('onMenuRequested', this.onMenuRequested)
+    window.removeEventListener('resize', this.updateVisible)
     clearInterval(this.interval)
   },
   methods: {
@@ -189,6 +196,7 @@ export default {
       }
     },
     onMenuRequested(menuState) {
+      this.updateVisible()
       for (const concept of this.CONCEPTS) {
         if (!concept.learned && concept.onMenuRequested) {
           concept.onMenuRequested.call(this, concept, menuState)
@@ -196,6 +204,13 @@ export default {
       }
       this.trackDistraction()
     },
+    updateVisible () {
+      this.isVisible = this.isUserInGame && !this.isTutorialGame && (this.isOverlay() || this.$store.state.menuState == MENU_STATES.NONE)
+    },
+    isOverlay (e) {
+      console.log("width", window.innerWidth)
+      return window.innerWidth >= OVERLAY_WIDTH
+    },
   },
   computed: {
     visibleConcepts() {
@@ -248,4 +263,22 @@ export default {
   overflow-x: hidden;
   scrollbar-width: none;
 }
+
+@media screen and (max-width: 992px) {
+  #conceptDetail {
+    top: 130px;
+  }
+}
+
+@media screen and (max-width: 654px) {
+  #conceptDetail, #conceptList {
+    top: 130px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  #conceptDetail, #conceptList {
+    top: 100px;
+  }
+}
 </style>
diff --git a/client/src/views/game/components/tutor/ConceptListItem.vue b/client/src/views/game/components/tutor/ConceptListItem.vue
index d92f88a44..7abf883ac 100644
--- a/client/src/views/game/components/tutor/ConceptListItem.vue
+++ b/client/src/views/game/components/tutor/ConceptListItem.vue
@@ -61,7 +61,7 @@ export default {
   }
 
   50% {
-    background-color: yellow;
+    background-color: #F2A33C;
   }
 
   100% {

From ede83543fb02ee908d9bd37ddc2cf392ff402178 Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Fri, 22 Mar 2024 18:50:57 +0100
Subject: [PATCH 12/13] remove debug log

---
 client/src/views/game/components/tutor/AdaptiveTutor.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/views/game/components/tutor/AdaptiveTutor.vue b/client/src/views/game/components/tutor/AdaptiveTutor.vue
index 162d592fa..d57d585f1 100644
--- a/client/src/views/game/components/tutor/AdaptiveTutor.vue
+++ b/client/src/views/game/components/tutor/AdaptiveTutor.vue
@@ -208,7 +208,6 @@ export default {
       this.isVisible = this.isUserInGame && !this.isTutorialGame && (this.isOverlay() || this.$store.state.menuState == MENU_STATES.NONE)
     },
     isOverlay (e) {
-      console.log("width", window.innerWidth)
       return window.innerWidth >= OVERLAY_WIDTH
     },
   },

From cd7daceebf4d9bdb7781516cef43ba27ce7c48bc Mon Sep 17 00:00:00 2001
From: Mischa Untaga <99098079+MischaU8@users.noreply.github.com>
Date: Fri, 22 Mar 2024 19:41:43 +0100
Subject: [PATCH 13/13] explicit key for v-for

---
 client/src/views/game/components/tutor/ConceptList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/views/game/components/tutor/ConceptList.vue b/client/src/views/game/components/tutor/ConceptList.vue
index 2f90f1b58..3d12749b1 100644
--- a/client/src/views/game/components/tutor/ConceptList.vue
+++ b/client/src/views/game/components/tutor/ConceptList.vue
@@ -24,7 +24,7 @@
     </div>
     <div>
       <ul class="list-unstyled">
-        <concept-list-item v-for="concept in filteredConcepts" :concept="concept"
+        <concept-list-item v-for="concept in filteredConcepts" v-bind:key="concept.id" :concept="concept"
           :isSelected="concept === activeConcept && isSelectedConcept" @selectConcept="selectConcept"
           @focusConcept="focusConcept" @unfocusConcept="unfocusConcept" />
       </ul>