From 002c94d6ad47b329f20404857ddc17cdc16edd8b Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Wed, 15 Jul 2015 17:12:34 +0900 Subject: [PATCH] add --instructions and related stuff --- public/css/games.css | 31 +++++++ public/hft/0.x.x/scripts/gamesupport.js | 47 +++++++++- public/hft/0.x.x/scripts/languages.js | 110 ++++++++++++++++++++++++ server/common-cli-options.js | 4 + server/hft-server.js | 4 + templates/0.x.x/game.gameview.html | 8 +- 6 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 public/hft/0.x.x/scripts/languages.js diff --git a/public/css/games.css b/public/css/games.css index 876d1ed1..f9fd787c 100644 --- a/public/css/games.css +++ b/public/css/games.css @@ -163,6 +163,37 @@ html, body { z-index: 10; display: none; } +#hft-connect { + position: absolute; + top: 0px; + text-align: center; + background-color: rgba(0,0,0,0.5); + color: white; + z-index: 1000; + font-size: 18pt; + font-weight: bold; + display: none; + min-width: 100%; +} +#hft-ins { + overflow: hidden; + white-space: nowrap; + margin: 0.2em; + transform: translateX(100%); + animation: hft-ins-anim 45s linear infinite; +} +/* +@keyframes hft-ins-anim { + 0% { + transform: translateX(50%); + } + 100% { + transform: translateX(-50%); + } +} +*/ + + #hft-disconnected { position: absolute; top: 0px; diff --git a/public/hft/0.x.x/scripts/gamesupport.js b/public/hft/0.x.x/scripts/gamesupport.js index 6c59220c..339c6c68 100644 --- a/public/hft/0.x.x/scripts/gamesupport.js +++ b/public/hft/0.x.x/scripts/gamesupport.js @@ -47,16 +47,22 @@ define([ './misc/gameclock', './misc/logger', './misc/misc', + './misc/strings', + './hft-settings', './hft-splash', './hft-system', + './languages', ], function( StatsJS, Cookie, GameClock, Logger, Misc, + strings, + hftSettings, HFTSplash, - HFTSystem) { + HFTSystem, + languages) { var $ = function(id) { return document.getElementById(id); @@ -119,6 +125,45 @@ define([ server.addEventListener('disconnect', handleDisconnected); } + if (options.instructions || hftSettings.instructions) { + $("hft-connect").style.display = "block"; + var langs = languages.getLangs(options.langs || hftSettings.langs); + if (langs.length === 0) { + langs = [languages.getDefaultLang()]; + } + $("hft-ins").innerHTML = langs.map(function(lang) { + return lang.connect; + }).join(" "); + + var style = document.createElement("style"); + var css = document.createTextNode(""); + + var computeAnim = function() { + var padding = 100; + var msgWidth = $("hft-ins").clientWidth + padding * 2; + var bodyWidth = document.body.clientWidth; + var start = bodyWidth + padding; + var end = -msgWidth - padding; + var duration = (start - end) / 60; + + var anim = strings.replaceParams([ + "#hft-ins { animation: hft-ins-anim %(duration)ss linear infinite; }", + "@keyframes hft-ins-anim { 0% { transform: translateX(%(start)spx); } 100% { transform: translateX(%(end)spx); } }", + ].join("\n"), { + duration: duration, + start: start, + end: end, + }); + + css.nodeValue = anim; + }; + + style.appendChild(css); + document.body.appendChild(style); + computeAnim(); + // window.addEventListener('resize', computeAnim, false); + } + if (options.showFPS) { stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms diff --git a/public/hft/0.x.x/scripts/languages.js b/public/hft/0.x.x/scripts/languages.js new file mode 100644 index 00000000..9071dc76 --- /dev/null +++ b/public/hft/0.x.x/scripts/languages.js @@ -0,0 +1,110 @@ +/* + * Copyright 2014, Gregg Tavares. + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are + * met: + * + * * Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above + * copyright notice, this list of conditions and the following disclaimer + * in the documentation and/or other materials provided with the + * distribution. + * * Neither the name of Gregg Tavares. nor the names of its + * contributors may be used to endorse or promote products derived from + * this software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS + * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT + * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR + * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT + * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, + * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT + * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, + * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY + * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE + * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ +"use strict"; + +define([ + './misc/strings', + './hft-settings', + ], function( + strings, + hftSettings + ) { + var langs = { + "en": { + connect: 'Connect to %(wifiName)s Wifi%(password)s, on iOS just wait, on Android use Chrome and go to "h.com"', + password: " password: %(wifiPass)s", + }, + "ja": { + connect: "「%(wifiName)s」の無線LANを接続%(password)s, iPhoneならそのまま待って下さい, Androidなら「Chrome」を起動して「h.com」へ行って下さい", + password: " パスワード：「%(wifiPass)s」", + }, + }; + + Object.keys(langs).forEach(function(key) { + var lang = langs[key]; + lang.id = key; + + var subs = { + password: "", + wifiPass: "", + }; + + if (hftSettings.wifiPass) { + subs.password = strings.replaceParams(lang.password, hftSettings); + } + + Object.keys(lang).forEach(function(key) { + lang[key] = strings.replaceParams(lang[key], [subs, hftSettings]); + }); + + }); + + function getLang(langId) { + var lang = langs[langId.toLowerCase()]; + if (!lang) { + lang = langs[langId.toLowerCase().substr(0, 2)]; + } + return lang; + } + + function getDefaultLang() { + var lang = getLang(window.navigator.language); + if (!lang) { + lang = getLang("en"); + } + return lang; + } + + function getLangs(langIds) { + var langs = []; + if (langIds) { + if (typeof langIds === 'string') { + langIds = langIds.split(","); + } + var foundIds = {}; + langIds.forEach(function(id) { + var lang = getLang(id); + if (lang && !foundIds[lang.id]) { + foundIds[lang.id] = lang.id; + langs.push(lang); + } + }); + } + return langs; + } + + return { + getDefaultLang: getDefaultLang, + getLang: getLang, + getLangs: getLangs, + } +}); + diff --git a/server/common-cli-options.js b/server/common-cli-options.js index d922bde8..566ef8dc 100644 --- a/server/common-cli-options.js +++ b/server/common-cli-options.js @@ -40,6 +40,10 @@ exports.options = [ { option: 'system-name', type: 'String', description: 'name used if multiple happyFunTimes servers are running on the same network. Default = computer name'}, { option: 'ask-name', type: 'Boolean', description: 'ask for name on start, use --no-ask-name to set to false', default: "true"}, { option: 'menu', type: 'Boolean', description: 'show menu icon on controller, use --no-menu to turn off', default: "true"}, + { option: 'instructions', type: 'Boolean', description: 'show a instructions at the top games on how to connect', default: "false"}, + { option: 'langs', type: 'String', description: 'languages to show separated by commas (eg --langs=en,ja,es). The first one will be used where only one language can be displayed', default: "false"}, + { option: 'wifi-name', type: 'String', description: 'name of wifi to display to users', default: "HappyFunTimes"}, + { option: 'wifi-pass', type: 'String', description: 'password of wifi to display to users'}, { option: 'minify', type: 'Boolean', description: 'minify -minify.js files', default: false}, { option: 'optimize-controller', type: 'Boolean', description: 'optimize controller.js', default: false}, { option: 'kiosk', type: 'Boolean', description: 'skip the index', default: false}, diff --git a/server/hft-server.js b/server/hft-server.js index 8c2da0b7..4e2e20f2 100644 --- a/server/hft-server.js +++ b/server/hft-server.js @@ -476,6 +476,10 @@ var HFTServer = function(options, startedCallback) { hftSettings: 'window.hftSettings = ' + JSON.stringify({ menu: g.menu, apiVersion: runtimeInfo.info.happyFunTimes.apiVersion, + instructions: g.instructions, + langs: g.langs, + wifiName: g.wifiName, + wifiPass: g.wifiPass, }), }, ]); diff --git a/templates/0.x.x/game.gameview.html b/templates/0.x.x/game.gameview.html index 18a75183..63c8315d 100644 --- a/templates/0.x.x/game.gameview.html +++ b/templates/0.x.x/game.gameview.html @@ -1,4 +1,4 @@ -