Skip to content

Commit 9ee9b9e

Browse files
SunLight419SunLight419
committed
add usage and updates history
1 parent 78655fb commit 9ee9b9e

20 files changed

+279
-18
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
/node_modules
55
/.pnp
66
.pnp.js
7+
# add
8+
.cpp
9+
how_to_push.txt
710

811
# testing
912
/coverage

‎README.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
<<<<<<< HEAD
21
# Getting Started with Create React App
32

43
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
@@ -69,7 +68,5 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
6968
### `npm run build` fails to minify
7069

7170
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
72-
=======
7371
# puyosim-with-chatgpt
7472
A puyopuyo chain simulator with ChatGPT-4 support
75-
>>>>>>> cae72eec70bd661ec2a266b665b88cd34b4f4887

‎emsdk

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit a2ccccba58918706f815d806460d09310fe236d9

‎how_to_push.txt

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,21 @@ git commit -m "content"
33
git push origin main
44
npm run build
55
gh-pages -d build
6+
7+
8+
Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope Process
9+
10+
https://emscripten.org/docs/getting_started/downloads.html
11+
# Fetch the latest version of the emsdk (not needed the first time you clone)
12+
git pull
13+
14+
# Download and install the latest SDK tools.
15+
./emsdk install latest
16+
17+
# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
18+
./emsdk activate latest
19+
20+
# Activate PATH and other environment variables in the current terminal
21+
source ./emsdk_env.sh
22+
23+
On Windows, run emsdk instead of ./emsdk, and emsdk_env.bat instead of source ./emsdk_env.sh.

‎public/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,9 @@
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1818
<base href="%PUBLIC_URL%/">
19-
<title>Puyo Sim with ChatGPT4</title>
19+
<title>MNT Puyopuyo Chain Simulator</title>
2020
</head>
2121
<body>
22-
<noscript>You need to enable JavaScript to run this app.</noscript>
2322
<div id="root"></div>
2423
</body>
2524
</html>

‎public/reverse_field.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/reverse_field.wasm

10.1 KB
Binary file not shown.

‎reverse_array.cpp

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#include <emscripten.h>
2+
#include <algorithm>
3+
#include <vector>
4+
5+
extern "C" {
6+
EMSCRIPTEN_KEEPALIVE
7+
void reverse_array(int* array, int length) {
8+
std::vector<int> vec(array, array + length);
9+
std::reverse(vec.begin(), vec.end());
10+
std::copy(vec.begin(), vec.end(), array);
11+
}
12+
}

‎reverse_field.cpp

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#include <iostream>
2+
#include <vector>
3+
4+
extern "C" {
5+
// WebAssemblyに公開する関数の宣言
6+
void reverse_plain_field(int* plain_field, int length);
7+
}
8+
9+
void reverse_plain_field(int* plain_field, int length) {
10+
std::vector<int> temp_plain_field(plain_field, plain_field + length);
11+
for(int i = 0; i < length; i++) {
12+
plain_field[i] = temp_plain_field[length - 1 - i];
13+
}
14+
}

‎reverse_field.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reverse_field.wasm

10.1 KB
Binary file not shown.

‎src/App.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.App {
2+
max-width: 450px; /* ここで幅を指定します。 */
3+
margin: 0 auto; /* 左右のマージンを自動的に調整して中央揃えにします。 */
4+
padding: 0 20px; /* 必要に応じて、内側の余白を追加してコンテンツが画面端にぴったりくっつかないようにします。 */
5+
}
6+

‎src/App.js

Lines changed: 100 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect } from "react";
22
import "./index.css";
3+
import "./App.css";
34
import Header from './Header';
45
import Usage from './Usage';
6+
import UpdateHistory from './UpdateHistory';
57
import Footer from './Footer';
68

