add user_console

Author: Tom-game-project

README.md

@@ -4,4 +4,3 @@
 
 ## 遊び方
 
-rustの色々が入ってる必要があります

assets/css/style.scss

@@ -80,3 +80,12 @@
     border-radius: 20px;
     text-align: center;
 }
+
+#user_console{
+    width: 500px;
+    font-family: Consolas,monaco,monospace; 
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+

index.html

@@ -22,6 +22,12 @@ <h1>sudoku solver recursion visualizer</h1>
     <div id="solve_button">
         solve!
     </div>
+    <!--
+        user console area
+    -->
+    <h2>User Console</h2>
+    <div id="user_console">
+    </div>
 
     <!--number key pad-->
     <div id = "number_key_pad">

src/index.js

@@ -20,6 +20,7 @@ digraph { ${string_list.join("\n")} }
 
 const tbody = document.getElementById("input_area");
 const  number_key_pad_tbody = document.getElementById("number_key_pad_tbody");
+const user_conole = document.getElementById("user_console");
 
 console.log(tbody);
 console.log(number_key_pad_tbody);
@@ -141,6 +142,32 @@ function getSudokuArr(width,height){
     return rarr;
 }
 
+
+/**
+ * # user console
+ * ## out
+ * @param {HTMLElement} target 
+ * @param {String} text 
+*/
+function user_console_out(target,text){
+    let text_elem = document.createElement("p");
+    text_elem.textContent = text;
+    target.appendChild(text_elem);
+}
+
+/**
+ * # user console
+ * ##  clear
+ * @param {HTMLElement} target 
+ */
+function user_console_clear(target){
+    while (target.firstChild) {
+        target.removeChild(target.firstChild);
+    }
+}
+
+
+
 // setting
 settingBoxes(tbody,9,9);
 settingNumberKeypad(
@@ -169,14 +196,16 @@ console.log("開始します")
 init().then(()=>{
     let solve_button = document.getElementById("solve_button");
     solve_button.addEventListener("click",function(event){
-        console.log("数独を解いています");
+        user_console_clear(user_conole);
+        user_console_out(user_conole,"solving sudoku...");
         let q_arr = getSudokuArr(9,9);
+        const startTime = performance.now(); // 開始時間
         let data = JSON.parse(sudoku(q_arr));
-        console.log("数独を解き終わりました");
-        console.log("再帰構造をレンダリングしています")
-         
+        const endTime = performance.now(); // 終了時間
+        user_console_out(user_conole,`have solved sudoku ${endTime - startTime}ms`);
+        user_console_out(user_conole,"rendering sudoku recursion structure...");
         draw_viz(data.slice(0,3100));
-        console.log("レンダリングを終了しました")
+        user_console_out(user_conole,"coming soon to show ,please wait for a minutes.");
     })
 });