Merge pull request #122 from illionillion/dev

Dev

.eslintrc.js

@@ -2,29 +2,32 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    node: true
+    node: true,
   },
   // extends: 'standard',
   overrides: [
     {
       env: {
-        node: true
+        node: true,
       },
-      files: [
-        '.eslintrc.{js,cjs}'
-      ],
-    }
+      files: ['.eslintrc.{js,cjs}'],
+    },
   ],
+  plugins: ['unused-imports'],
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
   },
   rules: {
     quotes: ['error', 'single'],
     semi: ['error', 'always'],
     // no-mixed-spaces-and-tabsルールをoffに設定する
     'no-mixed-spaces-and-tabs': 'off',
     // // インデントはスペースで統一
-    indent: ['error', 2, { SwitchCase: 1 }]
-  }
+    indent: ['error', 2, { SwitchCase: 1 }],
+    /**
+     * 未使用のimport削除
+     */
+    'unused-imports/no-unused-imports': 'warn',
+  },
 };

local_build/css/keyboard.css

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+
+#keyboard-screen {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /* background-image: url(../images/game-data/game-data-background.png); */
+  background: url("../images/keyboard/name-background.png") no-repeat bottom / contain;
+  background-size: cover;
+  z-index: 4;
+}
+
+.keyboard-main-wrapper {
+  width: auto;
+  text-align: center;
+  /* background-color: #fff; */
+}
+
+.keyboard-nameArea-wrapper {
+  text-align: center;
+  height: 10%;
+  width: 79%;
+  /* max-width: 840px; */
+  /* border: solid 2px rgba(0, 0, 0, 0.5); */
+  padding: 10px;
+  margin: 12.5% auto 2%;;
+  background-image: url("../images/keyboard/name-textbox.png");
+  background-size: 100% 100%;
+}
+
+#keyboard-name span{
+  border-bottom: 2px solid #333;
+  color: #333;
+}
+
+#keyboard-name {
+  display: flex;
+  height: 100%;
+  margin: 0;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  /* border-bottom: 1px dashed black; */
+  padding-bottom: 0.1rem;
+  /* background-image: linear-gradient(
+    to right,
+    #000,
+    #000 18px,
+    transparent 1px
+  ); 幅2の線を作る */
+  background-size: 29px 1.6px; /* グラデーションの幅・高さを指定 */
+  background-position: left bottom; /* 背景の開始位置を指定 */
+  background-repeat: repeat-x; /* 横向きにのみ繰り返す */
+}
+
+.keyboard-wrapper {
+  margin: auto;
+  text-align: center;
+  height: 50%;
+  width: 85%;
+}
+
+.keyboard-rows{
+  height: 20%;
+}
+
+.keyboard-wrapper .keyboard-rows input {
+  font-size: 17px;
+  /* font-size: clamp(13px, 2vw, 17px); */
+  font-size: 1.2vw;
+  /* max-height: 50px; */
+  height: 75%;
+  /* max-width: 50px; */
+  width: 5%;
+  margin: 0.9%;
+  /* border-color: rgb(197, 197, 197); */
+  background-color: #001829;
+  color: #D2E1DC;
+}
+
+.keyboard-wrapper .keyboard-rows .long-input {
+  margin-left: 4%;
+  width: 10%;
+  max-width: 130px;
+}
+
+.long-input.hidden {
+  visibility: hidden;
+}
+.hidden {
+  /* overflow: hidden; */
+  background-color: transparent;
+  opacity: 0;
+}
+
+/* ボタンが押された時 */
+.keyboard-wrapper .keyboard-rows input:focus {
+  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
+    inset -3px -3px 7px rgba(255, 255, 255, 0.05);
+}

local_build/css/title.css

@@ -0,0 +1,62 @@
+#title-flex {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: none;
+    background-size: cover;
+}
+
+#title-background-video {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#title-logo {
+    flex: 6;
+    position: relative;
+}
+
+#title-logo img {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+#title-list {
+    position: relative;
+    flex: 4;
+}
+
+#title-list ul{
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0;
+    padding-left: 0;
+}
+
+#title-list ul li{
+    list-style: none;
+    font-size: 2vw;
+    font-weight: 100;
+    margin: 10px;
+    text-align: center;
+    justify-content: center;
+}
+
+#title-list ul li.on-cursor{
+    background-image: url(../images/title/cursor.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position-x: 40%;
+}