Kaydet (Commit) 0b35acbd authored tarafından Muaz's avatar Muaz
......@@ -61,7 +61,7 @@
left: 0;
right: 0;
bottom: 0;
background-color: rgba(51, 68, 67, 0.90);
background-color: rgba(51, 68, 67, 0.80);
z-index: 2;
cursor: pointer;
color:aliceblue;
......@@ -242,6 +242,17 @@ body{
font-size: 20px;
font-family: "Itim";
}
#text{
position: absolute;
top: 40%;
left: 50%;
font-size: 50px;
text-align: center;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
font-family: 'Itim';
}
......@@ -322,4 +333,6 @@ body{
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}
\ No newline at end of file
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mangala | CLUTCH</title>
<link rel="stylesheet" href="assets/main.css" />
<link rel="stylesheet" href="assets/bootstrap.min.css" />
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mangala | CLUTCH</title>
<link rel="stylesheet" href="assets/main.css" />
<link rel="stylesheet" href="assets/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row" id="infoTitle">
<div class="col">
<div class="row">
<p id="mangalaTitle">MANGALA</p>
</div>
<div class="row" id="infoText">
<div class="col">
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p>
</div>
<div class="col text-right">
<img width="35" height="35" src="./assets/image/rulesYellow.png" alt="rules" />
<a href="./pages/nasilOynanir.html" class="link"><b>Nasıl Oynanır?</b></a>
<a href="#" class="link" style="font-size: 20px;">|</a>
<img width="35" height="35" src="./assets/image/settings.png" alt="rules">
<a href="#" class="link"><b>Ayarlar</b></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col" style="margin-right: 10px">
<a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img width="100" height="80" src="./assets/image/robot.png" alt="robot" />
</div>
<div class="col text-center">
<p class="oyunText">Robota Karşı Oyna</p>
</div>
<body>
<div class="container">
<div class="row" id="infoTitle">
<div class="col">
<div class="row">
<p id="mangalaTitle">MANGALA</p>
</div>
</a>
<a href="pages/gameArea.html" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img width="100" height="100" src="./assets/image/playFriendskirp.png" alt="playFriends" />
<div class="row" id="infoText">
<div class="col">
<p id="linksiz"><b>Türk Zeka ve Strateji Oyunu</b></p>
</div>
<div class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p>
<div class="col text-right">
<img
width="35"
height="35"
src="./assets/image/rulesYellow.png"
alt="rules"
/>
<a href="./pages/clientTemp.html" class="link"
><b>Nasıl Oynanır?</b></a
>
<a href="#" class="link" style="font-size: 20px">|</a>
<img
width="35"
height="35"
src="./assets/image/settings.png"
alt="rules"
/>
<a href="#" class="link" id="yeniPencere"><b>Ayarlar</b></a>
</div>
</div>
</a>
</div>
</div>
<div class="col" style="margin-left: 10px">
<a href="" class="boxA">
<div class="row skor" style="align-items: center">
<div class="col text-center">
<img width="50" height="50" src="./assets/image/score.png" alt="playFriends" />
</div>
<div class="col text-center">
<p class="oyunText">Skor</p>
<div class="row">
<div class="col" style="margin-right: 10px">
<a href="pages/robotGameArea.html" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img
width="100"
height="80"
src="./assets/image/robot.png"
alt="robot"
/>
</div>
<div class="col text-center">
<p class="oyunText">Robota Karşı Oyna</p>
</div>
</div>
</div>
</a>
<a href="" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img width="80" height="80" src="./assets/image/onlineSoluk.png" alt="playFriends" />
</a>
<a href="pages/gameArea.html" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img
width="100"
height="100"
src="./assets/image/playFriendskirp.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Arkadaşına Karşı Oyna</p>
</div>
</div>
<div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p>
</a>
</div>
<div class="col" style="margin-left: 10px">
<a href="" class="boxA">
<div class="row skor" style="align-items: center">
<div class="col text-center">
<img
width="50"
height="50"
src="./assets/image/score.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Skor</p>
</div>
</div>
</div>
</a>
<a href="" class="boxA">
<div class="row skor" style="align-items: center">
<div class="col text-center">
<img width="50" height="50" src="./assets/image/contact.png" alt="playFriends" />
</a>
<a href="" class="boxA">
<div class="row oyun" style="align-items: center">
<div class="col text-center">
<img
width="80"
height="80"
src="./assets/image/onlineSoluk.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Multiplayer Oyna</p>
</div>
</div>
<div class="col text-center">
<p class="oyunText">Clutch</p>
</a>
<a href="pages/info.html" class="boxA">
<div class="row skor" style="align-items: center">
<div class="col text-center">
<img
width="50"
height="50"
src="./assets/image/contact.png"
alt="playFriends"
/>
</div>
<div class="col text-center">
<p class="oyunText">Clutch</p>
</div>
</div>
</div>
</a>
</a>
</div>
</div>
</div>
</div>
<script>
const electron = require("electron");
const { ipcRenderer } = electron;
<script>
const electron = require("electron");
const { ipcRenderer } = electron; // backend ile iletişim
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener("click", () => {
ipcRenderer.send("btnClick", "Oyna tuşuna basıldı!");
});
let yeniPencere = document.querySelector("#yeniPencere");
yeniPencere.addEventListener("click", () => {
ipcRenderer.send("key:newWindow", true);
});
let btnSettings = document.querySelector("#btnSettings");
btnSettings.addEventListener("click", () => {
ipcRenderer.send("key:settingScreen");
});
let sendBtn = document.querySelector("#sendBtn");
sendBtn.addEventListener("click", () => {
ipcRenderer.send("btnClick", "Oyna tuşuna basıldı!");
});
let btnExit = document.querySelector("#btnExit");
btnExit.addEventListener("click", () => {
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
let btnSettings = document.querySelector("#btnSettings");
btnSettings.addEventListener("click", () => {
ipcRenderer.send("key:settingScreen");
});
</html>
\ No newline at end of file
let btnExit = document.querySelector("#btnExit");
btnExit.addEventListener("click", () => {
ipcRenderer.send(
"key:exitScreen",
"file://" + __dirname + "/pages/settings.html"
);
});
</script>
</body>
</html>
......@@ -2,57 +2,91 @@ const electron = require("electron");
const url = require("url"); // *Hangi HTML sayfasını kullancağımızı belirler.
const path = require("path");
const { protocol } = require("electron");
const remote = electron.remote;
const { app, BrowserWindow, ipcMain } = electron;
let mainWindow;
let mainWindow, addWindow;
// *Uygulama hazır olduğunda ilk çalışan fonksiyon.
app.on("ready", () => {
console.log("Uygulama çalıştı.");
mainWindow = new BrowserWindow({
webPreferences: {
//* Frontend kısmında "Electron require() is not defined" hata çözümü.
nodeIntegration: true,
contextIsolation: false,
},
width: 1000,
height: 600,
resizable: true, // *Ekran boyutu imleç ile değiştirilemez.
maximizable: false, // *Ekran maksimum hale getirilemez
backgroundColor: "#d5ecc2",
});
console.log("Uygulama çalıştı.");
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "main.html"),
protocol: "file:",
slashes: true,
})
);
mainWindow = new BrowserWindow({
webPreferences: {
//* Frontend kısmında "Electron require() is not defined" hata çözümü.
nodeIntegration: true,
contextIsolation: false,
},
width: 1000,
height: 600,
resizable: true, // *Ekran boyutu imleç ile değiştirilemez.
maximizable: false, // *Ekran maksimum hale getirilemez
backgroundColor: "#d5ecc2",
});
ipcMain.on("btnClick", (err, data) => {
console.log(data);
});
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "main.html"),
protocol: "file:",
slashes: true,
})
);
ipcMain.on("key:settingScreen", () => {
createWİndow();
});
});
mainWindow.on("close", () => {
app.quit();
});
function createWİndow() {
ipcMain.on("btnClick", (err, data) => {
console.log(data);
});
ipcMain.on("key:settingScreen", () => {
//createWİndow();
console.log("key:settingScreen");
});
//Yeni pencere
ipcMain.on("key:newWindow", () => {
addWindow = new BrowserWindow({
width: 482,
height: 200,
title: "Ayarlar",
webPreferences: {
//* Frontend kısmında "Electron require() is not defined" hata çözümü.
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
width: 430,
height: 370,
title: "Oyun Ayarları",
});
addWindow.loadURL(
url.format({
pathname: path.join(__dirname, "./pages/settings.html"),
protocol: "file:",
slashes: true,
})
url.format({
pathname: path.join(__dirname, "./pages/settings.html"),
protocol: "file:",
slashes: true,
})
);
}
\ No newline at end of file
});
//Pencereyi Kapat
ipcMain.on("key:closeWindow", () => {
remote.getCurrentWindow().close();
});
});
function createWİndow() {
addWindow = new BrowserWindow({
width: 482,
height: 200,
title: "Oda Ayarları",
});
addWindow.loadURL(
url.format({
pathname: path.join(__dirname, "./pages/odaAyarlari.html"),
protocol: "file:",
slashes: true,
})
);
}
This diff is collapsed.
......@@ -2,7 +2,7 @@
const io = require("socket.io-client");
//Connect
let game = io.connect("http://localhost:3030/game");
let game = io.connect("https://mangala-server.herokuapp.com/game");
const username = "Kerim";
......@@ -18,6 +18,7 @@ const odaOlusturBtn = document.getElementById("odaOlusturBtn");
odaOlusturBtn.onclick = () => {
let elemt = document.createElement("p");
//Server kısmında key adında oda olustur.
console.log("girdi");
game.emit("odaOlustur", randomKey);
game.on("odaBasariliSekildeOlusturuldu", (odaninKeyDegeri) => {
elemt.textContent = odaninKeyDegeri + " odası oluşturuldu.";
......
This diff is collapsed.
......@@ -11,34 +11,20 @@
<body>
<div class="container-fluid">
<div id="overlay" onclick="overlayOff()">
<div class="row" style="padding: 50px;">
<div class="col align-self-center disKenar" style="height: 400px;">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODA KUR</div>
<div class="overlayInput"><button class="big-button" style="font-size: 11px;">OLUŞTUR</button></div>
</div>
</div>
<div class="col align-self-center disKenar" style="height: 400px;">
<div class="odaCerceve kenar">
<div class="overlayTitle">ODAYA KATIL</div>
<div class="overlayInput">
<div class="row">
<div class="col-7 align-self-center"><input class="form-control" type="text" placeholder="Oda Numarası" style="margin-left: 10px;margin-top: 5px;"></div>
<div class="col-5"><button class="big-button" style="font-size: 11px;margin-right: 10px;">GİR</button></div>
</div>
</div>
</div>
</div>
</div>
<div id="overlay">
<div><p id="text"></p></div>
<div style="position: absolute;
top: 50%;
left: 40%;"><button class="big-button" onclick="yenidenOyna()" style="font-size: 11px;width: 150px;">Yeniden Oyna</button></div>
</div>
<div class="row" style="margin: 0;">
<div class="col-4"><div class="geriButonu"><a href="turnBackMain.html"><img width="60" height="60" src="../assets/image/geri.png" alt="geri"></a></div></div>
<div class="col-4"><div class="geriButonu"><a href="turnBackMain.html" onclick="window.open(this.href, 'Anasayfaya Dön',
'left=20,top=20,width=405,height=350,toolbar=1,resizable=0'); return false;"><img width="60" height="60" src="../assets/image/geri.png" alt="geri"></a></div></div>
<div class="col-4"><div class="bos"><button class="btn-primary" onclick="overlay()">overlay</button></div></div>
<div class="col-4 text-right" id="user1">
<div id="user2card">
<b>Oyuncu 2</b>
<b>Oyuncu 1</b>
</div>
</div>
</div>
......@@ -147,8 +133,8 @@
</div>
</div>
<!-- toast js fonksiyonu eklenecek-->
<div class="col-4 text-center "><div class="toast">Muaz odaya katıldı</div></div>
<div class="col-4 text-right"><div class="oda">Oda Numarası:Bjkcz</div></div>
<div class="col-4 text-center "><div class="toast"></div></div>
<div class="col-4 text-right"><div class="oda"></div></div>
</div>
......
......@@ -23,6 +23,9 @@ var treasure2=new Hole(0,"user2hole7");
user1hole.push(treasure1);
user2hole.push(treasure2);
var player=2;
waitcolor="#ed664c";//// Kırmızı renk beklesin
playercolor="#ffe268";// Sarı renk oynasın
function tikla(id){
// ekranda bulunan kuyulardaki kuyulara tıklama ile tetiklenen fonk.
......@@ -35,6 +38,10 @@ function tikla(id){
player=2;
dagit(Number(id[4]),Number(id[9]));
boncukCiz();
if(player==2){
document.getElementById("user1").style.backgroundColor=waitcolor;
document.getElementById("user2").style.backgroundColor=playercolor;
}
}
}else if(Number(id[4])==2 && player==Number(id[4])){
......@@ -43,10 +50,15 @@ function tikla(id){
player=1;
dagit(Number(id[4]),Number(id[9]));
boncukCiz();
if(player==1){
document.getElementById("user1").style.backgroundColor=playercolor;
document.getElementById("user2").style.backgroundColor=waitcolor;
}
}
}
}
function dagit(user,hole){
......@@ -102,7 +114,7 @@ function dagit(user,hole){
user1hole[6].addedDotcount += user2hole[sonHole].value;
user2hole[sonHole].value = 0;
user2hole[sonHole].addedDotcount = 0;
}else if(user1hole[sonHole].value == 1 && user2hole[5 - sonHole].value > 0){ // son tas kendindenki bos kuyuna geliyosa,
}else if(sira==1&&user1hole[sonHole].value == 1 && user2hole[5 - sonHole].value > 0){ // son tas kendindenki bos kuyuna geliyosa,
// ve karsi kuyu da tas varsa kendi tek tasini ve karsidakileri hepsini al
console.log(user2hole[5 - sonHole].value);
user1hole[6].value += user2hole[5 - sonHole].value + 1;
......@@ -174,7 +186,7 @@ function dagit(user,hole){
user2hole[6].addedDotcount += user1hole[sonHole].value;
user1hole[sonHole].value = 0;
user1hole[sonHole].addedDotcount = 0;
}else if(user2hole[sonHole].value == 1 && user1hole[5 - sonHole].value > 0){ // son tas kendindenki bos kuyuna geliyosa,
}else if(sira==1 && user2hole[sonHole].value == 1 && user1hole[5 - sonHole].value > 0){ // son tas kendindenki bos kuyuna geliyosa,
// ve karsi kuyu da tas varsa kendi tek tasini ve karsidakileri hepsini al
console.log(user1hole[5 - sonHole].value);
user2hole[6].value += user1hole[5 - sonHole].value + 1;
......@@ -311,10 +323,50 @@ function drop(ev) {
//overlay ac kapa
function overlay() {
document.getElementById("overlay").style.display = "block";
state = false;
document.getElementById("overlay").style.display = "block";
if(user1hole[6].value > user2hole[6].value){
document.getElementById("text").innerHTML = "Kaybettiniz :(";
}else if( user1hole[6].value == user2hole[6].value){
document.getElementById("text").innerHTML = "Berabere.";
}else{
document.getElementById("text").innerHTML = "Tebrikler! Kazandınız. :)";
}
}
function overlayOff() {
document.getElementById("overlay").style.display = "none";
}
function overlayOff() {
document.getElementById("overlay").style.display = "none";
function yenidenOyna(){
// yeniden oynanmasi icin degiskenleri baslangic konumuna getirir.
player = 2;
document.getElementById("user1").style.backgroundColor=waitcolor;
document.getElementById("user2").style.backgroundColor=playercolor;
for (var i = 1; i < 7; i++) {
var hole1 = new Hole(4,"user1hole"+i.toString());
var hole2 = new Hole(4,"user2hole"+i.toString());
user1hole.push(hole1);
user2hole.push(hole2);
};
treasure1=new Hole(0,"user1hole7");
treasure2=new Hole(0,"user2hole7");
user1hole.push(treasure1);
user2hole.push(treasure2);
boncukCiz();
overlayOff();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/bootstrap.min.css" />
<style>
@font-face {
font-family: "Itim";
src: url('../assets/fonts/Itim-Regular.ttf') format("truetype");
}
body {
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to bottom, #416e75, #529290, #6db7a6, #94dbb5, #c6ffc1);
font-family: 'Itim';
min-height: 542px;
background-repeat: no-repeat;
background-size: contain;
color: #334443
}
div.back {
border-radius: 10%;
height: 500px;
width: 600px;
position: absolute;
background: linear-gradient(180deg, #FFDA89, #FF8B36);
box-shadow: inset -2px 0px 4px rgba(255, 255, 255, 0.3), inset 0 0 56px rgb(225, 133, 70, 0.3);
filter: drop-shadow(0px 52px 94px rgba(253, 115, 51, 0.349));
}
div.front {
border-radius: 10%;
height: 500px;
width: 600px;
background: linear-gradient(180deg, rgb(255, 230, 186, 0.3), rgba(255, 237, 222, 0.6));
position: relative;
backdrop-filter: blur(16px);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.4), inset 0px 0px 35px rgba(0, 0, 0, 0.08);
}
p {
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
h2,
h1 {
padding-left: 20px;
padding-right: 20px;
}
h1 {
text-align: center;
}
.baslik {
font-size: 22px;
margin-left: 15px;
text-align: center;
}
.ad {
font-size: 20px;
margin-left: 35px;
font-weight: bold;
}
.info {
margin-left: 35px;
margin-top: 6px;
font-style: italic;
color: rgb(77, 77, 77);
}
a{
color:#334443;
}
.geributon{
margin-left: 15px;
margin-top:10px ;
}
.titleGeri{
margin-left: 70px;
margin-top:10px ;
text-align: center;
}
</style>
</head>
<body>
<div class="back"></div>
<div class="front">
<div class="geributon" style="float:left;"><a href="../main.html"><img width="60" height="60" src="../assets/image/geri.png" alt="geri"></a></div>
<div class="titleGeri" style="float:left;"><h1>Clutch Software</h1></div>
<div style="clear:both;"></div>
<h4 class="baslik">TAKIM </h4>
<div class="row" style="padding: 15px;">
<div class="col-1 align-self-center">
<img width="70" height="70" src="../assets/image/kerim.png" alt="" />
</div>