remove experiments from main

This commit is contained in:
sneakers-the-rat 2024-07-05 23:43:23 -07:00
parent f2d5201bdf
commit 377d49129c
Signed by untrusted user who does not match committer: jonny
GPG key ID: 6DCB96EF1E4D232D
22 changed files with 0 additions and 779 deletions

View file

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

View file

@ -1 +0,0 @@
@import '../src/_scss/index';

View file

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

View file

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

View file

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

View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html lang="en" prefix="foaf: http://xmlns.com/foaf/0.1/">
{% include head.html %}
<body>
{% if page.navigation %}
{% include navigation.html %}
{% endif %}
<main page="{{ page.page_name }}">
<!-- <div class="container"> -->
{{ content }}
<!-- </div> -->
</main>
{% include footer.html %}
</body>
</html>

View file

@ -1,33 +0,0 @@
source "https://rubygems.org"
# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
# bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
gem "jekyll", "~> 4.3.2"
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
end
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", ">= 1", "< 3"
gem "tzinfo-data"
end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
# do not have a Java counterpart.
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

View file

@ -1,11 +0,0 @@
---
layout: default
---
<div class="cartridge">
<div class="clip">
</div>
<div class="label">
{{ page.title }}
</div>
</div>

View file

@ -1,35 +0,0 @@
---
layout: default
---
<div id="console">
<div id="popups">
<button onclick="showPopups();">
SHOW POPUPS
</button>
</div>
<div id="container">
<div id="slot">
</div>
<div id="slot-label">
I AM A SLOT PUT THINGS IN ME
</div>
</div>
{% for cartridge in site.pages %}
{% if cartridge.layout == "cartridge" %}
<ul class="cartridge-list" id="cartridges">
<li
class="cartridge-metadata"
url="{{ cartridge.url }}"
title="{{ cartridge.title }}"
>
<a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
</li>
</ul>
{% endif %}
{% endfor %}
</div>

View file

@ -1,26 +0,0 @@
---
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>

View file

@ -1,60 +0,0 @@
.cartridge-list {
//display: none;
}
#console {
#container {
position: absolute;
bottom: 20px;
right: 20px;
height: 200px;
width: 50%;
border: 2px solid black;
#slot{
border: 3px solid black;
width: 300px;
height: 50px;
}
#slot-label {
font-family: monospace;
top: 3.5em;
position:relative;
}
}
#popups {
position:absolute;
top: 20%;
left: 20%;
}
& * {
position: absolute;
}
}
.cartridge {
position:absolute;
top:0;
left:0;
width: 300px;
height: 200px;
border: 2px solid black;
box-shadow: 5px 5px black;
.label {
position: absolute;
top: 20px;
left: 20px;
font-family: monospace;
}
}

View file

@ -1,76 +0,0 @@
:root {
--screen-width: 100vw;
--screen-height: 100vh;
--blur-radius: 100px;
--lens-size: 400px;
--hint-color: deeppink;
}
.lens {
//--screen-left: 0;
//--screen-top: 0;
position: absolute;
width: var(--screen-width);
height: var(--screen-height);
//top: var(--screen-top);
//left: var(--screen-left);
top: 0;
left: 0;
transition: transform ease 100ms;
}
#filter {
z-index: 999;
width: 100%;
height: 100%;
left:0;
top:0;
position:absolute;
backdrop-filter: blur(var(--blur-radius));
//background-color: #ffffffff;
}
#hint {
width: var(--lens-size);
height: var(--lens-size);
position: absolute;
border: 3px solid var(--hint-color);
top: calc(50% - var(--lens-size)/2);
left: calc(50% - var(--lens-size)/2);
border-radius: calc(var(--lens-size));
transition: opacity 1000ms;
opacity: 100%;
z-index: 10000;
text-align: center;
backdrop-filter: blur(10px);
p {
font-family: Times, "Times New Roman", serif;
background-color: deeppink;
font-weight: bold;
font-style: italic;
width: 50%;
color: white;
margin: auto;
font-size: 2em;
top: 40%;
position: relative;
//left: 50%;
}
&.hidden, &.rehidden {
border-color: #ff000000;
opacity: 0%;
//transition: all 1000ms;
}
&.hidden {
transition: all 0ms;
}
}

View file

@ -1,28 +0,0 @@
#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;
}

View file

@ -1,5 +0,0 @@
---
layout: cartridge
title: blog
page_name: cartridge
---

View file

@ -1,4 +0,0 @@
---
layout: console
page_name: console
---

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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