main.js, renderer.js, preload.js, renderertwo.js, index.html, sonuc.html, ve index.htmlde kullanılan css, sonuc.html de kullanılan css
main.js
`const { app, BrowserWindow, ipcMain } = require(‘electron’);
const path = require(‘node:path’);
let mainWindow, resultWindow;
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
preload: path.join(__dirname, ‘preload.js’)
}
});
win.loadFile(‘index.html’);
// Window controls via IPC
ipcMain.on(‘close-window’, () => {
win.close();
});
ipcMain.on(‘minimize-window’, () => {
win.minimize();
});
ipcMain.on(‘maximize-window’, () => {
if (win.isMaximized()) {
win.restore();
} else {
win.maximize();
}
});
return win;
}
app.on(“ready”, () => {
mainWindow = createWindow();
resultWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
resultWindow.loadFile(“sonuc.html”);
ipcMain.on(“update-results”, (event, { probabilities, generalProbability }) => {
resultWindow.webContents.send(“display-results”, { probabilities, generalProbability });
});
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});
renderer.jsdocument.getElementById(‘close-btn’).addEventListener(‘click’, () => {
window.electron.closeWindow();
});
document.getElementById(‘minimize-btn’).addEventListener(‘click’, () => {
window.electron.minimizeWindow();
});
document.getElementById(‘maximize-btn’).addEventListener(‘click’, () => {
window.electron.maximizeWindow();
});
document.getElementById(‘clear-last-btn’).addEventListener(‘click’, () => {
selectedNumbers.pop(); // Son eklenen sayıyı sil
calculateProbabilities(); // Olasılıkları tekrar hesapla
});
document.getElementById(‘clear-all-btn’).addEventListener(‘click’, () => {
selectedNumbers = ; // Tüm sayıları sil
calculateProbabilities(); // Olasılıkları tekrar hesapla
});
// Seçilen sayılar için liste
let selectedNumbers = ;
// Buton tıklamalarını dinleme
document.addEventListener(“DOMContentLoaded”, () => {
const buttonsContainer = document.getElementById(“buttons”);
// 0-36 arasında butonlar oluştur
for (let i = 0; i <= 36; i++) {
const button = document.createElement("button");
button.innerText = i;
button.className = "number-button";
button.addEventListener("click", () => {
// Butona tıklanınca sayı listeye eklenir
selectedNumbers.push(i);
calculateProbabilities(selectedNumbers);
});
buttonsContainer.appendChild(button);
}
// Tümünü sil butonu için işlem
document.getElementById("clear-all-btn").addEventListener("click", () => {
selectedNumbers = [];
calculateProbabilities(selectedNumbers); // Boş liste ile hesapla
});
// Son rakamı sil butonu için işlem
document.getElementById("clear-last-btn").addEventListener("click", () => {
if (selectedNumbers.length > 0) {
selectedNumbers.pop(); // Listenin son elemanını sil
calculateProbabilities(selectedNumbers); // Güncel liste ile hesaplama yap
}
});
});
// Olasılık hesaplama ve güncelleme
function calculateProbabilities(numbers) {
const frequencies = {};
numbers.forEach(number => {
frequencies[number] = (frequencies[number] || 0) + 1;
});
const totalNumbers = numbers.length || 1; // Bölme hatasını önlemek için en az 1 alınır
const probabilities = {};
// Olasılıkları hesapla
for (const num in frequencies) {
probabilities[num] = ((frequencies[num] / totalNumbers) * 100).toFixed(2);
}
// Sonuçları sırala
const sortedProbabilities = Object.entries(probabilities).sort((a, b) => b[1] - a[1]);
// Genel olasılığı hesapla
const generalProbability = calculateGeneralProbability(numbers, 1, 12);
// HTML'yi güncelle
updateResults(sortedProbabilities, generalProbability);
}
// Genel olasılık hesaplama
function calculateGeneralProbability(numbers, rangeStart, rangeEnd) {
const rangeCount = numbers.filter(num => num >= rangeStart && num <= rangeEnd).length;
return ((rangeCount / (numbers.length || 1)) * 100).toFixed(2); // Bölme hatasını önlemek için
}
// Dinamik sonuç güncelleme
function updateResults(probabilities, generalProbability) {
// sonuc.html sayfasını güncellemek için Electron’un IPC mekanizmasını kullan
const { ipcRenderer } = require(“electron”);
// Güncellenmiş olasılıkları gönder
ipcRenderer.send("update-results", { probabilities, generalProbability });
}
`
renderertwo.js
`const { ipcRenderer } = require(‘electron’);
ipcRenderer.on(‘display-results’, (event, { probabilities, generalProbability }) => {
const centeredDivs = document.querySelectorAll(“.centered-div”);
// Olasılıkları ekle
probabilities.forEach(([num, prob], index) => {
if (index < centeredDivs.length) {
centeredDivs[index].innerText = `${num}: ${prob}%`;
}
});
// Genel olasılığı güncelle
const generalDivs = document.querySelectorAll("tr:nth-child(3) .centered-div");
if (generalDivs.length > 0) {
generalDivs[0].innerText = `1-12: ${generalProbability}%`;
}
});`
preload.js
`const { contextBridge, ipcRenderer } = require(‘electron’);
contextBridge.exposeInMainWorld(‘electron’, {
closeWindow: () => ipcRenderer.send(‘close-window’),
minimizeWindow: () => ipcRenderer.send(‘minimize-window’),
maximizeWindow: () => ipcRenderer.send(‘maximize-window’),
updateResults: (results) => ipcRenderer.send(‘update-results’, results)
});
`
index.html ve styles.css
`
<h1>Sayılara Tıklayın</h1>
<!-- 0'dan 36'ya kadar butonlar ve silme butonları -->
<div id="buttons">
<!-- Sayı butonları dinamik olarak eklenecek -->
</div>
<div id="control-buttons">
<button id="clear-last-btn">Sil</button>
<button id="clear-all-btn">Tümünü Sil</button>
</div>
<script src="renderer.js"></script>
/* Başlık çubuğu ve taşıma alanı */
#title-bar {
background-color: #333;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
#drag-bar {
width: 10px;
height: 100%;
background-color: #444;
cursor: pointer;
}
#close-btn, #minimize-btn, #maximize-btn {
background-color: #444;
border: none;
color: white;
margin-left: 10px;
cursor: pointer;
}
#buttons {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 10px;
margin-top: 20px;
}
button {
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ccc;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #ddd;
}
#control-buttons {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.styled-table {
border-collapse: collapse;
width: 80%;
background-color: white;
text-align: center;
}
.styled-table td {
border: 1px solid black; /* Çizgileri belli etmek için /
padding: 20px;
text-align: center;
vertical-align: middle; / Dikey hizalama */
}
.merged-cell {
font-size: 24px;
font-weight: bold;
background-color: #f0f0f0; /* Hafif gri arka plan */
vertical-align: middle;
height: 150px;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.number {
font-size: 32px;
margin-bottom: 10px;
}
.centered-div {
width: 80px;
height: 40px;
background-color: transparent;
border: 1px dashed gray;
margin-top: 10px; /* Yazı ile biraz mesafe bırak */
}
.centered-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%; /* Hücre yüksekliğini kullan */
}
/* Genişletilmiş Hücre */
.expanded-cell {
vertical-align: top;
padding: 10px;
width: 33.33%;
}
/* İç Tablo */
.inner-table {
width: 100%;
border-collapse: collapse;
}
.inner-table td {
border: 1px solid gray; /* İç tablodaki hücrelerin çizgileri */
padding: 10px;
text-align: center;
}`
sonuc.html ve sonucstyles.css
`
|
0
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Genel Olasılık:
1-12
|
Genel Olasılık:
|
Genel Olasılık:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
/* Başlık çubuğu ve taşıma alanı /
#title-bar {
background-color: #333;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed; / Sayfanın üst kısmına sabitler /
width: 100%; / Çubuğu geniş yapar /
top: 0;
z-index: 1000; / Tabloya göre önde görünmesini sağlar */
}
#drag-bar {
width: 10px;
height: 100%;
background-color: #444;
cursor: pointer;
}
#close-btn, #minimize-btn, #maximize-btn {
background-color: #444;
border: none;
color: white;
margin-left: 10px;
cursor: pointer;
}
/* Sayfa içeriği /
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center; / Yatay ortalama /
align-items: center; / Dikey ortalama /
min-height: 100vh; / Yüksekliği tam sayfa yap /
background-color: #f9f9f9; / Arka plan rengi */
}
/* Tabloyu ortalama /
.styled-table {
margin-top: 80px; / Tabloyu üst çubuktan ayırmak için boşluk /
border-collapse: collapse;
width: 80%;
background-color: white;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / Gölge ekler /
border-radius: 8px; / Köşeleri yuvarlar /
overflow: hidden; / Taşan kısımları gizler */
}
.styled-table td {
border: 1px solid black; /* Çizgileri belli etmek için /
padding: 20px;
text-align: center;
vertical-align: middle; / Dikey hizalama */
}
.merged-cell {
font-size: 24px;
font-weight: bold;
background-color: #f0f0f0; /* Hafif gri arka plan */
vertical-align: middle;
height: 150px;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.number {
font-size: 32px;
margin-bottom: 10px;
}
.centered-div {
width: 80px;
height: 40px;
background-color: transparent;
border: 1px dashed gray;
margin-top: 10px; /* Yazı ile biraz mesafe bırak */
}
.centered-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%; /* Hücre yüksekliğini kullan */
}
/* Genişletilmiş Hücre */
.expanded-cell {
vertical-align: top;
padding: 10px;
width: 33.33%;
}
/* İç Tablo */
.inner-table {
width: 100%;
border-collapse: collapse;
}
.inner-table td {
border: 1px solid gray; /* İç tablodaki hücrelerin çizgileri */
padding: 10px;
text-align: center;
}`