adenohitu / hisui Goto Github PK

View Code? Open in Web Editor NEW

43.0 43.0 2.0 12.17 MB

競技プログラミングサポートツール Support tool for Competitive programming (AtCoder GUI)

Home Page: https://adenohitu.github.io/Hisui-introduce/

License: GNU Affero General Public License v3.0

CSS 0.18% TypeScript 61.60% HTML 37.45% JavaScript 0.63% C++ 0.13% Python 0.01%

competitive-programming electron react typescript

hisui's People

Contributors

Stargazers

Watchers

Forkers

assqr yama-can

hisui's Issues

Windowのサイズが小さすぎる時、強制変更する

何らかの原因で小さくなってしまった時、最低サイズに変更する
また位置についても同様画面外にある場合強制変更する
この機能を実装する

設定例

{ "window": { "height": 813, "width": 1, "x": 0, "y": 100000, "isMax": false }, "SetContestID": "typical90", "saveDefaultFolder": "/Users/ikuta/Documents/hisui/hisui" }

macにおいてウィンドウを閉じた後再び開いてもViewが出てこない

リクエスト間隔-Axios

Atcoder classのAxios instanceを分ける
・リクエスト間隔を設定できるようにする
・キューを作るのもアリ

ファイル操作のapiについて

ファイル名のところに"../../"などといった物を入れればどこでも操作できてしまう
bffef62

スニペットのprefix

https://discord.com/channels/836870553838551050/882265134481956885/896968473043947590

frameless-BrowserWindowの信号ボタンがズレる

TaskVIewWindowはフレームレスWindowとして設定している
ただ、フレームレスにすると通常のWindowと信号ボタンがずれる問題がある

拡張機能の追加について

ユーザーが自分で機能を作ってアプリ内で使えるようにする機能の追加
作った機能を公開できるマーケットの作成

viewごとにファイルを分離

全て一つになっている
使わないReduxが初期化されてしまうーメモリの無駄遣い
全て分けると、開発時のサーバがめんどくさいことになる

順位表テーブルの作成

順位表情報を並べ替えたり絞り込みしながら見れる便利な順位表を作成する

並べ替え
順位順・問題順
検索
絞り込み
お気に入りの順位表と全体の順位表を同時に見たい
２画面ちっくに表示する

Next.jsに移行

現在の課題

今後アプリのサイズが大きくなっていくにつれてSPAだとロード時間がかかてしまう
Create React Appが細かい設定ができない
ElectronとCreate React Appの相性が良くない
ゼロコンフィグ
Webpack系の設定を任せられる

Next.jsに移行した方が今後のためにも良いと思う

(node:63895) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 LISTENER_CODETEST_STATUS_EVENT listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
原因不明
コードテストを複数回高速に連続で実行するとたまに出る

wsl2によるローカルジャッジ

インスタンスを作れる

syncEditorのタイミング

ファイルの読み込み中のmonacoのEditorModelが変更されてしまうと
syncEditorで別ファイルの結果が送られてしまう時がある

EditorのIPCの仕組みを再検討する
IPCmanagerを使ってできるようにする

BrowserViewの管理方法について

仕様の検討
win.addBrowserView(browserView)
でウィンドウを追加
追加されたものは
win.getBrowserViews()
で取得可能
ただ区別できないので方法を考える

Font error

エラーメッセージ:
Electron Helper (Renderer)[62621:1891496] CoreText note: Client requested name ".NewYork-Regular", it will get Times-Roman rather than the intended font. All system UI font access should be through proper APIs such as CTFontCreateUIFontForLanguage() or +[NSFont systemFontOfSize:].

electron-reloadがWindowsで使えない

electronPathがWindowsとMacで違うのが原医ぽい

問題ごとに提出可能言語を指定できるようになっている

例:https://atcoder.jp/contests/arc117/submit
ソースを見ると問題ごとに提出可能言語を指定できるようになっている模様
提出言語をコンテストごとにスクレイピングする方が良さそう

デフォルトの保存先の設定について

設定ウィンドウや初期設定に関わるシステムが完成していないので、
Alpha版はDocumentで固定する
ファイル名はhisui-alpha

Windowsのメニューについて

windows標準のメニューがださい
使いやすいメニュを作る
vscodeなどではHTMLで作ってる

コンテスト名にスラッシュが入っていてもエラー出ない

コンテスト名にスラッシュが入っていてもエラーが出ず、そのままアプリケーションが動かなくなる

