From e93e0fdbf99de399600c47786be2394465803ba9 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 10 Jul 2020 16:02:30 -0400 Subject: [PATCH] Update buildings walkthrough chapter for touchscreens --- data/core.yaml | 26 ++++++++++++++++--------- dist/locales/en.json | 26 ++++++++++++++++--------- modules/ui/intro/area.js | 5 +++-- modules/ui/intro/building.js | 37 +++++++++++++++++++++++++----------- 4 files changed, 63 insertions(+), 31 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index ae2d7432b..7e7e7b0d4 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -1979,9 +1979,9 @@ en: starting_node_click: "**Click or press `{space}` to place a starting node on one of the corners of the playground.**" starting_node_tap: "**Tap to place a starting node on one of the corners of the playground.**" continue_playground: "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**" - finish_playground: "Finish the area by pressing `{return}`, or clicking again on either the first or last node." - finish_playground_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard." - finish_drawing: "**Finish drawing an area for the playground.**" + finish_area_click: "Finish the area by pressing `{return}`, or clicking again on either the first or last node." + finish_area_tap: "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard." + finish_playground: "**Finish drawing an area for the playground.**" search_playground: "**Search for '{preset}'.**" choose_playground: "**Choose {preset} from the list.**" add_field: "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**" @@ -2038,24 +2038,32 @@ en: buildings: title: "Buildings" add_building: "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**" - start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press `{space}` to place a starting node on one of the corners of the building.**" - continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the building.**" + start_building: "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible." + building_corner_click: "**Click or press `{space}` to place a starting node on one of the corners of the building.**" + building_corner_tap: "**Tap one of the corners of the building to place a starting node.**" + continue_building: "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details." + finish_building: "**Finish tracing the building.**" retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!" choose_category_building: "**Choose {category} from the list.**" choose_preset_house: "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**" close: "**Press `{esc}` or the {apply} button to close the feature editor.**" rightclick_building: "**{rightclick} Right-click to select the building you created and show the edit menu.**" - square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building shape.**" + edit_menu_building_touch: "**Long-press the building you created to show the edit menu.**" + square_building: "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**" retry_square: "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again." done_square: "See how the corners of the building moved into place? Let's learn another useful trick." add_tank: "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**" - start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press `{space}` to place a starting node on the edge of the tank.**" - continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the tank.**" + start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge." + tank_edge_click: "**Click or press `{space}` to place a starting node on the edge of the tank.**" + tank_edge_tap: "**Tap the edge of the tank to place a starting node.**" + continue_tank: "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw." + finish_tank: "**Finish tracing the tank.**" search_tank: "**Search for '{preset}'.**" choose_tank: "**Choose {preset} from the list.**" rightclick_tank: "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**" + edit_menu_tank_touch: "**Long-press the storage tank you created to show the edit menu.**" circle_tank: "**Press the {circularize_icon} {circularize} button to make the tank a circle.**" - retry_circle: "You didn't click the {circularize_icon} {circularize} button. Try again." + retry_circle: "You didn't press the {circularize_icon} {circularize} button. Try again." play: "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**" startediting: title: "Start Editing" diff --git a/dist/locales/en.json b/dist/locales/en.json index a0ad89adf..0643c29ed 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -2456,9 +2456,9 @@ "starting_node_click": "**Click or press `{space}` to place a starting node on one of the corners of the playground.**", "starting_node_tap": "**Tap to place a starting node on one of the corners of the playground.**", "continue_playground": "Continue drawing the area by placing more nodes along the playground's edge. It is OK to connect the area to the existing walking paths.{br}Tip: You can hold down the `{alt}` key to prevent nodes from connecting to other features. **Continue drawing an area for the playground.**", - "finish_playground": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.", - "finish_playground_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.", - "finish_drawing": "**Finish drawing an area for the playground.**", + "finish_area_click": "Finish the area by pressing `{return}`, or clicking again on either the first or last node.", + "finish_area_tap": "Finish the area by tapping again on either the first or last node, or by pressing `{return}` on a keyboard.", + "finish_playground": "**Finish drawing an area for the playground.**", "search_playground": "**Search for '{preset}'.**", "choose_playground": "**Choose {preset} from the list.**", "add_field": "This playground doesn't have an official name, so we won't add anything in the {name} field.{br}Instead let's add some additional details about the playground to the {description} field. **Open the Add Field list.**", @@ -2517,24 +2517,32 @@ "buildings": { "title": "Buildings", "add_building": "OpenStreetMap is the world's largest database of buildings.{br}You can help improve this database by tracing buildings that aren't already mapped. **Press the {area_icon} {area} button to add a new area.**", - "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible. **Click or press `{space}` to place a starting node on one of the corners of the building.**", - "continue_building": "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.{br}Finish the building by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the building.**", + "start_building": "Let's add this house to the map by tracing its outline.{br}Buildings should be traced around their footprint as accurately as possible.", + "building_corner_click": "**Click or press `{space}` to place a starting node on one of the corners of the building.**", + "building_corner_tap": "**Tap one of the corners of the building to place a starting node.**", + "continue_building": "Continue placing nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details.", + "finish_building": "**Finish tracing the building.**", "retry_building": "It looks like you had some trouble placing the nodes at the building corners. Try again!", "choose_category_building": "**Choose {category} from the list.**", "choose_preset_house": "There are many different types of buildings, but this one is clearly a house.{br}If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type.**", "close": "**Press `{esc}` or the {apply} button to close the feature editor.**", "rightclick_building": "**{rightclick} Right-click to select the building you created and show the edit menu.**", - "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building shape.**", + "edit_menu_building_touch": "**Long-press the building you created to show the edit menu.**", + "square_building": "The house that you just added will look even better with perfectly square corners. **Press the {orthogonalize_icon} {orthogonalize} button to tidy up the building's shape.**", "retry_square": "You didn't press the {orthogonalize_icon} {orthogonalize} button. Try again.", "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.", "add_tank": "Next we'll trace this circular storage tank. **Press the {area_icon} {area} button to add a new area.**", - "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press `{space}` to place a starting node on the edge of the tank.**", - "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.{br}Finish the area by pressing `{return}`, or clicking again on either the first or last node. **Finish tracing the tank.**", + "start_tank": "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge.", + "tank_edge_click": "**Click or press `{space}` to place a starting node on the edge of the tank.**", + "tank_edge_tap": "**Tap the edge of the tank to place a starting node.**", + "continue_tank": "Add a few more nodes around the edge. The circle will be created outside the nodes that you draw.", + "finish_tank": "**Finish tracing the tank.**", "search_tank": "**Search for '{preset}'.**", "choose_tank": "**Choose {preset} from the list.**", "rightclick_tank": "**{rightclick} Right-click to select the storage tank you created and show the edit menu.**", + "edit_menu_tank_touch": "**Long-press the storage tank you created to show the edit menu.**", "circle_tank": "**Press the {circularize_icon} {circularize} button to make the tank a circle.**", - "retry_circle": "You didn't click the {circularize_icon} {circularize} button. Try again.", + "retry_circle": "You didn't press the {circularize_icon} {circularize} button. Try again.", "play": "Great Job! Practice tracing a few more buildings, and try some of the other commands on the edit menu. **When you are ready to continue to the next chapter, press '{next}'.**" }, "startediting": { diff --git a/modules/ui/intro/area.js b/modules/ui/intro/area.js index 0812d3931..8aa81ac67 100644 --- a/modules/ui/intro/area.js +++ b/modules/ui/intro/area.js @@ -168,8 +168,9 @@ export function uiIntroArea(context, reveal) { } _areaID = null; - var textId = context.lastPointerType() === 'mouse' ? 'finish_playground' : 'finish_playground_tap'; - var finishString = helpString('intro.areas.' + textId) + helpString('intro.areas.finish_drawing'); + + var finishString = helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + + helpString('intro.areas.finish_playground'); revealPlayground(playground, finishString, { duration: 250 } ); diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js index 551e60efc..c8cf14393 100644 --- a/modules/ui/intro/building.js +++ b/modules/ui/intro/building.js @@ -95,10 +95,12 @@ export function uiIntroBuilding(context, reveal) { context.map().zoomEase(20, 500); timeout(function() { - revealHouse(house, helpString('intro.buildings.start_building')); + var startString = helpString('intro.buildings.start_building') + + helpString('intro.buildings.building_corner_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')); + revealHouse(house, startString); context.map().on('move.intro drawn.intro', function() { - revealHouse(house, helpString('intro.buildings.start_building'), { duration: 0 }); + revealHouse(house, startString, { duration: 0 }); }); context.on('enter.intro', function(mode) { @@ -123,10 +125,14 @@ export function uiIntroBuilding(context, reveal) { _houseID = null; - revealHouse(house, helpString('intro.buildings.continue_building')); + var continueString = helpString('intro.buildings.continue_building') + '{br}' + + helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + + helpString('intro.buildings.finish_building'); + + revealHouse(house, continueString); context.map().on('move.intro drawn.intro', function() { - revealHouse(house, helpString('intro.buildings.continue_building'), { duration: 0 }); + revealHouse(house, continueString, { duration: 0 }); }); context.on('enter.intro', function(mode) { @@ -329,7 +335,8 @@ export function uiIntroBuilding(context, reveal) { }); context.map().on('move.intro drawn.intro', function() { - revealHouse(house, helpString('intro.buildings.rightclick_building'), { duration: 0 }); + var rightclickString = helpString('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_building' : 'edit_menu_building_touch')); + revealHouse(house, rightclickString, { duration: 0 }); }); context.history().on('change.intro', function() { @@ -464,10 +471,12 @@ export function uiIntroBuilding(context, reveal) { _tankID = null; timeout(function() { - revealTank(tank, helpString('intro.buildings.start_tank')); + var startString = helpString('intro.buildings.start_tank') + + helpString('intro.buildings.tank_edge_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')); + revealTank(tank, startString); context.map().on('move.intro drawn.intro', function() { - revealTank(tank, helpString('intro.buildings.start_tank'), { duration: 0 }); + revealTank(tank, startString, { duration: 0 }); }); context.on('enter.intro', function(mode) { @@ -492,10 +501,14 @@ export function uiIntroBuilding(context, reveal) { _tankID = null; - revealTank(tank, helpString('intro.buildings.continue_tank')); + var continueString = helpString('intro.buildings.continue_tank') + '{br}' + + helpString('intro.areas.finish_area_' + (context.lastPointerType() === 'mouse' ? 'click' : 'tap')) + + helpString('intro.buildings.finish_tank'); + + revealTank(tank, continueString); context.map().on('move.intro drawn.intro', function() { - revealTank(tank, helpString('intro.buildings.continue_tank'), { duration: 0 }); + revealTank(tank, continueString, { duration: 0 }); }); context.on('enter.intro', function(mode) { @@ -646,10 +659,12 @@ export function uiIntroBuilding(context, reveal) { }, 50); // after menu visible }); - revealTank(tank, helpString('intro.buildings.rightclick_tank')); + var rightclickString = helpString('intro.buildings.' + (context.lastPointerType() === 'mouse' ? 'rightclick_tank' : 'edit_menu_tank_touch')); + + revealTank(tank, rightclickString); context.map().on('move.intro drawn.intro', function() { - revealTank(tank, helpString('intro.buildings.rightclick_tank'), { duration: 0 }); + revealTank(tank, rightclickString, { duration: 0 }); }); context.history().on('change.intro', function() {