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

Add a button to toggle between effects and themes shop

Browse source
This commit is contained in:
Lonami Exo 2017-07-18 10:32:32 +02:00
parent 7c9d4c9a99
commit 2c2b512742
10 changed files with 153 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
android/assets/ui/x0.75/effects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
android/assets/ui/x1.0/effects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
android/assets/ui/x1.25/effects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
android/assets/ui/x1.5/effects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
android/assets/ui/x2.0/effects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
android/assets/ui/x4.0/effects.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

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

@ -28,7 +28,7 @@ public class SkinLoader {
private static String[] ids = {
"play", "play_saved", "star", "stopwatch", "palette", "home", "replay",
"share", "sound_on", "sound_off", "snap_on", "snap_off", "issues", "credits",
"web", "back", "ok", "cancel", "power_off"
"web", "back", "ok", "cancel", "power_off", "effects"
};
private static float bestMultiplier;

148
core/src/io/github/lonamiwebs/klooni/screens/CustomizeScreen.java
View file

@ -49,6 +49,14 @@ class CustomizeScreen implements Screen {
private final Screen lastScreen;
private final Table table;
private final SoftButton toggleShopButton;
private final VerticalGroup shopGroup; // Showing available themes or effects
private final ScrollPane shopScroll;
final MoneyBuyBand buyBand;
private boolean showingEffectsShop;
private float themeDragStartX, themeDragStartY;
//endregion
@ -64,13 +72,11 @@ class CustomizeScreen implements Screen {
//region Constructor
CustomizeScreen(Klooni game, final Screen lastScreen) {
final GameLayout layout = new GameLayout();
this.game = game;
this.lastScreen = lastScreen;
stage = new Stage();
Table table = new Table();
table = new Table();
table.setFillParent(true);
stage.addActor(table);
@ -101,6 +107,22 @@ class CustomizeScreen implements Screen {
});
optionsGroup.addActor(soundButton);
// Toggle the current shop (themes or effects)
toggleShopButton = new SoftButton(2, "effects_texture");
toggleShopButton.addListener(new ChangeListener() {
@Override
public void changed(ChangeEvent event, Actor actor) {
showingEffectsShop = !showingEffectsShop;
if (showingEffectsShop) {
toggleShopButton.updateImage("palette_texture");
} else {
toggleShopButton.updateImage("effects_texture");
}
loadShop();
}
});
optionsGroup.addActor(toggleShopButton);
// Snap to grid on/off
final SoftButton snapButton = new SoftButton(
2, Klooni.shouldSnapToGrid() ? "snap_on_texture" : "snap_off_texture");
@ -139,66 +161,18 @@ class CustomizeScreen implements Screen {
table.add(new ScrollPane(optionsGroup))
.pad(20, 4, 12, 4).height(backButton.getHeight());
// Load all the available themes
final MoneyBuyBand buyBand = new MoneyBuyBand(game);
buyBand = new MoneyBuyBand(game);
table.row();
final VerticalGroup themesGroup = new VerticalGroup();
for (Theme theme : Theme.getThemes()) {
final ThemeCard card = new ThemeCard(game, layout, theme);
card.addListener(new InputListener() {
@Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
themeDragStartX = x;
themeDragStartY = y;
return true;
}
// We could actually rely on touchDragged not being called,
// but perhaps it would be hard for some people not to move
// their fingers even the slightest bit, so we use a custom
// drag limit
@Override
public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
x -= themeDragStartX;
y -= themeDragStartY;
float distSq = x * x + y * y;
if (distSq < DRAG_LIMIT_SQ) {
if (Klooni.isThemeBought(card.theme))
card.use();
else
buyBand.askBuy(card);
for (Actor a : themesGroup.getChildren()) {
ThemeCard c = (ThemeCard)a;
c.usedThemeUpdated();
}
}
}
});
themesGroup.addActor(card);
}
final ScrollPane themesScroll = new ScrollPane(themesGroup);
table.add(themesScroll).expand().fill();
// Load all the available themes as the default "shop"
shopGroup = new VerticalGroup();
shopScroll = new ScrollPane(shopGroup);
table.add(shopScroll).expand().fill();
loadShop();
// Show the current money row
table.row();
table.add(buyBand).expandX().fillX();
// Scroll to the currently selected theme
table.layout();
for (Actor a : themesGroup.getChildren()) {
ThemeCard c = (ThemeCard)a;
if (c.isUsed()) {
themesScroll.scrollTo(
c.getX(), c.getY() + c.getHeight(),
c.getWidth(), c.getHeight());
break;
}
c.usedThemeUpdated();
}
}
//endregion
@ -209,6 +183,66 @@ class CustomizeScreen implements Screen {
CustomizeScreen.this.game.transitionTo(lastScreen);
}
private void loadShop() {
final GameLayout layout = new GameLayout();
shopGroup.clear();
if (showingEffectsShop) {
// TODO Show the effects shop
} else {
// Showing themes shop otherwise
for (Theme theme : Theme.getThemes()) {
final ThemeCard card = new ThemeCard(game, layout, theme);
card.addListener(new InputListener() {
@Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
themeDragStartX = x;
themeDragStartY = y;
return true;
}
// We could actually rely on touchDragged not being called,
// but perhaps it would be hard for some people not to move
// their fingers even the slightest bit, so we use a custom
// drag limit
@Override
public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
x -= themeDragStartX;
y -= themeDragStartY;
float distSq = x * x + y * y;
if (distSq < DRAG_LIMIT_SQ) {
if (Klooni.isThemeBought(card.theme))
card.use();
else
buyBand.askBuy(card);
for (Actor a : shopGroup.getChildren()) {
ThemeCard c = (ThemeCard)a;
c.usedThemeUpdated();
}
}
}
});
shopGroup.addActor(card);
// Scroll to the currently selected theme
table.layout();
for (Actor a : shopGroup.getChildren()) {
ThemeCard c = (ThemeCard)a;
if (c.isUsed()) {
shopScroll.scrollTo(
c.getX(), c.getY() + c.getHeight(),
c.getWidth(), c.getHeight());
break;
}
c.usedThemeUpdated();
}
}
}
}
//endregion
//region Public methods

