#!/usr/bin/bash
declare -r SVG='./Ergo-L.svg'
declare -ri DELTA=40
declare -ri WIDTH=1920
declare -ri HEIGHT=1080

# use-key ID X Y
function use-key() (
  echo '  <use href="'"$1"'"
      x="'"$2"'"
      y="'"$3"'"/>' >>$SVG
)

# use-symbol X Y CHAR [CHAR…]
#  ----
# |2  4|
# |    |
# |1  3|
#  ----
function use-symbol() (
  declare -r X0=$1 Y0=$2
  echo "0=> $#"
  shift 2
  echo "1=> $#"
  while [ $# -gt 0 ]
  do
    echo '  <text class="symbol"
      x="'"$X0"'"
      y="'"$Y0"'">'"$1"'</text>' >>$SVG
    shift 1
    echo "2=> $#"
  done
)

echo '<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
    width="'$WIDTH'"
    height="'$HEIGHT'"
    viewBox="0 0 '$WIDTH' '$HEIGHT'"
    style="background: rgba(0, 0, 0, 0.9);"
    lang="fr">
  <title>Disposition de clavier ISO Ergo-L</title>
  <desc>Un schéma qui décrit la disposition Ergo-L dans un clavier.
Le clavier est de forme ISO.
Les caractères de contrôle suivent la norme ISO/IEC 9995-7.
Voir https://ergol.org/ .</desc>
  <style>
    rect, polygon {
      stroke: green;
    }
    rect:hover, polygon:hover
    {
      stroke: red;
    }
    .symbol
    {
      fill: white;
      font-size: '$DELTA'px;
    }
    .symbol:hover
    {
      fill: yellow;    
    }
  </style>
  <!--Grille définie-->
  <defs>
    <rect id="btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*3))'"
        height="'$((DELTA*3))'"
        rx="20"/>
    <rect id="fn-btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*3))'"
        height="'$((DELTA*2))'"
        rx="20"/>
    <rect id="medium-btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*4))'"
        height="'$((DELTA*3))'"
        rx="20"/>
    <rect id="big-btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*5))'"
        height="'$((DELTA*3))'"
        rx="20"/>
    <rect id="huge-btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*6))'"
        height="'$((DELTA*3))'"
        rx="20"/>
    <rect id="space-btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*15))'"
        height="'$((DELTA*3))'"
        rx="20"/>
    <rect id="rshift-btn"
        x="'$DELTA'"
        y="'$DELTA'"
        width="'$((DELTA*8))'"
        height="'$((DELTA*3))'"
        rx="20"/>
    <polygon id="enter-btn"
        points="0,0
          '$((DELTA*4))',0
          '$((DELTA*4))','$((DELTA*6))'
          '$((DELTA*1))','$((DELTA*6))'
          '$((DELTA*1))','$((DELTA*3))'
          0,'$((DELTA*3))'"/>
  </defs>
  <!--Grille autres lignes-->
  <script href="./Ergo-L.js"/>
  <!--Touches de fonction-->' >$SVG
  use-key '#fn-btn' 0 0
  use-symbol $((x+DELTA)) $((3*DELTA)) '&#x238B;'

# draw-any-key KEY_TYPE SYMBOL X0 Y0
function draw-any-key() (
  declare -r KTYPE=$1 SYMBOL=$2
  declare -ri X0=$3 Y0=$4
  use-key "$KTYPE" $((X0*DELTA)) $((Y0*DELTA))
  use-symbol $(( (X0+1)*DELTA )) $(( (Y0+4)*DELTA )) "$SYMBOL"
)

declare -i bloc=0 nbr=0 x=$((6*DELTA)) xres=0 fnn=0
while [ $bloc -lt 3 ]
do
  while [ $nbr -lt 4 ]
  do
    fnn=$((fnn+1))
    use-key '#fn-btn' "$x" 0
    use-symbol $((x+DELTA))'.'$((xres+DELTA)) $((3*DELTA)) "Fn${fnn}"
    nbr=$((nbr+1))
    x=$((x+3*DELTA))
  done
  nbr=0
  bloc=$((bloc+1))
  x=$((x+30*DELTA/2/10))
  xres=$((xres+30*DELTA/2%10))
done
unset bloc

# draw-basic-keys INITIAL_X INITIAL_Y KEY_SYMBOL [KEY_SYMBOL…]
function draw-basic-keys() (
  declare -i x=0
  declare -ri X0=$1 Y0=$2
  shift 2
  while [ "$#" -gt 0 ]
  do
    fnn=$((fnn+1))
    use-key '#btn' $((x+X0*DELTA)) $((Y0*DELTA))
    use-symbol $((x+(X0+1)*DELTA)) $(( (4+Y0)*DELTA )) "$1"
    shift 1
    x=$((x+3*DELTA))
  done
)

declare -ra ROW1_1=("q" "" "" "" ""\
    "" "" "" "" ""\
    "" "" "")
declare -ra ROW1_2=("q" "" "" "" ""\
    "" "" "" "" ""\
    "" "" "")
declare -ra ROW1_3=("q" "" "" "" ""\
    "" "" "" "" ""\
    "" "" "")
declare -ra ROW1_4=("q" "" "" "" ""\
    "" "" "" "" ""\
    "" "" "")
declare -ra ROW2_1=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW2_2=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW2_3=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW2_4=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW3_1=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW3_2=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW3_3=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW3_4=("" "" "" "" ""\
    "" "" "" "" ""\
    "" "")
declare -ra ROW4_1=("" "" "" "" ""\
    "" "" "" "" ""\
    "")
declare -ra ROW4_2=("" "" "" "" ""\
    "" "" "" "" ""\
    "")
declare -ra ROW4_3=("" "" "" "" ""\
    "" "" "" "" ""\
    "")
declare -ra ROW4_4=("" "" "" "" ""\
    "" "" "" "" ""\
    "")


draw-basic-keys 0 3 ${ROW1[@]}
draw-basic-keys 5 6 ${ROW2[@]}
draw-basic-keys 6 9 ${ROW3[@]}
draw-basic-keys 4 12 ${ROW4[@]}

draw-any-key '#big-btn' "&#x21B9;" 0 6
draw-any-key '#huge-btn' "&#x21EC;" 0 9
draw-any-key '#medium-btn' "&#x21E7;" 0 12
draw-any-key '#big-btn' "&#x2388;" 0 15
draw-any-key '#medium-btn' "&#x2318;" 5 15
draw-any-key '#medium-btn' "&#x2387;" 9 15
draw-any-key '#space-btn' "&#x2423;" 13 15
draw-any-key '#medium-btn' "&#x21EE;" 28 15
draw-any-key '#medium-btn' "&#x2318;" 32 15
draw-any-key '#medium-btn' "&#x25A4;" 36 15
draw-any-key '#big-btn' "&#x2388;" 40 15
draw-any-key '#rshift-btn' "&#x21E7;" 37 12

use-key '#enter-btn' $((42*DELTA)) $((7*DELTA))
use-symbol $((42*DELTA)) $((10*DELTA)) '&#x2BA0;'
use-symbol $((43*DELTA)) $((13*DELTA)) '&#x2386;'

draw-any-key '#huge-btn' "&#x232B;" 39 3

echo '</svg>' >>$SVG
cat $SVG