scroll play to center of view when searched

static/buttons.js

@@ -1,6 +1,7 @@
 /* predefine some variables */
 var url   = new URL(window.location.href)
 var page  = url.searchParams.get("page")
+var page  = url.searchParams.get("string")
 var buttonBackward = document.getElementById("button-backward")
 var buttonForward  = document.getElementById("button-forward")
 var buttonFirst    = document.getElementById("button-first")
@@ -24,6 +25,13 @@ if(isLastPage){
     buttonForward.classList.add("disabled")
 }
 
+/* if request was a playersearch, move to player */
+targetPlayerElements = document.getElementsByClassName("targetPlayer")
+if(targetPlayerElements.length == 1){
+    scrollOptions = {beahviour: "smooth", block:"center"} 
+    targetPlayerElements[0].scrollIntoView(scrollOptions);
+}
+
 function forward(){
 
     if(page){

static/site.css

@@ -147,6 +147,11 @@ body{
     padding-bottom: 2px;
 }
 
+.targetPlayer{
+    /* overwrite background for seached player */
+    background: yellow !important;
+}
+
 .endOfBoardIndicator{
     background: red;
     text-align: center;

templates/base.html

@@ -29,18 +29,12 @@
             {% for player in playerList %}
                 {% set count = loop.index + start %}
                 {% if count % 2 == 0 %}
-                <div 
+                <div class="line-even {% if searchName == player.name %}targetPlayer{% endif %}">
-                    {% if searchName == player.name %}
+                    {{ player.getLineHTML(count) }}
-                        style="background: yellow;"
-                    {% endif %}
-                    class=line-even>{{ player.getLineHTML(count) }}
                 </div>
                 {% else %}
-                <div 
+                <div class="line-odd {% if searchName == player.name %}targetPlayer{% endif %}">
-                    {% if searchName == player.name %}
+                    {{ player.getLineHTML(count) }}
-                        style="background: yellow;"
-                    {% endif %}
-                    class=line-odd>{{ player.getLineHTML(count) }}
                 </div>
                 {% endif %}
             {% endfor %}