Jump to content
Roulette Forum

Recommended Posts

Geschrieben (bearbeitet)

Da ich zum x-ten mal wieder neu mit Programmieren anfange, ein kleines Geschenk für die Allgemeinheit. Wie man sieht bin ich erst am Anfang.

In der stillen Hoffnung es kommt immer wieder von wem eine Ergänzung dazu.

 

Es geht derzeit um einfache Permanenzeingabe mittels eines Modal-Tableau-Fensters.

 

Endziel ist ein typisches Roulette-Buchungs/Statistikprogramm.

 

Mal sehen wieviel ich hier reinstellen werde. Hatte einmal mit einm Forummitglied mit etwas ähnlichem begonnen, nur kamen wir nie wirklich weiter.

Er hatte einen ganz anderen Ansatz, und ich stelle halt für die Allgemeinheit meinen einfacheren rein.

bearbeitet von wiensschlechtester
Unnötiges gelöscht
Geschrieben
/* Stile für das Modalfenster */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
 
.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 10px;
  border: 1px solid #888;
  width: 90%;
}
table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      text-align: center;
      font-weight: bold;
    }
    td.green {
      background-color: #008000;
      color: #ffffff;
    }
    td.red {
      background-color: #ff0000;
      color: #ffffff;
    }
    td.black {
      background-color: #000000;
      color: #ffffff;
    }
 
Geschrieben (bearbeitet)

Aktualisierte Dateien folgen.

 

Seltsam ist nur, dass sich die 35 selten anklicken läßt........wen wer einen guten Ratschlag hat - nur her damit

 

bearbeitet von wiensschlechtester
Geschrieben
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Roulette Permanenz Eingabe</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
 
<body>
 
  <div id="menu">
    <button onclick="openFile()">Dateien</button>
    <button onclick="openSettings()">Einstellungen</button>
    <button id="open-modal">Eingabe öffnen</button>
  </div>
 
  <div id="statistics">
    <!-- Hier werden die Statistiken angezeigt -->
  </div>


 
  <div id="modal" class="modal">
    <div class="modal-content">
 
      <table id="roulette-table">
 
        <tr>
            <td class="green" colspan="3">0</td>
          </tr>
          <tr>
            <td class="red">1</td>
            <td class="black">2</td>
            <td class="red">3</td>
          </tr>
          <tr>
            <td class="black">4</td>
            <td class="red">5</td>
            <td class="black">6</td>
          </tr>
          <tr>
            <td class="red">7</td>
            <td class="black">8</td>
            <td class="red">9</td>
          </tr>
          <tr>
            <td class="black">10</td>
            <td class="black">11</td>
            <td class="red">12</td>
          </tr>
          <tr>
              <td class="black">13</td>
              <td class="red">14</td>
              <td class="black">15</td>
          </tr>
          <tr>
              <td class="red">16</td>
              <td class="black">17</td>
              <td class="red">18</td>
          </tr>
          <tr>
              <td class="red">19</td>
              <td class="black">20</td>
              <td class="red">21</td>
          </tr>
          <tr>
              <td class="black">22</td>
              <td class="red">23</td>
              <td class="black">24</td>
          </tr>
          <tr>
              <td class="red">25</td>
              <td class="black">26</td>
              <td class="red">27</td>
          </tr>
          <tr>
              <td class="black">28</td>
              <td class="black">29</td>
              <td class="red">30</td>
          </tr>
          <tr>
              <td class="black">31</td>
              <td class="red">32</td>
              <td class="black">33</td>
          </tr>
          <tr>
            <td class="red">34</td>
            <td class="black">35</td>
            <td class="red">36</td>
          </tr>
        </table>
      <button id="close-modal">Schließen</button>
    </div>
  </div>
 
  <div id="selected-numbers-container"></div> <!-- Container für die ausgewählten Zahlen -->
 
  <stopp&#33; src="main.js"></stopp&#33;>
</body>
</html>
Geschrieben
// main.js
 
const modal = document.getElementById('modal');
const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
const rouletteCells = document.querySelectorAll('#roulette-table td');
const selectedNumbersContainer = document.getElementById('selected-numbers-container');
 
let selectedNumbers = []; // Array zur Speicherung der ausgewählten Zahlen
 
openModalButton.addEventListener('click', function() {
  modal.style.display = 'block';
});
 
// Öffne das Modalfenster, wenn Enter oder Plus gedrückt wird
document.addEventListener('keydown', function(event) {
  if (event.key === '+' || event.key === 'Enter') {
    modal.style.display = 'block';
  } else if (event.key === '-') {
    const removedNumber = selectedNumbers.pop();
    if (removedNumber !== undefined) {
      const removedCell = rouletteCells[removedNumber];
      if (removedCell) {
        removedCell.classList.remove('selected-number');
      }
      updateSelectedNumbersContainer();
    }
  }
});
   
closeModalButton.addEventListener('click', function() {
  modal.style.display = 'none';
});
 
//.................................................................
 
rouletteCells.forEach(function(cell) {
  cell.addEventListener('click', function() {
    const number = parseInt(cell.textContent);
   
     if (!selectedNumbers.includes(number)) {
       selectedNumbers.push(number);
       cell.classList.add('selected-number');
      updateSelectedNumbersContainer();
      modal.style.display = 'none'; // Schließe das Modalfenster nach dem Klicken
     }
  });
});
       
function updateSelectedNumbersContainer() {
  selectedNumbersContainer.textContent = selectedNumbers.join(', ');
}
//................................................................
 
function openFile() {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = '.csv';
  fileInput.addEventListener('change', handleFile, false);
  fileInput.click();
}
   