多言語対応

日本語と英語が混合している
とりあえず日本語で作っているがのちに他の言語にも対応できるようにする予定

画面切り替えの仕様についての検討

Submissionの仕様と更新タイミングの検討

contestID/submitにpostリクエストで提出
提出のリクエストが成功するとsubmission/meにリダイレクトされる
サイトではJudgeが完了するまで更新される

SubmissionIDを指定することでそのテーブルColのHTMLを取得可能
ジャッジ中の場合Intervalがレスポンスに指定されている

参考
https://atcoder.jp/contests/abc205/submissions/me/status/json?reload=true&sids[]=24225126
https://atcoder.jp/contests/typical90/submissions/status/json?reload=true&sids[]=24225747&sids[]=24225738

snippetの追加について

vscodeのスニペットの仕組みを調査
スニペットのシステムを構築

スニペットを追加するためのAPiに代入するデータのdocs
https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.completionitemprovider.html
vscodeのIntelliSenseではregisterCompletionItemProviderを使ってスニペット等を追加しているらしい

参考
Cppでスニペットを追加するサンプル
https://stackoverflow.com/questions/48212023/how-to-insert-snippet-in-monaco-editor
MonacoEditorのplaygroundにあるregisterCompletionItemProviderのサンプル
https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

ウィンドウの透過

問題を裏に透過する
制約見ながらコード書いたりできるという利点

言語変更時、IModelを作り直す

URIをモデル作成後に変更することは不可能なので、IModelを作り直すことにする

windowSplit問題[MacOS]

Dockが左側にある時、Windowの一部がかぶさる問題

MosaicWindowの操作

とりあえず一つだけ拡大表示する機能をつける
MosaicWindowが一つだけの時はStateは”ViewId”になる
Windowを選んで追加する機能はのちにつける

空白ができる問題

https://discord.com/channels/836870553838551050/882265134481956885/944623863206117377

TableRowの入れ忘れ

Error: Objects are not valid as a React child (found: object with keys {Id, SourceCode, Input, Output, Error, TimeConsumption, MemoryConsumption, ExitCode, Status, Created, LanguageId, LanguageName}). If you meant to render a collection of children, use an array instead.

タブレットやスマホなどのモバイル版

ipadで使えたりするとさらに幅が広がる

キャッシュのせいでコンテスト開始時、問題一覧を更新できない

AtCoderのセッション管理について

cookiesのセッションデータを保存することでAtCoderのログイン状態を保持するようにしているが
セッション情報がパスワードを変更しても破棄されない可能性がある

更新タイミング

更新を必要とするデータ

コンテスト順位情報
順位表ダッシュボードを開いた時
提出後タイミング　通知するような物を追加してもいいかも
問題情報
コンテスト開始直後、問題一覧を取得

electronの E2E testについて

spectronのアップデート状況を受け、モジュールテストを採用する方がいいという結果

taskviewの仕様について検討

問題点

taskviewが問題を切り替えるたびにリクエストをしてしまう
セッションの共有ができない

テストケースの実行ツールの作り込み

やること

実行ツール

サンプルケースを問題ページから取得
サンプルケースをキャッシュする
取得したサンプルケースを選択して実行できるようなインターフェース
- 一つずつ実行できるボタン
- 全部のテストケースを実行するボタンなど
追加で問題ページ以外のサンプルケースを追加できる機能
TaskViewの問題のCopyの横に実行ボタンをDomで無理やり追加

AtCoderCustomTestを使用した実行

実行待ちができるキューを追加
キュー待ちのものを取得できるAPiを追加

submissions/meのページネーション

submissionが２０件以上になると２ページ目ができる.
これにスクレイピングが対応できていない

これをスクレイピングできるようにする。
ただし典型90のようなコンテストの場合、全てを取得すると毎回大量のリクエストが発生してしまうので、キャッシュするなどの対策が必要

ElectronAppに関する再検討

AtCoderClassAPIについての再検討
色々なコンテストサイトにも対応するため規格化する
IPCの整理
たくさんのIPCを型指定して管理する方法を考える
パッケージャの変更
ElectronBuilderからElectronForgeに移行する
管理の面からも考えてBuilderから移行するのがいいと思う
JsdomがWebpackでバンドルできない

問題の回答数の監視と通知

現時点で通されてる人数が後ろの問題より前の問題の方が少ないときに教えてほしい
ABC207　最終ACがD285人・E521
みたいな時は通知するような機能が欲しい

