WIP: volume slider

7 years ago · c89172ba94
parent 1a01395345
commit c89172ba94
19 changed files with 130 additions and 29 deletions
--- a/game/begin.coffee
+++ b/game/begin.coffee
@ -12,6 +12,8 @@ undum.language["ru"] = undumloc
 undumloc = require("./translations/en.coffee").language
 undum.language["en"] = undumloc
 $ = require("jquery")
+require('jquery-ui/slider');
+
 Array.prototype.oneOf = () ->
  oneOf.apply(null, this)
 md = require('markdown-it')
@ -21,7 +23,7 @@ markdown = new md({
 })

 undum.game.id = "7a1aba32-f0fd-4e3b-ba5a-59e3fa9e6012"
-undum.game.version = "3.2"
+undum.game.version = "3.3"

 a = require('raconteur/lib/elements.js').a
 way_to = (content, ref) -> a(content).class('way').ref(ref)
@ -46,3 +48,7 @@ is_visited = (situation) ->
  if situations
    return Boolean situations.visited
  return 0
+
+# Volume from 0 to 1
+get_volume = () ->
+  return $('#slider').slider('value') / 100
--- a/game/end.coffee
+++ b/game/end.coffee
@ -11,8 +11,6 @@ undum.game.init = (character, system) ->
  system.setQuality("enemies", 25)
  system.setQuality("clips", Math.floor(character.qualities.enemies / 6))
  character.sandbox.search_clip_threshold = character.qualities.clips - 2
-  # Sound volume multiplicator. 0 means the game is muted.
-  character.sandbox.volume = 1
  character.sandbox.clips = []
  for i in [1 .. character.qualities.clips]
    character.sandbox.clips.push(6)
@ -30,6 +28,25 @@ undum.game.init = (character, system) ->
  character.sandbox.steps_volume = 0
  $("#title").click(() ->
    $("#clip").fadeIn()
+    $(".volume").fadeIn()
+    slider = $('#slider')
+
+    slider.slider({
+      range: "min",
+      min: 1,
+      value: 100,
+      slide: (event, ui) ->
+        value = slider.slider('value')
+        volume = $('.voldisplay')
+        if value <= 5
+          volume.css('background-position', '0 0')
+        else if value <= 25
+          volume.css('background-position', '0 -25px')
+        else if value <= 75
+          volume.css('background-position', '0 -50px')
+        else
+          volume.css('background-position', '0 -75px')
+    })
  )
  setInterval( () ->
    play_steps(character)
--- a/game/gameplay.coffee
+++ b/game/gameplay.coffee
@ -20,7 +20,7 @@ scripted_events = (character, system) ->
  if character.qualities.enemies == 1
    audio = document.getElementById("roar")
    audio.currentTime=0
-    audio.volume = 1 * character.sandbox.volume
+    audio.volume = 1 * get_volume()
    audio.play()
    writemd(system, "boss".l())
  if character.qualities.enemies == 0
@ -37,7 +37,7 @@ play_steps = (character) ->
    audio = 'step2'
  audio = document.getElementById(audio)
  audio.currentTime=0
-  audio.volume = character.sandbox.steps_volume * character.sandbox.volume
+  audio.volume = character.sandbox.steps_volume * get_volume()
  audio.play()

 kill_enemy = (character, system) ->
@ -58,7 +58,7 @@ spend_bullet = (character, system) ->
      audio = 'shot2'
    audio = document.getElementById(audio)
    audio.currentTime=0
-    audio.volume = 1 * character.sandbox.volume
+    audio.volume = 1 * get_volume()
    audio.play()
    character.sandbox.clips[character.sandbox.current_clip]--
    bullets--
@ -73,7 +73,7 @@ spend_clip = (character, system) ->
    return
  audio = document.getElementById("reload")
  audio.currentTime=0
-  audio.volume = 1 * character.sandbox.volume
+  audio.volume = 1 * get_volume()
  audio.play()
  if bullets == 0
    character.sandbox.clips.splice(character.sandbox.current_clip, 1)
--- a/html/index.html
+++ b/html/index.html
@ -5,6 +5,7 @@
    <title>Пули говорят быстрее</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  </head>
  <body>
    <div id="page">
@ -20,8 +21,15 @@
            <p class="click_message">нажмите, чтобы начать</p>
          </div>
        </div>
-        <div id="clip">
-          <p><img src="img/clip6.png"></p>
+        <div class="controls">
+          <div id="clip">
+            <p><img src="img/clip6.png"></p>
+          </div>
+          <!-- Volume slider -->
+          <section class="volume">
+            <div id="slider"></div>
+            <span class="voldisplay"></span>
+          </section>
        </div>

        <div id="content_wrapper">
@ -77,9 +85,10 @@
    <!-- Piwik tracking. Google or Yandex DON'T see these analytics. Also I support Do Not Track feature. -->
    <script type="text/javascript">
      var _paq = _paq || [];
-      _paq.push(["setDomains", ["*.oreolek.ru/my_games","*.oreolek.ru/temp","*.itch.io"]]);
+      _paq.push(["setDomains", ["*.oreolek.ru","*.itch.io"]]);
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
+      _paq.push(['enableHeartBeatTimer']);
      (function() {
        var u="//oreolek.ru/webstats/";
        _paq.push(['setTrackerUrl', u+'piwik.php']);
--- a/img/background.jpg
+++ b/img/background.jpg
--- a/img/bg-track.png
+++ b/img/bg-track.png
--- a/img/clip0.png
+++ b/img/clip0.png
--- a/img/clip1.png
+++ b/img/clip1.png
--- a/img/clip2.png
+++ b/img/clip2.png
--- a/img/clip3.png
+++ b/img/clip3.png
--- a/img/clip4.png
+++ b/img/clip4.png
--- a/img/clip5.png
+++ b/img/clip5.png
--- a/img/clip6.png
+++ b/img/clip6.png
--- a/img/handle.png
+++ b/img/handle.png
--- a/img/volume.png
+++ b/img/volume.png
--- a/less/layout.less
+++ b/less/layout.less
@ -5,6 +5,17 @@
@gutter-width: 20;
@total-width: 100%;

+body {
+  background: @background;
+  color: @color;
+  font-family: @font-body;
+  font-size: 18px;
+  line-height: 1.6em;
+  background-attachment: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
 #page {
  .row();
 }
@ -39,17 +50,6 @@
  }
 }

-body {
-  background: @background;
-  color: @color;
-  font-family: @font-body;
-  font-size: 18px;
-  line-height: 1.6em;
-  background-attachment: fixed;
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-
 /* The title block */
 #title {
  max-width: 28em;
@ -276,13 +276,21 @@ img.left {
  float: right;
 }

-#clip {
-  text-align: center;
-  display: none;
-  img {
-    max-height: 50px;
-  }
-}
 h3 {
  text-align: center;
 }
+.controls {
+  .row();
+  #clip {
+    .push(4);
+    .column(2);
+    text-align: center;
+    display: none;
+    img {
+      max-height: 50px;
+    }
+  }
+  .volume {
+    .column(2);
+  }
+}
--- a/less/main.less
+++ b/less/main.less
@ -2,7 +2,7 @@
@anchor-colour: #D29506;
@option-colour: #125D79;

