diff --git a/_assets/index.js b/_assets/index.js
index 1db58dc..898405a 100644
--- a/_assets/index.js
+++ b/_assets/index.js
@@ -1,6 +1,6 @@
import { init as init_lens } from './js/lens.js'
import { init as init_cartridge } from './js/cartridge';
-
+import { init as init_pong } from './js/pong';
// Test import of an asset
@@ -16,4 +16,5 @@ import './index.scss';
init_lens();
console.log('init lens');
init_cartridge();
+ init_pong();
// }
diff --git a/_assets/js/pong.js b/_assets/js/pong.js
new file mode 100644
index 0000000..9da2ccb
--- /dev/null
+++ b/_assets/js/pong.js
@@ -0,0 +1,248 @@
+const PADDING = 50;
+
+const PADDLE_SIZE = {
+ width: 500,
+ height: 30,
+}
+const BALL_SIZE = {
+ width: 50,
+ height: 30
+}
+
+const PADDLE_POSITION = {
+ x: (window.screen.availWidth / 2) - (PADDLE_SIZE.width/2),
+ y: window.screen.availHeight - PADDLE_SIZE.height - PADDING
+}
+
+const TARGET_SIZE = {
+ width: 300,
+ height: 100
+}
+
+const TARGET_GRID = {
+ x: 4,
+ y: 3
+}
+
+
+const PADDLE_MOVE = 30;
+
+
+function shuffleArray(array) {
+ return array.map(value => ({ value, sort: Math.random() }))
+ .sort((a, b) => a.sort - b.sort)
+ .map(({ value }) => value)
+}
+
+
+function plan_grid(){
+ let n_targets = TARGET_GRID.x * TARGET_GRID.y;
+ let pages, page_objects;
+// get pages that are real pages
+ pages = document.querySelectorAll('.page-metadata');
+ page_objects = Array.from(pages).map((page) => {
+ return {
+ url: page.getAttribute('url')
+ }
+ })
+ // pad end with blanks
+ page_objects = Object.assign(new Array(n_targets).fill({url:'blank.html'}), page_objects);
+ // shuffle array order
+ page_objects = shuffleArray(page_objects)
+
+ // arrange on a grid!
+ page_objects = page_objects.map((page, idx) => {
+ let col = idx % TARGET_GRID.x;
+ let row = Math.floor(idx / TARGET_GRID.x);
+ let col_grid_width = (window.screen.availWidth-(PADDING*2)) / TARGET_GRID.x
+
+ return {
+ ...page,
+ x: (col_grid_width * col) + PADDING,
+ y: (PADDING*2 + TARGET_SIZE.height) * row
+ }
+ })
+
+ return page_objects
+}
+
+function popupPosition(popup){
+ let pos = {
+ left: popup.screenLeft,
+ right: popup.screenLeft + popup.outerWidth,
+ top: popup.screenTop,
+ bottom: popup.screenTop + popup.outerHeight
+ }
+ pos.centerX = (pos.left + pos.right) / 2
+ pos.centerY = (pos.top + pos.bottom) / 2
+ return pos
+}
+
+function checkIntersect(a, b){
+ let pos_a = popupPosition(a);
+ let pos_b = popupPosition(b);
+ // console.log(pos_a,pos_b)
+ // check if intersect
+ let overlap = !(
+ pos_a.right < pos_b.left ||
+ pos_a.left > pos_b.right ||
+ pos_a.bottom < pos_b.top ||
+ pos_a.top > pos_b.bottom
+ )
+
+ if (overlap === false){
+ return false
+ }
+
+ // if overlap, check what side we are on
+ if (Math.abs(pos_a.centerX-pos_b.centerX) > Math.abs(pos_a.centerY-pos_b.centerY)){
+ // more X difference than y difference, we are left or right
+ if (pos_a.centerX > pos_b.centerX){
+ // a is to the right of b
+ return('right')
+ } else {
+ return('left')
+ }
+ } else {
+ if (pos_a.centerY > pos_b.centerY){
+ // a is below b
+ return('bottom')
+ } else {
+ return('top')
+ }
+ }
+}
+
+function endGame(popups, ball, paddle){
+for (let popup of popups){
+ popup.popup.close()
+}
+ball.popup.close();
+paddle.close();
+}
+
+function handleIntersect(popup, popups){
+ if (popup.url === "blank.html"){
+ popup.popup.close()
+ let index = popups.indexOf(popup);
+ if (index > -1){
+ popups.splice(index, 1);
+ }
+ console.log('closing popup')
+ return false
+ } else {
+ window.location = popup.url
+ console.log('going to new page!')
+ return true;
+ }
+}
+
+function updateBall(ball, popups, paddle){
+ let end_game = false;
+ ball.position = popupPosition(ball.popup)
+ // console.log(ball.position, popups.popup)
+ // check bounce
+ if (ball.position.right === window.screen.availWidth || ball.position.left === 0){
+ ball.velocity.x *= -1
+ }
+ if (ball.position.top === screen.availTop){
+ ball.velocity.y *= -1
+ }
+
+ // check intersections with other windows
+ for (let popup of popups){
+ // console.log(popup.popup)
+ let intersected = checkIntersect(ball.popup, popup.popup)
+ if (intersected === 'top' || intersected === 'bottom'){
+ ball.velocity.y *= -1;
+ } else if (intersected === 'left' || intersected === 'right'){
+ ball.velocity.x *= -1;
+ }
+ if (intersected){
+ console.log(intersected);
+ end_game = handleIntersect(popup, popups);
+ break
+ }
+
+ }
+
+ if (checkIntersect(ball.popup, paddle) && ball.velocity.y < 0){
+ ball.velocity.y *= -1;
+ }
+
+ if (ball.position.bottom === window.screen.availHeight && ball.velocity.y < 0){
+ // ball died :(
+ // end_game = true;
+ ball.popup.close();
+ ball = init_ball();
+ }
+
+ if (end_game){
+ endGame(popups, ball, paddle)
+ } else {
+ ball.popup.moveBy(ball.velocity.x, -ball.velocity.y)
+ window.setTimeout(() => {updateBall(ball, popups, paddle)}, 100)
+}
+}
+
+function init_ball(){
+ let ball_popup = window.open('ball.html', 'ball', `popup=true,width=${BALL_SIZE.width},height=${BALL_SIZE.height},screenX=${PADDLE_POSITION.x},screenY=${PADDLE_POSITION.y-BALL_SIZE.height}`)
+ ball_popup.moveTo(PADDLE_POSITION.x,PADDLE_POSITION.y)
+
+ let ball = {
+ popup: ball_popup,
+ velocity: {x: 20, y: 20}
+ };
+ return ball
+}
+
+
+function init_controller(){
+ let grid = plan_grid();
+ console.log(grid);
+ let popups = grid.map((page, idx) => {
+ return{ ...page,
+ popup: window.open(page.url, `target-${idx}`, `popup=true,width=${TARGET_SIZE.width},height=${TARGET_SIZE.height},left=${page.x},top=${page.y}`)
+ }
+ })
+ let paddle = window.open('paddle.html', 'paddle', `popup=true,width=${PADDLE_SIZE.width},height=${PADDLE_SIZE.height},screenX=${PADDLE_POSITION.x},screenY=${PADDLE_POSITION.y}`)
+
+ let ball = init_ball();
+ updateBall(ball, popups, paddle);
+}
+
+function init_paddle(){
+ window.resizeTo(PADDLE_SIZE.width, PADDLE_SIZE.height);
+ window.moveTo(
+ PADDLE_POSITION.x,
+ PADDLE_POSITION.y
+ )
+
+ document.addEventListener('keydown', (event) => {
+ if (event.key == "ArrowLeft"){
+ if (window.screenX > PADDLE_MOVE) {
+ window.moveBy(-PADDLE_MOVE, 0)
+ } else {
+ window.moveBy(-window.screenX, 0);
+ }
+ } else if (event.key == "ArrowRight"){
+ let right_edge = window.screenX + window.outerWidth;
+ if (right_edge < window.screen.availWidth - PADDLE_MOVE){
+ window.moveBy(PADDLE_MOVE, 0)
+ } else {
+ window.moveBy(window.screen.availWidth - right_edge, 0)
+ }
+ }
+ })
+}
+
+
+
+export function init(){
+ let page_type = document.querySelector('main').getAttribute('page');
+ if (page_type === 'pong'){
+ init_controller();
+ } else if (page_type === "paddle"){
+ init_paddle();
+ }
+}
diff --git a/src/_layouts/pong.html b/src/_layouts/pong.html
new file mode 100644
index 0000000..7aaf17d
--- /dev/null
+++ b/src/_layouts/pong.html
@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+
+
+
{{ content }}
+
+
+ {% for p in site.pages %}
+ {% if p.page_name == "target" %}
+
+ -
+ {{ cartridge.title }}
+
+
+ {% endif %}
+ {% endfor %}
+
+
diff --git a/src/pong/blank.md b/src/pong/blank.md
new file mode 100644
index 0000000..3b418f3
--- /dev/null
+++ b/src/pong/blank.md
@@ -0,0 +1,5 @@
+---
+title: target
+page_name: blank_target
+layout: pong
+---
diff --git a/src/pong/blog.md b/src/pong/blog.md
new file mode 100644
index 0000000..a97040a
--- /dev/null
+++ b/src/pong/blog.md
@@ -0,0 +1,7 @@
+---
+title: blog
+page_name: target
+layout: pong
+color: pink
+---
+BLOG
diff --git a/src/pong/index.md b/src/pong/index.md
new file mode 100644
index 0000000..fe2213d
--- /dev/null
+++ b/src/pong/index.md
@@ -0,0 +1,6 @@
+---
+layout: pong
+page_name: pong
+
+---
+
diff --git a/src/pong/paddle.md b/src/pong/paddle.md
new file mode 100644
index 0000000..2020959
--- /dev/null
+++ b/src/pong/paddle.md
@@ -0,0 +1,5 @@
+---
+layout: pong
+page_name: paddle
+title: paddle
+---