From 0af9df708f2d26a68b92069dbf7c93fe779ce9e2 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 2 Apr 2017 23:05:02 -0400 Subject: [PATCH] Add house tracing steps to building chapter --- data/core.yaml | 2 +- dist/locales/en.json | 4 +- modules/ui/intro/building.js | 112 +++++++++++++++++++++++++++++------ 3 files changed, 98 insertions(+), 20 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 25d26df37..f39794d79 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -873,7 +873,7 @@ en: 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. Finish the building shape by clicking on the starting node. **Continue tracing the building.**" choose_building: "**Select Building from the list**" choose_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the House building type**" - close: "**Hit escape, return, or click the {button} button to close the feature editor**" + close: "**Hit escape, or click the {button} button to close the feature editor**" rightclick_building: "**Right-click to select the building you created.**" square_building: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**" done_square: "See how the corners of the building moved into place? Let's learn another useful trick." diff --git a/dist/locales/en.json b/dist/locales/en.json index 73867ca91..7903d6a0d 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -724,7 +724,7 @@ "finish": "Continue drawing the line for the new road. Remember that you can drag and zoom the map if needed. When you are finished drawing, click on the last node again. **Finish drawing the road.**", "road": "**Select Road from the list**", "residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**", - "describe": "**Name the road, then hit escape or click the {button} button to close the feature editor.**", + "describe": "**Name the road, then hit escape, return, or click the {button} button to close the feature editor.**", "restart": "The road needs to intersect {name}. Let's try again!", "wrong_preset": "You didn't select the Residential road type. **Click here to choose again**", "play": "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**" @@ -736,7 +736,7 @@ "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. Finish the building shape by clicking on the starting node. **Continue tracing the building.**", "choose_building": "**Select Building from the list**", "choose_house": "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just pick the generic Building preset. **Choose the House building type**", - "close": "**Hit escape, return, or click the {button} button to close the feature editor**", + "close": "**Hit escape, or click the {button} button to close the feature editor**", "rightclick_building": "**Right-click to select the building you created.**", "square_building": "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**", "done_square": "See how the corners of the building moved into place? Let's learn another useful trick.", diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js index d0f2b22c1..56aaa137e 100644 --- a/modules/ui/intro/building.js +++ b/modules/ui/intro/building.js @@ -54,20 +54,25 @@ export function uiIntroBuilding(context, reveal) { return chapter.restart(); } - var padding = 120 * Math.pow(2, context.map().zoom() - 19); - var box = pad(house, padding, context); - reveal(box, t('intro.buildings.start_building')); + context.map().zoomEase(20, 500); - context.map().on('move.intro drawn.intro', function() { - padding = 120 * Math.pow(2, context.map().zoom() - 19); - box = pad(house, padding, context); - reveal(box, t('intro.buildings.start_building'), { duration: 0 }); - }); + timeout(function() { + var padding = 160 * Math.pow(2, context.map().zoom() - 20); + var box = pad(house, padding, context); + reveal(box, t('intro.buildings.start_building')); - context.on('enter.intro', function(mode) { - if (mode.id !== 'draw-area') return chapter.restart(); - continueTo(drawBuilding); - }); + context.map().on('move.intro drawn.intro', function() { + padding = 160 * Math.pow(2, context.map().zoom() - 20); + box = pad(house, padding, context); + reveal(box, t('intro.buildings.start_building'), { duration: 0 }); + }); + + context.on('enter.intro', function(mode) { + if (mode.id !== 'draw-area') return chapter.restart(); + continueTo(drawBuilding); + }); + + }, 520); // after easing function continueTo(nextStep) { context.map().on('move.intro drawn.intro', null); @@ -82,12 +87,12 @@ export function uiIntroBuilding(context, reveal) { return chapter.restart(); } - var padding = 150 * Math.pow(2, context.map().zoom() - 19); + var padding = 160 * Math.pow(2, context.map().zoom() - 20); var box = pad(house, padding, context); reveal(box, t('intro.buildings.continue_building')); context.map().on('move.intro drawn.intro', function() { - padding = 150 * Math.pow(2, context.map().zoom() - 19); + padding = 160 * Math.pow(2, context.map().zoom() - 20); box = pad(house, padding, context); reveal(box, t('intro.buildings.continue_building'), {duration: 0}); }); @@ -96,7 +101,7 @@ export function uiIntroBuilding(context, reveal) { if (mode.id === 'draw-area') return; else if (mode.id === 'select') - return continueTo(play); + return continueTo(chooseBuildingCategory); else return chapter.restart(); }); @@ -109,6 +114,79 @@ export function uiIntroBuilding(context, reveal) { } + function chooseBuildingCategory() { + if (context.mode().id !== 'select') { + return chapter.restart(); + } + + context.on('exit.intro', function() { + return chapter.restart(); + }); + + var button = d3.select('.preset-category-building .preset-list-button'); + if (button.empty()) return chapter.restart(); + + timeout(function() { + reveal(button.node(), t('intro.buildings.choose_building')); + button.on('click.intro', function() { continueTo(chooseHouse); }); + }, 500); + + function continueTo(nextStep) { + d3.select('.preset-list-button').on('click.intro', null); + context.on('exit.intro', null); + nextStep(); + } + } + + + function chooseHouse() { + if (context.mode().id !== 'select') { + return chapter.restart(); + } + + context.on('exit.intro', function() { + return chapter.restart(); + }); + + var button = d3.select('.preset-building-house .preset-list-button'); + if (button.empty()) return chapter.restart(); + + + timeout(function() { + reveal(button.node(), t('intro.buildings.choose_house')); + button.on('click.intro', function() { continueTo(closeEditor); }); + }, 500); + + function continueTo(nextStep) { + d3.select('.preset-list-button').on('click.intro', null); + context.on('exit.intro', null); + nextStep(); + } + } + + + function closeEditor() { + if (context.mode().id !== 'select') { + return chapter.restart(); + } + + context.on('exit.intro', function() { + continueTo(play); + }); + + timeout(function() { + reveal('.entity-editor-pane', + t('intro.buildings.close', { button: icon('#icon-apply', 'pre-text') }) + ); + }, 500); + + function continueTo(nextStep) { + context.on('exit.intro', null); + nextStep(); + } + } + + function play() { dispatch.call('done'); reveal('.intro-nav-wrap .chapter-startEditing', @@ -122,8 +200,8 @@ export function uiIntroBuilding(context, reveal) { chapter.enter = function() { context.history().reset('initial'); - context.map().zoom(19).centerEase(house); - addBuilding(); + context.map().zoom(19).centerEase(house, 500); + timeout(addBuilding, 520); };