Localized text in start and goal boxes; now drawing time and trinkets…

… in the status area; moved start/win/die text to banners inside the canvas.
jonoxia · Jan 21, 2012 · 95947e0 · 95947e0
1 parent c7e303d
commit 95947e0
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 82 deletions.
diff --git a/playoffline.html b/playoffline.html
@@ -9,10 +9,7 @@
   <script src="webrunner-play.js"></script>
 </head>
 <body>
-  <p>Welcome to <span id="levelName">MozFestDemo</span>.
-     Arrow keys to move, Space bar to jump.</p>
-  <p>Time: <span id="timer"></span>&nbsp;Hearts: <span id="hp"></span>&nbsp;<h2 id="output"></h2></p>
-
+  <h2 id="output"></h2>
   <canvas id="game-canvas" width="800" height="600"></canvas>
   <span style="display:none;" id="avatarURL">running_human_frames.png</span>
   <span id="debug"></span>
@@ -25,69 +22,82 @@
   <audio id="crunch-sfx" preload="auto" autobuffer="true" src="sfx/crunch.ogg"></audio>
   <audio id="kaching-sfx" preload="auto" autobuffer="true" src="sfx/kaching.ogg"></audio>
   <span id="localized_strings" style="display:none">
- {
-  "_runjumpbuild": "ラン・ジャンプ・ビルド",
-  "_all_levels": "全てのゲーム",
-  "_welcome": "ようこそ",
-  "_published_levels": "公開されているステージ",
-  "_title": "タイトル",
-  "_last_modified": "更新日時",
-  "_creator": "作者",
-  "_your_time": "あなたのベストタイム",
-  "_best_time": "ベストタイム",
-  "_your_levels": "あなたの状況",
-  "_published": "公開",
-  "_new_level_name": "新しいステージ",
-  "_create_level": "ステージを作る",
-  "_your_player_data": "プレイヤーのデータ",
-  "_player_name": "名前",
-  "_your_avatar": "あなたのキャラクタ",
-  "_save_changes": "保存する",
-  "_play": "チャレンジする",
-  "_edit": "変更する",
-  "_hi": "おおい",
-  "_level_name": "このステージは",
-  "_game_instructions": "矢印キーで動く。スペースバーで跳ぶ。",
-  "_other_levels": "他のステージ",
-  "_time": "時間",
-  "_useless_trinkets": "お宝",
-  "_winning": "やったね！大成功だ！",
-  "_saving_score": "スコア保存中。。。",
-  "_lose_monster": "食べられたよ。。",
-  "_reload_play_again": "リロードして再チャレンジ！",
-  "_lose_falling": "落ちたよ。。",
-  "_level_designer": "ステージの設計",
-  "_play_this_level": "このステージをチャレンジ！",
-  "_background_img_url": "背景画像のURL",
-  "_tileset_url": "タイルセットのURL",
-  "_goal_img_url": "ゴール画像のURL",
-  "_music_url": "BGMのURL",
-  "_gravity": "重力",
-  "_ground_friction": "摩擦",
-  "_air_friction": "空気抵抗",
-  "_ground_accel": "地上での加速度",
-  "_air_accel": "空での加速度",
-  "_ground_decel": "地上での減速度",
-  "_air_decel": "空での減速度",
-  "_jump_power": "跳躍のパワー",
-  "_top_speed": "最高速度",
-  "_eraser_tool": "消しゴムツール",
-  "_eraser_tool_exp": "(消したい物をクリックして)",
-  "_scroll_tool": "スクロールツール",
-  "_scroll_tool_exp": "(ステージをスクロールするためにドラッグして)",
-  "_start_loc_tool": "スタート設置ツール",
-  "_goal_loc_tool": "ゴール設置ツール",
-  "_publish": "このステージを公開する",
-  "_lang_pref": "言語",
-  "_this_language": "日本語",
-  "_you": "あなた",
-  "_nobody": "誰もいない",
-  "_nobody_yet": "まだ誰もクリアしていません",
-  "_published_yes": "公開中",
-  "_published_no": "未公開",
-  "_other_player_score": "%(player)s さんの成績：%(time)s お宝 %(trinkets)d 個",
-  "_your_score": "%(time)s お宝 %(trinkets)d 個"
-}
+{
+  "_runjumpbuild": "ラン・ジャンプ・ビルド",
+  "_all_levels": "全てのゲーム",
+  "_welcome": "ようこそ",
+  "_published_levels": "公開されているステージ",
+  "_title": "タイトル",
+  "_last_modified": "更新日時",
+  "_creator": "作者",
+  "_your_time": "あなたのベストタイム",
+  "_best_time": "ベストタイム",
+  "_your_levels": "あなたの状況",
+  "_published": "公開",
+  "_new_level_name": "新しいステージ",
+  "_create_level": "ステージを作る",
+  "_your_player_data": "プレイヤーのデータ",
+  "_player_name": "名前",
+  "_your_avatar": "あなたのキャラクタ",
+  "_save_changes": "保存する",
+  "_play": "チャレンジする",
+  "_edit": "変更する",
+  "_hi": "おおい",
+  "_level_name": "このステージは",
+  "_game_instructions": "矢印キーで動く。スペースバーで跳ぶ。",
+  "_other_levels": "他のステージ",
+  "_time": "時間",
+  "_useless_trinkets": "お宝",
+  "_winning": "やったね！大成功だ！",
+  "_saving_score": "スコア保存中。。。",
+  "_lose_monster": "食べられたよ。。",
+  "_reload_play_again": "リロードして再チャレンジ！",
+  "_lose_falling": "落ちたよ。。",
+  "_level_designer": "ステージの設計",
+  "_play_this_level": "このステージをチャレンジ！",
+  "_background_img_url": "背景画像のURL",
+  "_tileset_url": "タイルセットのURL",
+  "_goal_img_url": "ゴール画像のURL",
+  "_music_url": "BGMのURL",
+  "_gravity": "重力",
+  "_ground_friction": "摩擦",
+  "_air_friction": "空気抵抗",
+  "_ground_accel": "地上での加速度",
+  "_air_accel": "空での加速度",
+  "_ground_decel": "地上での減速度",
+  "_air_decel": "空での減速度",
+  "_jump_power": "跳躍のパワー",
+  "_top_speed": "最高速度",
+  "_eraser_tool": "消しゴムツール",
+  "_eraser_tool_exp": "(消したい物をクリックして)",
+  "_scroll_tool": "スクロールツール",
+  "_scroll_tool_exp": "(ステージをスクロールするためにドラッグして)",
+  "_start_loc_tool": "スタート設置ツール",
+  "_goal_loc_tool": "ゴール設置ツール",
+  "_start":"スタート",
+  "_goal":"ゴール",
+  "_publish": "このステージを公開する",
+  "_lang_pref": "言語",
+  "_this_language": "日本語",
+  "_you": "あなた",
+  "_nobody": "誰もいない",
+  "_nobody_yet": "まだ誰もクリアしていません",
+  "_published_yes": "公開中",
+  "_published_no": "未公開",
+  "_other_player_score": "%(player)s さんの成績：%(time)s お宝 %(trinkets)d 個",
+  "_your_score": "%(time)s お宝 %(trinkets)d 個",
+  "_obstacle_tools": "障害物ツール",
+  "_monster_tools": "モンスターツール",
+  "_powerup_tools": "パワーアップツール",
+  "_physics": "物理",
+  "_show_hide": "開く／閉じる",
+  "_code_editor": "コードエディタ",
+  "_nugget_id": "nugget id",
+  "_nugget_name": "nugget name",	
+  "_nugget_type": "nugget type",
+  "_save_code": "コードを保存する",
+  "_test_code": "コードをテストする"
+}
   </span>
 
 </body></html>

