Skip to content

Commit

Permalink
improve game page style
Browse files Browse the repository at this point in the history 
#60
  • Loading branch information
@ismail2009
ismail2009 committed Jan 25, 2018
1 parent 2d1b0db commit 14d46dd
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 44 deletions.
49 changes: 42 additions & 7 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@ html, body {
.list-item{
direction: rtl;
}
.list-item li{
color:#c7254e;
}
.num{
font-size: 16;
color:blue;
Expand Down Expand Up @@ -222,17 +225,22 @@ html, body {

#ide-code-screen .container .right-block #defaultContainer {
width: 100%;
height: 50%;
height: 38%;
border: 2px solid gray;
background-color: #fff;
margin-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

#ide-code-screen .container .right-block #drop {
width: 100%;
height: 47%;
border: 2px solid gray;
background-color: #fff;
background-color: #272822;
color: #fff;
padding-left: 5px;
padding-right: 5px;
}

.container .right-block #defaultContainer #block-1 {
Expand Down Expand Up @@ -304,7 +312,9 @@ html, body {
display: flex;
justify-content: center;
align-content: center;

}

.dragcodeo{
display: flex;
justify-content: center;
Expand All @@ -313,14 +323,14 @@ html, body {
}
.dragcodeId{
font-family: "Tahoma";
color: #1C94C4;
color: #1C94C4;
text-align: center;
list-style: none;
border: 1px solid #CCC;
width: 90px;
padding: 3px;
margin: 3px;
height: 10px;
height: 20px;
direction: rtl;
}
.dragcodeIds{
Expand All @@ -342,7 +352,32 @@ html, body {
color:red;
}
#submit{
position: absolute;
right:200px;
bottom: 30px;
width: 50%;
height: 30px;
border-radius: 0;
display: flex;
justify-self: center;
align-self: center;
margin-top: 10px;
background-color: #db9d1e;
color: #fff;
font-size: 20px;
border: none;
}
#code .code-info {
color:#f92672;
}
#code input {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
#code .code-info-o {
color:#fd971f;
}
.block-code h2 {
display:flex;
justify-content:center;
align-content:center;
color:#fff;
}
69 changes: 32 additions & 37 deletions src/views/game.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,62 +84,57 @@
<div class="title">
<h2>الهدف</h2>
</div>

<p>لنبدأ وقت المرح ونحصل على عدد من النقاط سنتعلم كيف نحرك اللاعبين باستخدام الأكواد البرمجية الجميلة </p>
<ul class="list-item">


<li class="instruction"> x :تعني حركة أفقية </li>
<li class="instruction"> y :تعني حركة عمودية</li>
<li class="instruction"> - : تعني رجوع </li>
<li class="instruction"> + : تعني تقدم</li>


</ul>
</div>
</div>
</div>
<div class="right-block">
<div id="defaultContainer" class="block" o>
<h2 class="title" >تتبع معنا </h2>
<ul class="dragcode">
<li class="dragcodeId" >37</li>
<li class="dragcodeId" >38</li>
<li class="dragcodeId" >39</li>
<li class="dragcodeId" >40</li>
</ul>
<ul class="dragcode">
<li class="dragcodeIds" ><img src="/images/left.png" width="20" height="20"></li>
<li class="dragcodeIds" ><img src="/images/down.png" width="20" height="20"></li>
<li class="dragcodeIds" > <img src="/images/right.png" width="20" height="20"></li>
<li class="dragcodeIds" > <img src="/images/up.png" width="20" height="20"></li>
</ul>
<ul class="dragcode">
<li class="dragcodeIds" >سنرجع خطوات لليسار على مستوى x الخط الأفقي</li>
<li class="dragcodeIds" > سنرجع خطوات للخلف على مستوى y الخط العمودي </li>
<li class="dragcodeIds" > نتقدم خطوات لليمين على مستوى x الخط الأفقي </li>
<li class="dragcodeIds" > نتقدم خطوات للأمام على مستوى y الخط العمودي</li>
</ul>

</div>
<h2 class="title" >تتبع معنا </h2>
<ul class="dragcode">
<li class="dragcodeId" >37</li>
<li class="dragcodeId" >38</li>
<li class="dragcodeId" >39</li>
<li class="dragcodeId" >40</li>
</ul>
<ul class="dragcode">
<li class="dragcodeIds" ><img src="/images/left.png" width="20" height="20"></li>
<li class="dragcodeIds" ><img src="/images/down.png" width="20" height="20"></li>
<li class="dragcodeIds" > <img src="/images/right.png" width="20" height="20"></li>
<li class="dragcodeIds" > <img src="/images/up.png" width="20" height="20"></li>
</ul>
<ul class="dragcode">
<li class="dragcodeIds" >سنرجع خطوات لليسار على مستوى x الخط الأفقي</li>
<li class="dragcodeIds" > سنرجع خطوات للخلف على مستوى y الخط العمودي </li>
<li class="dragcodeIds" > نتقدم خطوات لليمين على مستوى x الخط الأفقي </li>
<li class="dragcodeIds" > نتقدم خطوات للأمام على مستوى y الخط العمودي</li>
</ul>
</div>
<div id="drop" class="block-code" >
<h2 style="display:flex;justify-content:center; align-content:center;color:red;"> اكتب في المربعات الفارغة الكود المناسب </h2>
<h2 > اكتب في المربعات الفارغة الكود المناسب </h2>
<form id = "code" name="game" action="JavaScript:Assessment()">
if<tr><td>( </td><td><input type="text" name="left" id="left" required autocomplete="off"/></td> <td> in keycode)</td>
<td>{hero.x -= hero.speed * modifier;}</td> </tr>

<span class="code-info"> if</span> <tr><td>( </td><td><input type="text" name="left" id="left" required autocomplete="off"/></td> <td> <span class="code-info">in keycode</span>)</td>
<td>{<span class="code-info-o">hero.x -= hero.speed * modifier;</span>}</td> </tr>
<span id="leftspan" style="color:green"></span><br/>
if<tr><td>( </td><td><input type="text" name="down" id="down" required required autocomplete="off"/></td> <td> in keycode)</td>
<td>{hero.y -= hero.speed * modifier;}</td> </tr>
<span class="code-info">if</span><tr><td>( </td><td><input type="text" name="down" id="down" required required autocomplete="off"/> <span class="code-info">in keycode</span>)</td>
<td>{<span class="code-info-o">hero.y -= hero.speed * modifier;}</span></td> </tr>
<span id="downspan" style="color:green"></span><br/>
if<tr><td>( </td><td><input type="text" name="right" id="right" required required autocomplete="off"/></td> <td> in keycode)</td>
<td>{hero.x += hero.speed * modifier;}</td> </tr>
<span class="code-info">if</span><tr><td>( </td><td><input type="text" name="right" id="right" required required autocomplete="off"/></td> <td> <span class="code-info">in keycode</span>)</td>
<td>{<span class="code-info-o">hero.x += hero.speed * modifier;</span>}</td> </tr>
<span id="rightspan" style="color:green"></span><br/>
if<tr><td> ( </td><td><input type="text" name="up" id="up" required required autocomplete="off"/></td> <td> in keycode)</td>
<td>{hero.y += hero.speed * modifier;}</td> </tr>
<span class="code-info">if</span><tr><td> ( </td><td><input type="text" name="up" id="up" required required autocomplete="off"/></td> <td> <span class="code-info">in keycode</span>)</td>
<td>{<span class="code-info-o">hero.y += hero.speed * modifier;</span>}</td> </tr>
<span id="upspan" style="color:green"></span><br/>
<input type="submit" name="submit" id="submit" value="افحص الكود " />
</form>
</form>
</div>
<input type="submit" name="submit" id="submit" value="افحص الكود " />
</div>
</div>
</div>
Expand Down

0 comments on commit 14d46dd

Please sign in to comment.