Skip to content

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

Toast oluşturuldu.

üst 3b7d9f88
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 127 deletions
assets/gameArea.css
Dosyayı görüntüle @ 165f08d4
......@@ -330,3 +330,23 @@ button.big-button:active::before {
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}
#toasts {
bottom: 10px;
right: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.toast {
background-color: #c6ffc1;
border-radius: 10px;
padding: 1rem 2rem;
margin: 0.5rem;
}
.toast.info {
color: #334443;
}
pages/clientApp.js
Dosyayı görüntüle @ 165f08d4
//client
const io = require("socket.io-client");
//Connect
let game = io.connect("https://mangala-server.herokuapp.com/game");
//Connect http://localhost:3000
//let game = io.connect("https://mangala-server.herokuapp.com/game");
let game = io.connect("http://localhost:3000/game");
const username = "Kerim";
......@@ -12,7 +13,7 @@ game.on("welcome", (data) => {
});
// ODA OLUSTUR
let randomKey = Math.random().toString(36).substr(2, 5); // odalar için random key
//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 = () => {
......
pages/clientGameArea.html
Dosyayı görüntüle @ 165f08d4
......@@ -40,12 +40,14 @@
type="text"
placeholder="Oda Numarası"
style="margin-left: 10px; margin-top: 5px"
id="odayaKatilInput"
/>
</div>
<div class="col-5">
<button
class="big-button"
style="font-size: 11px; margin-right: 10px"
id="odayaKatilBtn"
>
GİR
</button>
......@@ -480,21 +482,17 @@
</div>
<!-- toast js fonksiyonu eklenecek-->
<div class="col-4 text-center">
<div class="toast" id="odaGirisi"></div>
<div id="toasts"></div>
</div>
<div class="col-4 text-right">
<div class="oda" id="odaOlustur"></div>
</div>
</div>
</div>
</div>
<script src="clientApp.js"></script>
<script src="clientGameArea.js"></script>
</body>
......
pages/clientGameArea.js
Dosyayı görüntüle @ 165f08d4
......@@ -357,11 +357,27 @@ function yenidenOyna() {
overlayOff();
}
// SERVER İLETİŞİM
//client
const io = require("socket.io-client");
//Connect http://localhost:3000
//let game = io.connect("https://mangala-server.herokuapp.com/game");
let game = io.connect("http://localhost:3000/game");
const username = "Kerim";
// server kontrol
game.on("welcome", (data) => {
console.log(data);
});
var randomKey;
function overlayOda() {
document.getElementById("overlayOda").style.display = "block";
//ODA OLUSTURMA
let randomKey = Math.random().toString(36).substr(2, 5); // odalar için random key
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 = () => {
......@@ -388,8 +404,29 @@ function overlayOda() {
let odaGirisi = document.getElementById("odaGirisi");
game.on("newUser", (username) => {
elemt3.textContent = username + " odaya katıldı.";
createNotification(username + " odaya katıldı.");
});
odaGirisi.appendChild(elemt3);
//odaGirisi.appendChild(elemt3);
overlayOdaOff();
};
// ODAYA KATIL
const odaGirisi = document.getElementById("odaGirisi");
let odayaKatilBtn = document.getElementById("odayaKatilBtn");
let 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ı.";
createNotification(roomKey + " odasına giriş yapıldı.");
});
game.on("err", (roomKey) => {
elemt.textContent = roomKey + " odasına giriş yapılamadı.";
createNotification(roomKey + " odasına giriş yapılamadı.");
});
//odaGirisi.appendChild(elemt);
overlayOdaOff();
};
}
......@@ -397,3 +434,14 @@ function overlayOda() {
function overlayOdaOff() {
document.getElementById("overlayOda").style.display = "none";
}
// Toast script
const createNotification = (mesaj) => {
const notif = document.createElement("div");
const toasts = document.getElementById("toasts");
notif.classList.add("toast");
notif.classList.add("info");
notif.innerText = mesaj;
toasts.appendChild(notif);
setTimeout(() => notif.remove(), 3000);
};
pages/turnBackMain.html
Dosyayı görüntüle @ 165f08d4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../assets/bootstrap.min.css" />
<link rel="stylesheet" href="../assets/button.sccs" />
<style>
@font-face {
@font-face {
font-family: "Itim";
src: url('../assets/fonts/Itim-Regular.ttf') format("truetype");
}
body {
width: 400px;
height: 250px;
background-color: #334443;
color: aliceblue;
font-family: "Itim";
}
:root {
--backgroundColor: rgba(246, 241, 209);
--colorShadeA: rgb(88, 112, 85);
--colorShadeB: rgb(88, 112, 85);
--colorShadeC: rgb(187, 240, 182,94);
--colorShadeD: rgb(197, 252, 192,99);
--colorShadeE: rgb(198, 255, 193,100);
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
src: url("../assets/fonts/Itim-Regular.ttf") format("truetype");
}
body {
width: 400px;
height: 250px;
background-color: #334443;
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: 11px;
color:var(--colorShadeA);
font-weight: 700;
text-transform: uppercase;
font-family: inherit;
width: 150px;
}
color: aliceblue;
font-family: "Itim";
}
:root {
--backgroundColor: rgba(246, 241, 209);
--colorShadeA: rgb(88, 112, 85);
--colorShadeB: rgb(88, 112, 85);
--colorShadeC: rgb(187, 240, 182, 94);
--colorShadeD: rgb(197, 252, 192, 99);
--colorShadeE: rgb(198, 255, 193, 100);
}
button.big-button {
padding: 1em 2em;
border: 2px solid var(--colorShadeA);
border-radius: 1em;
background: var(--colorShadeE);
transform-style: preserve-3d;
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--colorShadeC);
border-radius: inherit;
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
transform: translate3d(0, 0.75em, -1em);
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
font-size: 11px;
color: var(--colorShadeA);
font-weight: 700;
text-transform: uppercase;
font-family: inherit;
width: 150px;
}
button.big-button:hover {
background: var(--colorShadeD);
transform: translate(0, 0.375em);
}
button.big-button {
padding: 1em 2em;
border: 2px solid var(--colorShadeA);
border-radius: 1em;
background: var(--colorShadeE);
transform-style: preserve-3d;
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--colorShadeC);
border-radius: inherit;
box-shadow: 0 0 0 2px var(--colorShadeB),
0 0.75em 0 0 var(--colorShadeA);
transform: translate3d(0, 0.75em, -1em);
transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button:hover::before {
transform: translate3d(0, 0.75em, -1em);
}
button.big-button:hover {
background: var(--colorShadeD);
transform: translate(0, 0.375em);
}
button.big-button:active {
transform: translate(0em, 0.75em);
}
button.big-button:hover::before {
transform: translate3d(0, 0.75em, -1em);
}
button.big-button:active::before {
transform: translate3d(0, 0, -1em);
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
button.big-button:active {
transform: translate(0em, 0.75em);
}
}
button.big-button:active::before {
transform: translate3d(0, 0, -1em);
box-shadow: 0 0 0 2px var(--colorShadeB),
0 0.25em 0 0 var(--colorShadeB);
}
</style>
</head>
</head>
<body>
<body>
<div class="container">
<div class="col">
<div class="row">
<div class="col text-center" style="margin-top: 50px; color:#ffe268; text-shadow: 1.5px 1.5px #a87414;" ><h4>ANASAYFAYA DÖN</h4></div>
</div>
<div class="row" style="margin-top:10px;margin-bottom:10px;font-size: 14px;">
<p>Anasayfaya döndüğünüzde oyun kaydedilmez.</p>
</div>
<div class="row">
<div class="col">
<button class="big-button" id="anasayfayaDon">Anasayfaya Dön</button>
</div>
<div class="col">
<!--<a href="#" class="btn">Oyuna Dön</a>-->
<button class="big-button" onclick="window.close()">Oyuna Dön</button>
</div>
</div>
<div class="col">
<div class="row">
<div
class="col text-center"
style="
margin-top: 50px;
color: #ffe268;
text-shadow: 1.5px 1.5px #a87414;
"
>
<h4>ANASAYFAYA DÖN</h4>
</div>
</div>
<div
class="row"
style="margin-top: 10px; margin-bottom: 10px; font-size: 14px"
>
<p>Anasayfaya döndüğünüzde oyun kaydedilmez.</p>
</div>
<div class="row">
<div class="col">
<button class="big-button" id="anasayfayaDon">
Anasayfaya Dön
</button>
</div>
<div class="col">
<!--<a href="#" class="btn">Oyuna Dön</a>-->
<button class="big-button" onclick="window.close()">
Oyuna Dön
</button>
</div>
</div>
</div>
</div>
</body>
<script>
</body>
<script src="clientApp.js"></script>
<script>
document
.getElementById("anasayfayaDon")
.addEventListener("click", function (e) {
// 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);
};
console.log(window.opener.location.href);
var dosyaYolu = __dirname;
dosyaYolu = dosyaYolu.toString().substring(0, dosyaYolu.length - 5);
window.opener.location.href = "file://" + dosyaYolu + "/main.html";
document.getElementById("anasayfayaDon").addEventListener("click", function (e) {
console.log( window.opener.location.href);
var dosyaYolu= __dirname;
dosyaYolu= dosyaYolu.toString().substring(0,dosyaYolu.length-5 );
window.opener.location.href="file://" + dosyaYolu + "/main.html";
close();
});
</script>
</html>
\ No newline at end of file
});
</script>
</html>
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