Sound effects! and streamlined UI.

Gulpfile.js

@@ -38,8 +38,16 @@ function img (target) {
     };
 }
 
+function audio (target) {
+  return function () {
+    return gulp.src(['audio/*.mp3'])
+          .pipe(gulp.dest(target));
+    };
+}
+
 gulp.task('html', html('./build'));
 gulp.task('img', img('./build/img'));
+gulp.task('audio', audio('./build/audio'));
 
 /* Less */
 
@@ -83,7 +91,7 @@ function bundle () {
 
 /* Make a development build */
 
-gulp.task('build', ['html', 'img', 'less', 'coffee'], function () {
+gulp.task('build', ['html', 'img', 'less', 'coffee', 'audio'], function () {
 
 });
 
@@ -124,6 +132,7 @@ gulp.task('undum-dist', function () {
 
 gulp.task('html-dist', html('./dist'));
 gulp.task('img-dist', img('./dist/img'));
+gulp.task('audio-dist', img('./dist/audio'));
 
 gulp.task('less-dist', function () {
   return gulp.src('./less/main.less')
@@ -149,7 +158,7 @@ gulp.task('coffee-dist', ['undum-dist'], function () {
         .pipe(gulp.dest('./dist/game'));
 });
 
-gulp.task('dist', ['html-dist', 'img-dist', 'less-dist', 'coffee-dist'],
+gulp.task('dist', ['html-dist', 'img-dist', 'less-dist', 'coffee-dist', 'audio-dist'],
   function () {
     return;
 });

game/en.coffee

@@ -62,6 +62,12 @@ module.exports.language =
     My job is done.
 
     <center><h3>THE END</h3></center>
+
+    The game used the following sound effects:
+
+    * SpartanX109 - [Desert Eagle Fire.mp3](http://freesound.org/people/SpartanX109/sounds/89147/)
+    * ngphil22 - [DEagle wCasing.mp3](http://freesound.org/people/ngphil22/sounds/233322/)
+    * watupgroupie - [gunshots.mp3](http://freesound.org/people/watupgroupie/sounds/36815/)
     """
   clips_not_found:[
     "No, nothing here.",

game/main.coffee

@@ -4,11 +4,9 @@
 
 situation = require('raconteur')
 undum = require('undum-commonjs')
-$ = require('jquery')
 oneOf = require('raconteur/lib/oneOf.js')
 elements = require('raconteur/lib/elements.js')
 qualities = require('raconteur/lib/qualities.js')
-colour = require("color")
 md = require('markdown-it')
 markdown = new md({
   typographer: true,
@@ -18,6 +16,7 @@ undumloc = require("./ru.coffee").language
 undum.language["ru"] = undumloc
 undumloc = require("./en.coffee").language
 undum.language["en"] = undumloc
+$ = require("jquery")
 
 a = elements.a
 span = elements.span
@@ -33,8 +32,8 @@ writemd = (system, text) ->
   if typeof text is Function
     text = text()
   system.write(markdown.render(text))
-
+Array.prototype.oneOf = () ->
-link_colour = "#B68000"
+  oneOf.apply(null, this)
 
 # This is an easy game.
 # I'm thinking if you want more harder approach, you can:
@@ -44,14 +43,26 @@ link_colour = "#B68000"
 spend_bullet = (character, system) ->
   bullets = character.sandbox.clips[character.sandbox.current_clip]
   if bullets >= 1
+    coin = system.rnd.randomInt(1,2)
+    audio = 'shot1'
+    if coin == 2
+      audio = 'shot2'
+    audio = document.getElementById(audio)
+    audio.currentTime=0
+    audio.play()
     character.sandbox.clips[character.sandbox.current_clip]--
-    system.setQuality("bullets", bullets - 1)
+    bullets--
+    system.setQuality("bullets", bullets)
+    $("#clip img").attr("src", "img/clip"+bullets+".png")
 
 spend_clip = (character, system) ->
   bullets = character.sandbox.clips[character.sandbox.current_clip]
   clips = character.sandbox.clips.length
   if clips < 2
     return
+  audio = document.getElementById("reload")
+  audio.currentTime=0
+  audio.play()
   if bullets == 0
     character.sandbox.clips.splice(character.sandbox.current_clip, 1)
     clips = character.sandbox.clips.length
@@ -61,7 +72,9 @@ spend_clip = (character, system) ->
     character.sandbox.current_clip++
   else
     character.sandbox.current_clip = 0
-  system.setQuality("bullets", character.sandbox.clips[character.sandbox.current_clip])
+  bullets = character.sandbox.clips[character.sandbox.current_clip]
+  system.setQuality("bullets", bullets)
+  $("#clip img").attr("src", "img/clip"+bullets+".png")
 
 check_distance = (character, system) ->
   if character.sandbox.distance == 0
@@ -74,7 +87,7 @@ situation 'start',
 
 situation "hit",
   content: (character, system, from) ->
-    response = oneOf("player_hit".l()).randomly(system)
+    response = "player_hit".l().oneOf().randomly(system)
     return response()
   choices: ["#shoot"]
   before: (character, system, from) ->
@@ -90,24 +103,24 @@ situation "nicked",
     if character.sandbox.nicked == 1
       system.setQuality("enemies", character.qualities.enemies - 1)
       character.sandbox.nicked = 0
-      response = oneOf("player_finished".l()).randomly(system)
+      response = "player_finished".l().oneOf().randomly(system)
       return response()
     else
       character.sandbox.nicked = 1
-      response = oneOf("player_nicked".l()).randomly(system)
+      response = "player_nicked".l().oneOf().randomly(system)
       return response()
   choices: ["#shoot"]
 
 situation "miss",
   content: (character, system, from) ->
-    response = oneOf("player_missed".l()).randomly(system)
+    response = "player_missed".l().oneOf().randomly(system)
     return response()
   choices: ["#shoot"]
 
 situation "shoot",
   tags: ["shoot"],
   optionText: (character, system, from) ->
-    return oneOf("shoot".l()).randomly(system)
+    return "shoot".l().oneOf().randomly(system)
   canChoose: (character, system) ->
     return character.qualities.bullets > 0
   before: (character, system, from) ->
@@ -154,7 +167,7 @@ situation "search",
     character.sandbox.seen_search = 1
     character.sandbox.distance--
   after: (character, system) ->
-    response = oneOf("search_response".l()).randomly(system)
+    response = "search_response".l().oneOf().randomly(system)
     writemd(system, response())
     roll = system.rnd.dice(1,20) # d20 roll
     find_threshold = 10
@@ -174,13 +187,13 @@ situation "found",
     character.sandbox.clips[character.sandbox.clips.length] = bullets
     system.setQuality("clips", character.sandbox.clips.length)
   content: (character, system, from) ->
-    response = oneOf("clips_found".l()).randomly(system)
+    response = "clips_found".l().oneOf().randomly(system)
     return response()
 
 situation "not_found",
   choices: ["#shoot"],
   content: (character, system, from) ->
-    response = oneOf("clips_not_found".l()).randomly(system)
+    response = "clips_not_found".l().oneOf().randomly(system)
     return response()
 
 situation "finale",
@@ -204,5 +217,8 @@ undum.game.init = (character, system) ->
   character.sandbox.distance = 3
   character.sandbox.seen_reload = 0
   character.sandbox.seen_search = 0
+  $("#title").click(() ->
+    $("#clip").fadeIn()
+  )
 
 window.onload = undum.begin

game/ru.coffee

@@ -81,6 +81,12 @@ module.exports.language =
     Моя работа сделана.
 
     <center><h3>КОНЕЦ</h3></center>
+
+    Использованные звуковые эффекты:
+
+    * SpartanX109 - [Desert Eagle Fire.mp3](http://freesound.org/people/SpartanX109/sounds/89147/)
+    * ngphil22 - [DEagle wCasing.mp3](http://freesound.org/people/ngphil22/sounds/233322/)
+    * watupgroupie - [gunshots.mp3](http://freesound.org/people/watupgroupie/sounds/36815/)
     """
   clips_not_found:[
     "Нет, ничего нет.",

html/en.html

@@ -9,44 +9,24 @@
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
-    <div id="toolbar">
-      <h1>Thirty five shots</h1>
-      <div class="nav">
-        <a href="#" class="button" id="menu-button">Menu</a>
-      </div>
-    </div>
-    <ul id="menu">
-      <li><a href="#title, #content_wrapper">Story</a></li>
-      <li><a href="#character_panel">Character</a></li>
-    </ul>
-
     <div id="page">
 
-      <div id="tools_wrapper">
-        <div id="character_panel" class="tools right">
-          <div id="character">
-            <div id="character_text">
-              <div id="character_text_content"></div>
-            </div>
-            <div id="qualities"></div>
-          </div>
-          <div class='buttons'>
-            <button id="save">Save</button><button id="erase">Erase</button>
-          </div>
-        </div>
-      </div> <!-- End of div.tools_wrapper -->
-
       <div id="mid_panel">
         <div id="title">
           <div class="label">
 
             <h1>Thirty five shots</h1>
+            <h3>An online sci-fi first person text shooter</h3>
+            <p>by <b><a href="http://en.oreolek.ru/">Oreolek</a></b></p>
             <noscript>
               <p class="noscript_message">This game requires Javascript.</p>
             </noscript>
             <p class="click_message">click to play</p>
           </div>
         </div>
+        <div id="clip">
+          <p><img src="img/clip6.png"></p>
+        </div>
 
         <div id="content_wrapper">
           <div id="content">
@@ -58,6 +38,7 @@
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" class="footright"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
           <p>Approximate play time: five minites.</p>
           <p>Made using <a href="http://undum.com">Undum</a> and <a href="http://sequitur.github.io/raconteur/">Raconteur</a>.</p>
+          <p>Betatesting credit: headless zombie</p>
         </div>
       </div>
     </div> <!-- End of div.page -->
@@ -89,6 +70,9 @@
     </div>
 
     <div id="content_library"></div>
+    <audio id="shot1" preload="auto"><source src="audio/fire.mp3" type='audio/mpeg; codecs="mp3"'></audio>
+    <audio id="shot2" preload="auto"><source src="audio/casing.mp3" type='audio/mpeg; codecs="mp3"'></audio>
+    <audio id="reload" preload="auto"><source src="audio/reload.mp3" type='audio/mpeg; codecs="mp3"'></audio>
     <script type="text/javascript" src="game/undum.js"></script>
     <script type="text/javascript" src="game/bundle.js"></script>
   </body>

html/index.html

@@ -9,44 +9,24 @@
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
-    <div id="toolbar">
-      <h1>Тридцать пять выстрелов</h1>
-      <div class="nav">
-        <a href="#" class="button" id="menu-button">Меню</a>
-      </div>
-    </div>
-    <ul id="menu">
-      <li><a href="#title, #content_wrapper">Рассказ</a></li>
-      <li><a href="#character_panel">Персонаж</a></li>
-    </ul>
-
     <div id="page">
 
-      <div id="tools_wrapper">
-        <div id="character_panel" class="tools right">
-          <div id="character">
-            <div id="character_text">
-              <div id="character_text_content"></div>
-            </div>
-            <div id="qualities"></div>
-          </div>
-          <div class='buttons'>
-            <button id="save">Сохранить</button><button id="erase">Стереть</button>
-          </div>
-        </div>
-      </div> <!-- End of div.tools_wrapper -->
-
       <div id="mid_panel">
         <div id="title">
           <div class="label">
 
             <h1>Тридцать пять выстрелов</h1>
+            <h3>An online sci-fi first person text shooter</h3>
+            <p>by <b><a href="https://oreolek.ru/">Oreolek</a></b></p>
             <noscript>
               <p class="noscript_message">Эта игра требует Javascript.</p>
             </noscript>
             <p class="click_message">нажмите, чтобы начать</p>
           </div>
         </div>
+        <div id="clip">
+          <p><img src="img/clip6.png"></p>
+        </div>
 
         <div id="content_wrapper">
           <div id="content">
@@ -58,6 +38,7 @@
           <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" class="footright"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
           <p>Приблизительное время прохождения игры: пять минут.</p>
           <p>Написано при помощи <a href="http://undum.com">Undum</a> и <a href="http://sequitur.github.io/raconteur/">Raconteur</a>.</p>
+          <p>Бета-тестеры: headless zombie</p>
         </div>
       </div>
     </div> <!-- End of div.page -->
@@ -89,6 +70,9 @@
     </div>
 
     <div id="content_library"></div>
+    <audio id="shot1" preload="auto"><source src="audio/fire.mp3" type='audio/mpeg; codecs="mp3"'></audio>
+    <audio id="shot2" preload="auto"><source src="audio/casing.mp3" type='audio/mpeg; codecs="mp3"'></audio>
+    <audio id="reload" preload="auto"><source src="audio/reload.mp3" type='audio/mpeg; codecs="mp3"'></audio>
     <script type="text/javascript" src="game/undum.js"></script>
     <script type="text/javascript" src="game/bundle.js"></script>
   </body>

less/layout.less

@@ -15,16 +15,6 @@
   .column(10);
   .push(1);
 }
-#tools_wrapper {
-  .column(3);
-  background: @text_background;
-  position: sticky;
-  top: 2em;
-}
-.tools {
-  margin: 1.1em auto;
-  padding: 0 1em;
-}
 #content_wrapper {
   margin: 1.1em auto;
   padding: 2.8em;
@@ -237,47 +227,6 @@ img.left {
   margin: 1.1em 1.1em 1.1em 0;
 }
 
-#toolbar, #tools_wrapper {
-  display: none;
-}
-
-.tools {
-  p {
-    font-size: 0.95em;
-    line-height: 1.5em;
-    margin-top: 6px;
-  }
-  h1 {
-    font-size: 1.0em;
-    font-weight: normal;
-    margin-bottom: 0.6em;
-  }
-}
-.buttons {
-  padding-top: 0.6em;
-  text-align: center;
-  button {
-    font-size: 0.8em;
-    background: #876;
-    color: #e6e6c6;
-    border: none;
-    padding: 0.3em 1.0em;
-    cursor: pointer;
-    border-radius: 4px;
-  }
-  button:hover {
-    background: #987;
-  }
-  button + button {
-    margin-left: 0.3em;
-  }
-  button[disabled], button[disabled]:hover {
-    background: #ba9;
-    color: #dcb;
-    cursor: default;
-  }
-}
-
 #legal {
   max-width: 33em;
   color: #654;
@@ -294,49 +243,6 @@ img.left {
   }
 }
 
-#character {
-  font-size: 1.0em;
-  line-height: 1.4em;
-}
-#qualities .quality, #character_text {
-  position: relative;
-  clear: both;
-  overflow: hidden;
-  margin: 0 -0.25em;
-  padding: 0 0.25em;
-}
-#character_text {
-  margin-bottom: 0.6em;
-  #character_text_content {
-    position: relative;
-    font-size: smaller;
-    z-index: 100;
-  }
-}
-#qualities{
-  span {
-    position: relative;
-    z-index: 100;
-  }
-  span.name {
-    float: left;
-  }
-  span.value {
-    float: right;
-  }
-  h2 {
-    margin: 0.5em 0 0.25em 0;
-    font-size: 1.0em;
-  }
-}
-.highlight {
-  background: rgba(255, 255, 0, 0.75);
-  position: absolute;
-  left: -4px;
-  right: -4px;
-  top: 0;
-  bottom: 0;
-}
 #content_library,
 #ui_library,
 #menu {
@@ -361,24 +267,6 @@ img.left {
     }
   }
 
-/* Side panels */
-  #tools_wrapper {
-    position: static;
-  }
-  .tools {
-    background-image: url("../img/text_bg.jpg");
-    position: relative;
-    width: auto;
-  }
-  #character_panel,
-  #info_panel,
-  #menu {
-    display: none;
-  }
-  #tools_wrapper {
-    display: block;
-  }
-
 /* Main content */
   #content_wrapper {
     width: auto;
