RustyStriker/Klooni1010
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Allow customizing both button image color and text

Browse source
This commit is contained in:
Lonami Exo 2017-05-07 15:40:13 +02:00
parent 5281be4dd4
commit fbff065a8d
10 changed files with 240 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
android/assets/themes/bandw.theme
View file

@ -3,6 +3,7 @@
"price": 20,
"colors": {
"background": "0a0a0aff",
"foreground": "f0f0f0ff",
"buttons": [
"4d4d4dff",
"4d4d4dff",
@ -18,7 +19,8 @@
"current_score": "b3b3b3ff",
"high_score": "f9f9f9ff",
"bonus": "f9f9f9ff",
"band": "4d4d4dff"
"band": "4d4d4dff",
"text": "f0f0f0ff"
},
"cell_texture": "basic.png"
}

4
android/assets/themes/dark.theme
View file

@ -3,6 +3,7 @@
"price": 0,
"colors": {
"background": "333333ff",
"foreground": "ddddddff",
"buttons": [
"03c13dff",
"007da4ff",
@ -18,7 +19,8 @@
"current_score": "c83737ff",
"high_score": "d400aaff",
"bonus": "e3e3e3ff",
"band": "2b5ccfff"
"band": "2b5ccfff",
"text": "ffffffff"
},
"cell_texture": "basic.png"
}

4
android/assets/themes/default.theme
View file

@ -3,6 +3,7 @@
"price": 0,
"colors": {
"background": "ffffffff",
"foreground": "ffffffff",
"buttons": [
"00ff33ff",
"ffd700ff",
@ -18,7 +19,8 @@
"current_score": "ffcc00ff",
"high_score": "65d681ff",
"bonus": "4d4d4dff",
"band": "87ceebff"
"band": "87ceebff",
"text": "111111ff"
},
"cell_texture": "basic.png"
}

22
core/src/io/github/lonamiwebs/klooni/Theme.java
View file