windowのスタイルバグ

WindowsでBrowserViewが表示されない問題

2回目の起動時、Viewが表示されない。
Devtoolを起動すると表示される
設定ファイルを消すとまた出てくる
61671d7 で確認

Editorの下の仕切りにフォーカスを当てずらい

f4d7919
ここのContextMenuを被らないようにするためにしたZindexの設定のせいで、Editorの下の仕切りにフォーカスを当てずらい

サンプルケース生成機能について

hisui/src/component/case/logic/samplecreate.ts

Lines 20 to 89 in 356da25

 export async function RunCreateSample( 

 viewState: Layout[], 

 elementStatus: { [i: string]: elementStatus }, 

 seed: number 

 ) { 

 if (viewState.length !== 0) { 

 //高さで並べたした後、横に並べる 

 const sortData = await viewState 

 .slice() 

 .sort(function (a, b) { 

 if (a.y > b.y) return -1; 

 if (a.y < b.y) return 1; 

 if (a.x > b.x) return -1; 

 if (a.x < b.x) return 1; 

 return 0; 

 }) 

 .reverse(); 

 //横・縦の最大値を取得 

 var maxWidthList = await sortData.slice().map((i) => i.x); 

 const maxWidth = Number(max(maxWidthList)) + 1; 

 var maxHeightList = await sortData.slice().map((i) => i.y); 

 const maxHeight = Number(max(maxHeightList)) + 1; 

 console.log(sortData); 

 console.log("x" + maxWidth); 

 console.log("y" + maxHeight); 

 // 二次元配列を作成 

 var resultList = new Array(maxWidth); 

 for (let y = 0; y < maxHeight; y++) { 

 resultList[y] = new Array(maxHeight).fill(""); 

 } 

 console.log(elementStatus); 

 for (let index = 0; index < sortData.length; index++) { 

 const element = sortData[index]; 

 const elementstate: elementStatus = elementStatus[element.i]; 

 const minEval: number = evaluate(`${elementstate.min}`); 

 const maxEvel: number = evaluate(`${elementstate.max}`); 

 // 文字の深さを設定 

 // 文字のUTF-16 コードユニットを取得 

 const stringDeep = element.i.charCodeAt(0); 

 // 位置深さを設定 

 // 横のサイズの最大値＊高さ＋横 

 const elementDeep = element.y * maxHeight + element.x; 

 // 固有のSeedを生成 

 const privateSeed = seed + elementDeep + stringDeep; 

 // ランダムで値を生成 

 const rng = seedrandom(privateSeed); 

 const randomValue = Math.abs(rng.int32()); 

 // modで制約内に丸める 

 const returnData = Math.floor( 

 (randomValue % (maxEvel - minEval + 1)) + minEval 

 ); 

 console.log(returnData); 

 // 生成したものを配列に代入 

 resultList[element.y][element.x] = returnData; 

 } 

 console.log(resultList); 

 // 文字列を作成 

 var str = ""; 

 for (let i = 0; i < maxHeight; i++) { 

 const element = resultList[i].join(" "); 

 str = str + element + "\n"; 

 } 

 console.log(str); 

 return str; 

 } 

 }

RunCreateSampleはサンプルケースを制約設定から実際に制約を文字列として生成する関数
これの計算量削減と新機能作成をしたい

今の仕様
1×1のマスの座標情報からランダムでサンプルを生成

実装したい機能

前提
https://qiita.com/jamjamjam/items/e066b8c7bc85487c0785
ここにあるやつ全部作れるようにしたい

優先して実装

・負の数にも対応
0 < x < 20 の範囲で生成して + (-10)とか

・1×2のマスの時の時
A1 A2 A3...AN
みたいなもの作れるようにしたい
１×２っていうのはh=1,w=2みたいな時(下のサンプルに当てはめて)

・変数を使いまわしできるように
N
A1 A2 A3...AN
とかの時Nをうまいこと使い回す

https://mathjs.org/docs/expressions/parsing.html#evaluate
これのscopeってやつ使ったら上手くできそう
あとこれにと一緒に変数一覧とか出せるようにしたい
0 < x < 20
0 < y < 20
0 < z < 20
0 < q < 20
みたいな感じで出すやつ作る

将来的に

・文字列の生成
競プロで頻出する文字列のパターンを収集
どう生成したらいいか

