web/webtools
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: web:7f6dcac1540e7628ec7aa5102cab88aa59d4d723
Branches Tags
web:main
web:feature/mahjong-scorecard
..
compare: web:70a782d0e4f8475bad6d65feba60ac6c748f290f
Branches Tags
web:main
web:feature/mahjong-scorecard

No commits in common. "7f6dcac1540e7628ec7aa5102cab88aa59d4d723" and "70a782d0e4f8475bad6d65feba60ac6c748f290f" have entirely different histories.
7f6dcac154 ... 70a782d0e4

11 changed files with 16 additions and 291 deletions
Show stats Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,3 +1 @@
target/ target/
.vscode/
.idea/

37
site/hex-color/index.html
View file

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hex Color Converter - Tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body class="container">
<header>
<hgroup>
<h1>Hex Color Converter</h1>
<p>Convert hex color values to normalized RGB components</p>
</hgroup>
</header>
<main>
<button id="addHexBtn">Add Hex</button>
<table id="colorTable" class="hidden">
<thead>
<tr>
<th>Preview</th>
<th>Hex</th>
<th>Normalized (R, G, B, A)</th>
<th>Action</th>
</tr>
</thead>
<tbody id="colorTableBody">
</tbody>
</table>
<button id="showHiddenBtn" class="hidden secondary">Show Hidden Rows</button>
</main>
</body>
</html>

116
site/hex-color/script.js
View file

@ -1,116 +0,0 @@
async function addHexFromClipboard() {
try {
const text = await navigator.clipboard.readText();
const hex = text.trim();
// Parse hex color
const color = parseHexColor(hex);
if (!color) {
alert('Invalid hex color in clipboard. Expected format: #RRGGBB or #RRGGBBAA');
return;
}
// Add row to table
addColorRow(hex, color);
// Show table if hidden
document.getElementById('colorTable').classList.remove('hidden');
} catch (err) {
alert('Failed to read from clipboard: ' + err.message);
}
}
document.getElementById('addHexBtn').addEventListener('click', addHexFromClipboard);
document.getElementById('showHiddenBtn').addEventListener('click', () => {
const rows = document.querySelectorAll('#colorTableBody tr.hidden');
rows.forEach(row => row.classList.remove('hidden'));
updateShowHiddenButton();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'p' || e.key === 'P') {
addHexFromClipboard();
}
});
function parseHexColor(hex) {
// Remove leading hash if present
const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
// Validate hex string (6 or 8 characters)
if (!/^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(cleanHex)) {
return null;
}
// Parse components
const r = parseInt(cleanHex.slice(0, 2), 16) / 255;
const g = parseInt(cleanHex.slice(2, 4), 16) / 255;
const b = parseInt(cleanHex.slice(4, 6), 16) / 255;
const a = cleanHex.length === 8 ? parseInt(cleanHex.slice(6, 8), 16) / 255 : 1.0;
return { r, g, b, a, hex: '#' + cleanHex };
}
function addColorRow(originalHex, color) {
const tbody = document.getElementById('colorTableBody');
const row = tbody.insertRow();
// Preview cell
const previewCell = row.insertCell();
const preview = document.createElement('div');
preview.style.width = '40px';
preview.style.height = '40px';
preview.style.backgroundColor = `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a})`;
preview.style.border = '1px solid #ccc';
preview.style.borderRadius = '4px';
previewCell.appendChild(preview);
// Hex cell
const hexCell = row.insertCell();
hexCell.textContent = color.hex;
// Normalized components cell
const normalizedCell = row.insertCell();
const normalizedText = `${color.r.toFixed(1)}, ${color.g.toFixed(1)}, ${color.b.toFixed(1)}, ${color.a.toFixed(1)}`;
normalizedCell.textContent = normalizedText;
// Action cell with copy and hide buttons
const actionCell = row.insertCell();
const copyBtn = document.createElement('button');
copyBtn.textContent = 'Copy';
copyBtn.className = 'secondary';
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(normalizedText).then(() => {
const originalText = copyBtn.textContent;
copyBtn.textContent = 'Copied!';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 1500);
}).catch(err => {
alert('Failed to copy: ' + err.message);
});
});
actionCell.appendChild(copyBtn);
const hideBtn = document.createElement('button');
hideBtn.textContent = 'Hide';
hideBtn.className = 'secondary';
hideBtn.addEventListener('click', () => {
row.classList.add('hidden');
updateShowHiddenButton();
});
actionCell.appendChild(hideBtn);
}
function updateShowHiddenButton() {
const hiddenRows = document.querySelectorAll('#colorTableBody tr.hidden');
const showHiddenBtn = document.getElementById('showHiddenBtn');
if (hiddenRows.length > 0) {
showHiddenBtn.classList.remove('hidden');
} else {
showHiddenBtn.classList.add('hidden');
}
}

