https://leaves.chiba.dev/users/16 Shotaro Nakamura - Leaves https://leaves.chiba.dev/favicon.ico https://leaves.chiba.dev/posts/137 Mon, 31 Jul 2023 07:40:58 GMT 137 ## Freshで、Tailwind v3を使う方法 デフォルトだと、Freshは、Tailwind v2を使っている。これは、Twind v0を使っているからだ。 Twind v1にアップデートすることで、Tailwind v3を使うことができる。 ## Steps まず、`./main.ts`を以下のように書き換える。 ```ts import twindPlugin from "$fresh/plugins/twind.ts"; // Old import twindPlugin from "$fresh/plugins/twindv1.ts"; // New ``` 次に、`./twind.config.ts`を以下のように書き換える。 ```ts import { Options } from "$fresh/plugins/twind.ts"; // Old import { Options } from "$fresh/plugins/twindv1.ts"; // New import { defineConfig, Preset } from "https://esm.sh/@twind/core@1.1.3"; // New import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.4"; // New, 現時点で1.1.4が最新 export default { ...defineConfig({ presets: [presetTailwind() as Preset], }), selfURL: import.meta.url, } as Options; ``` これでOK! https://leaves.chiba.dev/posts/136 Mon, 31 Jul 2023 07:26:34 GMT 136 ## 開発中自作ゲームエンジン「KaguraJS」 小6から中1の初めのときくらいに作ってたやつをTypeScript/ESMで再実装中 https://nakasyou.github.io/KaguraJS/ ```ts import { Kagura, Sprite, Scene, Asset, type SceneConstructorOptions } from "kagurajs" class MyScene extends Scene{ gobo: Sprite speed?: number constructor (sceneConstructorOptions: SceneConstructorOptions) { super(sceneConstructorOptions) this.gobo = {} as Sprite } async init(){ this.gobo = await new Sprite().init({ asset: await new Asset().fromURL("./gobo.svg") }) this.gobo.x = 100 this.addChild(this.gobo) } async frame(){ this.gobo.x ++ } } const kagura = new Kagura({ element: document.getElementById("game") as HTMLCanvasElement, startScene: MyScene, }) await kagura.start() ``` https://leaves.chiba.dev/posts/135 Mon, 31 Jul 2023 05:57:34 GMT 135 # Hello なんか面白そう