https://github.com/wraith13/evil-timer.js

evil-timer.js is an auxiliary script for debugging and tuning CSS.
https://github.com/wraith13/evil-timer.js
Last synced: about 2 months ago
JSON representation
evil-timer.js is an auxiliary script for debugging and tuning CSS.
Host: GitHub
URL: https://github.com/wraith13/evil-timer.js
Owner: wraith13
License: bsl-1.0
Created: 2022-02-12T07:30:25.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2025-06-21T09:22:48.000Z (about 1 year ago)
Last Synced: 2025-06-21T10:27:25.726Z (about 1 year ago)
Language: TypeScript
Homepage:
Size: 250 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.ja.md
- License: LICENSE_1_0.txt
Awesome Lists containing this project

README

          # evil-timer.js

evil-timer.js は**あなた自身の責任**において利用できる JavaScript の デバッグや CSS 調整の為の補助的なスクリプトです。

- [🇬🇧 English README](./README.md)

## 組み込み方

HTMLの `head` タグ内で次のような記述を行ってください。( JavaScript ファイルをコピーして中身を直接 HTML ファイルに埋め込んでも構いません。 )

```html

```

`Date`, `setTimeout`, `setInterval`, `window.requestAnimationFrame` を使用する前に読み込ませる必要があります。

## 使い方

`?evil-timer={"speed":100}` のような URL 引数で時間をコントールしたり、 Web ブラウザのコンソールから EvilTimer.* のコマンドを呼び出して使います。

`setTimeout`, `setInterval` に対して後から影響を及ぼす事はできないので、時間のスピードをコントロールしたい場合は URL 引数での指定を推奨します。

## URL 引数について

第三者による悪意あるリンクが作成/拡散されるの防ぐ為、 default では URL 引数は無効になっています。

一度、Web ブラウザでアクセスして JavaScript コンソールから次のコマンドを実行することで URL 引数による指定が有効になります。

```js

EvilTimer.debugOn();

```

HTML内で次のように設定しておくと初めから URL 引数が利用できますが、第三者による悪意あるリンクの作成/拡散ができてしまうので、ローカル環境 or クローズド環境でのテスト時以外でこれをやる事は推奨できません。 ( ちなみにこの形で `debug` を `false` に指定しておくと、 `EvilTimer.debugOn()` を実行しても HTML が読み込まれる度にデバッグモードがオフになる為、 URL 引数の利用を禁止できます。 )

```html

const evilTimerConfig =

{

    debug: true,

};

```

## コマンド

以下のコマンドを Web ブラウザの JavaScript コンソールから使用できます。

### EvilTimer.set()

#### 定義

```typescript

module EvilTimer

{

    ...

    export type StyleReplaceModeType = "auto" | "disabled" | "embedded" | "rules";

    ...

    export type EvilTimerConfigType =

    {

        disabled?: boolean;

        debug?: boolean;

        disabledLoadMessage?: boolean;

        date?: "evil" | "vanilla" | boolean | Date | number | string;

        speed?: number;

        pause?: boolean;

        styleReplaceMode?: StyleReplaceModeType;

    };

    export const set = (config: EvilTimerConfigType | boolean) => { ... };

    ...

}

```

#### Web ブラウザの JavaScript コンソールで

```javascript

EvilTimer.set(false); // Disable EvilTimer

EvilTimer.set(true); // Enable EvilTimer

EvilTimer.set({ disabled: true, }); // Same EvilTimer.set(false);

EvilTimer.set({ disabled: false, }); // Same EvilTimer.set(true);

EvilTimer.set({ debug: true, }); // Same EvilTimer.debugOn();

EvilTimer.set({ debug: false, }); // Same EvilTimer.debugOff();

EvilTimer.set({ disabledLoadMessage: true, }); // Actually, this usage doesn't make sense because it is after the message is output.

EvilTimer.set({ date: new Date(2022,1,22,22,22,22), });

EvilTimer.set({ date: "2022-02-22T22:22:22", });

EvilTimer.set({ date: 1645536142000, });

EvilTimer.set({ date: "evil", }); // Same EvilTimer.setDateMode("evil");

EvilTimer.set({ date: "vanilla", }); // Same EvilTimer.setDateMode("vanilla");

EvilTimer.set({ date: true, }); // Same EvilTimer.setDateMode("evil");

EvilTimer.set({ date: false, }); // Same EvilTimer.setDateMode("vanilla");

EvilTimer.set({ speed: 100, });

EvilTimer.set({ pause: true, });

EvilTimer.set({ pause: false, });

EvilTimer.set({ styleReplaceMode: "auto", });

EvilTimer.set({ styleReplaceMode: "disabled", });

EvilTimer.set({ styleReplaceMode: "embedded", });

EvilTimer.set({ styleReplaceMode: "rules", });

EvilTimer.set({ date: "2022-02-22T22:22:22", speed: 100, styleReplaceMode: "auto", });

```

