its actually brekaout not pong lol

_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();
 // }

_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();
+  }
+}

src/_layouts/pong.html

@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<div id="pong" style="background-color: {{ page.color }}">
+
+    <div class="content">{{ content }}</div>
+
+    <ul class="page-list" id="pages">
+        {% for p in site.pages %}
+        {% if p.page_name == "target" %}
+
+        <li
+                class="page-metadata"
+                url="{{ p.url }}"
+                title="{{ p.title }}"
+        >
+            <a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
+        </li>
+
+        {% endif %}
+        {% endfor %}
+    </ul>
+</div>
+
+

src/_scss/index.scss

@@ -7,3 +7,4 @@
 
 @import 'pages/home';
 @import 'pages/console';
+@import 'pages/pong';

src/_scss/pages/pong.scss

@@ -0,0 +1,28 @@
+#pong {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .content {
+    text-align: center;
+    font: {
+      family: monospace;
+      size: 3em;
+    }
+
+  }
+
+  .page-list {
+    display: none;
+  }
+}
+
+.pong-ball {
+  width: 50px;
+  height: 50px;
+  left: 0;
+  top: 0;
+  position: absolute;
+}

src/pong/about.md

@@ -0,0 +1,8 @@
+---
+title: about
+page_name: target
+layout: pong
+color: blue
+---
+
+ABOUT

src/pong/ball.md

@@ -0,0 +1,7 @@
+---
+layout: pong
+title: ball
+page_name: ball
+---
+
+<img class="pong-ball" src="/img/ball.png"/>

src/pong/blank.md

@@ -0,0 +1,5 @@
+---
+title: target
+page_name: blank_target
+layout: pong
+---

src/pong/blog.md

@@ -0,0 +1,7 @@
+---
+title: blog
+page_name: target
+layout: pong
+color: pink
+---
+BLOG

src/pong/index.md

@@ -0,0 +1,6 @@
+---
+layout: pong
+page_name: pong
+
+---
+

src/pong/paddle.md

@@ -0,0 +1,5 @@
+---
+layout: pong
+page_name: paddle
+title: paddle
+---