20
site/hex-color/style.css
View file

@ -1,20 +0,0 @@
.hidden {
display: none;
}
#colorTable {
margin-top: 2rem;
}
#colorTable button {
margin: 0;
margin-right: 0.5rem;
}
#colorTable td {
vertical-align: middle;
}
#showHiddenBtn {
margin-top: 1rem;
}

1
site/index.html
View file

@ -30,7 +30,6 @@
<li><a href="/finska/">Finska Scorecard</a></li> <li><a href="/finska/">Finska Scorecard</a></li>
<li><a href="/mental-arithmatic/">Mental Arithmatic Game</a></li> <li><a href="/mental-arithmatic/">Mental Arithmatic Game</a></li>
<li><a href="/neon-snake/">Neon Snake</a>: vibe-coded by Google Gemini</li> <li><a href="/neon-snake/">Neon Snake</a>: vibe-coded by Google Gemini</li>
<li><a href="/hex-color/">Hex Color Converter</a></li>
</ul> </ul>
</main> </main>
</body> </body>

27
site/mental-arithmatic/index.html
View file

@ -2,44 +2,25 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mental Arithmatic - Tools</title> <title>Mental Arithmatic - Tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<script src="./scripts/main.js" type="module"></script> <script src="./scripts/main.js" type="module"></script>
</head> </head>
<body> <body>
<div id="welcome-card" class="container welcome-card" data-controller="welcome" <div id="welcome-card" class="container" data-controller="welcome"
data-action="endGame@window->welcome#gameEnded"> data-action="endGame@window->welcome#gameEnded">
<header> <header>
<hgroup> <hgroup>
<h1>Fear of All Sums</h1> <h1>Mental Arithmatic</h1>
<p>A simple mental arithmetic game</p> <p>A simple mental arithmetic game</p>
</hgroup> </hgroup>
<main> <main>
<button data-action="click->welcome#startGame">Start Game</button>
<article class="game-variant">
<h3>Simple Sums</h3>
<p>A two number sum with each term up to two digits.</p>
<footer>
<button data-action="click->welcome#startGame">Start Game</button>
<div class="high-scores" data-welcome-target="simpleHighScores"></div>
</footer>
</article>
</main> </main>
</header> </header>
</div> </div>
<div id="countdown-card" class="container game-card hidden" data-controller="countdown"
data-action="startCountdown@window->countdown#start">
<header>
<span>2:00</span>
<span>0</span>
</header>
<main>
<div class="countdown-timer" data-countdown-target="countdown">3</div>
<input class="fake" type="number" data-countdown-target="fakeinput" value="0">
</main>
</div>
<div id="game-card" class="container game-card hidden" data-controller="game" <div id="game-card" class="container game-card hidden" data-controller="game"
data-action="startGame@window->game#start"> data-action="startGame@window->game#start">
<header> <header>

35
site/mental-arithmatic/scripts/countdown.js
View file