#### HTML で

```html

const evilTimerConfig = false; // Disable EvilTimer

```

```html

const evilTimerConfig =

{

    speed: 100,

};

```

```html

const evilTimerConfig =

{

    disabledLoadMessage: true,

    date: "2022-02-22T22:22:22",

    styleReplaceMode: "auto",

};

```

#### URL で

Web ブラウザの JavaScript コンソールで `EvilTimer.set` の引数と同じデータを URL の `evil-timer` 引数として利用できます。ここでの引数は JSON として有効である必要な事に注意してください。( 🚫 `...?evil-timer={speed:100,}` → ✅ `...?evil-timer={"speed":100}` )

```url

https://example.com/your-page-path?evil-timer=false

```

```url

https://example.com/your-page-path?evil-timer={"speed":100}

```

```url

https://example.com/your-page-path?evil-timer={"disabledLoadMessage":true,"date":"2022-02-22T22:22:22","styleReplaceMode":"auto"}

```

### EvilTimer.setDateMode()

default: "evil"

```javascript

EvilTimer.setDateMode("evil"); // Date is EvilDate

EvilTimer.setDateMode("vanilla"); // Date is vanilla Date

```

Date クラスの実装を切り替えます。 ```EvilTimer.setDateMode("vanilla");``` でシステムオリジナルの Date クラスが使用され、```EvilTimer.setDateMode("evil");``` で evil-timer.js のカスタム Date クラスが使用されます。通常、この設定を切り替える必要はありません。**代替 vanilla オブジェクト** を参照してください。

### EvilTimer.setDate()

```javascript

EvilTimer.setDate(new Date(2022,1,22,22,22,22));

EvilTimer.setDate("2022-02-22T22:22:22");

EvilTimer.setDate(1645536142000);

EvilTimer.setDate(true); // Same EvilTimer.setDateMode("evil");

EvilTimer.setDate(false); // Same EvilTimer.setDateMode("vanilla");

```

`new Date()` で返される現在日時を設定します。 `puase` 状態でなければ `speed` に応じて自動的に時間は経過します。

### EvilTimer.resetDate()

```javascript

EvilTimer.resetDate();

```

`new Date()` で返される現在日時をシステム時刻で設定します。 `puase` 状態でなければ `speed` に応じて自動的に時間は経過します。

### EvilTimer.pause()

```javascript

EvilTimer.pause();

```

`setTimeout` タスク と `setInterval` タスク と `Date` を止めます。 ( JavaScript のコードは動作しますが、時間が停止した状態になります。 )

### EvilTimer.unpause()

```javascript

EvilTimer.unpause();

```

`setTimeout` タスク と `setInterval` タスク と `Date` の停止状態を解除します。 ( `EvilTimer.pause()` による時間停止状態を解除します。停止していた時間分、 `new Date()` の指し示す時刻は遅れたままになります。 )

### EvilTimer.step()

```javascript

EvilTimer.step();

EvilTimer.step(2); // === EvilTimer.step(); EvilTimer.step();

```

`EvilTimer.pause()` によってサスペンドされてる先頭のタスクを１つ実行し、残りのサスペンドされてるタスクの数を返します。

### EvilTimer.stepAll()

```javascript

EvilTimer.stepAll();

```

`EvilTimer.pause()` によってサスペンドされてるタスクを全て実行します。処理中に新たにサスペンドされたタスクは実行しません。

