Skip to content

M
mangala-pardusacikhack
Kaydet (Commit) 2a861ee0 authored tarafından Abdülkerim AKSAK's avatar Abdülkerim AKSAK
Dosyalara gözat
Seçenekler

merge

üst 23dba29f 3f9b1d4e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 298 additions and 32 deletions
.DS_Store
Dosyayı görüntüle @ 2a861ee0
No preview for this file type
main.html
Dosyayı görüntüle @ 2a861ee0
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mangala | CLUTCH</title> <title>Mangala | CLUTCH</title>
<link rel="stylesheet" href="assets/main.css" /> <link rel="stylesheet" href="assets/main.css" />
<link rel="stylesheet" href="assets/bootstrap.min.css" /> <link rel="stylesheet" href="assets/bootstrap.min.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="row" id="infoTitle"> <div class="row" id="infoTitle">
<div class="col"> <div class="col">
<div class="row "> <div class="row">
<p id="mangalaTitle">MANGALA</p> <p id="mangalaTitle">MANGALA</p>
</div> </div>
<div class="row" id="infoText"> <div class="row" id="infoText">
...@@ -22,33 +20,44 @@ ...@@ -22,33 +20,44 @@
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p> <p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p>
</div> </div>
<div class="col text-right"> <div class="col text-right">
<img width="35" height="35" src="./assets/image/rulesYellow.png" alt="rules"> <img
width="35"
height="35"
src="./assets/image/rulesYellow.png"
alt="rules"
/>
<a href="#" class="link"><b>Nasıl Oynanır?</b></a> <a href="#" class="link"><b>Nasıl Oynanır?</b></a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col" style="margin-right: 10px;"> <div class="col" style="margin-right: 10px">
<a href="pages/robotGameArea.html" class="boxA"> <a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center;"> <div class="row oyun" style="align-items: center">
<div class="col text-center"> <div class="col text-center">
<img width="100" height="80" src="./assets/image/robot.png" alt="robot"> <img
width="100"
height="80"
src="./assets/image/robot.png"
alt="robot"
/>
</div> </div>
<div class="col text-center"> <div class="col text-center">
<p class="oyunText">Robota Karşı Oyna</p> <p class="oyunText">Robota Karşı Oyna</p>
</div> </div>
</div> </div>
</a> </a>
<a href="pages/gameArea.html" class="boxA"> <a href="pages/gameArea.html" class="boxA">
<div class="row oyun" style="align-items: center;"> <div class="row oyun" style="align-items: center">
<div class="col text-center"> <div class="col text-center">
<img width="100" height="100" src="./assets/image/playFriendskirp.png" alt="playFriends"> <img
width="100"
height="100"
src="./assets/image/playFriendskirp.png"
alt="playFriends"
/>
</div> </div>
<div class="col text-center"> <div class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p> <p class="oyunText">Arkadaşına Karşı Oyna</p>
...@@ -56,11 +65,16 @@ ...@@ -56,11 +65,16 @@
</div> </div>
</a> </a>
</div> </div>
<div class="col" style="margin-left: 10px;"> <div class="col" style="margin-left: 10px">
<a href="" class="boxA"> <a href="" class="boxA">
<div class="row skor" style="align-items: center;"> <div class="row skor" style="align-items: center">
<div class="col text-center"> <div class="col text-center">
<img width="50" height="50" src="./assets/image/score.png" alt="playFriends"> <img
width="50"
height="50"
src="./assets/image/score.png"
alt="playFriends"
/>
</div> </div>
<div class="col text-center"> <div class="col text-center">
<p class="oyunText">Skor</p> <p class="oyunText">Skor</p>
...@@ -68,9 +82,14 @@ ...@@ -68,9 +82,14 @@
</div> </div>
</a> </a>
<a href="" class="boxA"> <a href="" class="boxA">
<div class="row oyun" style="align-items: center;"> <div class="row oyun" style="align-items: center">
<div class="col text-center"> <div class="col text-center">
<img width="80" height="80" src="./assets/image/onlineSoluk.png" alt="playFriends"> <img
width="80"
height="80"
src="./assets/image/onlineSoluk.png"
alt="playFriends"
/>
</div> </div>
<div class="col text-center"> <div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p> <p class="oyunText">Multiplayer Oyna</p>
...@@ -78,9 +97,14 @@ ...@@ -78,9 +97,14 @@
</div> </div>
</a> </a>
<a href="" class="boxA"> <a href="" class="boxA">
<div class="row skor" style="align-items: center;"> <div class="row skor" style="align-items: center">
<div class="col text-center"> <div class="col text-center">
<img width="50" height="50" src="./assets/image/contact.png" alt="playFriends"> <img
width="50"
height="50"
src="./assets/image/contact.png"
alt="playFriends"
/>
</div> </div>
<div class="col text-center"> <div class="col text-center">
<p class="oyunText">Clutch</p> <p class="oyunText">Clutch</p>
...@@ -89,16 +113,11 @@ ...@@ -89,16 +113,11 @@
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
const electron = require("electron"); const electron = require("electron");
const { const { ipcRenderer } = electron;
ipcRenderer
} = electron;
let sendBtn = document.querySelector("#sendBtn"); let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener("click", () => { sendBtn.addEventListener("click", () => {
...@@ -118,6 +137,5 @@ ...@@ -118,6 +137,5 @@
); );
}); });
</script> </script>
</body> </body>
</html> </html>
package-lock.json
Dosyayı görüntüle @ 2a861ee0
This diff is collapsed.
package.json
Dosyayı görüntüle @ 2a861ee0
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"electron": "^12.0.4" "electron": "^12.0.4",
"socket.io-client": "^4.0.1"
} }
} }
pages/clientApp.js 0 → 100644
Dosyayı görüntüle @ 2a861ee0
//client
const io = require("socket.io-client");
//Connect
let game = io.connect("http://localhost:3030/game");
const username = "Kerim";
// server kontrol
game.on("welcome", (data) => {
console.log(data);
});
// ODA OLUSTUR
let randomKey = Math.random().toString(36).substr(2, 5); // odalar için random key
const odaOlusturContainer = document.getElementById("odaOlustur");
const odaOlusturBtn = document.getElementById("odaOlusturBtn");
odaOlusturBtn.onclick = () => {
let elemt = document.createElement("p");
//Server kısmında key adında oda olustur.
game.emit("odaOlustur", randomKey);
game.on("odaBasariliSekildeOlusturuldu", (odaninKeyDegeri) => {
elemt.textContent = odaninKeyDegeri + " odası oluşturuldu.";
});
odaOlusturContainer.appendChild(elemt);
let elemt2 = document.createElement("p");
game.emit("joinRoom", randomKey, username);
game.on("success", (key) => {
elemt2.textContent = key + " odasına giriş yapıldı.";
});
game.on("err", (key) => {
elemt2.textContent = key + " odasına giriş yapılamadı.";
});
odaOlusturContainer.appendChild(elemt2);
let elemt3 = document.createElement("p");
game.on("newUser", (username) => {
elemt3.textContent = username + " odaya katıldı.";
});
odaOlusturContainer.appendChild(elemt3);
};
// ODAYA KATIL
const odayaKatilContainer = document.getElementById("odayaKatil");
const odayaKatilBtn = document.getElementById("odayaKatilBtn");
const odayaKatilInput = document.getElementById("odayaKatilInput");
odayaKatilBtn.onclick = () => {
let roomKey = odayaKatilInput.value;
game.emit("joinRoom", roomKey, "Muaz"); //username dinamik olmalı!
let elemt = document.createElement("p");
game.on("success", (roomKey) => {
elemt.textContent = roomKey + " odasına giriş yapıldı.";
});
game.on("err", (roomKey) => {
elemt.textContent = roomKey + " odasına giriş yapılamadı.";
});
odayaKatilContainer.appendChild(elemt);
};
// ODADAN AYRIL
const odadanAyrilBtn = document.getElementById("odadanAyrilBtn");
odadanAyrilBtn.onclick = () => {
let roomKey = odayaKatilInput.value;
game.emit("disconnection", roomKey);
let elemt = document.createElement("p");
game.on("disconnectionRoom", (key) => {
elemt.textContent = key + " odasından ayrıldın.";
});
odayaKatilContainer.appendChild(elemt);
};
// MESAJ YOLLAMA <OdayaKatıl>
function sendMessage() {
let odayaKatilInput = document.getElementById("odayaKatilInput");
let roomKey = odayaKatilInput.value; // Odaya katıl alanı için etkin
let input = document.getElementById("mesajGonderOdayaKatilInput");
let msg = input.value;
input.value = "";
game.emit("newMsg", "Muaz", msg, roomKey);
}
const mesajGonderBtnOdayaKatil = document.getElementById(
"mesajGonderBtnOdayaKatil"
);
mesajGonderBtnOdayaKatil.onclick = () => {
sendMessage();
};
// MESAJI ALMA <OdaOlustur>
function addMessage(container, username, msg) {
let elemt = document.createElement("p");
elemt.textContent = `${username}:${msg}`;
container.appendChild(elemt);
}
game.on("newMessage", (username, msg) => {
console.log(`newMessage...: "${username}" kisisinden "${msg}" mesajı geldi.`);
addMessage(odaOlusturContainer, username, msg);
});
pages/clientTemp.html 0 → 100644
Dosyayı görüntüle @ 2a861ee0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<input id="username" type="text" placeholder="user-name<inaktif>" />
<div style="display: flex; justify-content: center; align-items: center">
<div
id="odaOlustur"
style="
height: 500px;
width: 300px;
border: solid 1px black;
margin: 20px;
"
>
<p>ODA OLUŞTUR</p>
<button id="odaOlusturBtn" type="submit">Olustur</button>
<br />
<input
id="mesajGonderOdaOlusturInput"
type="text"
placeholder="mesaj"
/>
<button id="mesajGonderBtnOdaOlustur" type="submit">Gonder</button>
<hr />
</div>
<div
id="odayaKatil"
style="
height: 500px;
width: 300px;
border: solid 1px black;
margin: 20px;
"
>
<p>ODAYA KATIL</p>
<button id="odadanAyrilBtn" type="submit">Odadan Ayril</button>
<br />
<input id="odayaKatilInput" type="text" placeholder="key" />
<button id="odayaKatilBtn" type="submit">Odaya Katil</button>
<input
id="mesajGonderOdayaKatilInput"
type="text"
placeholder="mesaj"
/>
<button id="mesajGonderBtnOdayaKatil" type="submit">Gonder</button>
<hr />
</div>
<div
id="oyuncuAra"
style="
height: 500px;
width: 300px;
border: solid 1px black;
margin: 20px;
"
>
<p>OYUNCU ARA</p>
</div>
</div>
<script src="./clientApp.js"></script>
</body>
</html>
socketIOServer/package-lock.json 0 → 100644
Dosyayı görüntüle @ 2a861ee0
This source diff could not be displayed because it is too large. You can view the blob instead.
socketIOServer/package.json 0 → 100644
Dosyayı görüntüle @ 2a861ee0
{
"name": "socketioserver",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"nodemon": "^2.0.7",
"socket.io": "^4.0.1"
}
}
socketIOServer/server.js 0 → 100644
Dosyayı görüntüle @ 2a861ee0
// Server Side
const express = require("express");
const app = express();
const port = 3030;
const http = require("http").createServer();
const io = require("socket.io")(http);
var gameRooms = []; // Kullanıcıların oluşturmuş oldukları odalar
io.of("/game").on("connection", (socket) => {
socket.emit("welcome", "hello to <namespcaess>");
// Oda Oluşturma
socket.on("odaOlustur", function (roomKey) {
gameRooms.push(roomKey); //oda için oluşturulan key
console.log(`odaOlustur..: "${roomKey}" odasi olusturuldu.`);
return socket.emit("odaBasariliSekildeOlusturuldu", roomKey);
});
// Odaya katılma
socket.on("joinRoom", (roomKey, username) => {
if (gameRooms.includes(roomKey)) {
socket.join(roomKey);
io.of("/game").in(roomKey).emit("newUser", username); //odaya biri girdiğinde tetiklenir
console.log(
`joinRoom..: "${roomKey}" odasina "${username}" giris yapti.`
);
return socket.emit("success", roomKey);
} else {
console.log(
`joinRoom..: "${roomKey}" odasina "${username}" giris yaptilamadi.`
);
return socket.emit("err", roomKey);
}
});
// Odadan ayrılma
//? username
socket.on("disconnection", (roomKey) => {
console.log(`disconnection...: "${roomKey}" odasindan ayrildi.`);
let index = gameRooms.indexOf(roomKey); //roomKey'e ait index değeri
if (index > -1) {
gameRooms.splice(index, 1); // odadan ayrilma gerceklestiginde oda silinir
}
return socket.emit("disconnectionRoom", roomKey);
});
//Mesaj gönderme
socket.on("newMsg", (username, msg, roomKey) => {
console.log(
`newMsg...: "${username}" kisisinden "${roomKey}" odasindan "${msg}" mesaji yollandi.`
);
socket.broadcast.to(roomKey).emit("newMessage", username, msg); //oda içindeki her user için gönderilir.
});
});
http.listen(port, () => {
console.log(`Server is on http://localhost:${port}`);
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment