Skip to content

Layer display, settings window separation, and i18n support #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shinya merged 4 commits into from
Apr 14, 2026
Merged

Layer display, settings window separation, and i18n support #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
897d79c
Implementation of Layer Display
shinya Apr 13, 2026
39791a1
Fixed issues with layer modes and added i18n support
shinya Apr 14, 2026
b63cfc0
Fix UnitTest errors
shinya Apr 14, 2026
3fd874f
Fix UnitTest errors
shinya Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions public/layer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightning Timer Overlay</title>
<style>
@font-face {
font-family: 'MesloPowerline';
src: url('/fonts/Meslo-LG-S-Regular-for-Powerline.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
width: 100vw;
height: 100vh;
background: transparent !important;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}

:root {
--layer-color: #00ff66;
--layer-font-size: 6rem;
--layer-shadow:
0 0 8px rgba(0, 0, 0, 0.9),
0 0 16px rgba(0, 0, 0, 0.7),
0 2px 4px rgba(0, 0, 0, 1);
}

.time {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'MesloPowerline', 'Menlo', 'Courier New', monospace;
font-size: var(--layer-font-size);
font-weight: bold;
color: var(--layer-color);
text-shadow: var(--layer-shadow);
letter-spacing: 0.05em;
line-height: 1;
}

.time.timeup {
animation: flash 0.6s ease-in-out infinite alternate;
}

@keyframes flash {
from { opacity: 0.6; }
to { opacity: 1.0; }
}
</style>
</head>
<body>
<div id="time" class="time">00:00</div>

<script type="module">
const { emitTo, listen } = window.__TAURI__.event;

const el = document.getElementById('time');

function pad(n) {
return n.toString().padStart(2, '0');
}

function render(minutes, seconds, showTimeUp) {
el.classList.toggle('timeup', !!showTimeUp);
if (showTimeUp) {
el.textContent = 'TIME UP';
} else {
el.textContent = `${pad(minutes)}:${pad(seconds)}`;
}
}

// 非同期 IIFE で listen 登録完了を待ってから layer-ready を送信
(async () => {
try {
await listen('layer-timer-update', (event) => {
const { minutes, seconds, showTimeUp } = event.payload;
render(minutes, seconds, showTimeUp);
});
await emitTo('main', 'layer-ready');
console.log('[layer] listeners registered, layer-ready emitted');
} catch (e) {
console.error('[layer] init failed:', e);
}
})();
</script>
</body>
</html>
67 changes: 67 additions & 0 deletions public/layer_ctrl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layer Controls</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
width: 100vw;
height: 100vh;
background: transparent !important;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bar {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
background: rgba(20, 20, 20, 0.72);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.grip {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
line-height: 1;
}

.grip:active {
cursor: grabbing;
}

.grip .dots {
letter-spacing: 1.5px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="bar">
<div class="grip" data-tauri-drag-region title="Drag to move">
<span class="dots">⋮⋮</span>
</div>
</div>
</body>
</html>
29 changes: 27 additions & 2 deletions public/timeup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,8 @@
<body onclick="console.log('Body clicked!'); closeWindow()">
<div class="timeup-container">
<div class="timeup-text">Time Up!!</div>
<div class="timeup-subtitle">The time has come.</div>
<div class="timeup-instruction">Click or press the Esc key to close</div>
<div id="timeup-subtitle" class="timeup-subtitle">The time has come.</div>
<div id="timeup-instruction" class="timeup-instruction">Click or press the Esc key to close</div>
</div>

<script>
Expand Down Expand Up @@ -134,10 +134,35 @@
}, 100);
}

// i18n: localStorage から言語を取得してテキストを更新
var i18nStrings = {
en: { subtitle: 'The time has come.', instruction: 'Click or press the Esc key to close' },
ja: { subtitle: '時間になりました。', instruction: 'クリックまたは Esc キーで閉じる' }
};
function applyI18n() {
var lang = localStorage.getItem('lightning-timer-language') ||
(navigator.language.startsWith('ja') ? 'ja' : 'en');
var strings = i18nStrings[lang] || i18nStrings['en'];
var subtitle = document.getElementById('timeup-subtitle');
var instruction = document.getElementById('timeup-instruction');
if (subtitle) subtitle.textContent = strings.subtitle;
if (instruction) instruction.textContent = strings.instruction;
}

// ウィンドウが再表示されたときにも i18n を適用
document.addEventListener('visibilitychange', function() {
if (!document.hidden) {
applyI18n();
}
});

