From c27907de0e8359fdabe35953c8d51ee36c5cd6bf Mon Sep 17 00:00:00 2001 From: sneakers-the-rat Date: Mon, 20 Mar 2023 22:20:18 -0700 Subject: [PATCH] its actually brekaout not pong lol --- _assets/index.js | 3 +- _assets/js/pong.js | 248 ++++++++++++++++++++++++++++++++++++++ src/_layouts/pong.html | 26 ++++ src/_scss/index.scss | 1 + src/_scss/pages/pong.scss | 28 +++++ src/img/ball.png | Bin 0 -> 5947 bytes src/pong/about.md | 8 ++ src/pong/ball.md | 7 ++ src/pong/blank.md | 5 + src/pong/blog.md | 7 ++ src/pong/index.md | 6 + src/pong/paddle.md | 5 + 12 files changed, 343 insertions(+), 1 deletion(-) create mode 100644 _assets/js/pong.js create mode 100644 src/_layouts/pong.html create mode 100644 src/_scss/pages/pong.scss create mode 100644 src/img/ball.png create mode 100644 src/pong/about.md create mode 100644 src/pong/ball.md create mode 100644 src/pong/blank.md create mode 100644 src/pong/blog.md create mode 100644 src/pong/index.md create mode 100644 src/pong/paddle.md 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 }}
+ + +
+ + diff --git a/src/_scss/index.scss b/src/_scss/index.scss index e4c6795..9c4cd13 100644 --- a/src/_scss/index.scss +++ b/src/_scss/index.scss @@ -7,3 +7,4 @@ @import 'pages/home'; @import 'pages/console'; +@import 'pages/pong'; diff --git a/src/_scss/pages/pong.scss b/src/_scss/pages/pong.scss new file mode 100644 index 0000000..d38a9f2 --- /dev/null +++ b/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; +} diff --git a/src/img/ball.png b/src/img/ball.png new file mode 100644 index 0000000000000000000000000000000000000000..8b11187b4f5a9d3523e601531528deef39783807 GIT binary patch literal 5947 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 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 +---