Show point totals in the backpack and notes

components/viewer/ViewScoreStatus.vue

@@ -11,7 +11,7 @@
       >
         {{ score.beforeText }}
       </span>
-      <span class="score-text">{{ -value }}</span>
+      <span class="score-text">{{ value }}</span>
       <span v-if="score.afterText" class="score-text">{{
         score.afterText
       }}</span>
@@ -25,13 +25,15 @@ import { computed } from 'vue';
 
 import type { PointType } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';
+import { usePoints } from '~/composables/viewer/usePoints';
 
 const $props = defineProps<{
   vertical?: boolean;
   short?: boolean;
 }>();
 
-const { selected, pointTypes, points } = useProjectRefs();
+const { selected, pointTypes } = useProjectRefs();
+const { points } = usePoints();
 
 const activeScores = computed<{ score: PointType; value: number }[]>(() => {
   const scores: PointType[] = pointTypes.value;

components/viewer/notes/NotesView.vue

@@ -2,12 +2,13 @@
   <div class="notes-table-wrapper">
     <div class="notes-table">
       <template
-        v-for="({ packRow, choices }, idx) in visiblePackRows"
+        v-for="({ packRow, choices, scores }, idx) in visiblePackRows"
         :key="packRow.id"
       >
         <div v-if="idx > 0" class="notes-ruler"></div>
         <div class="notes-row">
-          {{ packRow.title }}
+          <span class="row-title">{{ packRow.title }}</span>
+          <RowScores :scores="scores" vertical />
         </div>
         <div class="notes-object-list">
           <ObjectNote
@@ -33,10 +34,11 @@
 import { assoc, chain, filter, has, isEmpty } from 'ramda';
 
 import RowNote from '~/components/viewer/notes/RowNote.vue';
+import RowScores from '~/components/viewer/utils/RowScores.vue';
 import { type PackRow, useBackpack } from '~/composables/viewer/useBackpack';
 import { useBuildNotes } from '~/composables/viewer/useBuildNotes';
 
-const { buildNotes, globalNotes } = useBuildNotes();
+const { buildNotes } = useBuildNotes();
 const { packRows } = useBackpack();
 
 const $props = defineProps<{
@@ -77,14 +79,16 @@ const visiblePackRows = computed((): PackRow[] => {
   gap: 0.5rem;
 
   .notes-row {
-    font-weight: bolder;
-
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: start;
     align-items: start;
     gap: 0.5rem;
+
+    .row-title {
+      font-weight: bolder;
+    }
   }
 
   .notes-object-list {

components/viewer/utils/BackpackView.vue

@@ -9,12 +9,16 @@
       </div>
     </div>
     <div
-      v-for="{ packRow, choices } in packRows"
+      v-for="{ packRow, choices, scores } in packRows"
       :key="packRow.id"
       class="pack-row"
     >
-      <div class="pack-row-title">
-        {{ packRow.title }}
+      <div class="pack-row-title-container">
+        <span class="pack-row-title">{{ packRow.title }}</span>
+
+        <div class="pack-row-info">
+          <RowScores :scores="scores" :horizontal="true" />
+        </div>
       </div>
       <div class="container-fluid p-0">
         <div class="row g-2">
@@ -38,6 +42,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import RowScores from '~/components/viewer/utils/RowScores.vue';
 import { useProjectStore } from '~/composables/store/project';
 import { useSettingRefs } from '~/composables/store/settings';
 import { ViewContext } from '~/composables/viewer';
@@ -82,8 +87,15 @@ const objectMode = computed(() => {
   padding: 0;
   margin-bottom: 0.5rem;
 
+  .pack-row-title-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .pack-row-title {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     font-weight: bolder;
     text-align: center;
     margin-bottom: 0.2rem;

components/viewer/utils/RowScores.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="row-scores" :class="{ horizontal: props.horizontal ?? false }">
+    <span
+      v-for="{ score, values } in rowScores"
+      :key="score.id"
+      class="row-score-item"
+    >
+      {{ values }} {{ score.afterText }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { join, map, toPairs } from 'ramda';
+
+import { useProjectStore } from '~/composables/store/project';
+import type { ScoreAcc } from '~/composables/viewer/usePoints';
+
+const store = useProjectStore();
+
+const props = defineProps<{
+  scores: Record<string, ScoreAcc>;
+  horizontal?: boolean;
+}>();
+
+const rowScores = computed(() => {
+  return map(([scoreId, value]) => {
+    const score = store.getPointType(scoreId);
+    const values: string[] = [];
+    if (value.gain > 0) {
+      values.push(`+${value.gain}`);
+    }
+    if (value.cost > 0) {
+      values.push(`-${value.cost}`);
+    }
+    return {
+      score: score,
+      values: join(', ', values),
+    };
+  }, toPairs(props.scores));
+});
+</script>
+
+<style scoped lang="scss">
+.row-scores {
+  font-size: smaller;
+  color: gray;
+  font-family: monospace;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+}
+.row-score-item {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+</style>

composables/store/project.ts

@@ -14,7 +14,6 @@ import type {
   ProjectObj,
   ProjectRow,
   ProjectStore,
-  Score,
 } from '~/composables/project';
 import { bufferToHex, stringToBuffer } from '~/composables/utils';
 
@@ -421,54 +420,6 @@ export const useProjectStore = defineStore('project', () => {
     }
   };
 
-  const points = computed<Record<string, number>>(() => {
-    const _selected = R.clone(selected.value);
-    const _selectedIds = R.clone(selectedIds.value);
-
-    const startingSums: Record<string, number> = R.pipe(
-      R.map(({ id, startingSum }: PointType): [string, number] => [
-        id,
-        startingSum,
-      ]),
-      R.fromPairs,
-    )(pointTypes.value);
-
-    return R.pipe(
-      R.keys,
-      R.filter((key) => typeof key === 'string'),
-      R.map((id: string): { obj: ProjectObj; count: number } => ({
-        obj: getObject.value(id),
-        count: _selected[id],
-      })),
-
-      R.chain(({ obj, count }) => {
-        return R.pipe(
-          R.filter((score: Score) => {
-            const pointType = getPointType.value(score.id);
-            const cond = buildConditions(score);
-            return (
-              cond(_selectedIds) &&
-              (R.isEmpty(pointType.activatedId) ||
-                R.includes(pointType.activatedId, _selectedIds))
-            );
-          }),
-          R.map(({ id, value }: Score): { id: string; value: number } => {
-            return {
-              id,
-              value: Number.parseInt(value) * count,
-            };
-          }),
-        )(obj.scores);
-      }),
-      R.reduceBy(
-        (acc, { value }) => acc + value,
-        0,
-        ({ id }) => id,
-      ),
-      R.mergeWith(R.add, startingSums),
-    )(_selected);
-  });
-
   return {
     store,
     project,
@@ -480,7 +431,6 @@ export const useProjectStore = defineStore('project', () => {
     buildData,
     buildNotes,
     buildModified,
-    points,
     isLoaded,
     loadProject,
     unloadProject,

composables/viewer/useBackpack.ts

@@ -1,27 +1,47 @@
-import * as R from 'ramda';
-import { sortWith } from 'ramda';
+import {
+  assoc,
+  chain,
+  clone,
+  filter,
+  groupBy,
+  head,
+  map,
+  prop,
+  reduce,
+  sortWith,
+  toPairs,
+} from 'ramda';
 import { computed } from 'vue';
 
 import type { ProjectObj, ProjectRow } from '~/composables/project';
 import {
   type IndexMapT,
+  type Selections,
   useProjectRefs,
   useProjectStore,
 } from '~/composables/store/project';
+import { type ScoreAcc, usePoints } from '~/composables/viewer/usePoints';
 
 export type PackRowChoice = {
   row: ProjectRow;
   obj: ProjectObj;
   addons: ObjAddon[];
   count: number;
 };
-export type PackRow = { packRow: ProjectRow; choices: PackRowChoice[] };
+export type PackRow = {
+  packRow: ProjectRow;
+  choices: PackRowChoice[];
+  scores: Record<string, ScoreAcc>;
+};
+
 export function useBackpack() {
   const { getObject, getObjectRow, getRow } = useProjectStore();
   const { selected, selectedIds, backpack, indexMap } = useProjectRefs();
+  const { computePointsForSelection } = usePoints();
 
   const packRows = computed(() => {
     const _indexMap: IndexMapT = indexMap.value;
+    const _selected = clone(selected.value);
 
     const cmp = (a: number, b: number): number => {
       return a === b ? 0 : a > b ? 1 : -1;
@@ -37,10 +57,10 @@ export function useBackpack() {
       return cmp(idxA, idxB);
     };
 
-    const selectedChoices = R.map(([id, count]): PackRowChoice => {
+    const selectedChoices = map(([id, count]): PackRowChoice => {
       const obj = getObject(id);
 
-      const activeAddons = R.filter((addon) => {
+      const activeAddons = filter((addon) => {
         const condition = buildConditions(addon);
         return condition(selectedIds.value);
       }, obj.addons);
@@ -51,20 +71,37 @@ export function useBackpack() {
         addons: activeAddons,
         count,
       };
-    }, R.toPairs(selected.value));
-    const choicesByGroup: Partial<Record<string, PackRowChoice[]>> = R.groupBy(
-      ({ obj, row }) => R.head(obj.groups)?.id ?? row.resultGroupId,
+    }, toPairs(_selected));
+
+    const choicesByGroup: Partial<Record<string, PackRowChoice[]>> = groupBy(
+      ({ obj, row }) => head(obj.groups)?.id ?? row.resultGroupId,
       selectedChoices,
     );
 
-    return R.chain((row: ProjectRow): PackRow[] => {
+    return chain((row: ProjectRow): PackRow[] => {
       if (row.resultGroupId in choicesByGroup) {
-        const entry = {
+        const choicesInGroup = choicesByGroup[row.resultGroupId] ?? [];
+        const selectedInGroup: Selections = reduce(
+          (acc: Selections, prc: PackRowChoice): Selections => {
+            const key = prc.obj.id;
+            return assoc(key, prop(key, _selected), acc);
+          },
+          {},
+          choicesInGroup,
+        );
+        const groupScores = computePointsForSelection(
+          selectedInGroup,
+          _selected,
+        );
+        console.log(
+          `score for ${row.title} (${row.id})`,
+          selectedInGroup,
+          groupScores,
+        );
+        const entry: PackRow = {
           packRow: row,
-          choices: sortWith(
-            [cmpRowIndex, cmpObjIndex],
-            choicesByGroup[row.resultGroupId] ?? [],
-          ),
+          choices: sortWith([cmpRowIndex, cmpObjIndex], choicesInGroup),
+          scores: groupScores,
         };
         return [entry];
       } else {