From 18759929710746d45d0f69e4f09205db3ddc74af Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 18 Jan 2023 12:00:24 +0100
Subject: [PATCH] snes button icons
---
public/icon/dpad-d.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-dl.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-dr.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-l.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-r.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-u.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-ul.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad-ur.svg | 179 +++++++++++++++++++++++++++++++++++++
public/icon/dpad.svg | 179 +++++++++++++++++++++++++++++++++++++
resources/sass/common.scss | 119 ++++++++++++++++++++++++
10 files changed, 1730 insertions(+)
create mode 100644 public/icon/dpad-d.svg
create mode 100644 public/icon/dpad-dl.svg
create mode 100644 public/icon/dpad-dr.svg
create mode 100644 public/icon/dpad-l.svg
create mode 100644 public/icon/dpad-r.svg
create mode 100644 public/icon/dpad-u.svg
create mode 100644 public/icon/dpad-ul.svg
create mode 100644 public/icon/dpad-ur.svg
create mode 100644 public/icon/dpad.svg
diff --git a/public/icon/dpad-d.svg b/public/icon/dpad-d.svg
new file mode 100644
index 0000000..5643bd2
--- /dev/null
+++ b/public/icon/dpad-d.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-d.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-dl.svg b/public/icon/dpad-dl.svg
new file mode 100644
index 0000000..79aefea
--- /dev/null
+++ b/public/icon/dpad-dl.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-dl.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-dr.svg b/public/icon/dpad-dr.svg
new file mode 100644
index 0000000..df5bbb8
--- /dev/null
+++ b/public/icon/dpad-dr.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-dr.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-l.svg b/public/icon/dpad-l.svg
new file mode 100644
index 0000000..6da61e2
--- /dev/null
+++ b/public/icon/dpad-l.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-l.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-r.svg b/public/icon/dpad-r.svg
new file mode 100644
index 0000000..af6ba8c
--- /dev/null
+++ b/public/icon/dpad-r.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-r.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-u.svg b/public/icon/dpad-u.svg
new file mode 100644
index 0000000..92430f8
--- /dev/null
+++ b/public/icon/dpad-u.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-u.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-ul.svg b/public/icon/dpad-ul.svg
new file mode 100644
index 0000000..c1bab1b
--- /dev/null
+++ b/public/icon/dpad-ul.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-ul.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-variation-settings:normal;opacity:1;vector-effect:none;stroke-linecap:butt;stroke-dashoffset:0;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad-ur.svg b/public/icon/dpad-ur.svg
new file mode 100644
index 0000000..4d4387d
--- /dev/null
+++ b/public/icon/dpad-ur.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad-ur.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="16"
+ inkscape:cx="48.8125"
+ inkscape:cy="31.3125"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#c1121c;fill-opacity:1;stroke:#c1121c;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/public/icon/dpad.svg b/public/icon/dpad.svg
new file mode 100644
index 0000000..f013f75
--- /dev/null
+++ b/public/icon/dpad.svg
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="48"
+ height="48"
+ viewBox="0 0 12.7 12.7"
+ version="1.1"
+ id="svg5"
+ inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+ sodipodi:docname="dpad.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:document-units="mm"
+ showgrid="true"
+ units="px"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ inkscape:zoom="22.627417"
+ inkscape:cx="36.902135"
+ inkscape:cy="16.882174"
+ inkscape:window-width="3840"
+ inkscape:window-height="2066"
+ inkscape:window-x="3829"
+ inkscape:window-y="-11"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid1462" />
+ <sodipodi:guide
+ position="6.35,12.7"
+ orientation="1,0"
+ id="guide1464" />
+ <sodipodi:guide
+ position="0,6.35"
+ orientation="0,-1"
+ id="guide1466" />
+ <sodipodi:guide
+ position="4.4979167,6.6145833"
+ orientation="1,0"
+ id="guide1468" />
+ <sodipodi:guide
+ position="8.2020833,6.8791667"
+ orientation="1,0"
+ id="guide1470" />
+ <sodipodi:guide
+ position="7.14375,8.2020833"
+ orientation="0,-1"
+ id="guide1472" />
+ <sodipodi:guide
+ position="6.8791667,4.4979167"
+ orientation="0,-1"
+ id="guide1474" />
+ <sodipodi:guide
+ position="1.5875,6.35"
+ orientation="1,0"
+ id="guide1476" />
+ <sodipodi:guide
+ position="11.1125,6.0854167"
+ orientation="1,0"
+ id="guide1478" />
+ <sodipodi:guide
+ position="7.9375,11.1125"
+ orientation="0,-1"
+ id="guide1480" />
+ <sodipodi:guide
+ position="6.6145833,1.5875"
+ orientation="0,-1"
+ id="guide1482" />
+ </sodipodi:namedview>
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ id="layer1">
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#4a4a4a;stroke-width:0.264583;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path846"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="6.0854168"
+ inkscape:label="Circle" />
+ <path
+ style="fill:#4a4a4a;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="M 4.4979166,1.8520833 4.7624999,1.5875 h 3.175 L 8.2020832,1.8520833 V 4.4979166 H 10.847917 L 11.1125,4.7624999 v 3.175 L 10.847917,8.2020832 H 8.2020832 V 10.847917 L 7.9374999,11.1125 h -3.175 L 4.4979166,10.847917 V 8.2020832 H 1.8520833 L 1.5875,7.9374999 v -3.175 L 1.8520833,4.4979166 h 2.6458333 z"
+ id="path3425"
+ inkscape:label="Cross" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4284"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="35"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="0"
+ sodipodi:arg2="1.0471976"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 40,24 c 0,0.0866 -7.425,4.373428 -7.5,4.330127 -0.075,-0.0433 -0.075,-8.616953 0,-8.660254 C 32.575,19.626572 40,23.913397 40,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="-0.32328764"
+ inkscape:label="Right" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4288"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="35"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="1.5707963"
+ sodipodi:arg2="2.6179939"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,40 c -0.0866,0 -4.373428,-7.425 -4.330127,-7.5 0.0433,-0.075 8.616953,-0.075 8.660254,0 C 28.373428,32.575 24.086603,40 24,40 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="0.32328764"
+ inkscape:label="Down" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4292"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="13"
+ sodipodi:cy="24"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="3.1415927"
+ sodipodi:arg2="4.1887902"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 8,24 c 0,-0.0866 7.425,-4.373428 7.5,-4.330127 0.075,0.0433 0.075,8.616953 0,8.660254 C 15.425,28.373428 8,24.086603 8,24 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-x="0.3232878"
+ inkscape:label="Left" />
+ <path
+ sodipodi:type="star"
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4476"
+ inkscape:flatsided="true"
+ sodipodi:sides="3"
+ sodipodi:cx="24"
+ sodipodi:cy="13"
+ sodipodi:r1="5"
+ sodipodi:r2="2.5"
+ sodipodi:arg1="-1.5707963"
+ sodipodi:arg2="-0.52359878"
+ inkscape:rounded="0.01"
+ inkscape:randomized="0"
+ d="m 24,8 c 0.0866,0 4.373428,7.425 4.330127,7.5 -0.0433,0.075 -8.616953,0.075 -8.660254,0 C 19.626572,15.425 23.913397,8 24,8 Z"
+ transform="scale(0.26458333)"
+ inkscape:transform-center-y="-0.3232878"
+ inkscape:label="Up" />
+ <circle
+ style="fill:#b2b4b2;fill-opacity:1;stroke:#b2b4b2;stroke-width:0.264583;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4507"
+ cx="6.3499999"
+ cy="6.3499999"
+ r="1.0583333"
+ inkscape:label="Center" />
+ </g>
+</svg>
diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index c8528e1..83e5b90 100644
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -41,6 +41,125 @@ h1 {
}
}
+.snes-button-a,
+.snes-button-b,
+.snes-button-x,
+.snes-button-y {
+ display: inline-block;
+ width: 1.5em;
+ height: 0;
+ padding: .75em 0;
+ box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
+ border-radius: .75em;
+ font-size: 90%;
+ font-weight: bold;
+ text-align: center;
+ text-transform: uppercase;
+ line-height: 0;
+}
+.snes-button-a {
+ background: #c1121c;
+ color: white;
+}
+.snes-button-b {
+ background: #f7ba0b;
+ color: black;
+}
+.snes-button-x {
+ background: #00387b;
+ color: white;
+}
+.snes-button-y {
+ background: #007243;
+ color: white;
+}
+.snes-shoulder-l,
+.snes-shoulder-r {
+ display: inline-block;
+ width: 3em;
+ height: 0;
+ padding: .75em 0;
+ box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
+ border-radius: .75em;
+ font-size: 90%;
+ font-weight: bold;
+ text-align: center;
+ text-transform: uppercase;
+ line-height: 0;
+ background: #b2b4b2;
+ color: #54585a;
+}
+.snes-start,
+.snes-select {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ vertical-align: middle;
+ font-size: 50%;
+ text-transform: uppercase;
+
+ &::before {
+ display: inline-block;
+ content: '';
+ background: #54585a;
+ width: 2em;
+ height: 0.7em;
+ border-radius: 0.35em;
+ transform: rotate(-40deg);
+ margin-bottom: 0.75em;
+ border: thin solid black;
+ }
+}
+.snes-dpad,
+.snes-dpad-r,
+.snes-dpad-dr,
+.snes-dpad-d,
+.snes-dpad-dl,
+.snes-dpad-l,
+.snes-dpad-ul,
+.snes-dpad-u,
+.snes-dpad-ur {
+ display: inline-block;
+
+ &::before {
+ display: inline-block;
+ content: '';
+ width: 2em;
+ height: 2em;
+ margin-right: 0.5ex;
+ vertical-align: middle;
+ background-repeat: no-repeat;
+ background-size: contain;
+ }
+
+ &.compact {
+ position: relative;
+ > span {
+ display: none;
+ position: absolute;
+ left: -50%;
+ top: -125%;
+ background: $dark;
+ padding: 0.5ex 1ex;
+ white-space: nowrap;
+ }
+ &:active > span,
+ &:focus > span,
+ &:hover > span {
+ display: block;
+ }
+ }
+}
+.snes-dpad::before { background-image: url(/icon/dpad.svg); }
+.snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); }
+.snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); }
+.snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); }
+.snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); }
+.snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); }
+.snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); }
+.snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); }
+.snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); }
+
.spoiler {
border-radius: 0.5ex;
padding: 0 0.5ex;
--
2.39.5