diff --git a/strings.json b/strings.json
@@ -51,6 +51,8 @@
   "_scroll_tool_exp": "(drag to scroll level)",
   "_start_loc_tool": "Start Location Tool",
   "_goal_loc_tool": "Goal Location Tool",
+  "_start":"Start",
+  "_goal":"Goal",
   "_publish": "Make this level visible to others",
   "_lang_pref": "Language",
   "_this_language": "English",
@@ -125,6 +127,8 @@
   "_scroll_tool_exp": "(ステージをスクロールするためにドラッグして)",
   "_start_loc_tool": "スタート設置ツール",
   "_goal_loc_tool": "ゴール設置ツール",
+  "_start":"スタート",
+  "_goal":"ゴール",
   "_publish": "このステージを公開する",
   "_lang_pref": "言語",
   "_this_language": "日本語",

diff --git a/templates/design.html b/templates/design.html
@@ -63,5 +63,6 @@
     <input type="checkbox" id="publish"/><label for="publish">${_publish}</label>
     <button onclick="saveChanges();">${_save_changes}</button><br>
   </div>
+  <span id="localized_strings" style="display:none"></span>
 </body>
 </html>
diff --git a/webrunner-edit.js b/webrunner-edit.js
@@ -250,7 +250,8 @@ function redraw() {
     var x = TheWorld.worldXToScreenX(TheWorld.startX);
     var y = TheWorld.worldYToScreenY(TheWorld.startY);
     context.strokeRect(x, y, 64, 64);
-    context.strokeText("START", x + 5, y +32); // TODO l10n
+    context.font="10pt arial";
+    context.strokeText(getLocalString("_start"), x + 5, y +32);
 }
 
 function saveChanges() {

diff --git a/webrunner-play.js b/webrunner-play.js
@@ -14,7 +14,16 @@ function adjustToScreen() {
     $("#game-canvas").attr("height", TheWorld.canvasHeight);
 }
 
+function bannerText(text) {
+  var ctx = $("#game-canvas")[0].getContext("2d");
+  ctx.font="36pt arial";
+  ctx.fillStyle = "black";
+  //var textWidth = ctx.measureText(text);
+  ctx.fillText(text, 100, TheWorld.canvasHeight/2 - 50);
+}
+
 var StatusBar = {
+  timeString: "",
   updateTimer: function(ms) {
     var s = Math.floor(ms / 1000);
     var m = Math.floor(s / 60);
@@ -24,7 +33,7 @@ var StatusBar = {
     } else {
 	s_str = s;
     }
-    $("#timer").html( m + ":" + s_str);
+    this.timeString = m + ":" + s_str;
   },
 
   draw: function(ctx, player) {
@@ -55,6 +64,13 @@ var StatusBar = {
 	ctx.fillStyle = "red";
 	ctx.fill();
     }
+
+    ctx.font="18pt arial";
+    ctx.fillStyle = "black";
+    //var textWidth = ctx.measureText(text);
+    ctx.fillText(getLocalString("_time") + ": " + this.timeString, 80, 30);
+
+    ctx.fillText(getLocalString("_useless_trinkets") + ": " + player.numTrinkets, 240, 30);
   }
 };
 
@@ -91,15 +107,15 @@ function startGame(loader) {
   TheWorld.addForegroundObject(player);
   //TheWorld.draw(context);
 
-  $("#hp").html(player.hitPoints);
-
   var leftArrowDown = false;
   var rightArrowDown = false;
   var spacebarDown = false;
+  var gameStarted = false;
 
   var startTime = Date.now();
 
   $(document).bind("keydown", function(evt) {
+    gameStarted = true;
      if (evt.which == LEFT_ARROW) {
        leftArrowDown = true;
      }
@@ -126,6 +142,7 @@ function startGame(loader) {
   var currentTime = Date.now();
   var elapsed = 0;
   var newTime;
+
   var mainLoop = function() {
     newTime = Date.now();
     elapsed = newTime - currentTime;
@@ -152,14 +169,21 @@ function startGame(loader) {
     StatusBar.updateTimer(currentTime - startTime);
     TheWorld.draw(context);
     StatusBar.draw(context, player);
+
+    // Show instructions on screen until player starts moving:
+    if (!gameStarted) {
+      bannerText(getLocalString("_game_instructions"));
+    }
+
     // check for #WINNING:
     if (player.intersecting(TheWorld.goalArea)) {
-      $("#output").html(getLocalString("_winning"));
+      bannerText(getLocalString("_winning"));
       // stop bgm, play victory sound effects!
       $("#bgm")[0].pause();
       playSfx("victory-sfx");
-      $.ajax({type: "POST",
-		url: "complete-level.py",
+      if (!offlineMode) {
+        $.ajax({type: "POST",
+                url: "complete-level.py",
 		data: {levelName: gup("level"),
 		      completionTime: Date.now() - startTime,
 		      trinkets: player.numTrinkets},
@@ -169,19 +193,20 @@ function startGame(loader) {
 		error: function(data, textStatus, thing) {
 		    $("#debug").html(thing);
 	        },
-		  dataType: "text"
-		  });
-      $("#debug").html(getLocalString("_saving_score"));
+		dataType: "text"
+		});
+        $("#debug").html(getLocalString("_saving_score"));
+      }
     }
     // check for #LOSING:
     else if (player.dead) {
-	$("#output").html(getLocalString("_lose_monster") + " " +
-			  getLocalString("_reload_play_again"));
+	bannerText(getLocalString("_lose_monster") + " " +
+		   getLocalString("_reload_play_again"));
       $("#bgm")[0].pause();
       playSfx("death-sfx");
     } else if (player.top > bottomLimit) {
-	$("#output").html(getLocalString("_lose_falling") + " " +
-			  getLocalString("_reload_play_again"));
+	bannerText(getLocalString("_lose_falling") + " " +
+		   getLocalString("_reload_play_again"));
       $("#bgm")[0].pause();
       playSfx("death-sfx");
     } else {
@@ -195,14 +220,17 @@ function startGame(loader) {
 }
 
 
+var offlineMode;
 $(document).ready(function() {
   var loader = new AssetLoader();
   progressBar = new ProgressBar($("#game-canvas")[0].getContext("2d"));
   progressBar.draw(0);
   // Playing online or offline?
   if (typeof offlineLevelData != "undefined") {
+    offlineMode = true;
     TheWorld.loadFromString(offlineLevelData, loader, startGame);
   } else {
+    offlineMode = false;
     var title = gup("level");
     TheWorld.loadFromServer(title, loader, startGame);
   }

diff --git a/webrunner-world.js b/webrunner-world.js
@@ -92,8 +92,9 @@ var TheWorld = {
 			      this.left, this.top, this.width, this.height);
 	    } else {
 		ctx.strokeStyle = "black";
+                ctx.font="14pt arial";
 		ctx.strokeRect(this.left, this.top, 64, 64);
-		ctx.strokeText("GOAL", this.left + 5, this.top +32); // TODO l10n
+                ctx.strokeText(getLocalString("_goal"), this.left + 5, this.top +32);
 	    }
 	},
 	setBounds: function(l, t, w, h) {