update toolbar + background

This commit is contained in:
Luca Puderbach 2024-12-08 04:57:04 +01:00
parent 69fccefed9
commit 93ef00870b
9 changed files with 179 additions and 68 deletions

View File

@ -348,7 +348,7 @@ def enabledCommandToolbar = new Command<Button>() {
void execute(Button source) { void execute(Button source) {
if (source.isEnabled()){ if (source.isEnabled()){
source.setColor(ColorRGBA.White) source.setColor(ColorRGBA.White)
def orangeBackground = new QuadBackgroundComponent(color(1, 0.5, 0, 1)); // Orange background def orangeBackground = new QuadBackgroundComponent(color(1, 1, 0, 1)); // Orange background
source.setBackground(orangeBackground); source.setBackground(orangeBackground);
} else{ } else{
source.setColor(ColorRGBA.White) source.setColor(ColorRGBA.White)
@ -384,12 +384,20 @@ selector("button-toolbar", "pp") {
} }
selector("button-toolbar2", "pp") { selector("button-toolbar2", "pp") { playerColor ->
insets = new Insets3f(3, 3, 3, 3) // Adjust the border thickness def validColor = playerColor ?: new ColorRGBA(0, 0, 0, 0) // Vollständig transparent
textHAlignment = HAlignment.Center def playerGradientBackground = new QuadBackgroundComponent(validColor)
textVAlignment = VAlignment.Center
buttonCommands = stdButtonCommandsToolbar // Kein Hintergrundbild, komplett transparent
playerGradientBackground.setColor(new ColorRGBA(0, 0, 0, 0)) // RGBA (Rot, Grün, Blau, Alpha)
background = playerGradientBackground.clone() // Setze den Hintergrund
insets = new Insets3f(3, 3, 3, 3) // Optional: Ränder
textHAlignment = HAlignment.Center // Text-Zentrierung
textVAlignment = VAlignment.Center // Text-Zentrierung
} }

View File

@ -9,7 +9,6 @@ import com.jme3.material.Material;
import com.jme3.math.ColorRGBA; import com.jme3.math.ColorRGBA;
import com.jme3.math.FastMath; import com.jme3.math.FastMath;
import com.jme3.math.Quaternion; import com.jme3.math.Quaternion;
import com.jme3.math.Vector2f;
import com.jme3.math.Vector3f; import com.jme3.math.Vector3f;
import com.jme3.renderer.Camera; import com.jme3.renderer.Camera;
import com.jme3.renderer.queue.RenderQueue.ShadowMode; import com.jme3.renderer.queue.RenderQueue.ShadowMode;
@ -22,11 +21,10 @@ import com.jme3.shadow.EdgeFilteringMode;
import com.jme3.texture.Texture; import com.jme3.texture.Texture;
import com.jme3.util.SkyFactory; import com.jme3.util.SkyFactory;
import com.jme3.util.TangentBinormalGenerator; import com.jme3.util.TangentBinormalGenerator;
import pp.monopoly.model.Board;
import pp.monopoly.client.gui.BobTheBuilder; import pp.monopoly.client.gui.BobTheBuilder;
import pp.monopoly.client.gui.Toolbar; import pp.monopoly.client.gui.Toolbar;
import pp.monopoly.model.Board;
import static pp.util.FloatMath.PI;
import static pp.util.FloatMath.TWO_PI; import static pp.util.FloatMath.TWO_PI;
import static pp.util.FloatMath.cos; import static pp.util.FloatMath.cos;
import static pp.util.FloatMath.sin; import static pp.util.FloatMath.sin;
@ -181,12 +179,12 @@ public class BoardAppState extends MonopolyAppState {
*/ */
private void setupSky() { private void setupSky() {
final AssetManager assetManager = getApp().getAssetManager(); final AssetManager assetManager = getApp().getAssetManager();
final Texture west = assetManager.loadTexture("Pictures/Backdrop/backdrop.jpg"); //NON-NLS final Texture west = assetManager.loadTexture("Pictures/Backdrop/west.jpg"); //NON-NLS
final Texture east = assetManager.loadTexture("Pictures/Backdrop/backdrop.jpg"); //NON-NLS final Texture east = assetManager.loadTexture("Pictures/Backdrop/ost.jpg"); //NON-NLS
final Texture north = assetManager.loadTexture("Pictures/Backdrop/backdrop.jpg"); //NON-NLS final Texture north = assetManager.loadTexture("Pictures/Backdrop/nord.jpg"); //NON-NLS
final Texture south = assetManager.loadTexture("Pictures/Backdrop/backdrop.jpg"); //NON-NLS final Texture south = assetManager.loadTexture("Pictures/Backdrop/sued.jpg"); //NON-NLS
final Texture up = assetManager.loadTexture("Pictures/Backdrop/backdrop.jpg"); //NON-NLS final Texture up = assetManager.loadTexture("Pictures/Backdrop/sued.jpg"); //NON-NLS
final Texture down = assetManager.loadTexture("Pictures/Backdrop/backdrop.jpg"); //NON-NLS final Texture down = assetManager.loadTexture("Pictures/Backdrop/sued.jpg"); //NON-NLS
final Spatial sky = SkyFactory.createSky(assetManager, west, east, north, south, up, down); final Spatial sky = SkyFactory.createSky(assetManager, west, east, north, south, up, down);
// sky.rotate(0, PI, 0); // sky.rotate(0, PI, 0);
viewNode.attachChild(sky); viewNode.attachChild(sky);

View File

@ -19,6 +19,7 @@ import pp.dialog.Dialog;
import pp.monopoly.client.MonopolyApp; import pp.monopoly.client.MonopolyApp;
import pp.monopoly.client.gui.popups.Bankrupt; import pp.monopoly.client.gui.popups.Bankrupt;
import pp.monopoly.game.server.Player; import pp.monopoly.game.server.Player;
import pp.monopoly.game.server.PlayerColor;
import pp.monopoly.game.server.PlayerHandler; import pp.monopoly.game.server.PlayerHandler;
import pp.monopoly.message.client.EndTurn; import pp.monopoly.message.client.EndTurn;
import pp.monopoly.message.client.RollDice; import pp.monopoly.message.client.RollDice;
@ -104,6 +105,7 @@ public class Toolbar extends Dialog implements GameEventListener {
/**Indicates if the bankrupt PopUp has already been shown */ /**Indicates if the bankrupt PopUp has already been shown */
private boolean bankruptPopUp = false; private boolean bankruptPopUp = false;
/** /**
* Constructs the toolbar for the Monopoly application. * Constructs the toolbar for the Monopoly application.
* <p> * <p>
@ -122,6 +124,21 @@ public class Toolbar extends Dialog implements GameEventListener {
toolbarContainer = createToolbarContainer(); toolbarContainer = createToolbarContainer();
app.getGuiNode().attachChild(toolbarContainer); app.getGuiNode().attachChild(toolbarContainer);
Button dice2Button = createDice2Button();
app.getGuiNode().attachChild(dice2Button);
// Neues Label mit Bild als Hintergrund
Label imageLabel = new Label("");
IconComponent imageIcon = new IconComponent("Pictures/CyanBackground.png");
imageIcon.setIconSize(new Vector2f(450, 200));
imageLabel.setIcon(imageIcon);
// Setze die Position des Labels
imageLabel.setLocalTranslation(20, 205, 0);
// Füge das Label zur GUI hinzu
app.getGuiNode().attachChild(imageLabel);
} }
private Container createToolbarContainer() { private Container createToolbarContainer() {
@ -132,42 +149,45 @@ public class Toolbar extends Dialog implements GameEventListener {
QuadBackgroundComponent background = new QuadBackgroundComponent(backgroundToolbar); QuadBackgroundComponent background = new QuadBackgroundComponent(backgroundToolbar);
container.setBackground(background); container.setBackground(background);
// Spielerfarbe abrufen // Spielerfarbe des aktuellen Spielers abrufen
Player currentPlayer = playerHandler.getPlayerById(app.getId()); Player currentPlayer = playerHandler.getPlayerById(app.getId());
ColorRGBA playerColor = Player.getColor(currentPlayer.getId()).getColor(); PlayerColor currentPlayerColor = Player.getColor(currentPlayer.getId());
// Oberer Balken // Oberer Balken mit der Spielerfarbe
Container playerColorBar = new Container(); Container playerColorBar = new Container();
playerColorBar.setPreferredSize(new Vector3f(app.getCamera().getWidth(), 15, 0)); // Höhe des oberen Balkens playerColorBar.setPreferredSize(new Vector3f(app.getCamera().getWidth(), 5, 0)); // Höhe des oberen Balkens
playerColorBar.setBackground(new QuadBackgroundComponent(playerColor)); playerColorBar.setBackground(new QuadBackgroundComponent(ColorRGBA.DarkGray));
playerColorBar.setLocalTranslation(0, 210, 3); // Position über der Toolbar playerColorBar.setLocalTranslation(0, 205, 3); // Position über der Toolbar
app.getGuiNode().attachChild(playerColorBar); app.getGuiNode().attachChild(playerColorBar);
// unterer Balken // unterer Balken
Container playerColorBarbot = new Container(); Container playerColorBarbot = new Container();
playerColorBarbot.setPreferredSize(new Vector3f(app.getCamera().getWidth(), 10, 0)); // Höhe des oberen Balkens playerColorBarbot.setPreferredSize(new Vector3f(app.getCamera().getWidth(), 10, 0)); // Höhe des oberen Balkens
playerColorBarbot.setBackground(new QuadBackgroundComponent(playerColor)); playerColorBarbot.setBackground(new QuadBackgroundComponent(ColorRGBA.DarkGray));
playerColorBarbot.setLocalTranslation(0, 10, 3); // Position über der Toolbar playerColorBarbot.setLocalTranslation(0, 5, 3); // Position über der Toolbar
app.getGuiNode().attachChild(playerColorBarbot); app.getGuiNode().attachChild(playerColorBarbot);
// Linker Balken // Linker Balken
Container leftBar = new Container(); Container leftBar = new Container();
leftBar.setPreferredSize(new Vector3f(10, 210, 0)); // Breite 10, Höhe 210 leftBar.setPreferredSize(new Vector3f(5, 210, 0)); // Breite 10, Höhe 210
leftBar.setBackground(new QuadBackgroundComponent(playerColor)); leftBar.setBackground(new QuadBackgroundComponent(ColorRGBA.DarkGray));
leftBar.setLocalTranslation(0, 200, 3); // Position am linken Rand leftBar.setLocalTranslation(0, 200, 3); // Position am linken Rand
app.getGuiNode().attachChild(leftBar); app.getGuiNode().attachChild(leftBar);
// Rechter Balken // Rechter Balken
Container rightBar = new Container(); Container rightBar = new Container();
rightBar.setPreferredSize(new Vector3f(10, 210, 0)); // Breite 10, Höhe 210 rightBar.setPreferredSize(new Vector3f(5, 210, 0)); // Breite 10, Höhe 210
rightBar.setBackground(new QuadBackgroundComponent(playerColor)); rightBar.setBackground(new QuadBackgroundComponent(ColorRGBA.DarkGray));
rightBar.setLocalTranslation(app.getCamera().getWidth() - 10, 200, 2); // Position am rechten Rand rightBar.setLocalTranslation(app.getCamera().getWidth() - 5, 200, 2); // Position am rechten Rand
app.getGuiNode().attachChild(rightBar); app.getGuiNode().attachChild(rightBar);
// Übersicht und Konto // Übersicht und Konto
accountContainer = container.addChild(new Container()); accountContainer = container.addChild(new Container());
overviewContainer = container.addChild(new Container()); overviewContainer = container.addChild(new Container());
accountContainer.setBackground(new QuadBackgroundComponent(ColorRGBA.Yellow)); // Debug-Farbe
overviewContainer.setBackground(new QuadBackgroundComponent(ColorRGBA.Green)); // Debug-Farbe;
receivedEvent(new UpdatePlayerView()); // Initiale Aktualisierung receivedEvent(new UpdatePlayerView()); // Initiale Aktualisierung
// Würfel-Bereich // Würfel-Bereich
@ -175,22 +195,29 @@ public class Toolbar extends Dialog implements GameEventListener {
// Aktionsmenü // Aktionsmenü
Container menuContainer = container.addChild(new Container()); Container menuContainer = container.addChild(new Container());
menuContainer.addChild(createTradeButton()); menuContainer.addChild(createTradeButton(currentPlayerColor));
menuContainer.addChild(createPropertyMenuButton()); menuContainer.addChild(createPropertyMenuButton(currentPlayerColor));
menuContainer.addChild(createEndTurnButton()); menuContainer.addChild(createEndTurnButton(currentPlayerColor));
menuContainer.setBackground(null); menuContainer.setBackground(null);
return container; return container;
} }
private Container createDiceSection() { private Container createDiceSection() {
Container diceContainer = new Container(new SpringGridLayout(Axis.X, Axis.Y)); Container diceContainer = new Container(new SpringGridLayout(Axis.X, Axis.Y));
diceContainer.addChild(createDiceDisplay()); diceContainer.addChild(createDiceDisplay());
diceContainer.setBackground(null); diceContainer.setBackground(null);
diceButton = new Button("Würfeln", new ElementId("button-toolbar")); diceButton = new Button("", new ElementId("button-toolbar2"));
diceButton.setPreferredSize(new Vector3f(200, 50, 0)); diceButton.setPreferredSize(new Vector3f(200, 50, 10));
// Unsichtbaren Hintergrund setzen
QuadBackgroundComponent transparentBackground = new QuadBackgroundComponent(new ColorRGBA(0, 0, 0, 0.0f)); // Transparent
diceButton.setBackground(transparentBackground);
// Verschieben um 200 nach links
diceButton.setLocalTranslation(-200, 0, 0); // X: -200, Y: 0, Z: 0 (bleibt in derselben Höhe)
diceButton.addClickCommands(s -> ifTopDialog(() -> { diceButton.addClickCommands(s -> ifTopDialog(() -> {
diceButton.setEnabled(false); diceButton.setEnabled(false);
endTurnButton.setEnabled(true); endTurnButton.setEnabled(true);
@ -199,10 +226,34 @@ public class Toolbar extends Dialog implements GameEventListener {
app.getGameLogic().playSound(Sound.BUTTON); app.getGameLogic().playSound(Sound.BUTTON);
})); }));
diceContainer.addChild(diceButton); diceContainer.addChild(diceButton);
return diceContainer; return diceContainer;
} }
private Button createDice2Button() {
// Erstelle den Button
Button dice2Button = new Button("", new ElementId("button-toolbar2"));
dice2Button.setPreferredSize(new Vector3f(300, 200, 10)); // Setze die Größe
// Setze einen unsichtbaren Hintergrund
QuadBackgroundComponent transparentBackground = new QuadBackgroundComponent(new ColorRGBA(0, 0, 0, 0.2f)); // Halbdurchsichtig
dice2Button.setBackground(transparentBackground);
// Positioniere den Button unabhängig
dice2Button.setLocalTranslation(500, 200, 8); // Setze X, Y, Z für eine feste Position
// Füge Klickverhalten hinzu
dice2Button.addClickCommands(s -> ifTopDialog(() -> {
dice2Button.setEnabled(false); // Deaktiviere den Button nach Klick
endTurnButton.setEnabled(true); // Aktiviere den EndTurn-Button
startDiceAnimation(); // Starte die Animation
app.getGameLogic().send(new RollDice()); // Sende die Nachricht
app.getGameLogic().playSound(Sound.BUTTON); // Spiele den Sound
}));
return dice2Button;
}
private Container createDiceDisplay() { private Container createDiceDisplay() {
Container horizontalContainer = new Container(new SpringGridLayout(Axis.X, Axis.Y)); Container horizontalContainer = new Container(new SpringGridLayout(Axis.X, Axis.Y));
horizontalContainer.setPreferredSize(new Vector3f(200, 150, 0)); horizontalContainer.setPreferredSize(new Vector3f(200, 150, 0));
@ -233,71 +284,110 @@ public class Toolbar extends Dialog implements GameEventListener {
return container; return container;
} }
private Button createTradeButton() { private Button createTradeButton(PlayerColor playerColor) {
tradeButton = new Button("", new ElementId("button-toolbar2"));
tradeButton = new Button("", new ElementId("button-toolbar")); tradeButton.setPreferredSize(new Vector3f(150, 50, 0)); // Größe setzen
tradeButton.setPreferredSize(new Vector3f(150, 50, 0));
// Setze den Hintergrund
QuadBackgroundComponent background = new QuadBackgroundComponent(playerColor.getColor());
Texture gradientTexture = app.getAssetManager().loadTexture("Textures/gradient.png");
if (gradientTexture != null) {
background.setTexture(gradientTexture);
}
tradeButton.setBackground(background);
// Icon hinzufügen
String iconTradePath = "icons/icon-handeln.png"; String iconTradePath = "icons/icon-handeln.png";
IconComponent iconTrade = new IconComponent(iconTradePath); IconComponent iconTrade = new IconComponent(iconTradePath);
iconTrade.setHAlignment(HAlignment.Center); iconTrade.setHAlignment(HAlignment.Center);
iconTrade.setVAlignment(VAlignment.Center); iconTrade.setVAlignment(VAlignment.Center);
iconTrade.setIconSize(new Vector2f(100, 100)); iconTrade.setIconSize(new Vector2f(100, 100));
tradeButton.setIcon(iconTrade); tradeButton.setIcon(iconTrade);
tradeButton.setFontSize(40);
// Klickverhalten
// Add click behavior
tradeButton.addClickCommands(source -> ifTopDialog(() -> { tradeButton.addClickCommands(source -> ifTopDialog(() -> {
app.getGameLogic().playSound(Sound.BUTTON); app.getGameLogic().playSound(Sound.BUTTON);
new ChoosePartner(app).open(); new ChoosePartner(app).open();
})); }));
return tradeButton; return tradeButton;
} }
private Button createPropertyMenuButton() { private Button createPropertyMenuButton(PlayerColor playerColor) {
propertyMenuButton = new Button("", new ElementId("button-toolbar2")); propertyMenuButton = new Button("", new ElementId("button-toolbar2"));
propertyMenuButton.setPreferredSize(new Vector3f(150, 50, 0)); propertyMenuButton.setPreferredSize(new Vector3f(150, 50, 0));
// Setze den Hintergrund
QuadBackgroundComponent background = new QuadBackgroundComponent(playerColor.getColor());
Texture gradientTexture = app.getAssetManager().loadTexture("Textures/gradient.png");
if (gradientTexture != null) {
background.setTexture(gradientTexture);
}
propertyMenuButton.setBackground(background);
// Icon hinzufügen
String iconBuildingPath = "icons/icon-gebaude.png"; String iconBuildingPath = "icons/icon-gebaude.png";
IconComponent iconBuilding = new IconComponent(iconBuildingPath); IconComponent iconBuilding = new IconComponent(iconBuildingPath);
iconBuilding.setHAlignment(HAlignment.Center); iconBuilding.setHAlignment(HAlignment.Center);
iconBuilding.setVAlignment(VAlignment.Center); iconBuilding.setVAlignment(VAlignment.Center);
iconBuilding.setIconSize(new Vector2f(75, 75)); iconBuilding.setIconSize(new Vector2f(75, 75));
propertyMenuButton.setIcon(iconBuilding); propertyMenuButton.setIcon(iconBuilding);
// Schriftgröße und Klick-Kommandos
propertyMenuButton.setFontSize(30); propertyMenuButton.setFontSize(30);
propertyMenuButton.addClickCommands(s -> ifTopDialog(() -> { propertyMenuButton.addClickCommands(s -> ifTopDialog(() -> {
app.getGameLogic().playSound(Sound.BUTTON); app.getGameLogic().playSound(Sound.BUTTON);
new BuildingAdminMenu(app).open(); new BuildingAdminMenu(app).open();
})); }));
return propertyMenuButton; return propertyMenuButton;
} }
private Button createEndTurnButton() { private Button createEndTurnButton(PlayerColor playerColor) {
endTurnButton = new Button("", new ElementId("button-toolbar")); // Erstelle den Button
endTurnButton.setFontSize(28); endTurnButton = new Button("", new ElementId("button-toolbar2"));
endTurnButton.setPreferredSize(new Vector3f(150, 50, 0)); endTurnButton.setFontSize(28); // Setze die Schriftgröße
endTurnButton.setPreferredSize(new Vector3f(150, 50, 0)); // Setze die Größe
// Setze den Hintergrund
QuadBackgroundComponent background = new QuadBackgroundComponent(ColorRGBA.Gray); // Standardgrau
Texture gradientTexture = app.getAssetManager().loadTexture("Textures/gradient.png"); // Lade Gradient-Textur
if (gradientTexture != null) {
background.setTexture(gradientTexture); // Füge die Textur hinzu, wenn verfügbar
} else {
System.err.println("Gradient texture not found for EndTurn button!");
}
endTurnButton.setBackground(background);
// Füge das Icon hinzu
String iconEndTurnPath = "icons/icon-zugbeenden.png"; String iconEndTurnPath = "icons/icon-zugbeenden.png";
IconComponent iconEndTurn = new IconComponent(iconEndTurnPath); IconComponent iconEndTurn = new IconComponent(iconEndTurnPath);
iconEndTurn.setHAlignment(HAlignment.Center); iconEndTurn.setHAlignment(HAlignment.Center);
iconEndTurn.setVAlignment(VAlignment.Center); iconEndTurn.setVAlignment(VAlignment.Center);
iconEndTurn.setIconSize(new Vector2f(75, 75)); iconEndTurn.setIconSize(new Vector2f(75, 75)); // Größe des Icons
endTurnButton.setIcon(iconEndTurn); endTurnButton.setIcon(iconEndTurn);
endTurnButton.addClickCommands(s -> ifTopDialog(() -> {
app.getGameLogic().playSound(Sound.BUTTON); // Klickverhalten für den Button
if (app.getGameLogic().getPlayerHandler().getPlayerById(app.getId()).getAccountBalance() < 0 && !bankruptPopUp) { endTurnButton.addClickCommands(source -> ifTopDialog(() -> {
new Bankrupt(app).open(); app.getGameLogic().playSound(Sound.BUTTON); // Spiele den Klick-Sound ab
Player currentPlayer = app.getGameLogic().getPlayerHandler().getPlayerById(app.getId());
// Überprüfe den Kontostand des Spielers
if (currentPlayer.getAccountBalance() < 0 && !bankruptPopUp) {
new Bankrupt(app).open(); // Öffne den Bankrott-Dialog
bankruptPopUp = true; bankruptPopUp = true;
} else { } else {
bankruptPopUp = false; bankruptPopUp = false;
app.getGameLogic().send(new EndTurn()); app.getGameLogic().send(new EndTurn()); // Sende EndTurn-Nachricht
receivedEvent(new ButtonStatusEvent(false)); receivedEvent(new ButtonStatusEvent(false)); // Aktualisiere die Button-Statusanzeige
} }
})); }));
// Debug-Log hinzufügen
System.out.println("End Turn Button created successfully.");
return endTurnButton; return endTurnButton;
} }
@ -399,6 +489,13 @@ public class Toolbar extends Dialog implements GameEventListener {
playerHandler.getPlayerById(app.getId()).getNumJailCard() + "", playerHandler.getPlayerById(app.getId()).getNumJailCard() + "",
new ElementId("label-account") new ElementId("label-account")
)); ));
// Setze accountContainer auf Z-Ebene 2
accountContainer.setLocalTranslation(accountContainer.getLocalTranslation().x, accountContainer.getLocalTranslation().y, 5);
// Setze overviewContainer auf Z-Ebene 2
overviewContainer.setLocalTranslation(overviewContainer.getLocalTranslation().x, overviewContainer.getLocalTranslation().y, 5);
accountContainer.setBackground(null); accountContainer.setBackground(null);
overviewContainer.addChild(new Label("Übersicht", new ElementId("label-toolbar"))); overviewContainer.addChild(new Label("Übersicht", new ElementId("label-toolbar")));
@ -431,10 +528,18 @@ public class Toolbar extends Dialog implements GameEventListener {
@Override @Override
public void receivedEvent(ButtonStatusEvent event) { public void receivedEvent(ButtonStatusEvent event) {
boolean enabled = event.buttonsEnabled(); boolean enabled = event.buttonsEnabled();
diceButton.setEnabled(enabled); if (diceButton != null) {
tradeButton.setEnabled(enabled); diceButton.setEnabled(enabled);
propertyMenuButton.setEnabled(enabled); }
endTurnButton.setEnabled(false); if (tradeButton != null) {
tradeButton.setEnabled(enabled);
}
if (propertyMenuButton != null) {
propertyMenuButton.setEnabled(enabled);
}
if (endTurnButton != null) {
endTurnButton.setEnabled(false);
}
} }
/** /**

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB