search

Minori-Akizuki / ddntj

playing TRPG online
GNU General Public License v3.0
25 stars 8 forks source link

チャットログと入力欄の位置関係が使いづらいように見える #13

Closed Shunshun94 closed 7 years ago

Shunshun94 commented 7 years ago

ユーザは最新の情報を参照しながらチャットに文字列を打ち込むと考えられるため、 チャットログは最新情報がより入力欄に近い方にあるべきだと考えます。

現状のユーザインタフェースでは入力欄が上にあるため、チャットログも上が新しいことが望まれると考えました。 この考えに基づくならば入力欄が下にくる、というのも手かもしれません。

c6h4clch3 commented 7 years ago

入力欄を上下どちらにするかを差し引いても、 現状のレイアウトですと新しいメッセージが下に追加され ボックスのスクロール位置はそのままとなるので、 新しいメッセージが入力された場合スクロールが (入力前までの)最下部の場合のみスクロールを最下部に移動する処理 追加したほうが便利ですよね。

c6h4clch3 commented 7 years ago

チャットログの上が新しいとなると別に考慮する必要ないんですけどね。

Minori-Akizuki commented 7 years ago

あとからコピペでログ保存する人とか考えると どどんとふのレイアウトと動きを踏襲して

とかにするのが良さそうですかねー。

c6h4clch3 commented 7 years ago

メッセージ受け取った瞬間に一番したにスクロールされていれば追従する 前のメッセージ見てるときは追従しない。

これはスクロールイベント監視して、メッセージウィンドウについて scrollTop === scrollHeight - clientHeight が成り立つ場合フラグを立てて、 (参照: https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight) 新しくメッセージを受信した際にフラグが立っていた場合、 DOMへのメッセージテキスト追加後に scrollHeight - clientHeight をscrollTopに代入すればいけそうですね。(非jQuery)

c6h4clch3 commented 7 years ago

全体的にどどんとふのものに近くなるようにレイアウト変更と動作調整行ったものをプルリク出しておきました。

c6h4clch3 commented 7 years ago

24 でレイアウトについては修正済みのためCloseお願いします。

なにか修正点ありましたら追記を宜しくお願いします。

Shunshun94 commented 7 years ago

24 でレイアウトについては修正済みのためCloseお願いします。

なにか修正点ありましたら追記を宜しくお願いします。

起票した身が確認して閉じるべきかな、と思い確認しようとしているのですが、 git clone -> git checkout develop -> npm install からの npm build で dist ディレクトリが作成されませんでした。npm build がうまくいってないようです。 環境は node 6.9.4@Windows10 (コマンドプロンプト) です。

自前でももうちょっと調べてみて、必要なら別途起票します。

c6h4clch3 commented 7 years ago

エラーメッセージをいただけますか? こちらでも確認してみます

c6h4clch3 commented 7 years ago

あと、npm buildではなくnpm run buildですね、 npm startはnpm公式が用意するstartスクリプトへのショートカットですが 他のスクリプトはnpm run <script>で走らせる必要があったと思います。

c6h4clch3 commented 7 years ago

Windowsシステムのコマンドプロンプトではnpm scriptにも bashのコマンド記法との差異が出てくると思うので、 Windows10でサポートされたbashを使うかLinuxカーネルのVMを VirtualBoxなど利用して建てるべきかなとも思います。

以上、ご検討よろしくお願いします。

Shunshun94 commented 7 years ago

事実、その辺の差異でした。これは乗り換えが要るなぁ…

c6h4clch3 commented 7 years ago

VPSやPaaSは基本的にLinuxカーネルが動作しているはずですし、 サーバを立てる時点では問題にならないと思いますが、 ユーザーがローカルで試そうと思った場合色々と問題になるかもしれないので その辺りの差異を吸収できるような状態にしておくべきかもしれません... (Gulpなどのタスクランナーに処理を一任する、npm scriptsはgulpタスクを呼び出すだけ)

どどんとふのユースケースとしてローカルで試してみたいという方が どれだけ現状存在するのかちょっとわかりませんが...

Shunshun94 commented 7 years ago

手元で上手く動き、期待された通りの挙動が確認できました。閉じます。

どうしようもない冗談はさておき、bash を入れて試してみました。 (家族共用機に bash を入れた私を褒めてください……！)

しかし、 npm run build で以下のように怒られうまくいかず。

