remove experiments from main
This commit is contained in:
parent
f2d5201bdf
commit
377d49129c
GPG key ID:
6DCB96EF1E4D232D
22 changed files with 0 additions and 779 deletions
|
|
@ -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();
|
|
||||||
// }
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
@import '../src/_scss/index';
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
33
src/Gemfile
33
src/Gemfile
|
|
@ -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]
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
---
|
|
||||||
layout: default
|
|
||||||
---
|
|
||||||
<div class="cartridge">
|
|
||||||
<div class="clip">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="label">
|
|
||||||
{{ page.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
layout: cartridge
|
|
||||||
title: blog
|
|
||||||
page_name: cartridge
|
|
||||||
---
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
---
|
|
||||||
layout: console
|
|
||||||
page_name: console
|
|
||||||
---
|
|
||||||
BIN
src/img/ball.png
BIN
src/img/ball.png
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
|
|
@ -1,8 +0,0 @@
|
||||||
---
|
|
||||||
title: about
|
|
||||||
page_name: target
|
|
||||||
layout: pong
|
|
||||||
color: blue
|
|
||||||
---
|
|
||||||
|
|
||||||
ABOUT
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
---
|
|
||||||
layout: pong
|
|
||||||
title: ball
|
|
||||||
page_name: ball
|
|
||||||
---
|
|
||||||
|
|
||||||
<img class="pong-ball" src="/img/ball.png"/>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
title: target
|
|
||||||
page_name: blank_target
|
|
||||||
layout: pong
|
|
||||||
---
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
---
|
|
||||||
title: blog
|
|
||||||
page_name: target
|
|
||||||
layout: pong
|
|
||||||
color: pink
|
|
||||||
---
|
|
||||||
BLOG
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
---
|
|
||||||
layout: pong
|
|
||||||
page_name: pong
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
---
|
|
||||||
layout: pong
|
|
||||||
page_name: paddle
|
|
||||||
title: paddle
|
|
||||||
---
|
|
||||||
Loading…
Reference in a new issue