Kaydet (Commit) a81b6d05 authored tarafından Abdülkerim AKSAK's avatar Abdülkerim AKSAK

nasilOynanir.html ile settings.html görsel düzenleme.

üst 26001952
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
src="./assets/image/rulesYellow.png" src="./assets/image/rulesYellow.png"
alt="rules" alt="rules"
/> />
<a href="./pages/clientTemp.html" class="link" <a href="./pages/nasilOynanir.html" class="link"
><b>Nasıl Oynanır?</b></a ><b>Nasıl Oynanır?</b></a
> >
<a href="#" class="link" style="font-size: 20px">|</a> <a href="#" class="link" style="font-size: 20px">|</a>
......
...@@ -56,8 +56,11 @@ app.on("ready", () => { ...@@ -56,8 +56,11 @@ app.on("ready", () => {
enableRemoteModule: true, enableRemoteModule: true,
}, },
width: 430, width: 430,
height: 370, height: 300,
title: "Oyun Ayarları", title: "Oyun Ayarları",
frame: false,
resizable: false, // *Ekran boyutu imleç ile değiştirilemez.
maximizable: true, // *Ekran maksimum hale getirilemez
}); });
addWindow.loadURL( addWindow.loadURL(
......
...@@ -67,13 +67,13 @@ ...@@ -67,13 +67,13 @@
} }
p { p {
font-size: 19px;
padding-bottom: 20px; padding-bottom: 20px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
h2 { h2 {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
...@@ -92,6 +92,15 @@ ...@@ -92,6 +92,15 @@
text-align: center; text-align: center;
} }
hr.style-five {
border: 0;
height: 0; /* Firefox... */
box-shadow: 0 0 10px 1px black;
}
hr.style-five:after { /* Not really supposed to work, but does */
content: "\00a0"; /* Prevent margin collapse */
}
</style> </style>
</head> </head>
...@@ -110,26 +119,40 @@ ...@@ -110,26 +119,40 @@
<h2>1. Kural</h2> <h2>1. Kural</h2>
<p>Kura neticesinde başlama hakkı kazanan oyuncu kendi bölgesinde bulunan istediği kuyudan 4 adet taşı alır. Bir <p>Başlama hakkı olan oyuncu kendi bölgesinde bulunan istediği kuyudan 4 adet taşı alır. Bir
adet taşı aldığı kuyuya bırakıp saatin tersi yönünde, yani sağa doğru her bir kuyuya birer adet taş bırakarak adet taşı aldığı kuyuya bırakıp saatin tersi yönünde, yani sağa doğru her bir kuyuya birer adet taş bırakarak
elindeki taşlar bitene kadar dağıtır. Elindeki son taş hazinesine denk gelirse, oyuncu tekrar oynama hakkına sahip elindeki taşlar bitene kadar dağıtır. Elindeki son taş hazinesine denk gelirse, oyuncu tekrar oynama hakkına sahip
olur. Oyuncunun kuyusunda tek taş varsa, sırası geldiğinde bu taşı sağındaki kuyuya taşıyabilir. Hamle sırası olur. Oyuncunun kuyusunda tek taş varsa, sırası geldiğinde bu taşı sağındaki kuyuya taşıyabilir. Hamle sırası
rakibine geçer. Her seferinde oyuncunun elinde kalan son taş oyunun kaderini belirler.</p> rakibine geçer. Her seferinde oyuncunun elinde kalan son taş oyunun kaderini belirler.</p>
<hr style="border-top: 1px dashed #8c8b8b; margin-left: 25px; margin-right: 25px;">
<h2>2. Kural</h2> <h2>2. Kural</h2>
<p>Hamle sırası gelen oyuncu kendi kuyusundan aldığı taşları dağıtırken elinde taş kaldıysa, rakibinin bölgesindeki <p>Hamle sırası gelen oyuncu kendi kuyusundan aldığı taşları dağıtırken elinde taş kaldıysa, rakibinin bölgesindeki
kuyulara da taş bırakmaya devam eder. Oyuncunun elindeki son taş, rakibinin bölgesinde denk geldiği kuyudaki kuyulara da taş bırakmaya devam eder. Oyuncunun elindeki son taş, rakibinin bölgesinde denk geldiği kuyudaki
taşların sayısını çift sayı yaparsa (2, 4, 6, 8 gibi) oyuncu bu kuyuda yer alan tüm taşların sahibi olur ve onları taşların <b><i>sayısını çift sayı yaparsa</i> </b>(2, 4, 6, 8 gibi) oyuncu bu kuyuda yer alan tüm taşların sahibi olur ve onları
kendi hazinesine koyar. Hamle sırası rakibine geçer.</p> kendi hazinesine koyar. Hamle sırası rakibine geçer.</p>
<hr style="border-top: 1px dashed #8c8b8b; margin-left: 25px; margin-right: 25px;">
<h2>3. Kural</h2> <h2>3. Kural</h2>
<p>Oyuncu taşları dağıtırken elinde kalan son taş, yine kendi bölgesinde yer alan boş bir kuyuya denk gelirse ve <p>Oyuncu taşları dağıtırken elinde kalan son taş, yine kendi bölgesinde yer alan boş bir kuyuya denk gelirse ve
eğer boş kuyusunun karşısındaki kuyuda da rakibine ait taş varsa, hem rakibinin kuyusundaki taşları alır, hem de <b><i>eğer boş kuyusunun karşısındaki kuyuda da rakibine ait taş varsa, </i></b>hem rakibinin kuyusundaki taşları alır, hem de
kendi boş kuyusuna bıraktığı taşı alıp hazinesine koyar. Hamle sırası rakibine geçer.</p> kendi boş kuyusuna bıraktığı taşı alıp hazinesine koyar. Hamle sırası rakibine geçer.</p>
<hr style="border-top: 1px dashed #8c8b8b; margin-left: 25px; margin-right: 25px;">
<h2>4. Kural</h2> <h2>4. Kural</h2>
<p>Oyunculardan herhangi birinin bölgesinde yer alan taşlar bittiğinde oyun seti biter. Oyunda kendi bölgesinde <p>Oyunculardan herhangi birinin bölgesinde yer alan taşlar bittiğinde oyun seti biter. Oyunda kendi bölgesinde
taşları ilk biten oyuncu, rakibinin bölgesinde bulunan tüm taşları da kazanır. Dolayısıyla, oyunun dinamiği son taşları ilk biten oyuncu, rakibinin bölgesinde bulunan tüm taşları da kazanır. Dolayısıyla, oyunun dinamiği son
ana kadar hiç düşmez. ana kadar hiç düşmez.
Mangala Oyunu 5 set olarak oynanır. <p>
Oyunu kazanan oyuncu (1) puan, kaybeden (0) puan ve berabere bitiren oyuncular yarım (0,5) puan alır. <hr class="style-five">
<div>
<h1>Oyun Ayarları</h1>
</div>
<h2>Kullanıcı Adı</h2>
<p>Oyun başlangıç ile beraber kullanıcıya varsayılan isimlerden birini atamaktadır. Ana sayfadan <i>"Ayarlar"</i> kısmına girerek
oyun boyunca kullanacağınız ismi belirleyebilirsiniz.
</p>
<hr style="border-top: 1px dashed #8c8b8b; margin-left: 25px; margin-right: 25px;">
<h2>Zorluk Seviyesi</h2>
<p><i>Bilgisayara karşı oyna</i> modu için geliştirilen Cengaver'in zorluk seviyesini belirlemenizi sağlar. Varsayılan olarak
<i>orta zorluk modu</i> ayarlıdır.
<p> <p>
</div> </div>
</body> </body>
......
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/bootstrap.min.css" /> <link rel="stylesheet" href="../assets/bootstrap.min.css" />
<style> <style>
@font-face { @font-face {
font-family: "Itim"; font-family: "Itim";
src: url('../assets/fonts/Itim-Regular.ttf') format("truetype"); src: url("../assets/fonts/Itim-Regular.ttf") format("truetype");
} }
body { body {
width: 400px; width: 400px;
height: 300px; height: 300px;
background-color: #334443; background-image: linear-gradient(
to bottom,
#416e75,
#529290,
#6db7a6,
#94dbb5,
#c6ffc1
);
font-family: "Itim"; font-family: "Itim";
} }
:root { :root {
--backgroundColor: rgba(246, 241, 209); --backgroundColor: rgba(246, 241, 209);
--colorShadeA: rgb(88, 112, 85); --colorShadeA: rgb(88, 112, 85);
--colorShadeB: rgb(88, 112, 85); --colorShadeB: rgb(88, 112, 85);
--colorShadeC: rgb(187, 240, 182,94); --colorShadeC: rgb(187, 240, 182, 94);
--colorShadeD: rgb(197, 252, 192,99); --colorShadeD: rgb(197, 252, 192, 99);
--colorShadeE: rgb(198, 255, 193,100); --colorShadeE: rgb(198, 255, 193, 100);
} }
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700"); @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
*::before, *::after { *::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -45,7 +51,7 @@ ...@@ -45,7 +51,7 @@
vertical-align: middle; vertical-align: middle;
text-decoration: none; text-decoration: none;
font-size: 11px; font-size: 11px;
color:var(--colorShadeA); color: var(--colorShadeA);
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
font-family: inherit; font-family: inherit;
...@@ -62,7 +68,7 @@ ...@@ -62,7 +68,7 @@
} }
button.big-button::before { button.big-button::before {
position: absolute; position: absolute;
content: ''; content: "";
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
...@@ -71,12 +77,14 @@ ...@@ -71,12 +77,14 @@
bottom: 0; bottom: 0;
background: var(--colorShadeC); background: var(--colorShadeC);
border-radius: inherit; border-radius: inherit;
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA); box-shadow: 0 0 0 2px var(--colorShadeB),
0 0.75em 0 0 var(--colorShadeA);
transform: translate3d(0, 0.75em, -1em); transform: translate3d(0, 0.75em, -1em);
transition: all 175ms cubic-bezier(0, 0, 1, 1); transition: all 175ms cubic-bezier(0, 0, 1, 1);
-webkit-box-shadow: 0px 0px 15px 5px #000000;
box-shadow: 0px 0px 15px 5px #000000;
} }
button.big-button:hover { button.big-button:hover {
background: var(--colorShadeD); background: var(--colorShadeD);
transform: translate(0, 0.375em); transform: translate(0, 0.375em);
...@@ -93,70 +101,115 @@ ...@@ -93,70 +101,115 @@
button.big-button:active::before { button.big-button:active::before {
transform: translate3d(0, 0, -1em); transform: translate3d(0, 0, -1em);
box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB); box-shadow: 0 0 0 2px var(--colorShadeB),
0 0.25em 0 0 var(--colorShadeB);
} }
.custom-control-input:checked~.custom-control-label::before { .custom-control-input:checked ~ .custom-control-label::before {
color: #fff; color: #fff;
border-color: #7B1FA2; border-color: #7b1fa2;
} }
.custom-control-input:checked~.custom-control-label.yellow::before { .custom-control-input:checked ~ .custom-control-label.yellow::before {
background-color: #ffe268; background-color: #ffe268;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col text-center" style="margin-top: 30px; color:#ffe268; text-shadow: 1.5px 1.5px #a87414;" ><h4>AYARLAR</h4></div> <div
class="col text-center"
style="
margin-top: 30px;
color: #ffe268;
text-shadow: 1.5px 1.5px #a87414;
"
>
<h4>AYARLAR</h4>
</div>
</div> </div>
<div class="row" style="margin-top:10px;margin-bottom:10px;font-size: 16px;"> <div
class="row"
style="margin-top: 10px; margin-bottom: 10px; font-size: 16px"
>
<div class="col-5 align-self-center">Kullanıcı Adı:</div> <div class="col-5 align-self-center">Kullanıcı Adı:</div>
<div class="col-7"><input class="form-control" type="text" placeholder="Kullanıcı Adı"></div> <div class="col-7">
<input
class="form-control"
type="text"
placeholder="Kullanıcı Adı"
/>
</div>
</div> </div>
<div class="row" style="margin-top:10px;margin-bottom:10px;font-size: 16px;"> <div
class="row"
style="margin-top: 10px; margin-bottom: 10px; font-size: 16px"
>
<div class="col-5">Zorluk Seviyesi:</div> <div class="col-5">Zorluk Seviyesi:</div>
<div class="col-7"> <div class="col-7">
<div class="custom-control custom-radio custom-control-inline"> <div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" checked> <input
<label class="custom-control-label yellow" for="customRadioInline1">Kolay</label> type="radio"
</div><br> id="customRadioInline1"
<div class="custom-control custom-radio custom-control-inline"> name="customRadioInline1"
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input"> class="custom-control-input"
<label class="custom-control-label yellow" for="customRadioInline2">Orta</label> checked
</div><br> />
<label
class="custom-control-label yellow"
for="customRadioInline1"
>Kolay</label
>
</div>
<br />
<div class="custom-control custom-radio custom-control-inline"> <div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input"> <input
<label class="custom-control-label yellow" for="customRadioInline3">Zor</label> type="radio"
id="customRadioInline2"
name="customRadioInline1"
class="custom-control-input"
/>
<label
class="custom-control-label yellow"
for="customRadioInline2"
>Orta</label
>
</div> </div>
<br />
<div class="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="customRadioInline3"
name="customRadioInline1"
class="custom-control-input"
/>
<label
class="custom-control-label yellow"
for="customRadioInline3"
>Zor</label
>
</div> </div>
</div> </div>
<div class="row" style="margin-top: 10px;">
<div class="col-5">
</div> </div>
<div class="row" style="margin-top: 10px">
<div class="col-5"></div>
<div class="col-7"> <div class="col-7">
<!--<a href="#" class="btn">Oyuna Dön</a>--> <!--<a href="#" class="btn">Oyuna Dön</a>-->
<button class="big-button" id="save" type="button">Kaydet</button> <button class="big-button" id="save" type="button">Kaydet</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script> <script>
const remote = require("electron").remote; const remote = require("electron").remote;
document.getElementById("save").addEventListener("click", function (e) { document.getElementById("save").addEventListener("click", function (e) {
var window = remote.getCurrentWindow(); var window = remote.getCurrentWindow();
window.close(); window.close();
}); });
</script>
</script>
</html> </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