fixed scaling of buttons and text. created a skewed version of the button

Qwixx/frontend/inkScape/buttons/button.svg

@@ -5,6 +5,7 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="2in"
@@ -19,6 +20,24 @@
    inkscape:export-ydpi="200">
   <defs
      id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient999">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop995" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop997" />
+    </linearGradient>
+    <rect
+       x="0.05377399"
+       y="0"
+       width="50.708872"
+       height="25.220001"
+       id="rect912" />
     <rect
        x="4.3556932"
        y="-2.2585076"
@@ -230,6 +249,103 @@
          class="powerclip"
          d="M 11.255806,-14.440635 H 52.102453 V 9.8104258 H 11.255806 Z m 6.432457,5.2795012 c -0.458412,0 -0.827457,0.3690459 -0.827457,0.827457 V 3.7034096 c 0,0.4584112 0.369045,0.827457 0.827457,0.827457 h 27.981945 c 0.458412,0 0.827457,-0.3690458 0.827457,-0.827457 V -8.3336768 c 0,-0.4584111 -0.369045,-0.827457 -0.827457,-0.827457 z" />
     </clipPath>
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161569"
+       height="23.927186"
+       id="rect912-4" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="50.708874"
+       height="25.220001"
+       id="rect925" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect912-4-8" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect1014" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect912-4-8-5" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect1059" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect912-4-8-5-0" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect1107" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect912-4-8-5-0-9" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect1155" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect912-4-8-5-0-9-2" />
+    <rect
+       x="0.053773992"
+       y="0"
+       width="58.161568"
+       height="23.927185"
+       id="rect1203" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient999"
+       id="linearGradient1001"
+       x1="2.6616766"
+       y1="12.547904"
+       x2="32.320359"
+       y2="12.547904"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.55042263,0,0,1.3331294,-24.953841,6.8903362)" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath1056">
+      <path
+         style="display:inline;opacity:1;fill:#ff00ff;fill-opacity:1;stroke-width:0.956412;stroke-miterlimit:4;stroke-dasharray:none"
+         id="path1058"
+         width="34.467007"
+         height="9.8651133"
+         x="5.7445021"
+         y="10.851624"
+         ry="0.77205336"
+         sodipodi:type="rect"
+         d="M 6.5165554,10.851624 H 39.439455 c 0.427718,0 0.772054,0.344335 0.772054,0.772053 v 8.321006 c 0,0.427718 -0.344336,0.772054 -0.772054,0.772054 H 6.5165554 c -0.4277175,0 -0.7720533,-0.344336 -0.7720533,-0.772054 v -8.321006 c 0,-0.427718 0.3443358,-0.772053 0.7720533,-0.772053 z"
+         transform="matrix(-0.25795294,0.96615748,-0.84359178,-0.53698502,0,0)" />
+    </clipPath>
   </defs>
   <sodipodi:namedview
      id="base"
@@ -238,11 +354,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="4.9202846"
-     inkscape:cx="58.458432"
-     inkscape:cy="19.167374"
+     inkscape:zoom="3.4791666"
+     inkscape:cx="54.010329"
+     inkscape:cy="54.348216"
      inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer8"
      inkscape:document-rotation="0"
      showgrid="false"
      inkscape:pagecheckerboard="true"
@@ -289,52 +405,53 @@
        inkscape:groupmode="layer"
        id="layer9"
        inkscape:label="green"
-       style="display:none"
+       style="display:inline"
        sodipodi:insensitive="true">
       <rect
-         style="opacity:1;fill:#70c1b3;fill-opacity:1;stroke-width:1.1884;stroke-miterlimit:4;stroke-dasharray:none"
+         style="opacity:1;fill:#70c1b3;fill-opacity:1;stroke-width:0.883756;stroke-miterlimit:4;stroke-dasharray:none"
          id="rect8612"
-         width="34.999725"
-         height="14.999566"
-         x="7.3829246"
-         y="5.6141505"
-         ry="1.1738807" />
+         width="38.099998"
+         height="7.6199999"
+         x="6.3499999"
+         y="8.382"
+         ry="0.59634864" />
     </g>
     <g
        inkscape:groupmode="layer"
        id="layer12"
        inkscape:label="yellow"
-       style="display:inline"
+       style="display:none"
        sodipodi:insensitive="true">
       <rect
-         style="display:inline;opacity:1;fill:#ffe066;fill-opacity:1;stroke-width:1.1884;stroke-miterlimit:4;stroke-dasharray:none"
+         style="display:inline;opacity:1;fill:#ffe066;fill-opacity:1;stroke-width:0.883756;stroke-miterlimit:4;stroke-dasharray:none"
          id="rect8612-2"
-         width="34.999725"
-         height="14.999566"
-         x="7.3829246"
-         y="5.6145825"
-         ry="1.1738807" />
+         width="38.099998"
+         height="7.6199999"
+         x="6.3499999"
+         y="8.382"
+         ry="0.59634864" />
     </g>
     <g
        inkscape:groupmode="layer"
        id="layer11"
        inkscape:label="red"
-       style="display:none"
+       style="display:inline"
        sodipodi:insensitive="true">
       <rect
-         style="display:inline;opacity:1;fill:#f25f5c;fill-opacity:1;stroke-width:1.1884;stroke-miterlimit:4;stroke-dasharray:none"
+         style="display:inline;opacity:1;fill:#f25f5c;fill-opacity:1;stroke-width:0.883756;stroke-miterlimit:4;stroke-dasharray:none"
          id="rect8612-9-8"
-         width="34.999725"
-         height="14.999566"
-         x="7.3826494"
-         y="5.6141491"
-         ry="1.1738807" />
+         width="38.099998"
+         height="7.6199999"
+         x="6.3499999"
+         y="8.382"
+         ry="0.59634864" />
     </g>
   </g>
   <g
      inkscape:groupmode="layer"
      id="layer3"
-     inkscape:label="text">
+     inkscape:label="text"
+     sodipodi:insensitive="true">
     <g
        inkscape:groupmode="layer"
        id="layer5"
@@ -343,33 +460,39 @@
        sodipodi:insensitive="true">
       <text
          xml:space="preserve"
-         style="font-size:7.581px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;display:inline;stroke-width:0.189525"
-         x="24.253794"
-         y="15.640176"
-         id="text8604-4-4"><tspan
-           sodipodi:role="line"
-           x="24.253794"
-           y="15.640176"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525"
-           id="tspan948">Join</tspan></text>
+         id="text910-3-1-3-1-5-9"
+         style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect912-4-8-5-0-9-2);display:inline;"
+         x="27.862484"
+         y="0"
+         transform="translate(-3.4401001,3.0474886)"><tspan
+           x="25.860549"
+           y="9.6554651"><tspan
+             style="font-size:2.82222px;text-align:center;text-anchor:middle">Join </tspan><tspan> </tspan></tspan><tspan
+           style="visibility:hidden"
+           x="0.0546875"
+           y="33.583199"><tspan
+             dx="0 7.3897061 6.4233603 6.6972446 6.6972427 6.3045044 5.5138588 4.1702728 2.9042091 6.4233589">Connection</tspan></tspan></text>
     </g>
     <g
        inkscape:groupmode="layer"
        id="layer2"
        inkscape:label="options"
-       style="display:inline"
+       style="display:none"
        sodipodi:insensitive="true">
       <text
          xml:space="preserve"
-         style="font-size:7.581px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;display:inline;stroke-width:0.189525"
-         x="24.41153"
-         y="15.443126"
-         id="text8604-4-8"><tspan
-           sodipodi:role="line"
-           id="tspan8602-9-5"
-           x="24.41153"
-           y="15.443126"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525">Options</tspan></text>
+         id="text910-3-1-3-1-5"
+         style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect912-4-8-5-0-9);display:inline;"
+         x="27.862484"
+         y="0"
+         transform="translate(-3.4226185,3.1496407)"><tspan
+           x="23.220919"
+           y="9.6554651"><tspan
+             style="font-size:2.82222px;text-align:center;text-anchor:middle">Options </tspan><tspan> </tspan></tspan><tspan
+           style="visibility:hidden"
+           x="0.0546875"
+           y="33.583199"><tspan
+             dx="0 7.3897061 6.4233603 6.6972446 6.6972427 6.3045044 5.5138588 4.1702728 2.9042091 6.4233589">Connection</tspan></tspan></text>
     </g>
     <g
        inkscape:groupmode="layer"
@@ -379,26 +502,18 @@
        sodipodi:insensitive="true">
       <text
          xml:space="preserve"