### EvilTimer.stepOut()

```javascript

EvilTimer.stepOut();

```

`EvilTimer.pause()` によってサスペンドされてるタスクを全て実行します。処理中に新たにサスペンドされたタスクも実行します。

### EvilTimer.restore()

```javascript

EvilTimer.restore();

```

停止状態を解除し、`Date` and `speed` をリセットします。このコマンドを使うより、ページをリロードする事を推奨します。

### EvilTimer.setSpeed()

default: 1

```javascript

EvilTimer.setSpeed(2);

```

`setTimeout`、`setInterval`、`Date`、CSS(`animation-duration`, `animation-delay`, `transition-duration`, `transition-delay`)のスピードを２倍にします。

```javascript

EvilTimer.setSpeed(0.5);

```

`setTimeout`、`setInterval`、`Date`、CSS(`animation-duration`, `animation-delay`, `transition-duration`, `transition-delay`)のスピードを半分にします。

```javascript

EvilTimer.setSpeed(0);

```

`EvilTimer.pause()` が呼びされます。

### EvilTimer.setStyleReplaceMode()

この機能は試験的な機能であり、有効に機能する範囲は限定的です。

default: "disabled"

|モード|説明|

|---|---|

|`auto`|linkタグによるスタイル指定が無い場合に `embedded` 扱いになり、そうでない場合は `rules` 扱いになります。|

|`disabled`|CSSのスピードコントロールを行いません。|

|`embedded`|`style` タグで指定されているモノについてのみスピードコントロールを行います。|

|`rules`|`rules` オブジェクトに対してスピードコントロールを行います。|

```javascript

EvilTimer.setStyleReplaceMode("auto");

```

```javascript

EvilTimer.setStyleReplaceMode("disabled");

```

```javascript

EvilTimer.setStyleReplaceMode("embedded");

```

```javascript

EvilTimer.setStyleReplaceMode("rules");

```

### EvilTimer.debugOn()

```javascript

EvilTimer.debugOn();

```

デバッグモードをオンします。 ( URL 引数が有効になります。 )

### EvilTimer.debugOff()

```javascript

EvilTimer.debugOff();

```

デバッグモードをオフします。 ( URL 引数が無効になります。 )

### EvilTimer.isDebug()

```javascript

EvilTimer.isDebug();

```

デバッグモードがオンになっていれば true、そうでなければ false を返します。

### EvilTimer.getStatus()

次のような JSON を返します。

```json

{

    "enabled": true,

    "debug": false,

    "speed": 1000,

    "isPaused": true,

    "susppendedTasksCount": 2,

    "date":

    {

        "vanilla":

        {

            "text": "2023/5/29 23:54:41",

            "tick": 1685372081785

        },

        "evil":

        {

            "text": "2023/5/31 16:06:07",

            "tick": 1685516767640

        }

    }

}

```

## 代替 vanilla オブジェクト

evil-timer.js は `Date`, `setTimeout`, `setInteral` を独自実装のモノに差し替えます。

オリジナルの `Date`, `setTimeout`, `setInteral` の機能を利用したい場合は以下のものを利用してください。

- `EvilTimer.Vanilla.Date`

- `EvilTimer.Vanilla.setTimeout`

- `EvilTimer.Vanilla.setInteral`

## サンプルサイト

- [Clockworks](https://wraith13.github.io/clockworks/) ( 🚧 開発中 )

- [Cyclic Todo](https://wraith13.github.io/cyclic-todo/) ( 🚧 開発中 )

## ビルド方法

必要なソフトウェア: [Node.js](https://nodejs.org/), [TypeScript Compiler](https://www.npmjs.com/package/typescript)

`tsc -P .` あるいは `tsc -P . -w`

### VS Code の場合

You can use automatic build. Run `Tasks: Allow Automatic Tasks in Folder` command from command palette ( Mac: F1 or Shift+Command+P, Windows and Linux: F1 or Shift+Ctrl+P), and restart VS Code.

## ライセンス

[Boost Software License](LICENSE_1_0.txt)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/wraith13/evil-timer.js

Awesome Lists containing this project

README
