-
Notifications
You must be signed in to change notification settings - Fork 522
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9a3000b
commit 47372cb
Showing
10 changed files
with
208 additions
and
78 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <script src="../../helpers/header.js" type="module"></script> | ||
| <script src="./script.ts" type="module"></script> | ||
| </head> | ||
| <body> | ||
| <div class="container text-center"> | ||
| <div class="wrapper"> | ||
| <div class="timeline"> | ||
| <ul class="timeline_list"></ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
|
|
||
| <template id="timeline-template"> | ||
| <li> | ||
| <div class="timeline_content"> | ||
| <h3 class="date"></h3> | ||
| <h1 class="title"></h1> | ||
| <p class="content"></p> | ||
| </div> | ||
| </li> | ||
| </template> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import DATA from './data.js'; | ||
|
|
||
| const timelineTemplate = document.getElementById('timeline-template')! as HTMLTemplateElement; | ||
| const timelineListEl = document.querySelector('.timeline_list')!; | ||
|
|
||
| DATA.forEach((item) => { | ||
| const listItem = timelineTemplate.content.cloneNode(true) as HTMLElement; | ||
| listItem.querySelector('.date')!.textContent = item.date; | ||
| listItem.querySelector('.title')!.textContent = item.title; | ||
| listItem.querySelector('.content')!.textContent = item.content; | ||
| timelineListEl.appendChild(listItem); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React, { useCallback, useEffect, useRef, useState } from 'react'; | ||
| import classes from './styles.module.scss'; | ||
| import { Leva, useControls } from 'leva'; | ||
|
|
||
| function App() { | ||
| const [selections, setSelections] = useState<number[][]>([]); | ||
| const { gridSize } = useControls({ gridSize: { value: 3, min: 2, max: 4, step: 1 } }); | ||
| const { delay } = useControls({ delay: { value: 300, min: 100, max: 700, step: 100 } }); | ||
| const cellCount = gridSize * gridSize; | ||
|
|
||
| const isUndoing = useRef(false); | ||
|
|
||
| function onCellClick(e: React.MouseEvent<HTMLButtonElement>) { | ||
| const target = e.target as HTMLButtonElement; | ||
| const row = Number(target.dataset.row); | ||
| const col = Number(target.dataset.col); | ||
| setSelections(selections.concat([[row, col]])); | ||
| } | ||
|
|
||
| const undoSelections = useCallback( | ||
| async function () { | ||
| isUndoing.current = true; | ||
| for (let i = selections.length - 1; i >= 0; i--) { | ||
| await new Promise((resolve) => setTimeout(resolve, delay)); | ||
| setSelections(selections.slice(0, i)); | ||
| } | ||
| isUndoing.current = false; | ||
| }, | ||
| [selections, delay] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (selections.length === cellCount) { | ||
| undoSelections(); | ||
| } | ||
| }, [undoSelections, selections.length, cellCount]); | ||
|
|
||
| useEffect(() => { | ||
| setSelections([]); | ||
| }, [gridSize]); | ||
|
|
||
| return ( | ||
| <div className={classes.wrapper}> | ||
| <Leva | ||
| collapsed | ||
| hideCopyButton={true} | ||
| titleBar={{ position: { x: 0, y: 40 }, filter: false, title: 'Config' }} | ||
| theme={{ | ||
| colors: { | ||
| highlight1: 'white', | ||
| highlight2: 'white', | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| <p> | ||
| Click on cells to select them. Once all cells are selected, they will be unselected one by | ||
| one in the reverse order they were selected. | ||
| </p> | ||
|
|
||
| <div className={classes.grid} style={{ '--grid-size': gridSize } as React.CSSProperties}> | ||
| {Array.from({ length: gridSize }, (_, row) => | ||
| Array.from({ length: gridSize }, (_, col) => { | ||
| const isSelected = selections.some((s) => s[0] === row && s[1] === col); | ||
| return ( | ||
| <button | ||
| key={`${row}-${col}`} | ||
| type="button" | ||
| className={isSelected ? classes.selected : ''} | ||
| data-row={row} | ||
| data-col={col} | ||
| onClick={onCellClick} | ||
| disabled={isSelected || isUndoing.current} | ||
| /> | ||
| ); | ||
| }) | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| :root { | ||
| --size: min(90vw, 100vh - 10rem); | ||
| --grid-size: 3; | ||
| } | ||
|
|
||
| .wrapper { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .grid { | ||
| display: inline-grid; | ||
| grid-template-columns: repeat(var(--grid-size), 1fr); | ||
| width: var(--size); | ||
| gap: calc(var(--size) / 20); | ||
|
|
||
| button { | ||
| border: 1px solid #000; | ||
| aspect-ratio: 1; | ||
| } | ||
| } | ||
|
|
||
| .selected { | ||
| background-color: green; | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.