-         style="font-size:7.581px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;display:inline;stroke-width:0.189525"
-         x="24.680996"
-         y="12.256872"
-         id="text8604-4-8-6"><tspan
-           sodipodi:role="line"
-           id="tspan8602-9-5-0"
-           x="24.680996"
-           y="12.256872"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525">New</tspan></text>
-      <text
-         xml:space="preserve"
-         style="font-size:7.581px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;display:inline;stroke-width:0.189525"
-         x="24.182913"
-         y="18.248447"
-         id="text8604-4-8-6-9"><tspan
-           sodipodi:role="line"
-           id="tspan8602-9-5-0-0"
-           x="24.182913"
-           y="18.248447"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525">Game</tspan></text>
+         id="text910-3"
+         style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect912-4);display:inline;"
+         x="27.862484"
+         y="0"
+         transform="translate(-3.7275336,3.6096392)"><tspan
+           x="20.936823"
+           y="9.6554651"><tspan
+             style="font-size:2.82222px;text-align:center;text-anchor:middle">New Game </tspan><tspan> </tspan></tspan><tspan
+           style="visibility:hidden"
+           x="0.0546875"
+           y="33.583199"><tspan
+             dx="0 7.3897061 6.4233603 6.6972446 6.6972427 6.3045044 5.5138588 4.1702728 2.9042091 6.4233589">Connection</tspan></tspan></text>
     </g>
     <g
        inkscape:groupmode="layer"
@@ -406,21 +521,24 @@
        inkscape:label="rematch"
        style="display:none"
        sodipodi:insensitive="true">
-      <text
-         xml:space="preserve"
-         style="font-size:7.581px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;display:inline;stroke-width:0.189525"
-         x="24.869595"
-         y="15.855246"
-         id="text8604-4-8-6-9-3"><tspan
-           sodipodi:role="line"
-           id="tspan8602-9-5-0-0-9"
-           x="24.869595"
-           y="15.855246"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525">Rematch</tspan></text>
       <text
          xml:space="preserve"
          id="text968"
          style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect970);" />
+      <text
+         xml:space="preserve"
+         id="text910-3-1"
+         style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect912-4-8);display:inline;"
+         x="27.862484"
+         y="0"
+         transform="translate(-3.5050037,3.5353924)"><tspan
+           x="22.447151"
+           y="9.6554651"><tspan
+             style="font-size:2.82222px;text-align:center;text-anchor:middle">Rematch </tspan><tspan> </tspan></tspan><tspan
+           style="visibility:hidden"
+           x="0.0546875"
+           y="33.583199"><tspan
+             dx="0 7.3897061 6.4233603 6.6972446 6.6972427 6.3045044 5.5138588 4.1702728 2.9042091 6.4233589">Connection</tspan></tspan></text>
     </g>
     <g
        inkscape:groupmode="layer"
@@ -430,21 +548,24 @@
        sodipodi:insensitive="true">
       <text
          xml:space="preserve"
-         style="font-size:7.58099px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;stroke-width:0.189525"
-         x="25.104332"
-         y="14.975505"
-         id="text8604"><tspan
-           sodipodi:role="line"
-           id="tspan8602"
-           x="25.104332"
-           y="14.975505"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525">Create</tspan></text>
+         id="text910-3-1-3"
+         style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect912-4-8-5);display:inline;"
+         x="27.862484"
+         y="0"
+         transform="translate(-3.4828237,3.3348094)"><tspan
+           x="23.966437"
+           y="9.6554651"><tspan
+             style="font-size:2.82222px;text-align:center;text-anchor:middle">Create </tspan><tspan> </tspan></tspan><tspan
+           style="visibility:hidden"
+           x="0.0546875"
+           y="33.583199"><tspan
+             dx="0 7.3897061 6.4233603 6.6972446 6.6972427 6.3045044 5.5138588 4.1702728 2.9042091 6.4233589">Connection</tspan></tspan></text>
     </g>
     <g
        inkscape:groupmode="layer"
        id="layer6"
        inkscape:label="exit"
-       style="display:none"
+       style="display:inline"
        sodipodi:insensitive="true">
       <text
          xml:space="preserve"
@@ -470,22 +591,26 @@
            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525" /></text>
       <text
          xml:space="preserve"
