robertpenner/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RxJSCraft</title>
    <script src="https://npmcdn.com/systemjs@0.19.24/dist/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="https://npmcdn.com/rxjs@5.0.0-beta.4/bundles/Rx.js"></script>

    <style>
        .red-ball{
            position: absolute;
            background-color: red;
            border-radius: 50%;
            width:20px;
            height:20px;
        }

        .container{
            border: 10px solid black;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>

<div class="container">

    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>
    <div class="red-ball"></div>

</div>

<script>
    SystemJS.config({
        transpiler: "typescript",
        typescriptOptions: {
            emitDecoratorMetadata: true
        },
        packages: {
            "src": {
                "main": "app",
                "defaultExtension": "ts"
            }
        }
    });
    System.import('src');
</script>
</body>
</html>

## src\app.ts
import {Observable} from "rxjs/Rx";

const container = document.querySelector('.container');
const redBalls = document.querySelectorAll('.red-ball');
const redBallsArray = Array.from(redBalls);
const redBalls$ = Observable.from(redBallsArray);

//randomly position the balls
redBallsArray.forEach((ball:HTMLElement) => {
    ball.style.top = Math.random() * 200 + "px";
    ball.style.left = Math.random() * 200 + "px";
});

const redBallClick$ = Observable.fromEvent(redBalls, 'click')
    .do(event => event.stopPropagation());


const containerClick$ = Observable.fromEvent(container, 'click')
    .do(event => event.stopPropagation());

const changeElementColor = color => element => {
    element.style.backgroundColor = color;
};

redBallClick$
    .pluck('target')
    .subscribe(changeElementColor("green"));

containerClick$
    .switchMapTo(redBalls$)
    .subscribe(changeElementColor("red"));

redBallClick$
    .pluck("target")
    .window(containerClick$)
    .mergeMap(windowed => windowed.toArray())
    .switchMap(x => Observable.from(new Set(x)))
    .withLatestFrom(containerClick$)
    .subscribe(([ball, event])=>{
            console.log(ball)

            const {clientX:x, clientY:y} = event;
            const {offsetLeft:left, offsetTop:top, offsetWidth:w, offsetHeight:h} = ball;

            const targetX = x - left - w/2;
            const targetY = y - top - h/2;
            ball.style['transition-duration'] = "1s";
            ball.style.transform = `translateX(${targetX}px) translateY(${targetY}px)`;
        }
    });
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>RxJSCraft</title>
	<script src="https://npmcdn.com/systemjs@0.19.24/dist/system.js"></script>
	<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
	<script src="https://npmcdn.com/rxjs@5.0.0-beta.4/bundles/Rx.js"></script>

	<style>
	.red-ball{
	position: absolute;
	background-color: red;
	border-radius: 50%;
	width:20px;
	height:20px;
	}

	.container{
	border: 10px solid black;
	width: 200px;
	height: 200px;
	}
	</style>
	</head>

	<body>

	<div class="container">

	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>
	<div class="red-ball"></div>

	</div>

	<script>
	SystemJS.config({
	transpiler: "typescript",
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	packages: {
	"src": {
	"main": "app",
	"defaultExtension": "ts"
	}
	}
	});
	System.import('src');
	</script>
	</body>
	</html>
	import {Observable} from "rxjs/Rx";

	const container = document.querySelector('.container');
	const redBalls = document.querySelectorAll('.red-ball');
	const redBallsArray = Array.from(redBalls);
	const redBalls$ = Observable.from(redBallsArray);

	//randomly position the balls
	redBallsArray.forEach((ball:HTMLElement) => {
	ball.style.top = Math.random() * 200 + "px";
	ball.style.left = Math.random() * 200 + "px";
	});

	const redBallClick$ = Observable.fromEvent(redBalls, 'click')
	.do(event => event.stopPropagation());


	const containerClick$ = Observable.fromEvent(container, 'click')
	.do(event => event.stopPropagation());

	const changeElementColor = color => element => {
	element.style.backgroundColor = color;
	};

	redBallClick$
	.pluck('target')
	.subscribe(changeElementColor("green"));

	containerClick$
	.switchMapTo(redBalls$)
	.subscribe(changeElementColor("red"));

	redBallClick$
	.pluck("target")
	.window(containerClick$)
	.mergeMap(windowed => windowed.toArray())
	.switchMap(x => Observable.from(new Set(x)))
	.withLatestFrom(containerClick$)
	.subscribe(([ball, event])=>{
	console.log(ball)

	const {clientX:x, clientY:y} = event;
	const {offsetLeft:left, offsetTop:top, offsetWidth:w, offsetHeight:h} = ball;

	const targetX = x - left - w/2;
	const targetY = y - top - h/2;
	ball.style['transition-duration'] = "1s";
	ball.style.transform = `translateX(${targetX}px) translateY(${targetY}px)`;
	}
	});