Initial commit of Astro project: drizzle database
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
import { drizzle } from "drizzle-orm/better-sqlite3";
|
||||
import Database from "better-sqlite3";
|
||||
|
||||
const sql = new Database("out/website.sqlite");
|
||||
export const db = drizzle(sql);
|
||||
@@ -0,0 +1,4 @@
|
||||
import { migrate } from "drizzle-orm/better-sqlite3/migrator";
|
||||
import { db } from "./index";
|
||||
|
||||
migrate(db, { migrationsFolder: "out/drizzle" });
|
||||
@@ -0,0 +1,43 @@
|
||||
import { sql } from "drizzle-orm";
|
||||
import { text, sqliteTable } from "drizzle-orm/sqlite-core";
|
||||
|
||||
export const users = sqliteTable("users", {
|
||||
// id è l'id unico di questo utente, non è modificabile una volta creato l'utente.
|
||||
id: text("id")
|
||||
.primaryKey()
|
||||
.default(sql`(lower(hex(randomblob(16))))`),
|
||||
|
||||
// Username è il nome leggibile di questo utente utilizzato anche per le
|
||||
// route per singolo utente, deve essere unico nel sito.
|
||||
//
|
||||
// NOTE: Quando un utente accede per la prima volta di default gli viene
|
||||
// chiesto se usare quello dell'account che sta usando o se cambiarlo
|
||||
// (in teoria non dovrebbe essere un problema poterlo modificare
|
||||
// successivamente).
|
||||
username: text("username").unique().notNull(),
|
||||
|
||||
// FullName da mostrare in giro per il sito
|
||||
fullName: text("fullname"),
|
||||
|
||||
// Email per eventuale contatto
|
||||
email: text("email"),
|
||||
});
|
||||
|
||||
export type User = typeof users.$inferSelect; // return type when queried
|
||||
export type InsertUser = typeof users.$inferInsert; // insert type
|
||||
|
||||
export const accounts = sqliteTable("accounts", {
|
||||
// id è l'id unico di questo account, non è modificabile una volta creato l'account.
|
||||
id: text("id").primaryKey(),
|
||||
|
||||
userId: text("userId")
|
||||
.notNull()
|
||||
.references(() => users.id),
|
||||
|
||||
provider: text("provider").$type<"poisson" | "ateneo">().notNull(),
|
||||
|
||||
token: text("token").notNull(),
|
||||
});
|
||||
|
||||
export type Account = typeof accounts.$inferSelect; // return type when queried
|
||||
export type InsertAccount = typeof accounts.$inferInsert; // insert type
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
import PageLayout from './PageLayout.astro'
|
||||
|
||||
const { frontmatter } = Astro.props
|
||||
---
|
||||
|
||||
<PageLayout {...frontmatter} />
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
import '@fontsource/open-sans/latin.css'
|
||||
import '@fontsource/source-sans-pro/latin.css'
|
||||
import '@fontsource/source-code-pro/latin.css'
|
||||
|
||||
import '../styles/main.scss'
|
||||
|
||||
const { title, description, thumbnail, pageName } = Astro.props
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<meta property="og:title" content={title ?? 'PHC'} />
|
||||
<meta property="og:description" content={description ?? 'Sito web del PHC'} />
|
||||
{thumbnail && <meta property="og:image" content={thumbnail} />}
|
||||
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
|
||||
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class:list={['page-' + (pageName ?? 'unknown')]}>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
import BaseLayout from './BaseLayout.astro'
|
||||
---
|
||||
|
||||
<BaseLayout {...Astro.props}>
|
||||
<header>
|
||||
<div class="logo">
|
||||
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
|
||||
</div>
|
||||
<div class="links">
|
||||
<a role="button" href="#">Utenti</a>
|
||||
<a role="button" href="#">Notizie</a>
|
||||
<a role="button" href="#">Progetti</a>
|
||||
<a role="button" href="#">About</a>
|
||||
<a class="primary" role="button" href="#">Accedi</a>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<footer>© PHC 2023</footer>
|
||||
</BaseLayout>
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
import PageLayout from '../layouts/PageLayout.astro'
|
||||
---
|
||||
|
||||
<PageLayout pageName="homepage">
|
||||
<section class="principal">
|
||||
<div class="circuit-layer">
|
||||
<canvas id="circuits-art"></canvas>
|
||||
<script src="../scripts/circuits-art.ts"></script>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
|
||||
</div>
|
||||
<div class="whats-phc">
|
||||
<div class="title">Cos'è il PHC?</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore reprehenderit atque, voluptate
|
||||
dolorum excepturi libero pariatur sequi?
|
||||
</p>
|
||||
<p>
|
||||
Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem
|
||||
excepturi optio? Maiores, hic?
|
||||
</p>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Tempora earum nemo eveniet
|
||||
aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis,
|
||||
adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="news">
|
||||
<div class="zig-zag">
|
||||
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||
<defs>
|
||||
<pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
||||
<path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#zig-zag-1)" x="0" y="0" width="1000" height="1"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="title">Ultime Notizie</div>
|
||||
|
||||
<div class="news-list">
|
||||
<div class="news">
|
||||
<div class="title">Lorem ipsum dolor sit.</div>
|
||||
<div class="abstract">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||
voluptatem pariatur eius!
|
||||
</p>
|
||||
<p>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news">
|
||||
<div class="title">Tempore provident impedit libero?</div>
|
||||
<div class="abstract">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||
voluptatem pariatur eius!
|
||||
</p>
|
||||
<p>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
<p>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
<p>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news">
|
||||
<div class="title">Alias molestias consectetur quam</div>
|
||||
<div class="abstract">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||
voluptatem pariatur eius!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news">
|
||||
<div class="title">Inventore dignissimos sapiente nulla</div>
|
||||
<div class="abstract">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos,
|
||||
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi
|
||||
voluptatem pariatur eius!
|
||||
</p>
|
||||
<p>
|
||||
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta
|
||||
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="primary" href="#" role="button">Vai all'Archivio</a>
|
||||
</section>
|
||||
<section class="projects">
|
||||
<div class="zig-zag">
|
||||
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||
<defs>
|
||||
<pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
||||
<path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#zig-zag-2)" x="0" y="0" width="1000" height="1"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="title">Progetti</div>
|
||||
|
||||
<div class="project-list">
|
||||
<a href="#">
|
||||
<div class="project">
|
||||
<div class="image">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="title">Gitea</div>
|
||||
<div class="description">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
|
||||
accusantium labore explicabo quaerat incidunt.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="project">
|
||||
<div class="image">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="title">Zulip</div>
|
||||
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="project">
|
||||
<div class="image">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="title">Orario</div>
|
||||
<div class="description">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
|
||||
accusantium labore explicabo quaerat incidunt.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="project">
|
||||
<div class="image">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="title">Problemi</div>
|
||||
<div class="description">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#">
|
||||
<div class="project">
|
||||
<div class="image">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
<div class="title">Cluster "Steffè"</div>
|
||||
<div class="description">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa
|
||||
accusantium labore explicabo quaerat incidunt.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="wanna-be-macchinista">
|
||||
<div class="zig-zag">
|
||||
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
|
||||
<defs>
|
||||
<pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
||||
<path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="title">Vuoi diventare macchinista?</div>
|
||||
</section>
|
||||
</PageLayout>
|
||||
@@ -0,0 +1,316 @@
|
||||
const $canvas: HTMLCanvasElement = document.querySelector('#circuits-art')!
|
||||
|
||||
interface Grid<T> extends Iterable<[number, number, T]> {
|
||||
has(point: [number, number]): boolean
|
||||
get(point: [number, number]): T
|
||||
set(point: [number, number], value: T): void
|
||||
}
|
||||
|
||||
function createGrid<T>(): Grid<T> {
|
||||
const cells: Record<string, T> = {}
|
||||
|
||||
return {
|
||||
has([x, y]) {
|
||||
return cells[`${x},${y}`] !== undefined
|
||||
},
|
||||
get([x, y]) {
|
||||
return cells[`${x},${y}`]
|
||||
},
|
||||
set([x, y], value) {
|
||||
cells[`${x},${y}`] = value
|
||||
},
|
||||
*[Symbol.iterator]() {
|
||||
for (const [coord, value] of Object.entries(cells)) {
|
||||
const [x, y] = coord.split(',').map(s => parseInt(s))
|
||||
yield [x, y, value]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
type WireCell = 'down' | 'down-left' | 'down-right' | 'dot'
|
||||
|
||||
type WireDirection = 'down' | 'down-left' | 'down-right'
|
||||
|
||||
type WireSteps = { position: Point2; direction: WireCell }[]
|
||||
|
||||
type Point2 = [number, number]
|
||||
|
||||
type State = {
|
||||
grid: Grid<WireCell>
|
||||
queuedWire: {
|
||||
index: number
|
||||
steps: WireSteps
|
||||
} | null
|
||||
badTries: 0
|
||||
}
|
||||
|
||||
type Renderer = {
|
||||
timer: number
|
||||
}
|
||||
|
||||
let renderer: Renderer | null = null
|
||||
|
||||
const RENDERER_FPS = 30
|
||||
|
||||
function setup() {
|
||||
console.log('Setting up circuits art...')
|
||||
|
||||
$canvas.width = $canvas.clientWidth
|
||||
$canvas.height = $canvas.clientHeight
|
||||
|
||||
const g = $canvas.getContext('2d')!
|
||||
const state: State = {
|
||||
grid: createGrid(),
|
||||
queuedWire: null,
|
||||
badTries: 0,
|
||||
}
|
||||
|
||||
const startTime = new Date()
|
||||
|
||||
const handle = setInterval(() => {
|
||||
const time = new Date().getTime() - startTime.getTime()
|
||||
|
||||
update(state, g.canvas.width, g.canvas.height, time)
|
||||
render(g, state, time)
|
||||
}, 1000 / RENDERER_FPS)
|
||||
|
||||
renderer = { timer: handle }
|
||||
}
|
||||
|
||||
function update(state: State, width: number, height: number, time: number) {
|
||||
const w = (width / CELL_SIZE) | 0
|
||||
// const h = (height / CELL_SIZE) | 0
|
||||
|
||||
if (state.badTries > 1000) {
|
||||
console.log('finished')
|
||||
clearInterval(renderer!.timer)
|
||||
}
|
||||
|
||||
if (!state.queuedWire) {
|
||||
const sx = randomInt(0, w)
|
||||
if (!state.grid.has([sx, 0])) {
|
||||
const steps = generateWire(state.grid, [sx, 0])
|
||||
if (steps.length < 7) {
|
||||
state.badTries++
|
||||
return
|
||||
}
|
||||
|
||||
state.queuedWire = {
|
||||
index: 0,
|
||||
steps,
|
||||
}
|
||||
|
||||
state.grid.set(state.queuedWire.steps[0].position, 'dot')
|
||||
return
|
||||
}
|
||||
|
||||
state.badTries++
|
||||
} else {
|
||||
const wire = state.queuedWire
|
||||
|
||||
const step = wire.steps[wire.index]
|
||||
state.grid.set(step.position, step.direction)
|
||||
|
||||
if (wire.index + 1 < wire.steps.length) {
|
||||
state.grid.set(wire.steps[wire.index + 1].position, 'dot')
|
||||
}
|
||||
|
||||
wire.index++
|
||||
|
||||
if (wire.index >= wire.steps.length) {
|
||||
state.queuedWire = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const CELL_SIZE = 27
|
||||
|
||||
const BACKGROUND_COLOR = '#ecffe3'
|
||||
const WIRE_COLOR = '#a6ce94'
|
||||
|
||||
const RENDER_CELL: Record<WireCell, (g: CanvasRenderingContext2D) => void> = {
|
||||
'down': g => {
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.lineTo(0, 1)
|
||||
g.stroke()
|
||||
},
|
||||
'down-left': g => {
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.lineTo(-1, 1)
|
||||
g.stroke()
|
||||
},
|
||||
'down-right': g => {
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.moveTo(0, 0)
|
||||
g.lineTo(+1, 1)
|
||||
g.stroke()
|
||||
},
|
||||
'dot': g => {
|
||||
g.fillStyle = BACKGROUND_COLOR
|
||||
g.beginPath()
|
||||
g.ellipse(0, 0, 0.15, 0.15, 0, 0, 2 * Math.PI)
|
||||
g.fill()
|
||||
|
||||
g.strokeStyle = WIRE_COLOR
|
||||
g.beginPath()
|
||||
g.ellipse(0, 0, 0.15, 0.15, 0, 0, 2 * Math.PI)
|
||||
g.stroke()
|
||||
},
|
||||
}
|
||||
|
||||
function render(g: CanvasRenderingContext2D, state: State, time: number) {
|
||||
g.clearRect(0, 0, g.canvas.width, g.canvas.height)
|
||||
g.resetTransform()
|
||||
g.scale(CELL_SIZE, CELL_SIZE)
|
||||
g.lineWidth = 3 / CELL_SIZE
|
||||
|
||||
const w = (g.canvas.width / CELL_SIZE) | 0
|
||||
const h = (g.canvas.height / CELL_SIZE) | 0
|
||||
for (let y = 0; y <= h + 1; y++) {
|
||||
for (let x = 0; x <= w + 1; x++) {
|
||||
if (!state.grid.has([x, y])) continue
|
||||
|
||||
const cell = state.grid.get([x, y])
|
||||
|
||||
g.save()
|
||||
g.translate(x, y)
|
||||
|
||||
// g.fillStyle = '#f008'
|
||||
// g.beginPath()
|
||||
// g.rect(-0.25, -0.25, 0.5, 0.5)
|
||||
// g.fill()
|
||||
|
||||
RENDER_CELL[cell](g)
|
||||
g.restore()
|
||||
}
|
||||
}
|
||||
|
||||
// if (state.queuedWire) {
|
||||
// for (const step of state.queuedWire.steps) {
|
||||
// const [x, y] = step.position
|
||||
|
||||
// g.fillStyle = '#00f8'
|
||||
// g.save()
|
||||
// g.translate(x, y)
|
||||
|
||||
// g.beginPath()
|
||||
// g.rect(-0.25, -0.25, 0.5, 0.5)
|
||||
// g.fill()
|
||||
// g.restore()
|
||||
// }
|
||||
// }
|
||||
|
||||
// const [mx, my] = state.mouse
|
||||
// g.save()
|
||||
// g.fillStyle = '#0008'
|
||||
// g.translate(Math.floor(mx / CELL_SIZE), Math.floor(my / CELL_SIZE))
|
||||
// g.beginPath()
|
||||
// g.rect(0, 0, 1, 1)
|
||||
// g.fill()
|
||||
// g.restore()
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (renderer) {
|
||||
clearInterval(renderer.timer)
|
||||
}
|
||||
setup()
|
||||
})
|
||||
|
||||
function randomInt(from: number, to: number) {
|
||||
return Math.floor(Math.random() * (to - from + 1))
|
||||
}
|
||||
|
||||
function randomChoice<T>(choices: T[]): T {
|
||||
return choices[randomInt(0, choices.length - 1)]
|
||||
}
|
||||
|
||||
function randomWeightedChoice<T>(choices: [T, number][]) {
|
||||
return
|
||||
}
|
||||
|
||||
// 3 + 4 + 5 + 6
|
||||
randomWeightedChoice([
|
||||
['a', 3],
|
||||
['b', 4],
|
||||
['c', 5],
|
||||
['d', 6],
|
||||
])
|
||||
|
||||
const DIR_TO_VEC: Record<WireDirection, Point2> = {
|
||||
['down']: [0, 1],
|
||||
['down-left']: [-1, 1],
|
||||
['down-right']: [+1, 1],
|
||||
}
|
||||
|
||||
type ShortCircuitBoolean = boolean | (() => boolean)
|
||||
|
||||
const callOrBoolean = (v: ShortCircuitBoolean): boolean => (typeof v === 'boolean' ? v : v())
|
||||
const implies = (a: ShortCircuitBoolean, b: ShortCircuitBoolean) => !callOrBoolean(a) || callOrBoolean(b)
|
||||
|
||||
/**
|
||||
* Tells whether a given direction is not blocked by some other cell in a given grid and starting position
|
||||
*/
|
||||
const DIR_AVAILABLE_PREDICATE: Record<WireDirection, (pos: Point2, grid: Grid<WireCell>) => boolean> = {
|
||||
['down']: ([x, y], grid) =>
|
||||
!grid.has([x, y + 1]) &&
|
||||
implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) !== 'down-right') &&
|
||||
implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) !== 'down-left'),
|
||||
['down-left']: ([x, y], grid) => !grid.has([x - 1, y + 1]) && implies(grid.has([x - 1, y]), () => grid.get([x - 1, y]) === 'down-left'),
|
||||
['down-right']: ([x, y], grid) =>
|
||||
!grid.has([x + 1, y + 1]) && implies(grid.has([x + 1, y]), () => grid.get([x + 1, y]) === 'down-right'),
|
||||
}
|
||||
|
||||
function pruneDirections(grid: Grid<WireCell>, position: Point2, directions: WireDirection[]): WireDirection[] {
|
||||
return directions.filter(dir => DIR_AVAILABLE_PREDICATE[dir](position, grid))
|
||||
}
|
||||
|
||||
function generateWire(grid: Grid<WireCell>, startingPoint: Point2): { position: Point2; direction: WireCell }[] {
|
||||
const segmentLength = Math.floor(1 - Math.random() ** 2) * 10 + 30
|
||||
let currentPosition = startingPoint
|
||||
let currentDirection: WireDirection = randomChoice(['down', 'down', 'down', 'down-left', 'down-right'])
|
||||
|
||||
const steps: { position: Point2; direction: WireCell }[] = []
|
||||
|
||||
for (let i = 0; i < segmentLength; i++) {
|
||||
const availableDirections = pruneDirections(grid, currentPosition, ['down', 'down-left', 'down-right'])
|
||||
if (availableDirections.length === 0) {
|
||||
break
|
||||
} else {
|
||||
const dir =
|
||||
availableDirections.includes(currentDirection) && Math.random() < 0.25
|
||||
? currentDirection
|
||||
: randomChoice(availableDirections)
|
||||
|
||||
if ((currentDirection === 'down-left' && dir === 'down-right') || (currentDirection === 'down-right' && dir === 'down-left')) {
|
||||
break
|
||||
}
|
||||
|
||||
const [x, y] = currentPosition
|
||||
const [dx, dy] = DIR_TO_VEC[dir]
|
||||
|
||||
steps.push({
|
||||
position: [x, y],
|
||||
direction: dir,
|
||||
})
|
||||
|
||||
currentPosition = [x + dx, y + dy]
|
||||
currentDirection = dir
|
||||
}
|
||||
}
|
||||
|
||||
const last = steps.at(-1)
|
||||
if (last) {
|
||||
last.direction = 'dot'
|
||||
}
|
||||
|
||||
return steps
|
||||
}
|
||||
@@ -0,0 +1,474 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 18px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-snap-type: y proximity;
|
||||
scroll-padding-top: 4rem;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
|
||||
line-height: 1.5;
|
||||
|
||||
p + p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Controls
|
||||
//
|
||||
|
||||
button,
|
||||
.button,
|
||||
[role='button'] {
|
||||
appearance: none;
|
||||
|
||||
background: #fff;
|
||||
|
||||
border: 3px solid #222;
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 4px 0 0 #222;
|
||||
|
||||
transition: all 64ms linear;
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
}
|
||||
|
||||
padding: 0.25rem 1.5rem;
|
||||
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 600;
|
||||
|
||||
&.primary {
|
||||
background: #1e6733;
|
||||
color: #f4fef7;
|
||||
|
||||
&:hover {
|
||||
background: #2b8b47;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Pages
|
||||
//
|
||||
|
||||
header {
|
||||
z-index: 10;
|
||||
|
||||
height: 6rem;
|
||||
border-bottom: 4px solid #222;
|
||||
background: #fff;
|
||||
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo {
|
||||
padding-left: 0.5rem;
|
||||
|
||||
img {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
padding: 0 1.5rem;
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
min-height: 6rem;
|
||||
border-top: 4px solid #222;
|
||||
background: #444;
|
||||
color: #fdfdfd;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.page-homepage {
|
||||
header .logo {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
|
||||
min-height: calc(100vh - 6rem);
|
||||
|
||||
&:last-of-type {
|
||||
min-height: calc(100vh - 10rem);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
scroll-snap-align: start;
|
||||
|
||||
& > .title {
|
||||
font-weight: 700;
|
||||
font-size: 60px;
|
||||
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.zig-zag {
|
||||
z-index: 5;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
&:first-child {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section.principal {
|
||||
z-index: -2;
|
||||
|
||||
min-height: calc(100vh - 2rem);
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rem;
|
||||
|
||||
padding: 6rem 0;
|
||||
|
||||
background: #ecffe3;
|
||||
// circuit color
|
||||
// background: #a6ce94;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
position: relative;
|
||||
|
||||
.circuit-layer {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding-top: 6rem;
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 640px;
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222)
|
||||
drop-shadow(0 -4px 0 #222);
|
||||
}
|
||||
}
|
||||
|
||||
.whats-phc {
|
||||
background: #e4c5ff;
|
||||
|
||||
border: 4px solid #222;
|
||||
border-radius: 8px;
|
||||
box-shadow: 6px 6px 0 0 #222;
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
max-width: 37rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
gap: 1rem;
|
||||
|
||||
.title {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.news {
|
||||
background: #c2a8eb;
|
||||
|
||||
gap: 3rem;
|
||||
|
||||
padding-bottom: 6rem;
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
|
||||
padding: 0 3rem;
|
||||
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.news {
|
||||
background: #fffbeb;
|
||||
|
||||
border: 3px solid #222;
|
||||
border-radius: 9px;
|
||||
box-shadow: 9px 9px 0 0 #222;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 22rem;
|
||||
max-height: 27rem;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #c67e14;
|
||||
border: 2px solid #222;
|
||||
|
||||
&:hover {
|
||||
background-color: #e69419;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: #c67e14;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline solid 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& > .title {
|
||||
// border-bottom: 2px solid #222;
|
||||
|
||||
border-top-left-radius: 9px;
|
||||
border-top-right-radius: 9px;
|
||||
|
||||
padding: 1rem;
|
||||
background: #f8e8b1;
|
||||
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
& > .abstract {
|
||||
flex-grow: 1;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
@extend .text;
|
||||
}
|
||||
& > .continue {
|
||||
padding: 1rem;
|
||||
|
||||
display: grid;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[role='button'] {
|
||||
padding: 0.5rem 2rem;
|
||||
|
||||
&.primary {
|
||||
// background: #824ed4;
|
||||
// color: #f0e6ff;
|
||||
background: #f8e8b1;
|
||||
color: #000d;
|
||||
|
||||
&:hover {
|
||||
// background: #8e5ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.projects {
|
||||
background: #f5f2cc;
|
||||
|
||||
padding-bottom: 6rem;
|
||||
|
||||
.project-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
|
||||
gap: 3rem;
|
||||
|
||||
padding: 0 6rem;
|
||||
|
||||
align-items: start;
|
||||
|
||||
.project {
|
||||
// background: #fcddff;
|
||||
// background: #ffa89c;
|
||||
background: #a2d4f3;
|
||||
color: #000e;
|
||||
|
||||
border: 3px solid #222;
|
||||
border-radius: 9px;
|
||||
box-shadow: 9px 9px 0 0 #222;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
gap: 0.25rem 1rem;
|
||||
|
||||
.title {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.image {
|
||||
grid-row: span 2;
|
||||
// place-self: center;
|
||||
|
||||
.box {
|
||||
background: #0003;
|
||||
border: 3px solid #0006;
|
||||
border-radius: 6px;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
transition: all 128ms ease-out;
|
||||
|
||||
&:hover {
|
||||
transform: translate(0, -8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.wanna-be-macchinista {
|
||||
background: #888;
|
||||
color: #fdfdfd;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
::-webkit-scrollbar-track:vertical {
|
||||
background-color: #f0f0f0;
|
||||
border-left: 2px solid #222;
|
||||
border-top: 2px solid #222;
|
||||
border-bottom: 2px solid #222;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:horizontal {
|
||||
background-color: #f0f0f0;
|
||||
border-top: 2px solid #222;
|
||||
border-left: 2px solid #222;
|
||||
border-right: 2px solid #222;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #1e6733;
|
||||
border: 2px solid #222;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #2b8b47;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #f0f0f0;
|
||||
// border-left: 2px solid #222;
|
||||
// border-top: 2px solid #222;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
Reference in New Issue
Block a user