player POC

src/components/solid/organisms/Reader/index.ts

@@ -0,0 +1 @@
+export { Reader } from "./Reader";

src/components/solid/organisms/TechniqueChooser/ExamSheet.tsx

@@ -2,9 +2,7 @@ import { type Component, For } from "solid-js";
 import { SINGLE_DIRECTION, type Technique, type TechniqueMetadata } from "$core/model";
 import { ForEntries } from "./ForEntries.tsx";
 import { buildExamTable } from "$core/buildExamTable";
-import { IconPrint } from "@/icons";
 import { t } from "@/i18n";
-import { SimpleButton } from "@/components/solid/atoms/SimpleButton.tsx";
 
 export interface ExamSheetProps {
   techniques: Technique[];
@@ -13,15 +11,6 @@ export interface ExamSheetProps {
 export const ExamSheet: Component<ExamSheetProps> = (props) => {
   return (
     <div>
-      <div class="flex justify-end">
-        <SimpleButton
-          size={"small"}
-          color={"secondary"}
-          icon={IconPrint}
-          label={t("examChooser.print")}
-          onClick={() => window.print()}
-        />
-      </div>
       <ForEntries object={buildExamTable(props.techniques)}>
         {(execution, attacks) => (
           <div>

src/components/solid/organisms/TechniqueChooser/TechniqueChooser.tsx

@@ -1,6 +1,7 @@
 import { type Component, createDeferred, createSignal } from "solid-js";
 import type { ResolvedDojo } from "$core/model/Dojo.ts";
 import { t } from "@/i18n";
+import { l } from "astro-i18n";
 import { ExamSheet } from "@/components/solid/organisms/TechniqueChooser/ExamSheet.tsx";
 import {
   ChooserControlButtons,
@@ -16,6 +17,9 @@ import {
   type ChoosableOrderOptions,
 } from "@/components/solid/organisms/TechniqueChooser/ChooserControlOrder.tsx";
 import { chooseTechniques, type TechniqueFilters } from "$core/chooseTechniques";
+import { SimpleButton } from "@/components/solid/atoms/SimpleButton.tsx";
+import { IconPrint, IconSpeak } from "@/icons";
+import { createTechniqueStore } from "$core/store";
 
 export const TechniqueChooser: Component<{ dojo: ResolvedDojo }> = (props) => {
   const [examSelection, setExamSelection] = syncToStorage(createSignal(new Set<string>()), {
@@ -55,6 +59,12 @@ export const TechniqueChooser: Component<{ dojo: ResolvedDojo }> = (props) => {
     });
   });
 
+  const readLoud = async () => {
+    const { save } = createTechniqueStore(props.dojo.info.id);
+    await save(selectedTechniques());
+    document.location.href = l(`/${props.dojo.info.id}/reader`);
+  };
+
   return (
     <div>
       <ChooserControlContainer headerLabel={t("examChooser.exams.header")}>
@@ -73,6 +83,22 @@ export const TechniqueChooser: Component<{ dojo: ResolvedDojo }> = (props) => {
       <div>
         {examSelection().size > 0 && (
           <div class={"my-10"}>
+            <div class="flex justify-end gap-4">
+              <SimpleButton
+                size={"small"}
+                color={"primary"}
+                icon={IconSpeak}
+                label={t("examChooser.read")}
+                onClick={readLoud}
+              />
+              <SimpleButton
+                size={"small"}
+                color={"secondary"}
+                icon={IconPrint}
+                label={t("examChooser.print")}
+                onClick={() => window.print()}
+              />
+            </div>
             <ExamSheet techniques={selectedTechniques()} />
           </div>
         )}

src/i18n/common/de.json

@@ -22,6 +22,7 @@
   "examChooser.order.randomize": "Zufällig",
   "examChooser.order.shuffle": "Mischen",
   "examChooser.print": "Drucken",
+  "examChooser.read": "Vorlesen",
   "examChooser.source": "Quelle",
   "examTable.header.attack": "Angriff",
   "examTable.header.defence": "Technik",

src/i18n/common/en.json

@@ -22,6 +22,7 @@
   "examChooser.order.randomize": "Random",
   "examChooser.order.shuffle": "Shuffle",
   "examChooser.print": "Print",
+  "examChooser.read": "Read loud",
   "examChooser.source": "Source",
   "examTable.header.attack": "Attack",
   "examTable.header.defence": "Technique",

src/icons/index.ts

@@ -1,6 +1,7 @@
 export { default as IconTranslate } from "@material-design-icons/svg/filled/translate.svg?component-solid";
 export { default as IconPrint } from "@material-design-icons/svg/outlined/print.svg?component-solid";
 export { default as IconRefresh } from "@material-design-icons/svg/outlined/refresh.svg?component-solid";
+export { default as IconSpeak } from "@material-design-icons/svg/outlined/record_voice_over.svg?component-solid";
 
 export { default as IconGithub } from "./custom/github-mark.svg?component-solid";
 export { default as IconGithubWhite } from "./custom/github-mark-white.svg?component-solid";

src/pages/[language]/[dojoId]/reader.astro

@@ -0,0 +1,24 @@
+---
+import {loadDojo} from "@/data/dojos";
+import { listDojos } from "@/data/dojos";
+import { multiplyParams } from "@/utils/multiplyParams";
+import { languages } from "@/i18n/server";
+import {Reader} from "@/components/solid/organisms/Reader"
+
+import DefaultLayout from "@/layouts/DefaultLayout.astro";
+
+export async function getStaticPaths() {
+  const dojos = await listDojos();
+  return multiplyParams({
+    language: languages,
+    dojoId: dojos.map((dojo) => dojo.id),
+  });
+}
+
+const id = Astro.params.dojoId;
+const dojo = await loadDojo(id);
+---
+
+<DefaultLayout title="Reader">
+    <Reader dojoInfo={dojo.info} client:only />
+</DefaultLayout>