85
original-resources/buttons.svg
View file

@ -152,9 +152,9 @@
borderopacity="1"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-18.655028"
inkscape:cy="163.7511"
inkscape:zoom="0.5"
inkscape:cx="-85.026722"
inkscape:cy="8.3628693"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
@ -163,7 +163,7 @@
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
showguides="false"
showguides="true"
inkscape:guide-bbox="true"
units="px">
<inkscape:grid
@ -336,7 +336,7 @@
id="basic"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90"
transform="matrix(3.0000588,0,0,3.0000588,0,-2123.8991)">
transform="matrix(3.0000588,0,0,3.0000588,0,-2314.7845)">
<rect
ry="0"
y="966.36218"
@ -357,24 +357,24 @@
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#80ffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="128.69154"
y="836.78644"
x="6.3477864"
y="769.7121"
id="text4186"><tspan
sodipodi:role="line"
id="tspan4188"
x="128.69154"
y="836.78644"
x="6.3477864"
y="769.7121"
style="font-size:15.69341087px;line-height:1.25">buttons</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#80ffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="7.3185968"
y="769.04504"
y="578.15967"
id="text4190"><tspan
sodipodi:role="line"
id="tspan4192"
x="7.3185968"
y="769.04504"
y="578.15967"
style="font-size:15.69341087px;line-height:1.25">cells</tspan></text>
<g
id="g4261"
@ -849,17 +849,6 @@
d="M 379.99414,918.37268 C 374.40215,918.91924 350,944.40892 350,950.36291 c 0,6.35093 27.76479,34.92937 30.84961,31.75391 1.18344,-1.21822 1.90817,-10.39596 2.18359,-21.4082 h 24.72656 c 3.45752,0 6.24024,-2.78467 6.24024,-6.24219 v -8.20703 c 0,-3.45752 -2.78272,-6.24219 -6.24024,-6.24219 H 383.0332 c -0.27542,-11.01224 -1.00015,-20.18998 -2.18359,-21.4082 -0.19281,-0.19847 -0.48267,-0.27277 -0.85547,-0.23633 z"
style="opacity:1;fill:#ffffff;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>
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="13.435027"
y="587.79303"
id="text4291"><tspan
sodipodi:role="line"
id="tspan4293"
x="13.435027"
y="587.79303"
style="font-size:40px;line-height:1.25">measures</tspan></text>
<rect
rx="24"
y="623.88177"
@ -1126,7 +1115,7 @@
</g>
<g
id="bubble"
transform="matrix(3.0000588,0,0,3.0000588,-107.02664,-1645.0542)">
transform="matrix(3.0000588,0,0,3.0000588,-107.02664,-1835.9396)">
<rect
style="opacity:1;fill:none;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="rect4652"
@ -1144,7 +1133,7 @@
</g>
<g
id="ghost"
transform="translate(-46.651447)">
transform="translate(-46.651447,-190.88537)">
<rect
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:0.30000588;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4648"
@ -1183,7 +1172,8 @@
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.93750006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
id="drop">
id="drop"
transform="translate(0,-190.88537)">
<g
style="fill:#808080"
id="g4655"
@ -1206,5 +1196,50 @@
d="m 205.96784,806.0791 c 0,9.48058 -7.68553,17.16612 -17.16611,17.16612 -9.48059,0 -17.16612,-7.68553 -17.16612,-17.16612 0,-9.48059 17.16612,-30.83148 17.16612,-30.83148 0,0 17.16611,21.3509 17.16611,30.83148 z"
style="fill:url(#radialGradient4670);fill-opacity:1;stroke:none;stroke-width:1.15489137;stroke-opacity:1" />
</g>
<g
id="effects">
<path
sodipodi:nodetypes="sssss"
inkscape:connector-curvature="0"
id="path4677"
d="M 0.59675291,832.58613 C -2.6629135,836.20167 8.4327773,845.27186 11.396485,841.41 25.76311,822.68956 42.842597,808.82922 55.304328,795.58121 58.687734,791.98432 48.888507,782.56758 44.629847,785.06734 32.509154,792.18199 17.31497,814.04271 0.59675291,832.58613 Z"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.93750006px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<g
transform="matrix(0.25323351,0.45330972,-0.45330972,0.25323351,301.36863,437.50493)"
id="g4681">
<path
inkscape:connector-curvature="0"
id="path4679"
d="m 320.52609,778.38092 c -0.57668,0.0508 -1.14636,0.20524 -1.67578,0.47266 l -1.69336,0.85547 c -2.11769,1.06969 -2.76965,3.52564 -1.46289,5.50586 l 5.56836,8.43945 -7.875,6.89063 c -1.84803,1.61683 -1.84803,4.21909 0,5.83593 l 0.95312,0.83399 c 1.84803,1.61684 4.82189,1.61684 6.66992,0 l 5.83399,-5.10352 4.125,6.25196 c 1.30675,1.98021 4.06395,2.71227 6.18164,1.64257 l 1.69336,-0.85547 c 2.11769,-1.06969 2.76965,-3.52564 1.46289,-5.50586 l -5.56836,-8.43945 7.875,-6.89062 c 1.84803,-1.61684 1.84803,-4.2191 0,-5.83594 l -0.95312,-0.83399 c -1.84804,-1.61683 -4.82385,-1.61683 -6.67188,0 l -5.83203,5.10352 -4.125,-6.25195 c -0.98007,-1.48516 -2.77584,-2.26753 -4.50586,-2.11524 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
id="g4685"
transform="matrix(0.507744,0.10868738,-0.10868738,0.507744,-25.349674,371.6549)">
<path
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 320.52609,778.38092 c -0.57668,0.0508 -1.14636,0.20524 -1.67578,0.47266 l -1.69336,0.85547 c -2.11769,1.06969 -2.76965,3.52564 -1.46289,5.50586 l 5.56836,8.43945 -7.875,6.89063 c -1.84803,1.61683 -1.84803,4.21909 0,5.83593 l 0.95312,0.83399 c 1.84803,1.61684 4.82189,1.61684 6.66992,0 l 5.83399,-5.10352 4.125,6.25196 c 1.30675,1.98021 4.06395,2.71227 6.18164,1.64257 l 1.69336,-0.85547 c 2.11769,-1.06969 2.76965,-3.52564 1.46289,-5.50586 l -5.56836,-8.43945 7.875,-6.89062 c 1.84803,-1.61684 1.84803,-4.2191 0,-5.83594 l -0.95312,-0.83399 c -1.84804,-1.61683 -4.82385,-1.61683 -6.67188,0 l -5.83203,5.10352 -4.125,-6.25195 c -0.98007,-1.48516 -2.77584,-2.26753 -4.50586,-2.11524 z"
id="path4683"
inkscape:connector-curvature="0" />
</g>
<g
transform="matrix(0.21127759,0.24737503,-0.24737503,0.21127759,167.97736,574.34326)"
id="g4689">
<path
inkscape:connector-curvature="0"
id="path4687"
d="m 320.52609,778.38092 c -0.57668,0.0508 -1.14636,0.20524 -1.67578,0.47266 l -1.69336,0.85547 c -2.11769,1.06969 -2.76965,3.52564 -1.46289,5.50586 l 5.56836,8.43945 -7.875,6.89063 c -1.84803,1.61683 -1.84803,4.21909 0,5.83593 l 0.95312,0.83399 c 1.84803,1.61684 4.82189,1.61684 6.66992,0 l 5.83399,-5.10352 4.125,6.25196 c 1.30675,1.98021 4.06395,2.71227 6.18164,1.64257 l 1.69336,-0.85547 c 2.11769,-1.06969 2.76965,-3.52564 1.46289,-5.50586 l -5.56836,-8.43945 7.875,-6.89062 c 1.84803,-1.61684 1.84803,-4.2191 0,-5.83594 l -0.95312,-0.83399 c -1.84804,-1.61683 -4.82385,-1.61683 -6.67188,0 l -5.83203,5.10352 -4.125,-6.25195 c -0.98007,-1.48516 -2.77584,-2.26753 -4.50586,-2.11524 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
id="g4693"
transform="matrix(0.45671932,-0.00626167,0.00626167,0.45671932,-142.38365,442.86254)">
<path
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 320.52609,778.38092 c -0.57668,0.0508 -1.14636,0.20524 -1.67578,0.47266 l -1.69336,0.85547 c -2.11769,1.06969 -2.76965,3.52564 -1.46289,5.50586 l 5.56836,8.43945 -7.875,6.89063 c -1.84803,1.61683 -1.84803,4.21909 0,5.83593 l 0.95312,0.83399 c 1.84803,1.61684 4.82189,1.61684 6.66992,0 l 5.83399,-5.10352 4.125,6.25196 c 1.30675,1.98021 4.06395,2.71227 6.18164,1.64257 l 1.69336,-0.85547 c 2.11769,-1.06969 2.76965,-3.52564 1.46289,-5.50586 l -5.56836,-8.43945 7.875,-6.89062 c 1.84803,-1.61684 1.84803,-4.2191 0,-5.83594 l -0.95312,-0.83399 c -1.84804,-1.61683 -4.82385,-1.61683 -6.67188,0 l -5.83203,5.10352 -4.125,-6.25195 c -0.98007,-1.48516 -2.77584,-2.26753 -4.50586,-2.11524 z"
id="path4691"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 81 KiB

1
original-resources/gen-ui-png.py
View file

@ -19,6 +19,7 @@ ids = [
'cancel',
'credits',
'cup',
'effects',
'home',
'issues',
'ok',