79
const initialPlainField = Array(78).fill("empty");
@@ -25,14 +27,24 @@ const speedMap = {
2527

2628
function App() {
2729

28-
2930
const [plainField, setPlainField] = useState(initialPlainField);
3031
const [selectedColor, setSelectedColor] = useState("red");
3132
const [chainSpeed, setChainSpeed] = useState("moderate");
3233
const [previousPlainField, setPreviousPlainField] = useState(null);
3334
const [fallen, setFallen] = useState(false);
3435
const [chainCount, setChainCount] = useState(0);
3536
const [score, setScore] = useState(0);
37+
const [isMouseDown, setIsMouseDown] = useState(false);
38+
39+
// update history
40+
const [updates, setUpdates] = useState([
41+
'2023-03-24 バージョン 0.0.1 - ベータ版リリース',
42+
'2023-03-26 バージョン 0.0.2 - 使い方、更新履歴を追加',
43+
'2023-03-26 Sample',
44+
'2023-03-26 Sample',
45+
'----',
46+
'2023-??-?? バージョン 1.0.1 - 初期リリース(予定)',
47+
]);
3648

3749

3850

@@ -43,6 +55,30 @@ function App() {
4355
setFallen(false);
4456
};
4557

58+
const handleMouseDown = (index) => {
59+
setIsMouseDown(true);
60+
const newPlainField = [...plainField];
61+
newPlainField[index] = selectedColor;
62+
setPlainField(newPlainField);
63+
setFallen(false);
64+
};
65+
66+
const handleMouseUp = () => {
67+
setIsMouseDown(false);
68+
};
69+
70+
const handleMouseEnter = (index) => {
71+
if (isMouseDown) {
72+
const newPlainField = [...plainField];
73+
newPlainField[index] = selectedColor;
74+
setPlainField(newPlainField);
75+
setFallen(false);
76+
}
77+
};
78+
79+
80+
81+
4682
const handleRightClick = (e, index) => {
4783
e.preventDefault(); // ブラウザのデフォルトの右クリックメニューを無効化
4884
const newPlainField = [...plainField];
@@ -267,7 +303,11 @@ function App() {
267303
key={index}
268304
className="cell"
269305
onClick={() => handleLeftClick(index)}
270-
onContextMenu={(e) => handleRightClick(e, index)} // この行を追加
306+
onContextMenu={(e) => handleRightClick(e, index)} // 右クリック
307+
// 以下、長押し処理
308+
onMouseDown={() => handleMouseDown(index)}
309+
onMouseUp={handleMouseUp}
310+
onMouseEnter={() => handleMouseEnter(index)}
271311
>
272312
{color !== "empty" && (
273313
<div
@@ -295,6 +335,56 @@ function App() {
295335
</div>
296336
);
297337

338+
//wasm
339+
340+
/// PlainFieldの値を0〜6の数字に変換する関数
341+
function convertPlainFieldToNumbers(plainField) {
342+
const conversionTable = {
343+
'empty': 0,
344+
'red': 1,
345+
'blue': 2,
346+
'green': 3,
347+
'yellow': 4,
348+
'purple': 5,
349+
'ojama': 6
350+
};
351+
352+
const numbersArray = new Array(6 * 13).fill(0);
353+
354+
for (let x = 0; x < 6; x++) {
355+
for (let y = 0; y < 13; y++) {
356+
numbersArray[x * 13 + y] = conversionTable[plainField[x + y * 6]];
357+
}
358+
}
359+
360+
return numbersArray;
361+
}
362+
363+
// 数値をPlainFieldの要件に合うように変換する関数
364+
function convertNumbersToPlainField(numbersArray) {
365+
const conversionTable = {
366+
0: 'empty',
367+
1: 'red',
368+
2: 'blue',
369+
3: 'green',
370+
4: 'yellow',
371+
5: 'purple',
372+
6: 'ojama'
373+
};
374+
375+
const innerField = new Array(6 * 13).fill('empty');
376+
377+
for (let x = 0; x < 6; x++) {
378+
for (let y = 0; y < 13; y++) {
379+
innerField[x + y * 6] = conversionTable[numbersArray[x * 13 + y]];
380+
}
381+
}
382+
383+
return innerField;
384+
}
385+
386+
// render cell
387+
298388

299389
const renderRow = (start) => {
300390
const row = [];
@@ -338,23 +428,26 @@ function App() {
338428
))}
339429
</div>
340430
))}
431+
{/* wasm用ボタン */}
432+
{/* <button>WASMボタン</button> */}
341433
{/* 連鎖数と得点を表示 */}
342434
<div className="chain-score">
343435
{chainCount} 連鎖 {score}(実装予定) 点
344436
</div>
345437
<button onClick={handleAutoClick}>Auto</button>
346438
<select value={chainSpeed} onChange={handleSpeedChange}>
347-
<option value="instantaneous">Instantaneous</option>
348-
<option value="fast">Fast</option>
349-
<option value="moderate">Moderate</option>
350-
<option value="slow">Slow</option>
439+
<option value="instantaneous">Instantaneous（爆速）</option>
440+
<option value="fast">Fast（速）</option>
441+
<option value="moderate">Moderate（中）</option>
442+
<option value="slow">Slow（遅）</option>
351443
</select>
352444
<button onClick={handleStepClick}>Step</button>
353445
<button onClick={handleRedoClick}>Redo</button>
354446
<button onClick={handleFieldClearClick}>Field Clear</button>
355447
</div>
356448
</div>
357449
<Usage />
450+
<UpdateHistory updates={updates} />
358451
<Footer />
359452
</div>
360453
);

‎src/Header.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
padding: 0 1rem;
66
background-color: #333;
77
height: 40px;
8-
width: 100%;
98
max-width: 1200px;
109
margin: 0 auto;
1110
/* ヘッダーの高さを変更 */
@@ -17,8 +16,8 @@
1716

1817
.header-title {
1918
color: #fff;
20-
/* font-size: 1.5rem; */
21-
font-size: calc(1.5vw + 12px); /* 12px + 1.5% of viewport width */
19+
font-size: 1.5rem;
20+
/* font-size: calc(1.5vw + 12px); 12px + 1.5% of viewport width */
2221
/* max-font-size: 32px; maximum font size */
2322
font-weight: bold;
2423
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

‎src/UpdateHistory.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.update-history {
2+
font-size: 0.8rem;
3+
margin-top: 10px;
4+
background-color: #f5f5f5;
5+
padding: 20px;
6+
border-radius: 5px;
7+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
8+
}
9+
10+
.update-list {
11+
list-style-type: none;
12+
padding: 0;
13+
margin: 0;
14+
max-height: calc(5 * 1.5em + 5 * 10px);
15+
overflow-y: auto;
16+
display: flex;
17+
flex-direction: column-reverse;
18+
}
19+
20+
.update-item {
21+
border-bottom: 1px solid #ccc;
22+
padding: 5px 0;
23+
font-size: 1.0em;
24+
}

‎src/UpdateHistory.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import './UpdateHistory.css';
3+
4+
const UpdateHistory = ({ updates }) => {
5+
6+
return (
7+
<div className="update-history">
8+
<h3>更新履歴</h3>
9+
<div className="update-list">
10+
{updates.slice().reverse().map((update, index) => (
11+
<div key={index} className="update-item">
12+
{update}
13+
</div>
14+
))}
15+
</div>
16+
</div>
17+
);
18+
};
19+
20+
export default UpdateHistory;

‎src/Usage.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.usage-container {
2+
/* max-width: 450px; */
3+
margin-top: 20px;
4+
/* margin: 0 auto; */
5+
padding: 10px 20px;
6+
font-size: 0.8rem;
7+
background-color: #f5f5f5;
8+
border-radius: 5px;
9+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
10+
}
11+
12+
.usage-container h1,
13+
.usage-container h2 {
14+
margin-bottom: 1rem;
15+
color: #333;
16+
}
17+
18+
.usage-container p {
19+
margin-bottom: 1rem;
20+
color: #555;
21+
}
22+
23+
.usage-container ul {
24+
margin-bottom: 1rem;
25+
padding-left: 1rem;
26+
color: #555;
27+
}
28+
29+
.usage-container li {
30+
margin-bottom: 0.5rem;
31+
}

‎src/Usage.js

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,34 @@
11
import React from 'react';
2+
import './Usage.css';
3+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4+
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
5+
26

37
const Usage = () => {
48
return (
5-
<div>
6-
{/* 使い方の説明をここに追加 */}
9+
<div className="usage-container">
10+
<h1>このWebアプリについて</h1>
11+
<p>このWebアプリはぷよぷよの連鎖をシミュレートするものです。<br />
12+
ChatGPT4の力を（主にReact周りやCSS周りで）借りながら、Reactで開発されています。
13+
</p>
14+
<p>何かあれば <a href="https://twitter.com/kyopro_mint" target="_blank" rel="noopener noreferrer">
15+
@kyopro_mint
16+
</a> までご連絡ください。</p>
17+
18+
<h2>ぷよの配置方法</h2>
19+
<ul>
20+
<li>右側でぷよの色を選んで、フィールドをクリックすることでぷよを置くことができます。</li>
21+
<li>PCは長押しに対応しています。</li>
22+
<li>右クリックでぷよを削除できます。</li>
23+
</ul>
24+
25+
<h2>連鎖の実行方法</h2>
26+
<ul>
27+
<li>連鎖は速さを選んでAutoで実行、もしくはStepで一手ずつ実行できます。</li>
28+
<li>Moderate: 中くらいの速さ、Instantaneous: 爆速 （Fast未満Slow以上な単語とFast以上な単語をChatGPTに聞いたら教えてくれました）。</li>
29+
<li>ただし、Stepはまだ機能が怪しいのでAutoがおすすめです。</li>
30+
<li>Redoも怪しいです。</li>
31+
</ul>
732
</div>
833
);
934
};

0 commit comments

Comments
 (0)