-         style="font-size:7.581px;line-height:1.25;font-family:'Javanese Text';-inkscape-font-specification:'Javanese Text';text-align:center;text-anchor:middle;display:inline;stroke-width:0.189525"
-         x="23.469069"
-         y="15.443786"
-         id="text8604-4"><tspan
-           sodipodi:role="line"
-           id="tspan8602-9"
-           x="23.469069"
-           y="15.443786"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-align:center;text-anchor:middle;fill:#000000;stroke-width:0.189525">Exit</tspan></text>
+         id="text910-3-1-3-1"
+         style="font-size:10.5833px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:sans-serif;white-space:pre;shape-inside:url(#rect912-4-8-5-0);display:inline;"
+         x="27.862484"
+         y="0"
+         transform="translate(-3.4369314,3.3864653)"><tspan
+           x="25.968036"
+           y="9.6554651"><tspan
+             style="font-size:2.82222px;text-align:center;text-anchor:middle">Exit </tspan><tspan> </tspan></tspan><tspan
+           style="visibility:hidden"
+           x="0.0546875"
+           y="33.583199"><tspan
+             dx="0 7.3897061 6.4233603 6.6972446 6.6972427 6.3045044 5.5138588 4.1702728 2.9042091 6.4233589">Connection</tspan></tspan></text>
     </g>
   </g>
   <g
      inkscape:label="glassLayer"
      inkscape:groupmode="layer"
      id="layer1"
-     style="display:inline">
+     style="display:inline"
+     sodipodi:insensitive="true">
     <path
        style="display:inline;opacity:0.45;fill:#ffffff;fill-opacity:1;stroke-width:1"
        id="rect833-6"
@@ -496,7 +621,7 @@
        clip-path="url(#clipPath8423-4)"
        sodipodi:type="rect"
        d="M 7.4650294,6.0476193 H 37.466888 c 0.471147,0 0.850446,0.3792991 0.850446,0.8504464 V 19.84375 c 0,0.471147 -0.379299,0.850446 -0.850446,0.850446 H 7.4650294 c -0.4711473,0 -0.8504464,-0.379299 -0.8504464,-0.850446 V 6.8980657 c 0,-0.4711473 0.3792991,-0.8504464 0.8504464,-0.8504464 z"
-       transform="matrix(1.1040051,0,0,1.0241301,0.08039117,-0.57896646)"
+       transform="matrix(1.2017884,0,0,0.52025808,-1.5993291,5.2356772)"
        mask="url(#mask8544)"
        ry="0.8504464" />
   </g>
@@ -515,12 +640,34 @@
        y="-9.4406357"
        clip-path="url(#clipPath953)"
        mask="url(#mask8271)"
-       transform="matrix(1.1346452,0,0,1.0525532,-11.061674,15.550919)"
+       transform="matrix(1.2351423,0,0,0.53469703,-13.728234,13.429879)"
        sodipodi:type="rect"
        ry="0.87342685"
        inkscape:path-effect="#path-effect957"
        d="m 17.129227,-9.4406357 h 29.099799 c 0.483879,0 0.873427,0.3895484 0.873427,0.8734269 V 3.9369989 c 0,0.4838785 -0.389548,0.8734269 -0.873427,0.8734269 H 17.129227 c -0.483878,0 -0.873427,-0.3895484 -0.873427,-0.8734269 V -8.5672088 c 0,-0.4838785 0.389549,-0.8734269 0.873427,-0.8734269 z" />
   </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="glass"
+     style="display:none"
+     sodipodi:insensitive="true">
+    <g
+       inkscape:groupmode="layer"
+       id="g1005"
+       inkscape:label="lol"
+       style="display:none">
+      <rect
+         style="display:inline;opacity:0.3;fill:url(#linearGradient1001);fill-opacity:1;stroke-width:0.856612"
+         id="rect993"
+         width="12.431972"
+         height="45.418991"
+         x="-19.595953"
+         y="-8.3169174"
+         transform="matrix(-0.62249492,-0.78262385,0.97792598,-0.20895157,0,0)"
+         clip-path="url(#clipPath1056)" />
+    </g>
+  </g>
   <script
      id="mesh_polyfill"
      type="text/javascript">

Qwixx/frontend/inkScape/toDo.txt

@@ -10,6 +10,6 @@ change the color of the outter perimeter of the dice's gradient (gradient is set
 create some colored die pngs - use them in decoration. 15oct20
 
 ## Buttons
-1. 20OCT20 fix scaling on buttons and positioning of text
-2. create skewed version of button (layers: border, glasslayer and colors)
+~~1. 20OCT20 fix scaling on buttons and positioning of text~~
+~~2. create skewed version of button (layers: border, glasslayer and colors)~~
 3. use new buttons for the different button layouts in section C for each screen of the game