@ -1,35 +0,0 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
export class CountdownController extends Controller {
static targets = ["countdown", "fakeinput"];
start() {
this.element.classList.remove('hidden');
this._countdown = 3;
this.countdownTarget.innerText = this._countdown;
this._tickInterval = window.setInterval(this._tick.bind(this), 1000);
window.setTimeout(() => {
this.fakeinputTarget.focus();
}, 1);
}
_tick() {
this._countdown -= 1;
if (this._countdown === 0) {
this.countdownTarget.innerText = "GO!";
} else if (this._countdown < 0) {
window.clearInterval(this._tickInterval);
this._startActualGame();
} else {
this.countdownTarget.innerText = this._countdown;
}
}
_startActualGame() {
this.element.classList.add('hidden');
window.dispatchEvent(new CustomEvent("startGame"));
}
}

9
site/mental-arithmatic/scripts/game.js
View file

@ -70,15 +70,16 @@ export class GameController extends Controller {
this.problemTarget.appendChild(div); this.problemTarget.appendChild(div);
} }
this.answerTarget.disabled = false;
this.answerTarget.value = ""; this.answerTarget.value = "";
this.answerTarget.focus();
window.setTimeout(() => {
this.answerTarget.focus();
}, 1);
} }
_checkAnswer() { _checkAnswer() {
let isRight = parseInt(this.answerTarget.value) === this._answer; let isRight = parseInt(this.answerTarget.value) === this._answer;
this.answerTarget.disabled = true;
let delay = 500; let delay = 500;
if (isRight) { if (isRight) {

2
site/mental-arithmatic/scripts/main.js
View file

@ -1,10 +1,8 @@
import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"; import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
import { WelcomeController } from "./welcome.js" import { WelcomeController } from "./welcome.js"
import { CountdownController } from "./countdown.js"
import { GameController } from "./game.js" import { GameController } from "./game.js"
window.Stimulus = Application.start(); window.Stimulus = Application.start();
window.Stimulus.register('welcome', WelcomeController); window.Stimulus.register('welcome', WelcomeController);
window.Stimulus.register('countdown', CountdownController);
window.Stimulus.register('game', GameController); window.Stimulus.register('game', GameController);

23
site/mental-arithmatic/scripts/welcome.js
View file

@ -1,35 +1,14 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"; import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
export class WelcomeController extends Controller { export class WelcomeController extends Controller {
static targets = ["simpleHighScores"];
connect() {
this._buildHighScores();
}
startGame(ev) { startGame(ev) {
ev.preventDefault(); ev.preventDefault();
this.element.classList.add('hidden'); this.element.classList.add('hidden');
window.dispatchEvent(new CustomEvent("startCountdown")); window.dispatchEvent(new CustomEvent("startGame"));
} }
gameEnded(ev) { gameEnded(ev) {
this.element.classList.remove('hidden'); this.element.classList.remove('hidden');
} }
_buildHighScores() {
let scores = {
last: 12,
high: 10,
streak: 3
};
let newEls = [
`<span>🏆 ${scores.last}</span>`,
`<span>🔥 ${scores.streak}</span>`,
`<span>↩️ ${scores.high}</span>`
];
this.simpleHighScoresTarget.innerHTML = newEls.join('');
}
} }

35
site/mental-arithmatic/style.css
View file

@ -3,35 +3,14 @@
} }
body { body {
min-height: 100dvh;
--pico-form-element-disabled-opacity: 1.0; --pico-form-element-disabled-opacity: 1.0;
} }
.game-card { .game-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 50vh; min-height: 80dvh;
}
.welcome-card .game-variant footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.welcome-card .game-variant .high-scores {
display: flex;
gap: 10px;
}
.countdown-timer {
font-size: 3em;
text-align: center;
width: 100%;
}
input.fake {
position: fixed;
top: -600px;
} }
.game-card header, .game-card header,
@ -50,8 +29,6 @@ input.fake {
display: flex; display: flex;
align-items: center; align-items: center;
padding-block-start: 40px;
} }
.game-card .question { .game-card .question {
@ -69,13 +46,13 @@ input.fake {
} }
.game-card .answer.right { .game-card .answer.right {
border-color: #4EB31B; border-color: green;
color: #4EB31B; color: green;
} }
.game-card .answer.wrong { .game-card .answer.wrong {
border-color: #EE402E; border-color: red;
color: #EE402E; color: red;
} }
.game-card .answer .indicator { .game-card .answer .indicator {