Privacy notice We do not collect data that is not necessary for our offer. We also do not use trackers from other sites.
For more information see our privacy notice.
You develop games yourself, whether as a hobby or professionally, and want to earn some extra money by making your games available to us? Great! I'll explain you in the corresponding tabs what you have to consider.
Important notes
- After you have sent us the source files of your game and we have transferred the money to you, all rights to the game are transferred to us.
- You can send us your game ideas at any time, but we will not accept every idea. We first check if the game meets our quality standards. If we do not accept the game, we will of course inform you and the source files will be deleted.
- If we are interested in one of your games, the price we would pay for it is between 50€ and 100€. We will make you a suitable offer and you can decide if you want to accept it or not.
What do I need to consider?
- You must be at least 18 years old.
- Send your game idea to this email address. The mail should contain the following:
- A brief description of what kind of game it is.
- A contact information how we can reach you.
- Attached is a ZIP package, containing the source files of your game.
After you have sent us an email and you have already changed your mind, you can tell us at any time and we will delete your data immediately.
It can take up to 7 days for a response, during which we check your game according to our quality standards.
If we are interested in your game, we will discuss the payment details either on the phone or by e-mail.
Any other questions?
If something is still not clear, do not hesitate to ask us your questions.
Möchtest du eigene Layer zum Clatcher-Privatespace hinzufügen, dann kannst du das ganz einfach tun.
Um eigene Layer zu entwickeln, erstellt man quasi nur eine Chrome Extension. Dafür benötigt man die manifest.json
und das clatcher-script.js.
Es ist natürlich auch möglich eigene Layer für Firefox zu entwickeln, allerdings könnte sich die Manifestdatei in einigen Punkten unterscheiden. Um ganz sicher zu gehen, lies also auf der Dokumentationsseite von Mozilla die Details nach.
Inhaltsverzeichnis
Dein erster Clatcher-Layer
Kurz zu Beginn: Ich werde hier anhand eines einfachen Beispiels zeigen wie man eigene Clatcher-Layer erstellt. Ich werde nicht darauf eingehen wie man eigene Chrome Extensions erstellt. Solltest du dich dafür genauer interessieren, dann lies auf der Dokumentationsseite von Google genauer nach.
Um deinen eigenen Clatcher-Layer zu erstellen, benötigst du zwei Dateien:
- Die Manifestdatei: manifest.json
- Das Clatcher-script: clatcher-script.js
Mithilfe dieser Dateien werden wir nun einen einfachen Layer erstellen, in dem einfach nur "Hello World!" steht.
Die Manifestdatei
Die Manifestdatei hat folgenden Inhalt:
{
"name": "Clatcher - Hallo Welt",
"description": "First Clatcher Extension Layer",
"version": "1.0",
"icons": {
"128": "favicon.png"
},
"content_scripts": [
{
"matches": ["https://*.Clatcher.org/start.php"],
"js": [ "clatcher-script.js", "index.js" ]
}
],
"manifest_version": 3
}
"name" und "description" sollten selbsterklärend sein. Unter "icons" findest du das Icon, welches für die Extension im Browser angezeigt wird. Du kannst dieses Icon benutzen oder ein anderes.
Unter "content_scripts" findest du bei "js" das clatcher-script.js und eine index.js. Auf die Datei index.js werde ich nachher eingehen, es ist nur wichtig zu wissen, dass du die Datei clatcher-script.js zuerst angibst, damit alles Nötige, welches du zur Entwicklung eigener Layer brauchst, geladen wird.
Unter "matches" wird spezifiziert, auf welcher Seite die Extension zur Anwendung kommt. Hier solltest nichts ändern, da die Extension nur auf der angegebenen Seite angewendet werden soll.
Zuletzt wird unter "manifest_version" die Version angegeben, hier 3. Auch hier sollte es so belassen werden.
Die index.js
Die Datei index.js hat den folgenden Inhalt:
var helloWorld = new Layer("Hello World", "fa-solid fa-earth-europe", 600);
var p = document.createElement("p");
p.style.textAlign = "center";
p.innerText = "Hello World!";
helloWorld.setBody(p);
helloWorld.build();
Die Klasse Layer wurde in der Datei clatcher-script.js erstellt und hier instanziiert. Die Argumente für den Konstrukter sind der Titel (dieser wird dann im Header des Layers angezeigt), das Icon (hier werden die CSS-Klassen von Fontawesome genutzt. Dazu gleich mehr.) und die Breite.
Die Höhe wird automatisch gesetzt, sodass sie nicht extra angegeben werden muss.
Bei den Icons von Fontawesome werden derzeit nur die regulären Icons unterstützt und noch nicht die Pro-Icons. Außerdem müssen, wie oben gezeigt, nur die entsprechenden CSS-Klassen an den Konstruktor weitergegeben werden. Für alles weitere kümmert sich die Klasse Layer schon.
Anschließend wird die Breite des Layers angegeben. Hier sind es 600 Pixel.
Danach wird ein p-Element definiert und darin wird der Text "Hello World!" geschrieben. Dieses p-Element wird nun über die Methode des Objekts helloWorld in den Body des Layers gesetzt.
Es ist wichtig zu verstehen, dass die Methode setBody() nichts an den Body anhängt, sondern es übernimmt das Element, welches man übergibt und setzt den Body damit.
Würde man beispielsweise mehrmals setBody() aufrufen, würde man nicht mehrere Elemente an den Body anhängen, sondern man würde den Body immer wieder überschreiben. Sollte man selbst mehrere Elemente einfügen wollen, so muss man z. B. ein div-Element erzeugen, dort alle benötigten Elemente anhängen und dann das div-Element der Methode setBody() übergeben.
Anschließend wird über die Methode build() das Layer erstellt und in den DOM-Baum des Clatcher-Privatespace eingehängt. Es ist wichtig, dass am Ende die Methode build() aufgerufen wird, denn andernfalls sieht man nichts von deinem Layer, wenn du deine Extension anschließend in deinem Browser installierst.
Das Layer sieht am Ende so aus wie im nachfolgenden Bild:
Toast-Benachrichtigungen
Toast-Benachrichtigungen sind kurze Textnachrichten, die für kurze Zeit am unteren Bildschirm zu sehen sind. In diesem Abschnitt zeige ich, wieder an einem sehr vereinfachten Beispiel, wie man diese für seine eigenen Clatcher-Layer verwenden kann.
Diesmal soll ein Clatcher-Layer erstellt werden, in das ein Button zu sehen ist, der bei einem Klick darauf eine kurze Grussmeldung zurückgibt.
Hier also zunächst die manifest.json:
{
"name": "Clatcher - Gruss Layer",
"description": "Gruss Clatcher Extension Layer",
"version": "1.0",
"icons": {
"128": "favicon.png"
},
"content_scripts": [
{
"matches": ["https://*.Clatcher.org/start.php"],
"js": [ "clatcher-script.js", "index.js" ]
}
],
"manifest_version": 3
}
Bis auf "name" und "description" hat sich hier nichts geändert. Sehen wir uns also die index.js an:
var grusslayer = new Layer("Gruss", "fa-solid fa-face-kiss-wink-heart", 300);
var btn = grusslayer.getButton("Grüss mich!");
btn.addEventListener("click", () => {
grusslayer.showInfo("Hey du ;)");
});
grusslayer.setBody(btn);
grusslayer.build();
Hier können wir direkt zwei Änderungen sehen. Zum Einen, die Methode getButton() mit der wir einen Button erzeugen können, der den typischen Clatcher-Button Style hat. Als Argument wird der Text übergeben, der auf der Schaltfläche zu sehen sein soll.
Natürlich muss man nicht einen Button generieren lassen. Man kann sich natürlich auch selbst einen erstellen und diesem seinen eigenen Style verpassen. In der manifest.json kann man auch eigene CSS-Dateien angeben, über die man seine Layer dann auch gestalten kann.
Wenn man nun auf diesen Button klickt, wird die Methode showInfo() unseres Layers aufgerufen, der man den anzuzeigenden Text übergibt. showInfo() zeigt eine kurze Meldung an, die dann für 3 Sekunden sichtbar bleibt und anschließend wieder verschwindet.
Anschließend wird der Button mit der setBody() Methode des Layers zum Body hinzugefügt und dann mit build() erstellt. Wenn du die App in deinem Browser installierst und mal ausführen lässt, siehst du das Resultat.