design improved

src/datasource.rs

@@ -150,7 +150,7 @@ impl LetterDistribution {
                 3.0f32,
                 5.0f32,
                 5.0f32,
-                1.0f32,
+                13.0f32,
                 2.5f32,
                 1.0f32,
                 9.0f32,

src/game.rs

@@ -47,7 +47,7 @@ impl Game {
     }
 
     pub fn check_letters(word: &str, letters: &Vec<char>) -> bool {
-
+        let allowedChars = [" ", "-", "'"];
         if word.len() == 0 {
             return false;
         }
@@ -61,6 +61,9 @@ impl Game {
         for c in word.to_uppercase().chars() {
             let upper = String::from(c);
             let count = countmap.get(&upper);
+            if allowedChars.iter().any(|x| &upper == *x) {
+                continue;
+            }
             if let Some(&v) = count {
                 if v <= 0 {
                     return false;

src/main.rs

@@ -4,9 +4,6 @@ use actix::prelude::*;
 use actix_files as fs;
 use actix_web::{middleware, web, App, HttpServer};
 
-#[macro_use]
-extern crate lazy_static;
-
 mod websocket;
 mod game;
 mod datasource;
@@ -17,7 +14,6 @@ mod server {
 }
 
 use crate::server::server::{Server, ws_initiate};
-use crate::datasource::SqliteSource;
 
 #[actix_web::main]
 async fn main() -> std::io::Result<()> {

static/comm.js

@@ -13,6 +13,7 @@ $(function() {
 
 
     function validate_word(word) {
+        var allowedChars = [" ", "-", "'"]
         var countmap = {};
         for (var i = 0; i < char_list.length; i++) {
             var upper = char_list[i].toUpperCase();
@@ -26,6 +27,8 @@ $(function() {
         for (var i = 0; i < uppercase_word.length; i++) {
             var upper = uppercase_word.charAt(i);
             var count = countmap[upper];
+            if (allowedChars.includes(upper))
+                continue;
             if (count != null) {
                 if (count <= 0) {
                     return false;
@@ -77,7 +80,8 @@ $(function() {
         send(msg);
     });
 
-    $('#submit').click(function() {
+    $('#createform').submit(function(ev) {
+        ev.preventDefault();
         var word = $('#word').val();
         if (validate_word(word)) {
             var msg = {
@@ -92,20 +96,9 @@ $(function() {
         }
     });
 
-    $('#submitGuess').click(function() {
-        var list = [];
-        for(var i = 0; i < wordlist.length; i++) {
-            var field = "#g" + i;
-            var numTxt = $(field).val();
-            var number = parseInt(numTxt);
-            if (number > 0 && number <= questionlist.length) {
-                list.push([wordlist[i], questionlist[number - 1]]);
-            }
-            else {
-                statusMessage("Please enter a valid number");
-                return;
-            }
-        }
+    $('#guessingform').submit(function(ev) {
+        ev.preventDefault();
+        var list = getDragAnswers();
         var msg = {
             submit_guess: {
                 guesses: list
@@ -174,6 +167,7 @@ $(function() {
                 char_list = chars;
                 $('#question-box').html(creating.question);
                 $('#letter-box').html(chars.join(" "));
+                $('#word').val("");
 
                 setView('creating');
             }
@@ -193,23 +187,10 @@ $(function() {
     function displayGuessing(guesses) {
         var sub_words = guesses.submitted_words;
         var questions = guesses.questions;
-        var questionsHtml = "";
-        for (var i = 0; i < questions.length; i++) {
-            questionsHtml += (i + 1) + ": " + questions[i] + "<br>";
-        }
-        $('#guessingDynTable').html(questionsHtml);
-        $('#guessingDyn').html("");
-        for (var i = 0; i < sub_words.length; i++) {
-            var $label = $("<label to='g" + i + "'>" + sub_words[i][0] + "</label>");
-            var $field = $("<input id='g" + i + "' type='text' /><br>");
-            $('#guessingDyn').append($label);
-            $('#guessingDyn').append($field);
-        }
-
         questionlist = questions;
         wordlist = sub_words.map(pair => pair[0]);
 
-        
+        setupDraggame(questionlist, wordlist);
         setView('guessing');
     }
 
@@ -220,7 +201,7 @@ $(function() {
             solution_dict[sol[i][0]] = sol[i][1];
         }
         var $table = $('<table/>');
-        //$table.addClass('result-table');
+        $table.addClass('result-table');
 
         var wordline = "<tr><th></th>";
         for(var i = 0; i < result.words.length; i++) {
@@ -252,9 +233,9 @@ $(function() {
     function updatePlayerList(players) {
         playerlist = "";
         for (var i = 0; i < players.length; i++) {
-            playerlist += players[i].nick + "(" + players[i].points + ")";
+            playerlist += "<p>" + players[i].nick + " (" + players[i].points + ")";
             if (i + 1 < players.length)
-                playerlist += "<br>";
+                playerlist += "</p>";
         }
         $('#player-list').html(playerlist);
         $('#lobby-control').show();

static/draggame.js

@@ -0,0 +1,74 @@
+displayedQuestions = null;
+displayedAnswers = null;
+function setupDraggame(questions, answers) {
+    var dropzones = $("#dropzones");
+    dropzones.empty();
+    for (var i = 0; i < questions.length; i++) {
+        var $nz = document.createElement("div");
+        $nz.setAttribute("id", "qdz" + i);
+        $nz.setAttribute("class", "question-dropzone");
+        $nz.setAttribute("ondragover", "allowDrag(event)");
+        $nz.setAttribute("ondrop", "drop(event)");
+        //$nz.textContent = questions[i];
+        $nz.innerHTML = "<div style='float: left; max-width: 70%; text-align: left;'>" + questions[i] + "</div>";
+        dropzones.append($nz);
+    }
+    var qsource = $("#qdz-source");
+    qsource.empty();
+    for (var i = 0; i < answers.length; i++) {
+        var $de = document.createElement("p");
+        $de.setAttribute("id", "qde" + i);
+        $de.setAttribute("class", "question-dropelement");
+        $de.setAttribute("draggable", "true");
+        $de.setAttribute("ondragstart", "drag(event)");
+        $de.textContent = answers[i];
+        qsource.append($de);
+    }
+    displayedQuestions = questions;
+    displayedAnswers = answers;
+}
+
+function getDragAnswers() {
+    answers = [];
+    var dropzones = $("#dropzones").children();
+    for(var i = 0; i < dropzones.length; i++) {
+        var dz = dropzones[i];
+        if (dz.id.startsWith("qdz")) {
+            var q_id = parseInt(dz.id.substring(3));
+            var dropelements = $("#" + dz.id).children();
+            for(var j = 0; j < dropelements.length; j++) {
+                var de = dropelements[j];
+                if (de.id.startsWith("qde")) {
+                    var a_id = parseInt(de.id.substring(3));
+                    if (q_id != NaN && a_id != NaN) {
+                        //answers[displayedQuestions[q_id]] = displayedAnswers[a_id];
+                        answers.push([displayedAnswers[a_id], displayedQuestions[q_id]]);
+                    }
+                }
+            }
+        }
+    }
+    return answers;
+}
+
+function allowDrag(e) {
+    e.preventDefault();
+}
+function drag(e) {
+    e.dataTransfer.setData("id", e.target.id);
+}
+function drop(e) {
+    e.preventDefault();
+    var id = e.dataTransfer.getData("id");
+    var target = e.target;
+    while (!target.classList.contains("question-dropzone") && !target.classList.contains("question-dropsource"))
+        target = target.parentNode;
+    
+    var occupyingDrop = target.querySelector(".question-dropelement");
+    var element = document.getElementById(id);
+
+    if (occupyingDrop != null && !target.classList.contains("question-dropsource")) {
+        element.parentNode.appendChild(occupyingDrop);
+    }
+    target.appendChild(element);
+}

static/index.html

@@ -4,6 +4,7 @@
 <head>
     <script src="jquery-3.5.1.js"></script>
     <script src="comm.js"></script>
+    <script src="draggame.js"></script>
     <link rel="stylesheet" href="style.css">
     <title>Eichelhäutgerät</title>
 </head>
@@ -15,7 +16,6 @@
         <div id="side-info">
             <div id="lobby-control" style="display:none">
                 <div id="lobby-info">
-
                 </div>
                 
                 <h3>Connected Players</h3>
@@ -25,7 +25,7 @@
             </div>
         </div>
     </aside>
-    <div class="main_container">
+    <div class="main-container">
         <form id="loginform" class="loginform">
             <div class="row">
                 <div class="label-col">
@@ -56,93 +56,37 @@
             </form>
         </div>
 
-
         <div id="creating" style="margin: 0px; display:none">
-            <table class="qtable">
-                <tr><td style="border:none; vertical-align:top">
-                    <div class="questiontext">
-                        Create a word sounding like...
-                        <div class="question-box" id="question-box">
-                        </div>
+            <div class="creating-container">
+                <div class="question-text">
+                    Create a word sounding like...
+                    <div class="question-box" id="question-box">
                     </div>
-                </td><td style="border:none; vertical-align:top">
+                </div>
+                <div class="question-letters" >
                     ... using the following letters:
                     <div class="letter-box" id="letter-box">
                     </div>
-                </td></tr>
-            </table>
+                </div>
+            </div>
             <form id="createform">
                 <label for="word">Word:</label>
-                <input id="word" type="text" /><br>
-                <input id="submit" type="button" value="Submit Word" />
+                <input id="word" type="text" autocomplete="off" /><br>
+                <input id="submit-word" type="submit" value="Submit Word" />
             </form>
         </div>
 
         <div id="guessing" style="display:none">
             You now have to guess!<br><br>
-            <div id="guessingDynTable">
-            </div>
-        
-            <form id="guessingform">
-                <div id="guessingDyn">
-                </div>
-                <input id="submitGuess" type="button" value="Submit Guess" />
-            </form>
-
             <div id="guessing-draggame" style="display: flex;flex-direction: row; min-height: 110px;">
-                <script lang="javascript">
-                    function allowDrag(e) {
-                        e.preventDefault();
-                    }
-                    function drag(e) {
-                        e.dataTransfer.setData("id", e.target.id);
-                    }
-                    function drop(e) {
-                        e.preventDefault();
-                        var id = e.dataTransfer.getData("id");
-                        var target = e.target;
-                        while (!target.classList.contains("question-dropzone") && !target.classList.contains("question-dropsource"))
-                            target = target.parentNode;
-                        
-                        var occupyingDrop = target.querySelector(".question-dropelement");
-                        var element = document.getElementById(id);
-
-                        if (occupyingDrop != null && !target.classList.contains("question-dropsource")) {
-                            element.parentNode.appendChild(occupyingDrop);
-                        }
-                        target.appendChild(element);
-                    }
-                </script>
-                <div id="dropzones" style="flex: 1;">
-                    <div id="qdz1" class="question-dropzone" ondragover="allowDrag(event)" ondrop="drop(event)">
-                        q1
-                    </div>
-                    <div id="qdz2" class="question-dropzone" ondragover="allowDrag(event)" ondrop="drop(event)">
-                        q2
-                    </div>
+                <div id="dropzones" style="flex: 2;">
                 </div>
                 <div id="qdz-source" class="question-dropsource" ondragover="allowDrag(event)" ondrop="drop(event)" style="flex: 1">
-                    <p id="qde1" class="question-dropelement" draggable="true" ondragstart="drag(event)">
-                        a1
-                    </p>
-                    <p id="qde2" class="question-dropelement" draggable="true" ondragstart="drag(event)">
-                        a2
-                    </p>
-                    <p id="qde3" class="question-dropelement" draggable="true" ondragstart="drag(event)">
-                        ae
-                    </p>
-                    <p id="qde4" class="question-dropelement" draggable="true" ondragstart="drag(event)">
-                        wea2
-                    </p>
-                    <p id="qde5" class="question-dropelement" draggable="true" ondragstart="drag(event)">
-                        aqqqwq2
-                    </p>
-                    <p id="qde6" class="question-dropelement" draggable="true" ondragstart="drag(event)">
-                        aganz langa text wo muas azeigt werda
-                    </p>
                 </div>
-
             </div>
+            <form id="guessingform">
+                <input id="submit-guess" type="submit" value="Submit Guess" />
+            </form>
         </div>
         <div id="results" style="margin-top: 20px; display:none">
         

static/style.css

@@ -27,7 +27,7 @@ body {
     right: 0;
     margin: 0 auto;
     min-height: 140px;
-    max-width: 960px;
+    max-width: 860px;
 }
 
 .loginform {
@@ -36,11 +36,11 @@ body {
     display: table;
 }
 
-.main_container {
+.main-container {
     left: 0;
     right: 0;
     margin: 0 auto;
-    max-width: 960px;
+    max-width: 860px;
     padding: 20px;
     align-content: stretch;
     border-radius: 12px;
@@ -49,7 +49,38 @@ body {
 
 .side-control {
     float: left;
-    align-content: right;
+    margin: 0;
+    padding: 0;
+    width: 180px;
+    height: 100%;
+    overflow: auto;
+}
+
+.player-list p {
+    padding: 6px;
+    margin-right: 6px;
+    background-color: var(--color-darker);
+    border: none;
+    border-radius: 8px;
+}
+
+@media screen and (max-width: 1260px) {
+    .header {
+        min-height: unset;
+    }
+    .side-control {
+        float: none;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        padding: 20px;
+        width: auto;
+        max-width: 860px;
+        align-content: stretch;
+    }
+    .player-list p {
+        display: inline-block;
+    }
 }
 
 input[type="button"], input[type="submit"], button {
@@ -60,17 +91,19 @@ input[type="button"], input[type="submit"], button {
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    margin: 6px 0px;
+    margin: 6px 6px 6px 0px;
     font-size: 16px;
     box-shadow: 0 4px 10px 0 rgba(0,0,0,0.3);
 
     background-color: var(--color2-darker);
-    -webkit-transition-duration: 0.3s; /* Safari */
-    transition-duration: 0.3s;
+    -webkit-transition: background-color 0.3s linear;
+    -ms-transition: background-color 0.3s linear;
+    transition: background-color 0.3s linear;
 }
 
 input[type="button"]:hover, input[type="submit"]:hover, button:hover {
     background-color: var(--color2);
+    border: none;
 }
 
 input[type="text"], textarea {
@@ -83,8 +116,9 @@ input[type="text"], textarea {
     font-size: 16px;
 
     background-color: var(--color3-darker);
-    -webkit-transition-duration: 0.3s; /* Safari */
-    transition-duration: 0.3s;
+    -webkit-transition: background-color 0.3s linear;
+    -ms-transition: background-color 0.3s linear;
+    transition: background-color 0.3s linear;
 }
 
 input[type="text"]:focus, textarea:focus {
@@ -117,6 +151,32 @@ label {
     clear: both;
 }
 
+.creating-container {
+    display: flex;
+}
+
+.question-text {
+    flex-grow: 1;
+    float: left;
+}
+
+.question-letters {
+    flex-grow: 1;
+    float: right;
+}
+
+@media screen and (max-width: 700px) {
+    .creating-container {
+        display: unset;
+    }
+    .question-text {
+        float: none;
+    }
+    .question-letters {
+        float: none;
+    }
+}
+
 .question-box {
     width: intrinsic;
     width: -moz-max-content;
@@ -126,7 +186,7 @@ label {
     background-color: var(--color3-darker);
     padding: 30px 20px;
     margin: 20px;
-    font-size: 16px;
+    font-size: 18px;
 }
 
 .letter-box {
@@ -138,18 +198,20 @@ label {
     background-color: var(--color3-darker);
     padding: 30px 20px;
     margin: 20px;
-    font-size: 24px;
+    font-size: 18px;
 }
 
 .question-dropzone {
-    height: 20px;
     border: 2px solid var(--color2-darker);
     border-radius: 8px;
     background-color: var(--color3-darker);
     padding: 8px 8px;
     margin: 12px;
+    text-align: right;
     font-size: 16px;
+    overflow: auto;
     position: relative;
+    min-height: 42px;
 }
 
 
@@ -175,11 +237,10 @@ label {
     margin: 6px;
     font-size: 16px;
     height: 18px;
-    cursor:move;
-    position: relative;
-    float: right;
-    -ms-transform: translate(0%, -11px);
-    transform: translate(0%, -11px);
+    cursor: move;
+    /*position: relative;
+    float: right;*/
+    display: inline-block;
 }
 
 .qtable {