[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/hiyohitsu/Documents/shunshun94/hiyograms/ddntj/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: da5ba2c57f014884187c
Version: webpack 3.5.5
Time: 6136ms
                                               Asset       Size  Chunks                    Chunk Names
          css/images/ui-bg_glass_65_ffffff_1x400.png  207 bytes          [emitted]
                                            index.js     300 kB       0  [emitted]  [big]  index
                                       css/ddntj.css  627 bytes          [emitted]
css/images/ui-bg_diagonals-thick_18_b81900_40x40.png  418 bytes          [emitted]
css/images/ui-bg_diagonals-thick_20_666666_40x40.png  312 bytes          [emitted]
              css/images/ui-icons_222222_256x240.png    6.92 kB          [emitted]
css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png  278 bytes          [emitted]
 css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png  328 bytes          [emitted]
              css/images/ui-icons_ef8c08_256x240.png    4.55 kB          [emitted]
                                          index.html  598 bytes          [emitted]
         css/images/ui-bg_glass_100_f6f6f6_1x400.png  262 bytes          [emitted]
   css/images/ui-bg_gloss-wave_35_f6a828_500x100.png    5.82 kB          [emitted]
         css/images/ui-bg_glass_100_fdf5ce_1x400.png  348 bytes          [emitted]
              css/images/ui-icons_ffd27a_256x240.png    4.55 kB          [emitted]
                         css/jquery-ui.structure.css    19.6 kB          [emitted]
              css/images/ui-icons_228ef1_256x240.png    4.55 kB          [emitted]
                                   css/jquery-ui.css    38.1 kB          [emitted]
              css/images/ui-icons_ffffff_256x240.png     6.3 kB          [emitted]
                             css/jquery-ui.theme.css    18.6 kB          [emitted]
   [3] ./www/js/ddntj.js 239 bytes {0} [built]
   [6] (webpack)/buildin/global.js 487 bytes {0} [built]
   [7] ./www/vue/app.vue 2.01 kB {0} [built]
   [8] ./node_modules/vue-loader/node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-65e040d7","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./www/vue/app.vue 1.59 kB {0} [built]
   [9] ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-65e040d7","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./www/vue/app.vue 250 bytes {0} [built]
  [11] ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./www/vue/app.vue 689 bytes {0} [built]
  [17] ./www/js/dicebot.js 347 bytes {0} [built]
  [18] ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-65e040d7","hasScoped":false}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./www/vue/app.vue 759 bytes {0} [built]
    + 11 hidden modules

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./www/vue/app.vue
Module not found: Error: Can't resolve 'socket.io-client' in '/mnt/c/Users/hiyohitsu/Documents/shunshun94/hiyograms/ddntj/www/vue'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./www/vue/app.vue 10:0-34
 @ ./www/vue/app.vue
 @ ./www/js/ddntj.js

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./www/vue/components/chatbox/chatbox.vue
Module not found: Error: Can't resolve 'socket.io-client' in '/mnt/c/Users/hiyohitsu/Documents/shunshun94/hiyograms/ddntj/www/vue/components/chatbox'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./www/vue/components/chatbox/chatbox.vue 36:0-34
 @ ./www/vue/components/chatbox/chatbox.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./www/vue/app.vue
 @ ./www/vue/app.vue
 @ ./www/js/ddntj.js
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./www/index.html 978 bytes {0} [built]
       [2] (webpack)/buildin/global.js 487 bytes {0} [built]
       [3] (webpack)/buildin/module.js 500 bytes {0} [built]
        + 1 hidden module

npm ERR! Linux 4.4.0-43-Microsoft
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! ddntj@1.0.0 build: `NODE_ENV=dev webpack --config webpack/webpack.base.conf.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the ddntj@1.0.0 build script 'NODE_ENV=dev webpack --config webpack/webpack.base.conf.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ddntj package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=dev webpack --config webpack/webpack.base.conf.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ddntj
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ddntj
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/c/Users/hiyohitsu/Documents/shunshun94/hiyograms/ddntj/npm-debug.log

最終的に

shunshun94@HiyohitsuFamily:/mnt/c/Users/hiyohitsu/Documents/shunshun94/hiyograms/ddntj$ npm install socket.io-client

した後に再実行で動作することが確認できました。 これやれば別に Windows でも問題なかったのでは感が若干あるので後で別途試してみます。