// ページ読み込み完了時の処理
document.addEventListener('DOMContentLoaded', function() {
console.log('Time Up window loaded');

// i18n 適用
applyI18n();

// フラグをリセット
isClosing = false;

Expand Down
12 changes: 12 additions & 0 deletions settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightning Timer Settings</title>
</head>
<body>
<div id="settings-root"></div>
<script type="module" src="/src/settings-main.tsx"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion src-tauri/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ path = "src/main.rs"
[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "2.0", features = ["tray-icon", "devtools"] }
tauri = { version = "2.0", features = ["tray-icon", "devtools", "macos-private-api"] }
tauri-plugin-store = "2.0"
dirs = "5.0"

Expand Down
5 changes: 5 additions & 0 deletions src-tauri/capabilities/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
"core:window:allow-set-position",
"core:window:allow-current-monitor",
"core:window:allow-outer-position",
"core:event:default",
"core:event:allow-emit",
"core:event:allow-emit-to",
"core:event:allow-listen",
"core:event:allow-unlisten",
"store:default"
]
}
19 changes: 19 additions & 0 deletions src-tauri/capabilities/layer-capability.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"identifier": "layer-capability",
"description": "Layer overlay window capabilities",
"windows": ["layer", "layer_ctrl"],
"permissions": [
"core:default",
"core:window:allow-close",
"core:window:allow-hide",
"core:window:allow-show",
"core:window:allow-set-position",
"core:window:allow-outer-position",
"core:window:allow-start-dragging",
"core:event:default",
"core:event:allow-emit",
"core:event:allow-emit-to",
"core:event:allow-listen",
"core:event:allow-unlisten"
]
}
18 changes: 18 additions & 0 deletions src-tauri/capabilities/settings-capability.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"identifier": "settings-capability",
"description": "Settings window capabilities",
"windows": ["settings"],
"permissions": [
"core:default",
"core:window:allow-close",
"core:window:allow-hide",
"core:window:allow-show",
"core:window:allow-set-focus",
"core:event:default",
"core:event:allow-emit",
"core:event:allow-emit-to",
"core:event:allow-listen",
"core:event:allow-unlisten",
"store:default"
]
}
2 changes: 1 addition & 1 deletion src-tauri/gen/schemas/capabilities.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"main-capability":{"identifier":"main-capability","description":"Main window capabilities","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-set-always-on-top","core:window:allow-create","core:window:allow-close","core:window:allow-center","core:window:allow-set-size","core:window:allow-set-resizable","core:window:allow-set-decorations","core:window:allow-set-always-on-top","core:window:allow-set-fullscreen","core:window:allow-set-max-size","core:window:allow-set-min-size","core:window:allow-set-focus","core:window:allow-set-position","core:window:allow-current-monitor","core:window:allow-outer-position","store:default"]},"timeup-capability":{"identifier":"timeup-capability","description":"Time Up window capabilities","local":true,"windows":["timeup"],"permissions":["core:default","core:window:allow-close"]}}
{"layer-capability":{"identifier":"layer-capability","description":"Layer overlay window capabilities","local":true,"windows":["layer","layer_ctrl"],"permissions":["core:default","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-position","core:window:allow-outer-position","core:window:allow-start-dragging","core:event:default","core:event:allow-emit","core:event:allow-emit-to","core:event:allow-listen","core:event:allow-unlisten"]},"main-capability":{"identifier":"main-capability","description":"Main window capabilities","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-set-always-on-top","core:window:allow-create","core:window:allow-close","core:window:allow-center","core:window:allow-set-size","core:window:allow-set-resizable","core:window:allow-set-decorations","core:window:allow-set-always-on-top","core:window:allow-set-fullscreen","core:window:allow-set-max-size","core:window:allow-set-min-size","core:window:allow-set-focus","core:window:allow-set-position","core:window:allow-current-monitor","core:window:allow-outer-position","core:event:default","core:event:allow-emit","core:event:allow-emit-to","core:event:allow-listen","core:event:allow-unlisten","store:default"]},"settings-capability":{"identifier":"settings-capability","description":"Settings window capabilities","local":true,"windows":["settings"],"permissions":["core:default","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-focus","core:event:default","core:event:allow-emit","core:event:allow-emit-to","core:event:allow-listen","core:event:allow-unlisten","store:default"]},"timeup-capability":{"identifier":"timeup-capability","description":"Time Up window capabilities","local":true,"windows":["timeup"],"permissions":["core:default","core:window:allow-close"]}}
Loading
Loading