@ -24,12 +24,14 @@ public class Theme {
private int price;
public Color background;
public Color foreground;
public Color emptyCell;
public Color currentScore;
public Color highScore;
public Color bonus;
public Color bandColor;
public Color textColor;
private Color[] cells;
private Color[] buttons;
@ -84,6 +86,20 @@ public class Theme {
return new Theme().update(handle);
}
// Used to determine the best foreground color (black or white) given a background color
// Formula took from http://alienryderflex.com/hsp.html
// Not used yet, but may be useful
private final static double BRIGHTNESS_CUTOFF = 0.5;
public static boolean shouldUseWhite(Color color) {
double brightness = Math.sqrt(
color.r * color.r * .299 +
color.g * color.g * .587 +
color.b * color.b * .114);
return brightness < BRIGHTNESS_CUTOFF;
}
//endregion
//region Theme updating
@ -105,8 +121,9 @@ public class Theme {
price = json.getInt("price");
JsonValue colors = json.get("colors");
background = new Color( // Java won't allow unsigned integers, we need to use Long
(int)Long.parseLong(colors.getString("background"), 16));
// Java won't allow unsigned integers, we need to use Long
background = new Color((int)Long.parseLong(colors.getString("background"), 16));
foreground = new Color((int)Long.parseLong(colors.getString("foreground"), 16));
JsonValue buttonColors = colors.get("buttons");
buttons = new Color[buttonColors.size];
@ -125,6 +142,7 @@ public class Theme {
highScore = new Color((int)Long.parseLong(colors.getString("high_score"), 16));
bonus = new Color((int)Long.parseLong(colors.getString("bonus"), 16));
bandColor = new Color((int)Long.parseLong(colors.getString("band"), 16));
textColor = new Color((int)Long.parseLong(colors.getString("text"), 16));
emptyCell = new Color((int)Long.parseLong(colors.getString("empty_cell"), 16));

2
core/src/io/github/lonamiwebs/klooni/actors/Band.java
View file

@ -65,9 +65,11 @@ public class Band extends Actor {
scoreLabel.setBounds(x + scoreBounds.x, y + scoreBounds.y, scoreBounds.width, scoreBounds.height);
scoreLabel.setText(Integer.toString(scorer.getCurrentScore()));
scoreLabel.setColor(Klooni.theme.textColor);
scoreLabel.draw(batch, parentAlpha);
infoLabel.setBounds(x + infoBounds.x, y + infoBounds.y, infoBounds.width, infoBounds.height);
infoLabel.setColor(Klooni.theme.textColor);
infoLabel.draw(batch, parentAlpha);
}

1
core/src/io/github/lonamiwebs/klooni/actors/MoneyBuyBand.java
View file

@ -182,6 +182,7 @@ public class MoneyBuyBand extends Table {
}
}
setColor(Klooni.theme.bandColor);
infoLabel.setColor(Klooni.theme.textColor);
super.draw(batch, parentAlpha);
}

2
core/src/io/github/lonamiwebs/klooni/actors/SoftButton.java
View file

@ -1,5 +1,6 @@
package io.github.lonamiwebs.klooni.actors;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.utils.Drawable;
@ -44,6 +45,7 @@ public class SoftButton extends ImageButton {
Klooni.theme.updateStyle(style, styleIndex);
style.imageUp = image;
getImage().setColor(Klooni.theme.foreground);
super.draw(batch, parentAlpha);
}

26
core/src/io/github/lonamiwebs/klooni/actors/ThemeCard.java
View file

@ -30,12 +30,6 @@ public class ThemeCard extends Actor {
//endregion
//region Static members
private final static double BRIGHTNESS_CUTOFF = 0.5;
//endregion
//region Constructor
public ThemeCard(final Klooni game, final GameLayout layout, final Theme theme) {
@ -48,9 +42,8 @@ public class ThemeCard extends Actor {
priceLabel = new Label("", labelStyle);
nameLabel = new Label(theme.getDisplay(), labelStyle);
Color labelColor = shouldUseWhite(theme.background) ? Color.WHITE : Color.BLACK;
priceLabel.setColor(labelColor);
nameLabel.setColor(labelColor);
priceLabel.setColor(theme.textColor);
nameLabel.setColor(theme.textColor);
priceBounds = new Rectangle();
nameBounds = new Rectangle();
@ -112,19 +105,4 @@ public class ThemeCard extends Actor {
}
//endregion
//region Private methods
// Used to determine the best foreground color (black or white) given a background color
// Formula took from http://alienryderflex.com/hsp.html
private static boolean shouldUseWhite(Color color) {
double brightness = Math.sqrt(
color.r * color.r * .299 +
color.g * color.g * .587 +
color.b * color.b * .114);
return brightness < BRIGHTNESS_CUTOFF;
}
//endregion
}

4
themes/generate_theme.py
View file

@ -16,6 +16,7 @@ template = '''{{
"price": {price},
"colors": {{
"background": "{background}",
"foreground": "{foreground}",
"buttons": [
"{button_0}",
"{button_1}",
@ -31,7 +32,8 @@ template = '''{{
"current_score": "{current_score}",
"high_score": "{high_score}",
"bonus": "{bonus}",
"band": "{band}"
"band": "{band}",
"text": "{text}"
}},
"cell_texture": "{cell_tex}"
}}

421
themes/template.svg
View file

@ -1,42 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="800"
height="700"
viewBox="0 0 800.00001 700.00001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="template.svg">
id="svg2"
viewBox="0 0 800.00001 700.00001"
height="746.66669"
width="853.33331">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#141414"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="327.2357"
inkscape:cy="279.98635"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="744"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px" />
<metadata
id="metadata7">
<rdf:RDF>
@ -50,228 +25,234 @@
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-352.36216)">
transform="translate(0,-352.36216)"
id="layer1">
<g
transform="translate(0,-199.99998)"
style="fill:#e3e3e3;fill-opacity:1"
id="export_empty_cell"
style="fill:#e3e3e3;fill-opacity:1">
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#e3e3e3;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
y="552.36218"
x="400"
height="700"
width="400"
id="rect4260"
style="opacity:1;fill:#e3e3e3;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#7988bf;fill-opacity:1"
id="export_cell_0"
transform="translate(0,-199.99998)">
<rect
y="570.0614"
x="431.72415"
height="72.314049"
width="68.965515"
id="rect4262"
style="opacity:1;fill:#7988bf;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#98dc53;fill-opacity:1"
id="export_cell_1"
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#98dc53;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4264"
width="124.13792"
height="130.16528"
x="434.48279"
y="682.87128" />
</g>
<g
style="fill:#4cd4ae;fill-opacity:1"
id="export_cell_2"
transform="translate(0,-199.99998)">
<rect
y="587.41681"
x="597.24127"
height="176.44627"
width="168.27585"
id="rect4266"
style="opacity:1;fill:#4cd4ae;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#57cb84;fill-opacity:1"
id="export_cell_7"
transform="translate(0,-199.99998)">
<path
id="path4268"
d="m 625.53912,1114.5697 v 116.5837 h 118.01372 v -58.292 H 684.5469 v -58.2917 z"
style="opacity:1;fill:#57cb84;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#5abee2;fill-opacity:1"
id="export_cell_8"
transform="translate(0,-199.99998)">
<path
id="path4270"
d="m 435.54908,1048.0408 v 177.9444 H 605.2538 V 1166.671 H 492.11671 v -118.6302 z"
style="opacity:1;fill:#5abee2;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#fec63d;fill-opacity:1"
id="export_cell_3"
transform="translate(0,-199.99998)">
<rect
y="937.41663"
x="671.724"
height="54.958675"
width="104.82758"
id="rect4272"
style="opacity:1;fill:#fec63d;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#ec9548;fill-opacity:1"
id="export_cell_4"
transform="translate(0,-199.99998)">
<rect
y="1027.0861"
x="531.03442"
height="54.958675"
width="162.75861"
id="rect4274"
style="opacity:1;fill:#ec9548;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#e66a82;fill-opacity:1"
id="export_cell_5"
transform="translate(0,-199.99998)">
<rect
y="917.16876"
x="415.17236"
height="66.528923"
width="228.9655"
id="rect4276"
style="opacity:1;fill:#e66a82;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#da6554;fill-opacity:1"
id="export_cell_6"
transform="translate(0,-199.99998)">
<rect
y="833.28448"
x="500.6897"
height="69.421486"
width="281.37927"
id="rect4278"
style="opacity:1;fill:#da6554;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(3.030458,-199.99998)"
style="fill:#ffffff;fill-opacity:1"
id="export_background">
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.78836012;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4147"
width="400"
height="700"
x="400"
x="0"
y="552.36218" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_0"
style="fill:#7988bf;fill-opacity:1">
<rect
style="opacity:1;fill:#7988bf;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4262"
width="68.965515"
height="72.314049"
x="431.72415"
y="570.0614" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_1"
style="fill:#98dc53;fill-opacity:1">
<rect
y="682.87128"
x="434.48279"
height="130.16528"
width="124.13792"
id="rect4264"
style="opacity:1;fill:#98dc53;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_2"
style="fill:#4cd4ae;fill-opacity:1">
<rect
style="opacity:1;fill:#4cd4ae;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4266"
width="168.27585"
height="176.44627"
x="597.24127"
y="587.41681" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_7"
style="fill:#57cb84;fill-opacity:1">
<path
style="opacity:1;fill:#57cb84;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 625.53912,1114.5697 0,116.5837 118.01372,0 0,-58.292 -59.00594,0 0,-58.2917 -59.00778,0 z"
id="path4268"
inkscape:connector-curvature="0" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_8"
style="fill:#5abee2;fill-opacity:1">
<path
style="opacity:1;fill:#5abee2;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 435.54908,1048.0408 0,177.9444 169.70472,0 0,-59.3142 -113.13709,0 0,-118.6302 -56.56763,0 z"
id="path4270"
inkscape:connector-curvature="0" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_3"
style="fill:#fec63d;fill-opacity:1">
<rect
style="opacity:1;fill:#fec63d;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4272"
width="104.82758"
height="54.958675"
x="671.724"
y="937.41663" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_4"
style="fill:#ec9548;fill-opacity:1">
<rect
style="opacity:1;fill:#ec9548;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4274"
width="162.75861"
height="54.958675"
x="531.03442"
y="1027.0861" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_5"
style="fill:#e66a82;fill-opacity:1">
<rect
style="opacity:1;fill:#e66a82;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4276"
width="228.9655"
height="66.528923"
x="415.17236"
y="917.16876" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_cell_6"
style="fill:#da6554;fill-opacity:1">
<rect
style="opacity:1;fill:#da6554;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4278"
width="281.37927"
height="69.421486"
x="500.6897"
y="833.28448" />
</g>
<g
id="export_background"
style="fill:#ffffff;fill-opacity:1"
transform="translate(3.030458,-199.99998)">
<rect
y="552.36218"
x="0"
height="700"
width="400"
id="rect4147"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.78836012;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(0,-199.99998)"
style="fill:#00f230;fill-opacity:1"
id="export_button_0"
style="fill:#00f230;fill-opacity:1">
<rect
style="opacity:1;fill:#00f230;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
transform="translate(0,-199.99998)">
<path
id="rect4149"
width="351.42859"
height="108.57145"
x="26.857031"
y="798.76837" />
d="M 26.857031,798.76837 H 378.28562 V 907.33982 H 26.857031 Z"
style="opacity:1;fill:#00f230;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(0,-199.99998)"
style="fill:#f2cc00;fill-opacity:1"
id="export_button_1"
style="fill:#f2cc00;fill-opacity:1">
transform="translate(0,-199.99998)">
<rect
y="921.62555"
x="29.714174"
height="108.57145"
width="105.7143"
style="opacity:1;fill:#f2cc00;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4151"
style="opacity:1;fill:#f2cc00;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_button_2"
style="fill:#2182ef;fill-opacity:1">
<rect
style="opacity:1;fill:#2182ef;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4153"
width="105.7143"
height="108.57145"
x="146.85712"
x="29.714174"
y="921.62555" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_button_3"
style="fill:#ce4444;fill-opacity:1">
style="fill:#2182ef;fill-opacity:1"
id="export_button_2"
transform="translate(0,-199.99998)">
<rect
y="921.62555"
x="266.85712"
x="146.85712"
height="108.57145"
width="105.7143"
id="rect4155"
style="opacity:1;fill:#ce4444;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
id="rect4153"
style="opacity:1;fill:#2182ef;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_current_score"
style="fill:#ffcc00;fill-opacity:1">
<path
inkscape:connector-curvature="0"
id="path4181"
d="m 106.16769,680.7189 a 20.572971,33.748715 52.281084 0 0 -0.3613,0.23047 l -3.5703,0 a 31.071428,74.892753 0 0 0 0.207,2.32227 20.572971,33.748715 52.281084 0 0 -17.67971,31.1875 20.572971,33.748715 52.281084 0 0 27.33211,9.97851 31.071428,74.892753 0 0 0 16.5234,18.62501 19.482912,22.977165 0 0 0 -14.6016,18.60157 l 38.4278,0 a 19.482912,22.977165 0 0 0 -15.1055,-18.75 31.071428,74.892753 0 0 0 16.3164,-18.47853 33.748715,20.572971 37.718916 0 0 27.3379,-9.97656 33.748715,20.572971 37.718916 0 0 -17.6738,-31.1836 31.071428,74.892753 0 0 0 0.2011,-2.32617 l -3.5703,0 a 33.748715,20.572971 37.718916 0 0 -0.3613,-0.23047 l -0.033,0.23047 -53.3555,0 -0.033,-0.23047 z m -3.2187,8.00977 a 31.071428,74.892753 0 0 0 7.5312,32.01562 16.78108,29.001088 59.891063 0 1 -22.259706,-8.39257 16.78108,29.001088 59.891063 0 1 14.728506,-23.62305 z m 59.8652,0.004 a 29.001088,16.78108 30.108937 0 1 14.7227,23.61915 29.001088,16.78108 30.108937 0 1 -22.2637,8.39062 31.071428,74.892753 0 0 0 7.541,-32.00977 z m -29.9355,4.67774 4.1054,8.31836 9.1797,1.33398 -6.6426,6.47461 1.5684,9.14453 -8.2109,-4.3164 -8.211,4.3164 1.5684,-9.14453 -6.6445,-6.47461 9.1816,-1.33398 4.1055,-8.31836 z"
style="opacity:1;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_high_score"
style="fill:#65d681;fill-opacity:1">
<path
style="opacity:1;fill:#65d681;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 229.54476,680.7189 a 20.572971,33.748715 52.281084 0 0 -0.3613,0.23047 l -3.5703,0 a 31.071428,74.892753 0 0 0 0.207,2.32227 20.572971,33.748715 52.281084 0 0 -17.6797,31.1875 20.572971,33.748715 52.281084 0 0 27.3321,9.97851 31.071428,74.892753 0 0 0 16.5234,18.62501 19.482912,22.977165 0 0 0 -14.6015,18.60157 l 38.4277,0 a 19.482912,22.977165 0 0 0 -15.1055,-18.75 31.071428,74.892753 0 0 0 16.3164,-18.47853 33.748715,20.572971 37.718916 0 0 27.3379,-9.97656 33.748715,20.572971 37.718916 0 0 -17.6738,-31.1836 31.071428,74.892753 0 0 0 0.2012,-2.32617 l -3.5704,0 a 33.748715,20.572971 37.718916 0 0 -0.3613,-0.23047 l -0.033,0.23047 -53.3555,0 -0.033,-0.23047 z m -3.2187,8.00977 a 31.071428,74.892753 0 0 0 7.5312,32.01562 16.78108,29.001088 59.891063 0 1 -22.2597,-8.39257 16.78108,29.001088 59.891063 0 1 14.7285,-23.62305 z m 59.8652,0.004 a 29.001088,16.78108 30.108937 0 1 14.7227,23.61915 29.001088,16.78108 30.108937 0 1 -22.2637,8.39062 31.071428,74.892753 0 0 0 7.541,-32.00977 z m -29.9355,4.67774 4.1054,8.31836 9.1797,1.33398 -6.6425,6.47461 1.5683,9.14453 -8.2109,-4.3164 -8.211,4.3164 1.5684,-9.14453 -6.6445,-6.47461 9.1816,-1.33398 4.1055,-8.31836 z"
id="path4233"
inkscape:connector-curvature="0" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_band"
style="fill:#87ceeb;fill-opacity:1">
style="fill:#ce4444;fill-opacity:1"
id="export_button_3"
transform="translate(0,-199.99998)">
<rect
ry="4.1303067"
y="572.36218"
x="0"
height="80"
width="400"
id="rect4174"
style="opacity:1;fill:#87ceeb;fill-opacity:1;stroke:none;stroke-width:25;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
style="opacity:1;fill:#ce4444;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4155"
width="105.7143"
height="108.57145"
x="266.85712"
y="921.62555" />
</g>
<g
transform="translate(0,-199.99998)"
id="export_bonus"
style="fill:#4d4d4d;fill-opacity:1">
style="fill:#ffcc00;fill-opacity:1"
id="export_current_score"
transform="translate(0,-199.99998)">
<path
inkscape:connector-curvature="0"
id="rect4180"
d="m 198.50901,1079.2067 c -6.43568,0 -11.61524,5.1815 -11.61524,11.6172 l 0,11.6172 -11.61718,0 c -6.43569,0 -11.61719,5.1815 -11.61719,11.6172 l 0,10.1015 c 0,6.4357 5.1815,11.6172 11.61719,11.6172 l 11.61718,0 0,11.6152 c 0,6.4357 5.17956,11.6172 11.61524,11.6172 l 10.10156,0 c 6.43568,0 11.61719,-5.1815 11.61719,-11.6172 l 0,-11.6152 11.61719,0 c 6.43568,0 11.61718,-5.1815 11.61718,-11.6172 l 0,-10.1015 c 0,-6.4357 -5.1815,-11.6172 -11.61718,-11.6172 l -11.61719,0 0,-11.6172 c 0,-6.4357 -5.18151,-11.6172 -11.61719,-11.6172 l -10.10156,0 z"
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:7.55499983;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
style="opacity:1;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 106.16769,680.7189 a 20.572971,33.748715 52.281084 0 0 -0.3613,0.23047 h -3.5703 a 31.071428,74.892753 0 0 0 0.207,2.32227 20.572971,33.748715 52.281084 0 0 -17.67971,31.1875 20.572971,33.748715 52.281084 0 0 27.33211,9.97851 31.071428,74.892753 0 0 0 16.5234,18.62501 19.482912,22.977165 0 0 0 -14.6016,18.60157 h 38.4278 a 19.482912,22.977165 0 0 0 -15.1055,-18.75 31.071428,74.892753 0 0 0 16.3164,-18.47853 33.748715,20.572971 37.718916 0 0 27.3379,-9.97656 33.748715,20.572971 37.718916 0 0 -17.6738,-31.1836 31.071428,74.892753 0 0 0 0.2011,-2.32617 h -3.5703 a 33.748715,20.572971 37.718916 0 0 -0.3613,-0.23047 l -0.033,0.23047 h -53.3555 l -0.033,-0.23047 z m -3.2187,8.00977 a 31.071428,74.892753 0 0 0 7.5312,32.01562 16.78108,29.001088 59.891063 0 1 -22.259706,-8.39257 16.78108,29.001088 59.891063 0 1 14.728506,-23.62305 z m 59.8652,0.004 a 29.001088,16.78108 30.108937 0 1 14.7227,23.61915 29.001088,16.78108 30.108937 0 1 -22.2637,8.39062 31.071428,74.892753 0 0 0 7.541,-32.00977 z m -29.9355,4.67774 4.1054,8.31836 9.1797,1.33398 -6.6426,6.47461 1.5684,9.14453 -8.2109,-4.3164 -8.211,4.3164 1.5684,-9.14453 -6.6445,-6.47461 9.1816,-1.33398 z"
id="path4181" />
</g>
<g
style="fill:#65d681;fill-opacity:1"
id="export_high_score"
transform="translate(0,-199.99998)">
<path
id="path4233"
d="m 229.54476,680.7189 a 20.572971,33.748715 52.281084 0 0 -0.3613,0.23047 h -3.5703 a 31.071428,74.892753 0 0 0 0.207,2.32227 20.572971,33.748715 52.281084 0 0 -17.6797,31.1875 20.572971,33.748715 52.281084 0 0 27.3321,9.97851 31.071428,74.892753 0 0 0 16.5234,18.62501 19.482912,22.977165 0 0 0 -14.6015,18.60157 h 38.4277 a 19.482912,22.977165 0 0 0 -15.1055,-18.75 31.071428,74.892753 0 0 0 16.3164,-18.47853 33.748715,20.572971 37.718916 0 0 27.3379,-9.97656 33.748715,20.572971 37.718916 0 0 -17.6738,-31.1836 31.071428,74.892753 0 0 0 0.2012,-2.32617 h -3.5704 a 33.748715,20.572971 37.718916 0 0 -0.3613,-0.23047 l -0.033,0.23047 h -53.3555 l -0.033,-0.23047 z m -3.2187,8.00977 a 31.071428,74.892753 0 0 0 7.5312,32.01562 16.78108,29.001088 59.891063 0 1 -22.2597,-8.39257 16.78108,29.001088 59.891063 0 1 14.7285,-23.62305 z m 59.8652,0.004 a 29.001088,16.78108 30.108937 0 1 14.7227,23.61915 29.001088,16.78108 30.108937 0 1 -22.2637,8.39062 31.071428,74.892753 0 0 0 7.541,-32.00977 z m -29.9355,4.67774 4.1054,8.31836 9.1797,1.33398 -6.6425,6.47461 1.5683,9.14453 -8.2109,-4.3164 -8.211,4.3164 1.5684,-9.14453 -6.6445,-6.47461 9.1816,-1.33398 z"
style="opacity:1;fill:#65d681;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#87ceeb;fill-opacity:1"
id="export_band"
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#87ceeb;fill-opacity:1;stroke:none;stroke-width:25;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4174"
width="400"
height="80"
x="0"
y="572.36218"
ry="4.1303067" />
</g>
<g
style="fill:#4d4d4d;fill-opacity:1"
id="export_bonus"
transform="translate(0,-199.99998)">
<path
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:7.55499983;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 198.50901,1079.2067 c -6.43568,0 -11.61524,5.1815 -11.61524,11.6172 v 11.6172 h -11.61718 c -6.43569,0 -11.61719,5.1815 -11.61719,11.6172 v 10.1015 c 0,6.4357 5.1815,11.6172 11.61719,11.6172 h 11.61718 v 11.6152 c 0,6.4357 5.17956,11.6172 11.61524,11.6172 h 10.10156 c 6.43568,0 11.61719,-5.1815 11.61719,-11.6172 v -11.6152 h 11.61719 c 6.43568,0 11.61718,-5.1815 11.61718,-11.6172 v -10.1015 c 0,-6.4357 -5.1815,-11.6172 -11.61718,-11.6172 h -11.61719 v -11.6172 c 0,-6.4357 -5.18151,-11.6172 -11.61719,-11.6172 z"
id="rect4180" />
</g>
<g
style="fill:#ffffff;fill-opacity:1"
id="export_foreground">
<path
id="path852"
d="m 240.30098,653.05414 c 0,8.10538 -63.17523,44.57962 -70.19469,40.52692 -7.01947,-4.05269 -7.01947,-77.00116 0,-81.05385 7.01946,-4.05269 70.19469,32.42154 70.19469,40.52693 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.9375;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
style="fill:#1a1a1a;fill-opacity:1"
id="export_text">
<path
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.75219417;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 178.42743,388.9247 v 18.75 9.375 18.75 h 9.375 v -18.75 h 9.375 v 18.75 h 9.375 v -18.75 -9.375 -18.75 h -9.375 v 18.75 h -9.375 v -18.75 z m 33.77014,0 v 46.875 h 9.375 v -46.875 z"
id="rect859" />
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB