Huhu liebe Knuddel-app-entwickler,
Das spiel Ziegenphobie kennen wir denke mal fast alle. Wie hier schon beschrieben möchte ich diese App auch in meinem Channel anbieten. Nur möchte ich diverses umstellen. und zwar:
Bei eintreten in den Channel begrüßt der App-Bot den User mit einer Privatnachricht "Hallo, lust zu spielen? + Einsatz BUTTON" und erst mit dem klick auf den Button wird mir ein Knuddel abgezogen und das spiel gestartet.
Das möchte ich nicht! Ich habe mir mit einer HTML UI ein Menü mit Buttons erstellt, dort habe ich auch den Button "Ziegenphobie" hinzugefügt. Und ich möchte das das Spiel über meinen Button aufgerufen wird, nicht über den in der Privatnachricht. Ich habe auch schon ein wenig rummgetüftelt, aber bis jetzt finde ich keine lösung, bzw. jetzt funktioniert mein ganzes Menü nicht mehr... schmoll... Vielleicht könnt Ihr mir ja helfen.
Ach ja, und evt. möchte ich den Knuddel einsatz, die gewinnchance und die Knuddel die Gewonnen werden können bearbeiten. Vieleicht wisst Ihr ja welche Absätze diese Informationen beinhalten so das ich diese meinen Wünschen anpassen kann.
Ich bedanke mich schoneinmal im Vorraus für Eure Hilfe!
Mein "main.js" . . // Hier muss ja irgendwo der/die Fehler drinnen sein, ich weiß auch nicht, wie ich oder was ich aus der Ziegenphobie main.js in meine main.js so einfüge das es wie oben beschrieben läuft. In meiner habe ich ja nicht mal den Knuddel einsatz oder gewinn drinnen, nur das spiel ansich und trotzdem funktioniert hier rein gar nichts mehr... Verzweifel...
var App = (new function()
{
this.onUserJoined = function(user)
{
var htmlFile = new HTMLFile('startmenu.html');
var overlayContent = AppContent.overlayContent(htmlFile, 236, 313);
user.sendAppContent(overlayContent);
}
this.onEventReceived = function(user, key, type, data, appContentSession)
{
var OpenHTML = new HTMLFile('openmenu.html', {});
var MenuHTML = new HTMLFile('startmenu.html', {});
var ZiegenphobieHTML = new HTMLFile('start.html', {});
var MinesweeperHTML = new HTMLFile('minesweeper.html', {});
var OpenMenu = AppContent.overlayContent(OpenHTML, 70, 40);
var StartMenu = AppContent.overlayContent(MenuHTML, 236, 313);
var Ziegenphobie = AppContent.overlayContent(ZiegenphobieHTML, 236, 313);
var Minesweeper = AppContent.popupContent(MinesweeperHTML, 316, 354);
if (type === 'closed')
{
user.setAppContent(OpenMenu);
}
if (type === 'open')
{
user.setAppContent(StartMenu);
}
if (type === 'Ziegenphobie')
{
user.setAppContent(Ziegenphobie); // hier kommt doch in zukunft noch hin wie viel knuddel gesetzt werden müssen glaube ich
}
if (type === 'Minesweeper')
{
user.setAppContent(Minesweeper);
}
if (key == 'selectedEntry' && usersPlaying[user.getNick()] == 1) // sobald ich das in meine main.js einfüge funktioniert mein komplettes Menü nicht mehr...
{
usersPlaying[user.getNick()] = 2;
setTimeout(function(){
var doorNumber = parseInt(data[data.length - 1], 10);
var winningDoorNumber = RandomOperations.nextInt(2) + 1;
var hasWon = winningDoorNumber == doorNumber;
var text = hasWon ? 'Richtig getippt' : 'Knapp daneben';
user.sendAppEvent('openDoor', { 'door' : doorNumber, 'winningDoor' : winningDoorNumber, 'text' : text });
if (hasWon)
{
user.sendPrivateMessage('Gewonnen!');
}
}, 1500);
}
};
}());
Mein Menü "startmenu.html"
<html>
<head>
<meta charset="UTF-8">
<title>MyChannelName</title>
<script src="/apps/api/knuddels-api.js"></script>
<script>
Client.includeCSS('meinstyle.css');
Client.includeJS('/apps/api/jquery.min.js');
Client.includeJS('main.js');
</script>
</head>
<body>
<div id="mainmenu">
<div id="guthaben">
<span></span></div>
<div id="Closed" onClick="Client.sendEvent('closed');"></div>
<div id="Picture"></div>
<div id="Button01" onClick="Client.sendEvent('Ziegenphobie');" >Ziegenphobie</div>
<div id="Button02" onClick="Client.sendEvent('BBB');" >02</div>
<div id="Button03" onClick="Client.sendEvent('Minesweeper');" >Minesweeper</div>
<div id="Button04" onClick="Client.sendEvent('DDD');" >04</div>
<div id="Button05" onClick="Client.sendEvent('EEE');" >05</div>
</body>
</html>
Original Ziegenphobie "main.js"
var App = (new function() {
var usersPlaying = {};
var isShuttingDown = false;
var htmlFile = new HTMLFile('start.html');
var appContent = AppContent.overlayContent(htmlFile, 243, 266);
this.onUserJoined = function(user)
{
var botNick = KnuddelsServer.getDefaultBotUser().getNick().escapeKCode();
user.sendPrivateMessage('Lust auf ne Runde Ziegenphobie? Mit nur _°BB>_h1 Knuddel|/appknuddel ' + botNick + '<°°°_ bist du dabei!');
};
this.onUserLeft = function(user)
{
if (usersPlaying[user.getNick()] == 1)
{
KnuddelsServer.getDefaultBotUser().transferKnuddel(user, new KnuddelAmount(1), 'Du hast den Channel verlassen.');
delete usersPlaying[user.getNick()];
}
};
this.onPrepareShutdown = function()
{
if (!isShuttingDown)
{
isShuttingDown = true;
for (var key in usersPlaying)
{
var value = usersPlaying[key];
var userId = KnuddelsServer.getUserId(key);
var user = KnuddelsServer.getUser(userId);
KnuddelsServer.getDefaultBotUser().transferKnuddel(user, new KnuddelAmount(1), 'Die App fährt gleich herunter.');
user.removeAppContent();
delete usersPlaying[key];
}
}
}
this.onBeforeKnuddelReceived = function(knuddelTransfer)
{
var sender = knuddelTransfer.getSender();
if (!sender.canSendAppContent(appContent))
{
knuddelTransfer.reject('Sorry, mit diesem Gerät kannst du gerade nicht spielen.');
}
else if (sender.isChannelOwner() && knuddelTransfer.getKnuddelAmount().asNumber() != 1)
{
knuddelTransfer.accept();
}
else if (isShuttingDown)
{
knuddelTransfer.reject('Du App nimmt gerade keine neuen Spieler an.');
}
else if (usersPlaying[sender.getNick()])
{
knuddelTransfer.reject('Du spielst bereits.');
}
else if (knuddelTransfer.getKnuddelAmount().asNumber() != 1)
{
var botNick = KnuddelsServer.getDefaultBotUser().getNick().escapeKCode();
knuddelTransfer.reject('Du musst genau _°BB>_h1 Knuddel senden|/appknuddel ' + botNick + '<°°°_...');
}
else
{
knuddelTransfer.accept();
}
};
this.onKnuddelReceived = function(user, receiver, knuddelAmount)
{
if (knuddelAmount.asNumber() == 1)
{
usersPlaying[user.getNick()] = 1;
user.setAppContent(appContent);
}
else
{
user.sendPrivateMessage('Vielen Dank für die Einzahlung.');
}
};
this.onEventReceived = function(user, key, data)
{
if (key == 'selectedEntry' && usersPlaying[user.getNick()] == 1)
{
usersPlaying[user.getNick()] = 2;
setTimeout(function(){
var doorNumber = parseInt(data[data.length - 1], 10);
var winningDoorNumber = RandomOperations.nextInt(2) + 1;
var hasWon = winningDoorNumber == doorNumber;
var text = hasWon ? 'Richtig getippt' : 'Knapp daneben';
user.sendAppEvent('openDoor', { 'door' : doorNumber, 'winningDoor' : winningDoorNumber, 'text' : text });
if (hasWon)
{
KnuddelsServer.getDefaultBotUser().transferKnuddel(user, new KnuddelAmount(2), 'Richtig getippt...');
}
setTimeout(function(){
var botNick = KnuddelsServer.getDefaultBotUser().getNick().escapeKCode();
user.sendPrivateMessage('Na, Lust auf _°BB>_hnoch eine Runde|/appknuddel ' + botNick + '<°°°_?');
user.removeAppContent();
delete usersPlaying[user.getNick()];
}, 4000);
}, 1500);
}
};
}());
"Ziegenphobie.js"
var LightManager = new function(){
var lightIndex = 0;
var differentLightCount = 3;
var lightRotationMillis = 300;
var rotationInterval;
this.startLightRotation = function()
{
if (!rotationInterval)
{
rotationInterval = window.setInterval(rotateLight, lightRotationMillis);
}
}
function rotateLight()
{
$('.door .light').removeClass('light_rotation_' + lightIndex % 3);
lightIndex++;
$('.door .light').addClass('light_rotation_' + lightIndex % 3);
}
this.stopLightRotation = function($elem)
{
window.clearInterval(rotationInterval);
rotationInterval = null;
$('.light', $elem).addClass('light_selected');
}
}();
$(function(){
LightManager.startLightRotation();
$('.door').on('click', function(event)
{
var $this = $(this);
LightManager.stopLightRotation($this);
Client.sendEvent('selectedEntry', $this.attr('id'));
});
});
// Hier kommt das Event vom AppServer an.
document.addEventListener('eventReceived', function(event){
var key = event.eventKey;
var data = event.eventData;
LightManager.startLightRotation();
$('#result' + data['winningDoor']).attr('src', 'i/result_knuddels.gif');
$('#door' + data['door'] + ' .curtain').animate({ 'top' : '-40px' });
$('.playtext').html(data['text']);
});
Ziegenphobie "start.html"
<html>
<head>
<meta charset="utf-8" />
<script src="/apps/api/knuddels-api.js"></script>
<script>
Client.includeCSS('style.css');
Client.includeJS('/apps/api/jquery.min.js');
Client.includeJS('ziegenphobie.js');
</script>
</head>
<body>
<div id="game">
<div class="header"></div>
<div class="doors">
<div class="door" id="door1">
<img src="i/result_goat.gif" class="result" id="result1" />
<div class="curtain"><img src="i/door_curtain.png" /></div>
<div class="light light_rotation_0"></div>
</div>
<div class="door" id="door2">
<img src="i/result_goat.gif" class="result" id="result2" />
<div class="curtain"><img src="i/door_curtain.png" /></div>
<div class="light light_rotation_0"></div>
</div>
<div class="door" id="door3">
<img src="i/result_goat.gif" class="result" id="result3" />
<div class="curtain"><img src="i/door_curtain.png" /></div>
<div class="light light_rotation_0"></div>
</div>
</div>
<div class="playinfo">
<div class="playtext">Wähle eine Tür!</div>
</div>
</div>
</body>
</html>