Merge branch 'release/v2.3.0'

Author: kobalab

ChangeLog.md

@@ -1,3 +1,11 @@
+## v2.3.0 / 2024-02-11
+
+  - #107 「ネット対戦」のページを追加
+  - 全ページにTwitterカード用の情報を追加
+  - @kobalab/majiang-core 1.1.2 → 1.2.0
+  - @kobalab/majiang-ai 1.0.8 → 1.0.9
+  - @kobalab/majiang-ui 1.0.8 → 1.1.0
+
 ### v2.2.2 / 2023-12-31
 
   - 「点数計算ドリル」の機能改善

README.md

@@ -47,6 +47,13 @@ AIは majiang-core のクラス Majiang.Player の具体的な実装になって
 ## 関連パッケージ
 そのほかに以下の関連パッケージがあります。
 
+### majiang-server
+ - GitHub: https://github.com/kobalab/majiang-server
+ - npm: @kobalab/majiang-server
+
+WebSocketによる麻雀サーバーの実装です。
+電脳麻将のネット対戦は本サーバに接続して実現しています。
+
 ### majiang-analog
  - GitHub: https://github.com/kobalab/majiang-analog
  - npm: @kobalab/majiang-analog
@@ -61,6 +68,7 @@ AIは majiang-core のクラス Majiang.Player の具体的な実装になって
 
 ネット麻雀 [天鳳](https://tenhou.net) の牌譜を電脳麻将形式に変換します。
 本パッケージを利用することで天鳳の牌譜を解析したり、再生したりすることが可能になります。
+電脳麻将 牌譜ビューアの天鳳牌譜再生は本サーバに接続して実現しています。
 
 ## 書籍
 

dist/img/netplay.png

@@ -1,11 +1,11 @@
 {
   "name": "majiang",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "HTML5 + JavaScript で動作する麻雀アプリ「電脳麻将」",
   "private": true,
   "scripts": {
     "build:html": "pug -o dist -P src/html/page/",
-    "build:css": "stylus src/css/index.styl -o dist/css/majiang-2.2.2.css",
+    "build:css": "stylus src/css/index.styl -o dist/css/majiang-2.3.0.css",
     "build:js": "webpack --mode development --devtool inline-source-map",
     "build": "npm run build:html && npm run build:css && npm run build:js",
     "release": "npm run build:html && npm run build:css && webpack --mode production",
@@ -31,9 +31,9 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@kobalab/majiang-ai": "^1.0.8",
-    "@kobalab/majiang-core": "^1.1.2",
-    "@kobalab/majiang-ui": "^1.0.8",
+    "@kobalab/majiang-ai": "^1.0.9",
+    "@kobalab/majiang-core": "^1.2.0",
+    "@kobalab/majiang-ui": "^1.1.0",
     "jquery": "^3.7.1"
   }
 }

package-lock.json

@@ -22,6 +22,10 @@ input[type="button"]
     color: black
     -webkit-appearance: none
 
+input::placeholder
+    color: #999
+    opacity: 1
+
 select
     border: solid 1px
     border-radius: 4px

package.json

@@ -56,6 +56,7 @@ body.board
                 &.shangjia
                     text-align: left
     .player-button
+        z-index: 1
         text-align: right
         white-space: nowrap
         .button
@@ -70,6 +71,7 @@ body.board
                 background: #999
                 outline: none
     .select-mianzi
+        z-index: 1
         line-height: 1
         text-align: right
         white-space: nowrap
@@ -88,9 +90,12 @@ body.board
         white-space: nowrap
         overflow: hidden
         text-overflow: ellipsis
-        cursor: pointer
-        &:hover
-            opacity: 1
+        &.disconnect
+            opacity: 0.1
+        &.selectable
+            cursor: pointer
+            &:hover
+                opacity: 1
     .say
         font-family: text-font
         color: white
@@ -165,6 +170,7 @@ body.board
                         .minus
                             color: #f00
     > .summary
+        z-index: 1
         display: flex
         overflow: auto
         align-items: center
@@ -227,6 +233,10 @@ body.board
         background: rgba(256,256,256,0.4)
         cursor: pointer
     .kaiju
+        &:focus
+            outline: none
+    .kaiju > div
+        z-index: 1
         margin-top: 120px
         position: relative
         width: 580px
@@ -256,7 +266,10 @@ body.board
                 white-space: nowrap
                 overflow: hidden
                 text-overflow: ellipsis
-                cursor: pointer
+                &.selectable
+                    cursor: pointer
+                    &:hover
+                        background: #999
                 &.main
                     transform: translate(140px, 96px)
                 &.xiajia
@@ -265,8 +278,6 @@ body.board
                     transform: translate(140px, 0px)
                 &.shangjia
                     transform: translate(0px, 48px)
-                &:hover
-                    background: #999
 
 #board
     .controller

src/css/base.styl

@@ -169,7 +169,10 @@
                         .point
                             font-size: 24px
     .kaiju
-        margin-top: 120px
+        width: 800px
+        height: 680px
+        > div
+            margin-top: 120px
 
 #board
     .controller

src/css/board.styl

@@ -10,6 +10,7 @@ body.file
         display: none
 
 #file
+#room
     display: none
     font-size: 14px
     font-family: menu-font
@@ -25,6 +26,7 @@ body.file
         font-size: 16px
         font-family: defen-font
         text-align: right
+#file
     .file
         margin: 10px 0
         .row
@@ -81,10 +83,30 @@ body.file
                 vertical-align: bottom
         > .button
             float: right
-        form
+        form.tenhou
             float: right
             input[name="url"]
                 width: 270px
+        .netplay
+            display: inline-block
+            img
+                width: 2em
+                vertical-align: middle
+                border-radius: 50%
+                margin-right: 0.5em
+            .name
+                display: inline-block
+                vertical-align: middle
+                font-size: 120%
+                width: 8em
+                white-space: nowrap
+                overflow: hidden
+                text-overflow: ellipsis
+            form
+                margin-right: 0.5em
+                display: inline-block
+                input[name="room_no"]
+                    width: 3em
         .error
             transition: opacity 0.5s
             margin: 2px 0px

src/css/desktop.styl

@@ -13,5 +13,6 @@
 @import "file"
 @import "stat"
 @import "analyzer"
+@import "room"
 @import "rule"
 @import "demo"