improved ui a bit

src/server.tsx

@@ -5,6 +5,9 @@ import { renderToString } from "https://esm.sh/preact-render-to-string@5.1.19?de
 import * as prand from 'https://unpkg.com/pure-rand/lib/esm/pure-rand.js';
 import {QuestionSource, QuestionMeta} from './shared.ts';
 
+import highlightJs from "https://esm.sh/highlight.js@11.9.0"
+import highlightJsJavascript from "https://esm.sh/highlight.js@11.9.0/es/languages/javascript.js"
+highlightJs.registerLanguage('javascript', highlightJsJavascript);
 
 type Question = [QuestionSource, QuestionMeta];
 
@@ -14,7 +17,7 @@ type QuestionURLS = {
     answerQuestionUrl: string
 };
 
-const questions: Question = Object.values(rawQuestions).flatMap(s => s.questions.map( q => [s, q]));
+const questions: Question[] = Object.values(rawQuestions).flatMap(s => s.questions.map( (q, idx) => [s as QuestionSource, q as QuestionMeta]));
 
 const apiRouter = new Router();
 const loginRouter = new Router();
@@ -28,33 +31,43 @@ function hashString(str: string): number {
       hash |= 0; // Convert to 32bit integer
     }
     return hash;
-  }
+}
   
   
-  function randomPermutation(seed: number, n: number): number[] {
-      const rand = prand.mersenne(seed)
-      const base = [...Array(n).keys()];
-      for(let i = 0; i < (n -1); i++){
-         const j = prand.unsafeUniformIntDistribution(i, n-1, rand);
-         const tmp = base[i];
-         base[i] = base[j];
-         base[j] = tmp;
-      }
-      return base;
-  }
-
-
-function  getRandomQuestion<T>(seed: string, index: number, questions: Question[]): Question {
-    const numberSeed = hashString(seed);
-    const permutations = randomPermutation(numberSeed, questions.length)
-    return questions[permutations[index]];
-
+function randomPermutation(seed: number, n: number): number[] {
+    const rand = prand.mersenne(seed)
+    const base = [...Array(n).keys()];
+    for(let i = 0; i < (n -1); i++){
+        const j = prand.unsafeUniformIntDistribution(i, n-1, rand);
+        const tmp = base[i];
+        base[i] = base[j];
+        base[j] = tmp;
+    }
+    return base;
 }
 
-function getQuestionPage(question: Question, urls: QuestionURLS){
+function isSecretSeed(seed: string): boolean{
+    return seed === 'cannonical';
+}
+  
+
+function  getRandomQuestion<T>(seed: string, index: number, questions: Question[]): Question {
+    if(isSecretSeed(seed)){
+        return questions[index] ;
+    }
+    const numberSeed = hashString(seed);
+    const permutations = randomPermutation(numberSeed, questions.length)
+    return [... questions[permutations[index]]];
+}
+
+function getQuestionPage(question: Question, urls: QuestionURLS, questionIndex: number){
+    const source = highlightJs.highlight(question[0].toString(), {language: 'javascript'}).value;
     return (<div>
-        <pre> { question[0].toString() }</pre>
-        <div class="content mt-2 mb-2">
+        <div style="text-align:center">
+            {questionIndex + 1}/{ questions.length }
+        </div>
+        <pre> <code dangerouslySetInnerHTML={{__html: source}}></code></pre>
+        <div class="content mt-2 mb-2" >
             { question[1].question_fr }
         </div>
 
@@ -129,17 +142,26 @@ function processValidAnswer(ctx, answer: string): void {
     ctx.response.body = renderToString(getValidAnswerMessage());
 }
 
+function getQuestionIndex(ctx){
+    const index = Number.parseInt(ctx.params.idx??"0");
+    return index % questions.length;
+}
+
+function getNextQuestionIndex(ctx){
+    return (getQuestionIndex(ctx) + 1) % questions.length
+}
 
 function getQuestion(ctx): Question{
     const seed = ctx.params.seed;
-    const index = Number.parseInt(ctx.params.idx??"0");
+    const index = getQuestionIndex(ctx);
     return getRandomQuestion(seed, index, questions);
 }
 
 function getUrls(ctx): QuestionURLS{
     const seed = ctx.params.seed;
-    const index = Number.parseInt(ctx.params.idx??"0");
-    const nextQuestionUrl = `/api/v1/random-questions/${seed}/${index + 1}`;
+    const index = getQuestionIndex(ctx);
+    const nextQuestionIndex = getNextQuestionIndex(ctx);
+    const nextQuestionUrl = `/api/v1/random-questions/${seed}/${nextQuestionIndex}`;
     const validationUrl = `/api/v1/random-questions/${seed}/${index}/validate`;
     const answerQuestionUrl = `/api/v1/random-questions/${seed}/${index}/answer`
     return {nextQuestionUrl, validationUrl, answerQuestionUrl};
@@ -201,12 +223,18 @@ apiRouter.get("/api/v1/random-questions/:seed/:idx/answer", (ctx)=> {
 apiRouter.get("/api/v1/random-questions/:seed/:idx", (ctx)=> {
     const q = getQuestion(ctx);
     const urls = getUrls(ctx);
-    
-    ctx.response.body = renderToString(getQuestionPage(q, urls));
+    const questionIndex =  getQuestionIndex(ctx);
+
+    ctx.response.body = renderToString(getQuestionPage(q, urls, questionIndex));
     ctx.response.headers.append("HX-Trigger", JSON.stringify({'set-question-id': ctx.params.idx}));
 });
 
 
+loginRouter.get("/toto", (ctx)=> {
+    ctx.response.body = highlightJs.highlight('function(){console.log("hello world")}', {language: 'javascript'}).value;
+});
+
+
 loginRouter.post("/api/v1/login", async (ctx)=> {
     const username = (await ctx.request.body().value).get("username");
     ctx.response.headers.append("HX-Trigger", JSON.stringify({'set-seed': username}));