-@background: lightgrey;
+@background: lightgrey url("../img/background.jpg");
@text_background: #e6e6c6;
@color: black;
@links: #B68000;
@ -11,6 +11,7 @@

@import "animations.less";
@import "layout.less";
+@import "slider.less";

 .way {
  color: darkred;
--- a/less/slider.less
+++ b/less/slider.less
@ -0,0 +1,59 @@
+.volume {
+	width: 150px;
+	height: auto;
+	margin: 100px auto 0;
+	position: relative;
+  display: none;
+}
+#slider{
+	border-width: 1px;
+	border-style: solid;
+	border-color: #333 #333 #777 #333;
+	border-radius: 25px;
+	width: 100px;
+	position: absolute;
+	height: 13px;
+	background-color: #8e8d8d;
+	background: url('../img/bg-track.png') repeat top left;
+  box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),
+  				    0 1px 0 0px rgba(250, 250, 250, .5);
+  left: 20px;
+}
+.voldisplay {
+	content: "";
+	display: inline-block;
+	width: 25px;
+	height: 25px;
+	right: -5px;
+	background: url('../img/volume.png') no-repeat 0 -50px;
+	position: absolute;
+	margin-top: -5px;
+}
+.ui-slider-handle {
+	position: absolute;
+	z-index: 2;
+	width: 25px;
+	height: 25px;
+	cursor: pointer;
+	background: url('../img/handle.png') no-repeat 50% 50%;
+	font-weight: bold;
+	color: #1C94C4;
+	outline: none;
+	top: -7px;
+	margin-left: -12px;
+}
+.ui-slider-range {
+	background: #ffffff; /* Old browsers */
+	background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* IE10+ */
+	background: linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
+	position: absolute;
+	border: 0;
+	top: 0;
+	height: 100%;
+	border-radius: 25px;
+}
--- a/package.json
+++ b/package.json
@ -3,6 +3,7 @@
    "undum": "git://github.com/oreolek/undum-commonjs#commonjs",
    "raconteur": "git://github.com/sequitur/raconteur.git#stable",
    "jquery": "^2.1.3",
+    "jquery-ui": "^1.10.5",
    "markdown-it": "^4.1.0",
    "color": "^0.10.1"
  },