Skip to content
Snippets Groups Projects
Commit 598a0b9a authored by Silas Dohm's avatar Silas Dohm
Browse files

got rid of jquery

parent 4bd1e7f3
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.html
+ 2
− 4
View file @ 598a0b9a
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vi crossword</title> <title>vi crossword</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/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"> <link href="style.css" rel="stylesheet">
<!-- <script src="../addons/p5.sound.js"></script> --> <!-- <script src="../addons/p5.sound.js"></script> -->
</head> </head>
...@@ -14,10 +13,10 @@ ...@@ -14,10 +13,10 @@
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div class="row content"> <div class="row content">
<div class="col-sm-6" style="text-align: center;"> <div class="col-sm-12 col-lg-6" id="canvasWrapper">
<canvas id="mycanvas" oncontextmenu="return false;"></canvas> <canvas id="mycanvas" oncontextmenu="return false;"></canvas>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-12 col-lg-6">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<span><b>across→</b></span> <span><b>across→</b></span>
...@@ -34,7 +33,6 @@ ...@@ -34,7 +33,6 @@
</div> </div>
</div> </div>
</body> </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="sketch.js"></script> <script src="sketch.js"></script>
<script src="parse.js"></script> <script src="parse.js"></script>
......
sketch.js
+ 25
− 29
View file @ 598a0b9a
size = 80;
class Cell { class Cell {
constructor(x, y, char, hintNr = 0) { constructor(x, y, char, hintNr = 0) {
this.x = x; this.x = x;
...@@ -12,7 +11,7 @@ class Cell { ...@@ -12,7 +11,7 @@ class Cell {
drawChar = function (color) { drawChar = function (color) {
this.drawCell(color); this.drawCell(color);
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.font = "40px RobotoWeb"; ctx.font = size/2+"px RobotoWeb";
ctx.fillText(this.currentChar.toUpperCase(), this.x * size + size / 3, this.y * size + size / 1.5); ctx.fillText(this.currentChar.toUpperCase(), this.x * size + size / 3, this.y * size + size / 1.5);
if (this.hintNr) { if (this.hintNr) {
...@@ -42,6 +41,8 @@ class Cell { ...@@ -42,6 +41,8 @@ class Cell {
} }
class Word { class Word {
static number = 0; static number = 0;
static across = document.getElementById("across");
static down = document.getElementById("down");
constructor(clue, word, x, y, direction) { constructor(clue, word, x, y, direction) {
this.hint = mycell[x][y]; this.hint = mycell[x][y];
this.chars = new Array(); this.chars = new Array();
...@@ -86,27 +87,23 @@ var ctx = a_canvas.getContext("2d"); ...@@ -86,27 +87,23 @@ var ctx = a_canvas.getContext("2d");
let insert = false; //nav mode let insert = false; //nav mode
let m_orientation = 0; //0 = horizontal 1=vertical let m_orientation = 0; //0 = horizontal 1=vertical
let activeX = 0;
let activeY = 0;
let activeCell; let activeCell;
let lastCell; let lastCell;
let size = 80;
var mycell; var mycell;
var width;
var height;
let words = new Array(); let words = new Array();
let across = document.getElementById("across"); var columns;
let down = document.getElementById("down"); var rows;
$(document).ready(function () { //init columns = 12;
width = 12; rows = 12;
height = 12; ctx.canvas.width = size *columns;
$("#mycanvas").attr("width", width * size); //playfield with ctx.canvas.height = size * rows;
$("#mycanvas").attr("height", height * size); //playfield height mycell = new Array(columns); //create array
mycell = new Array(width); //create array for (i = 0; i < columns; i++) {
for (i = 0; i < width; i++) { mycell[i] = new Array(rows); //make array 2D
mycell[i] = new Array(height); //make array 2D for (j = 0; j < rows; j++) {
for (j = 0; j < height; j++) {
mycell[i][j] = new Cell(i, j, ""); //create array of cells mycell[i][j] = new Cell(i, j, ""); //create array of cells
} }
} }
...@@ -116,7 +113,6 @@ $(document).ready(function () { //init ...@@ -116,7 +113,6 @@ $(document).ready(function () { //init
activeCell = words[0].chars[0]; activeCell = words[0].chars[0];
activeCell.highlight(); activeCell.highlight();
});
function sleep(ms) { function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
...@@ -181,8 +177,8 @@ function logKey(e) { ...@@ -181,8 +177,8 @@ function logKey(e) {
} }
function initNeighbours() { function initNeighbours() {
for (i = 0; i < width; i++) { //precompute neighbours for (i = 0; i < columns; i++) { //precompute neighbours
for (j = 0; j < height; j++) { for (j = 0; j < rows; j++) {
//left //left
var x = i; var x = i;
var xt = x; var xt = x;
...@@ -208,7 +204,7 @@ function initNeighbours() { ...@@ -208,7 +204,7 @@ function initNeighbours() {
//right //right
var x = i; var x = i;
var xt = x; var xt = x;
while (xt + 1 < height) { while (xt + 1 < rows) {
xt += 1; xt += 1;
if (mycell[xt][j].actualChar != "") { //skips empty cells (except if last cell in row is emtpy, this shoulde be fixed) if (mycell[xt][j].actualChar != "") { //skips empty cells (except if last cell in row is emtpy, this shoulde be fixed)
x = xt; x = xt;
...@@ -219,7 +215,7 @@ function initNeighbours() { ...@@ -219,7 +215,7 @@ function initNeighbours() {
//down //down
var y = j; var y = j;
var yt = y; var yt = y;
while (yt + 1 < height) { while (yt + 1 < rows) {
yt += 1; yt += 1;
if (mycell[i][yt].actualChar != "") { //skips empty cells (except if last cell in row is emtpy, this shoulde be fixed) if (mycell[i][yt].actualChar != "") { //skips empty cells (except if last cell in row is emtpy, this shoulde be fixed)
y = yt; y = yt;
......
style.css
+ 12
− 6
View file @ 598a0b9a
...@@ -10,16 +10,22 @@ body{ ...@@ -10,16 +10,22 @@ body{
list-style-type: none; list-style-type: none;
} }
.content{ .content{
width: 100%; margin-top: 5%;
margin: 0; /* width: 100%; */
position: absolute; /* margin: 0; */
top: 50%; /* position: absolute; */
transform: translateY(-50%); /* top: 50%; */
/* transform: translateY(-50%); */
}
#canvasWrapper{
text-align: center;
} }
li:nth-child(even) { li:nth-child(even) {
/* background: rgba(255,255,255,0.1); */ /* background: rgba(255,255,255,0.1); */
} }
canvas{ canvas{
margin:0 auto; margin:0 auto;
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); /* 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); */
width: 80%;
height: auto;
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum Datenschutzerklärung