Color blind mode

This is a very basic implementation of a color blind system, I added a
simple button under play (that doesn't fade)
This commit is contained in:
IceManQ 2014-08-18 08:27:09 -04:00
parent f39eb822bc
commit ef71be61e5
3 changed files with 38 additions and 0 deletions

View file

@ -69,6 +69,7 @@
<div id="openSideBar" class = 'helpText'><i class="fa fa-info-circle fa-lg"></i> <i class="fa fa-arrow-left"><b> Help</b></i></div>
<div id="overlay" class="faded"></div>
<div id = 'pauseBtn'><div id = 'pauseBtnInner'><i class="fa fa-pause fa-2x"></div></i></div>
<div id = 'colorBlindBtn'><b> Color Blind</b></div>
<div id = 'restartBtn'><div id = 'restartBtnInner'><i class="fa fa-refresh fa-2x"></i></div></div>
<div id="bottombar">
<a href="https://twitter.com/intent/tweet?hashtags=hextris&original_referer=http%3A%2F%2F0.0.0.0%3A8080%2F&text=Play%20Hextris!%20-&tw_p=tweetbutton&url=http%3A%2F%2Fhextris.github.io%2F" class="twitter-share-button" data-url="http://hextris.github.io/" data-text="Play Hextris! -" data-hashtags="hextris">Tweet</a>

View file

@ -72,6 +72,31 @@ function addKeyListeners() {
pause();
return false;
});
$("#colorBlindBtn").on('touchstart mousedown', function() {
window.colors = ["#8e44ad", "#f1c40f", "#3498db", "#d35400"];
window.hexColorsToTintedColors = {
"#8e44ad": "rgb(229,152,102)",
"#f1c40f": "rgb(246,223,133)",
"#3498db": "rgb(151,201,235)",
"#d35400": "rgb(210,180,222)"
};
window.rgbToHex = {
"rgb(142,68,173)": "#8e44ad",
"rgb(241,196,15)": "#f1c40f",
"rgb(52,152,219)": "#3498db",
"rgb(211,84,0)": "#d35400"
};
window.rgbColorsToTintedColors = {
"rgb(142,68,173)": "rgb(229,152,102)",
"rgb(241,196,15)": "rgb(246,223,133)",
"rgb(52,152,219)": "rgb(151,201,235)",
"rgb(46,204,113)": "rgb(210,180,222)"
};
});
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

View file

@ -123,6 +123,18 @@ button:focus {
background-color:rgba(236,240,241,.7);
}
#colorBlindBtn {
position:absolute;
width:120px;
height:20px;
z-index:9999;
left: 47%;
top:65%;
font-size:15px;
text-align:center;
color:#232323;
cursor:pointer;
}
.instructions_body {
margin-left:3px;
width:calc(100% - 12px) ! important;