@@ -388,72 +276,6 @@ img.left {
     font-size: 16px;
     line-height: 1.5em;
   }
-
-/* Toolbar and menu */
-  #toolbar {
-    position: fixed;
-    z-index: 300;
-    left: 0;
-    right: 0;
-    top: 0;
-    background: transparent url("../img/toolbar_bg.jpg") repeat-x top left;
-    height: 36px;
-    padding: 8px;
-    overflow: hidden;
-    box-shadow: 0 0 16px rgba(0,0,0,0.75);
-    h1 {
-      float: left;
-      font-weight: normal;
-      font-size: 22px;
-      margin: 8px 0 0 0;
-      padding: 0 10px;
-      color: #fc6;
-      text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
-    }
-    .nav {
-      float: right;
-      margin: 0;
-      a {
-        font-size: 16px;
-        line-height: 20px;
-        color: white;
-        padding: 4px 16px;
-        float: right;
-        text-decoration: none;
-        text-shadow: 0 1px 0 rgba(0,0,0,0.4);
-        -webkit-border-radius: 6px;
-        background-image: -webkit-gradient(linear, left top, left bottom,
-                     from(#C00), color-stop(0.45, #a00),
-                     color-stop(0.55, #900), to(#900));
-        border: 2px solid #600;
-      }
-    }
-  }
-
-  #menu {
-    position: fixed;
-    top: 52px;
-    left: 0;
-    right: 0;
-    font-size: 16px;
-    background-image: url("../img/tools_bg.jpg");
-    z-index: 200;
-    list-style-type: none;
-    padding: 10px 0 0 0;
-    margin: 0;
-    opacity: 0.95;
-    box-shadow: 0 0 16px rgba(0,0,0,0.75);
-    li {
-      border-bottom: 1px solid rgba(0,0,0,0.25);
-    }
-    li:last-child {
-      border-bottom: none;
-    }
-    a {
-      display: block;
-      padding: 10px 20px;
-    }
-  }
 }
 .center-block {
   margin: 0 auto;
@@ -461,3 +283,11 @@ img.left {
 .footright {
   float: right;
 }
+
+#clip {
+  text-align: center;
+  display: none;
+  img {
+    max-height: 50px;
+  }
+}