init files

60530bad · Silas Dohm · 60530bad · 60530bad · 60530bad · 60530bad
Commit 60530bad authored Jan 22, 2022 by Silas Dohm
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>p5.js example</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
+  <link href="style.css" rel="stylesheet">
+  <!-- <script src="../addons/p5.sound.js"></script> -->
+</head>
+
+<body>
+     <div class="container-fluid">
+      <div class="row">
+          <div class="col-sm-8 settings">
+            <div id="menu" class="row">
+
+                <div class="col-sm-12 col-md-3">
+                  <label></label>
+                <button id="play" class="">Play</button>
+                </div>
+            </div>
+          </div>
+      </div>
+    <div class="row">
+      <canvas id="mycanvas" oncontextmenu="return false;"></canvas>
+    </div>
+   </div> 
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="sketch.js"></script>
+</html>
\ No newline at end of file
--- a/notes.txt
+++ b/notes.txt
+cell:
+	properties:
+		-char actual_letter;
+		-char current_letter;
+		-is either a letter or question
+		-can be part of up to two words 
+			-> only one active word (horizontal/vertical)
+		-can be last letter of word
+	functionality:
+		-if current_letter is updated 
+			->loop over letters in words
+			->if all letters are filled in
+				->check if word is correct, maybe give feedback
+		-if letter is input and cell is not last letter of word
+			->change active cell to the next cell in active word
+	visual:
+		possible colors:
+			active color (currenlty selected)
+			part of active word color 
+			question color	
+		
+		
+word:
+	-is made of letters
+
+navigation:
+	keyboard vim:
+		navigation mode:
+			j = down	
+			k = up
+			l = right
+			h = left
+			i = insert (switch to input mode)
+			changing betweent horizontal and vertical navigation requires two inputs
+			the first input just changes the direction the word 
+			
+			additional things worth considering:
+				-w = start of next word
+				-e = end of word
+				ect...
+		input mode:
+			a..z = input letters into cells
+			esc = switch to navigation mode
+		
+
+thoughts:
+	answers are stored client-side which enables cheating, but since almost all answers can be googled anyway this really isnt an issue.
+		one way to avoid storing answers client-side would be to store words serverside and make the client send a request(word_id,word)
+		and the server replies with true/false
+		
--- a/sketch.js
+++ b/sketch.js
+size = 48;
+class cell {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.currentLetter = '';
+    this.drawCell();
+  }
+  drawLetter = function (l) {
+    this.drawfield();
+    ctx.fillStyle = "black";
+    ctx.font ="20px Consolas";
+    ctx.fillText(l, this.x * size + 8, this.y * size + 22); 
+  }
+  drawCell = function(){  //draw field
+    ctx.fillStyle = "white";
+    ctx.strokeStyle = "#4717f6";
+    ctx.fillRect(this.x * size, this.y * size, size, size);
+    ctx.strokeRect(this.x * size, this.y * size, size, size);
+  }
+}
+
+
+var mycell;
+var width;
+var height;
+
+$("#play").on("click", (function () {  //play button click
+  play();
+}));//end of play button click event
+function play() {
+  width = 12;
+  height = 12;
+  $("#mycanvas").attr("width", width * size);  //playfield with
+  $("#mycanvas").attr("height", height * size); //playfield height
+  mycell = new Array(width);    //create array
+  for (i = 0; i < width; i++) {
+    mycell[i] = new Array(height); //make array 2D
+    for (j = 0; j < height; j++) {
+      mycell[i][j] = new cell(i, j); //create array of cells
+    }
+  }
+  $("#mycanvas").show(355);
+}
+
+// Set up!
+var a_canvas = document.getElementById("mycanvas");
+var ctx = a_canvas.getContext("2d");
+var foobar = "a";
+
+$(document).ready(function () {
+  play();
+});
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function click(x, y) {
+}
+
+document.addEventListener('keydown', logKey);
+
+function logKey(e) {
+  foobar = ` ${e.key}`;
+  mycell[0][0].drawLetter(foobar);
+}
\ No newline at end of file
--- a/style.css
+++ b/style.css
+body{
+    background-color:#4717f6;
+    color:white;
+    font-family:Courier;
+}
+.settings{
+ margin: 0 auto;
+  margin-top:12px;
+  
+}
+.settings input{
+  width:100%;
+}
+#play{
+  width:100%;
+}
+canvas{
+    margin:0 auto;
+    margin-top:60px;
+    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
+}
\ No newline at end of file