・テンプレートの作成（これは後々）
よく出るケースをテンプレートとして選択できるように

SampleData

const Data = [
    {
        "w": 1,
        "h": 1,
        "x": 0,
        "y": 0,
        "i": "a",
    },
    {
        "w": 1,
        "h": 1,
        "x": 0,
        "y": 2,
        "i": "b",
    },
]
const elementStatus = {
    "a": {
        "min": "0",
        "leftsign": "<=",
        "rightsign": "<=",
        "max": "10"
    },
    "b": {
        "min": "0",
        "leftsign": "<=",
        "rightsign": "<=",
        "max": "10^8"
    }
}
const seed = 0

Dataの部分については
https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html
を参考にすること

ランダム生成をもっと正確にする

生成の時間
Modを使ったところの正確性 floor

electron-isDevがうまく動かない

コンパイル後もdevServerにアクセスしようとするため
エラーで何も出なくなる

コンパイル・実行用vm作成機能

windows(wsl2) macosでコンパイル・実行ようの仮想マシンを作成できるようにする
#206 wsl2によるローカルジャッジ

ローカルジャッジの仕様について

ローカルジャッジの方法

案

コンパイラーをバンドルする
dockerでジャッジできるコンテナを作成する
オンラインジャッジシステムを別途提供する
全てAtCoderのコードテストに任せる

検討

今のところはDockerを使う方向で計画
ただしDockerの導入のハードルが高いため、コードテストでも実行できるような仕組みも提供する
コードテストを使う場合リクエスト数が多くなるため、ある程度の規制をかける必要があると思う

Dockerでやる場合のアイディア

electronのメインプロセスにジャッジAPIを作りdockerode等を使いDocker内で実行する
問題

Dockerのコンテナの管理が大変
セキュリテイ的にどうなのか
dockerのインストールはユーザーで行う必要がある
インストール作業が入るため、導入のハードルが上がる

AtCoderのモックを作る

リクエストのテストとかを気にせず実行するために、AtCoderのモックを作成したい

	export async function RunCreateSample(
	viewState: Layout[],
	elementStatus: { [i: string]: elementStatus },
	seed: number
	) {
	if (viewState.length !== 0) {
	//高さで並べたした後、横に並べる
	const sortData = await viewState
	.slice()
	.sort(function (a, b) {
	if (a.y > b.y) return -1;
	if (a.y < b.y) return 1;
	if (a.x > b.x) return -1;
	if (a.x < b.x) return 1;
	return 0;
	})
	.reverse();
	//横・縦の最大値を取得
	var maxWidthList = await sortData.slice().map((i) => i.x);
	const maxWidth = Number(max(maxWidthList)) + 1;
	var maxHeightList = await sortData.slice().map((i) => i.y);
	const maxHeight = Number(max(maxHeightList)) + 1;
	console.log(sortData);

	console.log("x" + maxWidth);
	console.log("y" + maxHeight);

	// 二次元配列を作成
	var resultList = new Array(maxWidth);
	for (let y = 0; y < maxHeight; y++) {
	resultList[y] = new Array(maxHeight).fill("");
	}
	console.log(elementStatus);

	for (let index = 0; index < sortData.length; index++) {
	const element = sortData[index];
	const elementstate: elementStatus = elementStatus[element.i];
	const minEval: number = evaluate(`${elementstate.min}`);
	const maxEvel: number = evaluate(`${elementstate.max}`);
	// 文字の深さを設定
	// 文字のUTF-16 コードユニットを取得
	const stringDeep = element.i.charCodeAt(0);
	// 位置深さを設定
	// 横のサイズの最大値＊高さ＋横
	const elementDeep = element.y * maxHeight + element.x;
	// 固有のSeedを生成
	const privateSeed = seed + elementDeep + stringDeep;
	// ランダムで値を生成
	const rng = seedrandom(privateSeed);
	const randomValue = Math.abs(rng.int32());
	// modで制約内に丸める
	const returnData = Math.floor(
	(randomValue % (maxEvel - minEval + 1)) + minEval
	);
	console.log(returnData);
	// 生成したものを配列に代入
	resultList[element.y][element.x] = returnData;
	}
	console.log(resultList);
	// 文字列を作成
	var str = "";
	for (let i = 0; i < maxHeight; i++) {
	const element = resultList[i].join(" ");
	str = str + element + "\n";
	}
	console.log(str);

	return str;
	}
	}