diff --git a/_assets/index.js b/_assets/index.js index 898405a..e69de29 100644 --- a/_assets/index.js +++ b/_assets/index.js @@ -1,20 +0,0 @@ -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 -// import webpackLogo from '@/images/webpack-logo.svg' - -// Test import of styles -import './index.scss'; - - -// let main = document.getElementsByTagName(main); -// console.log('name', main[0].getAttribute('name')) -// if (main[0].getAttribute('name') === "home"){ - init_lens(); - console.log('init lens'); - init_cartridge(); - init_pong(); -// } diff --git a/_assets/index.scss b/_assets/index.scss deleted file mode 100644 index 5ab2a50..0000000 --- a/_assets/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import '../src/_scss/index'; diff --git a/_assets/js/cartridge.js b/_assets/js/cartridge.js deleted file mode 100644 index 05d4653..0000000 --- a/_assets/js/cartridge.js +++ /dev/null @@ -1,85 +0,0 @@ -const CART_SIZE = { - x: 300, - y: 200 -} - -function slot_position(){ - let slot = document.querySelector('#slot'); - return slot.getBoundingClientRect() -} - -function list_carts(){ - let carts= document.querySelectorAll('.cartridge-metadata'); - return carts; - -} - - -function showPopups(){ - let carts = list_carts(); - - let cartPopups = carts.forEach((cart) => { - console.log('cart', cart); - let popup = window.open( - cart.getAttribute('url'), - cart.getAttribute('title'), - `popup=true,width=${CART_SIZE.x+10},height=${CART_SIZE.y+10}` - ) - popup.screen - }) -} - - - -// function store_slot_position(){ -// let slot_pos = slot_position(); -// console.log(slot_pos); -// window.setTimeout(poll_position, 1000); -// } - -function store_position(){ - let name = document.querySelector('.cartridge .label').textContent; - let position = { - x: window.screenX, - y: window.screenY, - width: window.outerWidth, - height: window.outerHeight - }; - - localStorage.setItem(name, JSON.stringify(position)); - window.setTimeout(store_position, 100); - console.log('store position', position); -} - -function console_message(msg){ - // console.log('console message', msg); - let cart_position = JSON.parse(msg.newValue); - cart_position['name'] = String(msg.key).trim(); - console.log(cart_position) -} - -function init_console(){ - showPopups(); - // store_slot_position(); - - // window.addEventListener('resize', () => { - // store_slot_position(); - // }) - - window.addEventListener('storage', (event) => {console_message(event)}) -} - -function init_cartridge(){ - console.log('init cartridge') - store_position(); -} - -export function init(){ - window.showPopups = showPopups; - let page_type = document.querySelector('main').getAttribute('page'); - if (page_type === 'console'){ - init_console(); - } else if (page_type === "cartridge"){ - init_cartridge(); - } -} diff --git a/_assets/js/lens.js b/_assets/js/lens.js deleted file mode 100644 index 70dd90e..0000000 --- a/_assets/js/lens.js +++ /dev/null @@ -1,87 +0,0 @@ -// OK so the next thing to do is make it so it's blurry when the screen is too -// big or too small, and thne prompt someone to make their screen bigger or smaller -// to be a lens and then you have to move the window around to be able to see the different -// links on the page - -const FOCUS_SIZE = 400; - -function _init(){ - let root = document.querySelector(':root'); - let lens = document.getElementsByClassName('lens')[0]; - let filter = document.getElementById('filter'); - let hid_hint = false; - - if (!lens){ - console.log('not doing lens') - return - } - - // let FOCUS_SIZE = root.style.getPropertyValue('--lens-size') - - root.style.setProperty( - '--screen-width', - `${window.screen.availWidth}px` - ); - root.style.setProperty( - '--screen-height', - `${window.screen.availHeight}px` - ); - function set_position(){ - lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)` - setTimeout(set_position, 10); - } - - function get_blur(){ - return Math.max( - Math.sqrt( - ( - Math.abs(window.innerHeight-FOCUS_SIZE) + - Math.abs(window.innerWidth-FOCUS_SIZE) - ) / 4)-5, - 0) - } - - function set_blur(){ - let blur_radius = get_blur() - filter.style.setProperty( - '--blur-radius', - `${blur_radius}px` - ) - setTimeout(set_blur, 50); - } - - function show_hint(){ - if (get_blur() > 3) { - let hint = document.getElementById('hint'); - hint.classList.remove('hidden') - - setTimeout(check_hint, 2000); - } - } - - function check_hint(){ - if (get_blur() < 3){ - let hint = document.getElementById('hint'); - hint.classList.add('rehidden'); - hid_hint = true; - - } - if (hid_hint === false){ - setTimeout(check_hint, 100); - } - } - - set_position(); - set_blur(); - setTimeout(show_hint, 2000); - // setTimeout(set_size,100); - // set_size() -} - -export function init(){ - - // document.addEventListener('load', () => { - // _init(); - // }) - _init(); -} diff --git a/_assets/js/pong.js b/_assets/js/pong.js deleted file mode 100644 index 9da2ccb..0000000 --- a/_assets/js/pong.js +++ /dev/null @@ -1,248 +0,0 @@ -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/_assets/template.html b/_assets/template.html deleted file mode 100644 index 71b5460..0000000 --- a/_assets/template.html +++ /dev/null @@ -1,22 +0,0 @@ - - - -{% include head.html %} - -
- -{% if page.navigation %} -{% include navigation.html %} -{% endif %} - -