Merge branch 'release/v2.3.0'

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) の牌譜を電脳麻将形式に変換します。
 本パッケージを利用することで天鳳の牌譜を解析したり、再生したりすることが可能になります。
+電脳麻将 牌譜ビューアの天鳳牌譜再生は本サーバに接続して実現しています。
 
 ## 書籍
 

package.json

@@ -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"
   }
 }

src/css/base.styl

@@ -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

src/css/board.styl

@@ -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/desktop.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/file.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/index.styl

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

src/css/room.styl

@@ -0,0 +1,42 @@
+body.room
+    color: black
+    background: white
+    margin: 0 10px 15px
+    #navi
+        margin: 0
+    #room
+        display: block
+    > .version
+        display: none
+
+#room
+    form
+        border: solid 1px #666
+        border-radius: 8px
+        padding: 16px
+        margin: 20px
+        input[name="room_no"]
+            -webkit-text-fill-color: black
+            opacity: 0.7
+            width: 3em
+        select
+            padding: 1px 1em 1px 0.5em
+        .room
+            .user
+                margin: 10px 0
+                &.offline
+                    img, .name
+                        opacity: 0.3
+                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

src/css/tablet.styl

@@ -180,7 +180,10 @@
                         .point
                             font-size: 20px
     .kaiju
-        margin-top: 60px
+        width: 800px
+        height: 450px
+        > div
+            margin-top: 60px
 
 #board
     .controller

src/css/title.styl

@@ -47,3 +47,26 @@ body.title
         &:focus
             background: #ccc
             outline: none
+    .login
+        margin: 8px auto
+        form
+            margin: 0.5em
+        input[type="submit"]
+            cursor: pointer
+        form.local
+            input[name="name"]
+                width: 8em
+            input[type="submit"]
+                border: none
+                color: white
+                background: blue
+        img
+            width: 1.2em
+            vertical-align: middle
+        form.hatena
+            input[type="submit"]
+                width: 120px
+                border: none
+                background: none
+                text-align: left
+                padding: 0