WIP: volume slider
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 992 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/clip0.png
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
img/clip1.png
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 4.5 KiB |
BIN
img/clip2.png
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 4.8 KiB |
BIN
img/clip3.png
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 5.1 KiB |
BIN
img/clip4.png
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 5.2 KiB |
BIN
img/clip5.png
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
img/clip6.png
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 603 B |
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||