function handleFile(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
 
  reader.onload = function(e) {
    const contents = e.target.result;
    // Hier kannst du die CSV-Daten verarbeiten und in die Statistiken einfügen
    };
 
  reader.readAsText(file);
}  
   
// Passe die Höhen der Zellen im Tableau an
function adjustCellHeights() {
  const screenHeight = window.innerHeight;
  const maxCellHeight = (screenHeight * 0.75) / 12; // 12 Zellen im Tableau
 
  rouletteCells.forEach(cell => {
    cell.style.height = `${maxCellHeight}px`;
  });
}
 
// Führe die Funktion zur Anpassung der Zellenhöhen aus
adjustCellHeights();
 
// Reagiere auf Fenstergrößenänderungen, um die Zellenhöhen anzupassen
window.addEventListener('resize', adjustCellHeights);




 
 
     
 
   
Geschrieben
/*styles.css*/
/* Stile für das Modalfenster */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
 
.modal-content {
  background-color: #fefefe;
  margin: 1% auto;
  padding: 0%;
  border: 1px solid #888;
  width: 80%;
 
}
table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      text-align: center;
      font-weight: bold;
    }
    td.green {
      background-color: #008000;
      color: #ffffff;
    }
    td.red {
      background-color: #ff0000;
      color: #ffffff;
    }
    td.black {
      background-color: #000000;
      color: #ffffff;
    }
 
.selected-number {
      background-color: #ffcc00;
}
 /*.............................................................*/
 #menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
}

 
Geschrieben
vor einer Stunde schrieb Kibitz:

Hallo wiensschlechtester,

hast Du Dein Projekt online gestellt zum Ausprobieren ?

Link ?

K.

 

 

Hallo Herr K,

alles was ich bis jetzt habe sind die obigen drei Dateien, GitHub oder geheime Unterlagen im Zimmer 5c gibt es nicht.

Das Modal-Fenster öffnet sich mit "+" oder "Enter" oder Button.

 

Servus 

Geschrieben (bearbeitet)

Ich meinte nicht geheim sondern online: Deine index.html könnte Startseite mit Link sein.

Über diesen Link könnten wir online Deine Seite testen.

Falls Du erlaubst stell ich Deine Seite mal (bis auf Widerruf) auf meiner Testhomepage online.

Seawas

bearbeitet von Kibitz
Geschrieben
vor 15 Stunden schrieb Kibitz:

Ich meinte nicht geheim sondern online: Deine index.html könnte Startseite mit Link sein.

Über diesen Link könnten wir online Deine Seite testen.

Falls Du erlaubst stell ich Deine Seite mal (bis auf Widerruf) auf meiner Testhomepage online.

Seawas

mach nur

Geschrieben

Hallo wiener,

hab dir den Link per PM geschickt.

Das Ergebnis ist bunter, aber sicher anders als von dir erwartet.

 

Um deinen Ruhm und Ehre nicht zu schmälern also Link per PM.

Geschrieben
vor 7 Minuten schrieb Kibitz:

Hallo wiener,

hab dir den Link per PM geschickt.

Das Ergebnis ist bunter, aber sicher anders als von dir erwartet.

 

Um deinen Ruhm und Ehre nicht zu schmälern also Link per PM.

Danke, bis auf ein paar Buchstabendreher passt es bis jetzt....weiter bin ich noch nicht. 

Derzeit schaffe ich das Kunststück am Tag mehr Zeilen zu löschen als ich schrieb:huh:.

Das Modalfenster funkt....und darum ging es mir im ersten Schritt.

Geschrieben
vor 14 Minuten schrieb wiensschlechtester:

Danke, bis auf ein paar Buchstabendreher passt es bis jetzt....weiter bin ich noch nicht.

 

Die Buchstabendreher (Umlaute, scharfes ß) erscheinen erst online , im Visual Studio Code gibts keine Dreher

Geschrieben
vor 2 Stunden schrieb wiensschlechtester:

Wenn man mehrere Zahlen eingibt bockt irgendwann die unterste Zeile des Tableau - hast du einen Lösungsvorschlag?

Schnell sehe ich das auch nicht, ich würde nicht benötige Funktionen aus vergiss-es rauswerfen oder auskommentieren und schrittweise wieder zusammensetzen. (waun i de zeit hätt)

Geschrieben (bearbeitet)
vor 19 Stunden schrieb Kibitz:

Schnell sehe ich das auch nicht, ich würde nicht benötige Funktionen aus vergiss-es rauswerfen oder auskommentieren und schrittweise wieder zusammensetzen. (waun i de zeit hätt)

Welches Wort wurde von der Autokorrekturfunktion des Forums zu vergiss-es umgewandelt: vergiss-es vielleicht ?

bearbeitet von Kibitz
Geschrieben (bearbeitet)
vor 3 Stunden schrieb Kibitz:

Welches Wort wurde von der Autokorrekturfunktion des Forums zu vergiss-es umgewandelt: vergiss-es vielleicht ?

J a v a S c r i p t :D

 

 

bearbeitet von wiensschlechtester
  • 5 weeks later...
Geschrieben (bearbeitet)

So ich habe einmal einen weiteren Teil fertiggeschrieben, aber als eigenständiges Projekt, da ich J S erst lerne, wollt ich mich in Ruhe mit dem Thema Klassen beschäftigen (Chancenbestimmung erfolgt in einer Klasse). Die Funktionalität der ersten Dateien, siehe weiter oben, muß ich auch noch einbinden, und die Tabelle fertigstellen. Falls wer an den derzeitigen Code interessiert ist, stelle ich ihn gerne rein.

 

Die eigenwillige Darstellung ist Absicht, und kostete mir sehr viel Zeit ^_^.

RoulettePrgramm06.jpg

bearbeitet von wiensschlechtester

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden
×
×
  • Neu erstellen...