Skip to content
Projeler
Gruplar
Parçacıklar
Yardım
Yükleniyor...
Oturum aç / Kaydol
Gezinmeyi değiştir
M
mangala-pardusacikhack
Proje
Proje
Ayrıntılar
Etkinlik
Cycle Analytics
Depo (repository)
Depo (repository)
Dosyalar
Kayıtlar (commit)
Dallar (branch)
Etiketler
Katkıda bulunanlar
Grafik
Karşılaştır
Grafikler
Konular (issue)
0
Konular (issue)
0
Liste
Pano
Etiketler
Kilometre Taşları
Birleştirme (merge) Talepleri
0
Birleştirme (merge) Talepleri
0
CI / CD
CI / CD
İş akışları (pipeline)
İşler
Zamanlamalar
Grafikler
Paketler
Paketler
Wiki
Wiki
Parçacıklar
Parçacıklar
Üyeler
Üyeler
Collapse sidebar
Close sidebar
Etkinlik
Grafik
Grafikler
Yeni bir konu (issue) oluştur
İşler
Kayıtlar (commit)
Konu (issue) Panoları
Kenar çubuğunu aç
Tuğba Fıçıcı
mangala-pardusacikhack
Commits
165f08d4
Kaydet (Commit)
165f08d4
authored
May 06, 2021
tarafından
Abdülkerim AKSAK
Dosyalara gözat
Seçenekler
Dosyalara Gözat
İndir
Eposta Yamaları
Sade Fark
Toast oluşturuldu.
üst
3b7d9f88
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
221 additions
and
127 deletions
+221
-127
gameArea.css
assets/gameArea.css
+20
-0
clientApp.js
pages/clientApp.js
+4
-3
clientGameArea.html
pages/clientGameArea.html
+3
-5
clientGameArea.js
pages/clientGameArea.js
+50
-2
turnBackMain.html
pages/turnBackMain.html
+144
-117
No files found.
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
:activ
e
{
transform
:
translate
(
0em
,
0.75
em
);
}
button
.big-button
:hover::befor
e
{
transform
:
translate3d
(
0
,
0.75em
,
-1
em
);
}
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>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment