Enha: mime to see marks

components/actionhistory.html

@@ -4,11 +4,11 @@
   {{range .}}
     <div class="flex items-center justify-between p-2 rounded">
       <span class="font-mono text-sm">
-      <span class="text-{{.ActorColor}}-600">{{.Actor}}:</span>
+        <span class="text-{{.ActorColor}}-600">{{.Actor}}:</span>
         <span class="text-gray-600">{{.Action}}:</span>
         <span class="text-{{.WordColor}}-500 font-medium">{{.Word}}</span>
         {{if .Number}}
-        <span class="text-gray-400">- {{.Number}}</span>
+          <span class="text-gray-400">- {{.Number}}</span>
         {{end}}
       </span>
     </div>
@@ -16,9 +16,22 @@
 </div>
 <script>
   if (!window.actionHistoryScrollSet) {
+    // Use HTMX's after-swap event to scroll after content updates
+    document.addEventListener('htmx:afterSwap', function(evt) {
+      if (evt.target.id === 'actionHistoryContainer' || evt.detail.target.id === 'actionHistoryContainer') {
+        const container = document.getElementById('actionHistoryContainer');
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      }
+    });
+    // Fallback for initial load
     htmx.onLoad(function(target) {
       if (target.id === 'actionHistoryContainer') {
-        target.scrollToBottom();
+        const container = document.getElementById('actionHistoryContainer');
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
       }
     });
     window.actionHistoryScrollSet = true;

components/cardtable.html

@@ -5,15 +5,15 @@
       {{range .Cards}}
       {{if .Revealed}}
 	  {{if eq .Color "amber"}}
-	    <div id="card-{{.Word}}" class="bg-{{.Color}}-100 border-8 border-stine-400 p-4 min-w-[100px] text-center text-white cursor-pointer" 
+	    <div id="card-{{.Word}}" class="bg-{{.Color}}-100 border-8 border-stine-400 p-4 min-w-[100px] text-center text-white cursor-pointer line-through" 
 		 style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
 	    </div>
 	  {{else}}
-	    <div id="card-{{.Word}}" class="bg-{{.Color}}-400 border-8 border-stone-400 p-4 min-w-[100px] text-center text-white cursor-pointer" 
+	    <div id="card-{{.Word}}" class="bg-{{.Color}}-400 border-8 border-stone-400 p-4 min-w-[100px] text-center text-white cursor-pointer line-through" 
 		 style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
 	    </div>
 	  {{end}}
-	{{else if or (.Mime) ($.IsOver)}}
+	{{else if $.IsOver}}
 	  {{if eq .Color "amber"}}
 	    <div id="card-{{.Word}}" class="bg-{{.Color}}-100 border border-stone-400 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer" 
 		 style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
@@ -23,6 +23,29 @@
 		 style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
 	    </div>
 	  {{end}}
+      {{else if .Mime}}
+	  {{if eq .Color "amber"}}
+	    <div id="card-{{.Word}}" class="bg-{{.Color}}-100 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
+	  {{else}}
+	    <div id="card-{{.Word}}" class="bg-{{.Color}}-400 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
+	  {{end}}
+	     <div class="flex-grow text-center p-4 flex items-center justify-center text-white"
+		  style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);"
+		  hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
+		{{.Word}}
+	     </div>
+	     <div class="h-6 bg-stone-600 rounded-b flex items-center justify-center text-white text-sm cursor-pointer"
+		  hx-get="/mark-card?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
+		 {{range .Marks}}
+		    {{ $length := len .Username }}
+		    {{ if lt $length 3 }}
+		    <span class="mx-0.5">{{.Username}}</span>
+		    {{else}}
+		    <span class="mx-0.5">{{slice .Username 0 3}}</span>
+		    {{end}}
+		 {{end}}
+	     </div>
+	</div>
 	{{else}}
 	<div id="card-{{.Word}}" class="bg-stone-400 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
 	     <div class="flex-grow text-center p-4 flex items-center justify-center text-white"

handlers/elements.go

@@ -213,7 +213,12 @@ func HandleMarkCard(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if err := validateMove(fi, models.UserRoleGuesser); err != nil {
-		abortWithError(w, err.Error())
+		// abortWithError(w, err.Error())
+		log.Debug("pressed mark-card out of move", "error", err)
+		return
+	}
+	if fi.State.Role == models.UserRoleMime {
+		log.Debug("mime pressed mark-card")
 		return
 	}
 	color, exists := fi.Room.FindColor(word)

todos.md

@@ -102,3 +102,9 @@
 - timers conflict; stop timers;
 - clue snatching;
 - llm resp token amount limit;
+
+=============
+- autoscroll backlog to the last action;
+- mimes to see marks on the words;
+- clearer ways to see opened words;
+- sql no rows when joining by link?