Anzeigetafel realisieren

[Korbi21]

Hallo Community,

gleich in meinem ersten Thread habe ich eine Herausforderung für euch.


Ich suche nach einer Möglichkeit, mit der man per HTML, evtl. auch Powerpoint (falls es hier auch entsprechende Experten gibt) eine simple Art einer Spielanzeige realisieren kann.

Die Tafel benötigt ein Feld, mit dem man ein Foto des Spielers auswählen kann, sowie zwei Textzeilen für Name und Verein des Spielers, die man im Vorfeld der Partie eingeben kann.

Dann natürlich noch zwei Felder für den Spielstand, die nach Möglichkeit per Tastatur (z.B. linke Pfeiltaste für +1 beim linken Spieler, rechte Pfeiltaste für +1 beim rechten Spieler) zu bedienen sind.

Dabei sind das Foto und die Textfelder das geringere Problem, aber hat jemand von euch eine Ahnung wie man die Spielstandsanzeige selbst realisieren könnte?

Danke schonmal für eure Hilfe!
Gruß, Korbi

 

[Korbi21]

So in der Art könnte das dann aussehen. Möglicherweise geht es ja mit einem Menü vor Spielstart, wo man Namen, Nationalität und Spielziel eingibt. Das Bild ist ja nebensächlich...

 

[Gilles]

Also mit HTML allein ist das schonmal nicht möglich. Allein die Tatsache, dass du ein Bild hochladen willst benötigt für die Umsetzung eine Serverseitige Sprache (zum beispiel PHP). Für die tasteneingaben wird javascript benötigt. Aber dumme Idee mit dem Pfeiltaste link für Punkt hochzählen linke seite Was ist wenn da jemand mal versehentlich dran kommt

evtl. auch Powerpoint

In Powerpoint Programmieren? Noch nie gesehen, dass jemand so etwas gemacht hat :)

Ich weiss nicht wie gut deine Kenntnisse sind, in HTML und javascript. Deswegen müsstest du schreiben wo du nachhol bedarf hast

 

[Korbi21]

Also meine HTML-Kenntnisse an sich würde ich mal als sehr gut bezeichnen, bei Java und PHP wird es dann etwas schwierig, aber Infos aus vorgefertigten Scripten rauszulesen und nach meinen Vorstellungen zu bearbeiten bekomme ich zum Großteil da auch hin.
Hätte mir vorstellen können dass es für Powerpoint auch vorgefertigte Schaltflächen und Buttons gibt, die man einander zuordnen kann. Das man das nicht im herkömmlichen Sinne programmiert ist mir schon klar, und dass ich dann im falschen Forum gelandet bin auch... ;-)

Das mit den Pfeiltasten ist bewusst so überlegt, denn stell dir mal vor während einem Spiel müsste der Gegner am Laptop die ganze Zeit mit dem Cursor rumhantieren. Wenn mal aus Versehen jemand drankommt kann man ja zusätzlich noch Buttons oder einen Reset-Knopf ins Interface integrieren, aber wie gesagt ist es definitiv einfacher, erstmal nur mit einzelnen Tastenbelegungen zu arbeiten. Oder die beste Lösung, man definiert die Tasten auf dem Num-Block: 1 = +1 links, 3 = +1 rechts, 7 = -1 links, 9 = -1 rechts.

Die fertige Seite ist gar nicht unbedingt für den Einsatz im Web gedacht, sonst könnte uns ja jemand dazwischenpfuschen indem er die selbe Seite aufruft und auch auf die Buttons klickt, sondern eher zum lokalen Einsatz auf einem Rechner.

 

[Gilles]

Wenn das alles nur lokal ist, kann man sich schon die serverseitige Geschichte sparen, denn dann würde man die Bilder einfach in einen bestimmten Ordner packen müssen. Somit ist nur noch Javascript und HTML da.
Also ein simpler Weg wäre schon mal, wenn man die die Bilder so nennt, wie die Spielernamen.
Heisst wenn Gilles als Name eingeben würde, würde er zum beispiel Gilles.jpg laden.
Würde dir jedenfalls eine Menge Arbeit ersparen.
Heisst du müsstest erst mal ein HTML Grundgerüst erstellen
Als Spieler-Start-Bild sollte ein neutrales Bild wie eine Kontur eines Spielers mit einem fragezeichen drin stehen oder ein 1 x 1 Pixel und transparentes Bild. Nach der Eingabe der Namen, muss dann ein button gedrückt werden. Dieser führt dann ungefähr das hier aus.

 // Namen auslesen
 var spieler1Name =  document.getElementById("spieler1Name").value;
 var spieler2Name =  document.getElementById("spieler2Name").value;
 // Textboxen und Button ausblenden
 document.getElementById("spieler1Name").style.display = "none";
 document.getElementById("spieler2Name").style.display = "none";
 document.getElementById("starteSpielButton").style.display = "none";
 // Bilder erscheinen lassen
 document.getElementById("spieler1Bild").src = "SpielerBilder/"+spieler1Name+".jpg";
 document.getElementById("spieler2Bild").src = "SpielerBilder/"spieler2Name+".jpg";

Wenn du jetzt nichts von dem Code oben verstehst. Dann geb den Auftrag lieber in die Jobbörse ^^
Ansonsten Schreib dir erst mal ein HTML Gerüst und lasse den oben beschriebenen Code mal ausführen. Wenn das mit dem Bild funktioniert musst du dich mal mit Tastatur Abfragen auseinander setzen. Denn die sind etwas komplizierter, da sie unterschiedlich in den verschiedenen Browsern abgefangen werden.