From c32dda9cbfbe243a298ff20ce415147e1e30c530 Mon Sep 17 00:00:00 2001
From: Zidanni Clerigo <zclerigo40@stuy.edu>
Date: Thu, 15 Jun 2023 19:33:59 -0400
Subject: [PATCH 1/2] add Games tab with interactive crossword users can play.
 Crosswords generate using words provided by developers

---
 .next/static/chunks/crossword.module.css |  94 +++++
 components/Navbar.tsx                    |   3 +
 pages/games/crossword.js                 |  13 +
 pages/games/games.tsx                    | 423 +++++++++++++++++++++++
 styles/crossword.module.css              |  94 +++++
 5 files changed, 627 insertions(+)
 create mode 100644 .next/static/chunks/crossword.module.css
 create mode 100644 pages/games/crossword.js
 create mode 100644 pages/games/games.tsx
 create mode 100644 styles/crossword.module.css

diff --git a/.next/static/chunks/crossword.module.css b/.next/static/chunks/crossword.module.css
new file mode 100644
index 0000000..c5f564c
--- /dev/null
+++ b/.next/static/chunks/crossword.module.css
@@ -0,0 +1,94 @@
+
+.container{
+    position: absolute;
+    bottom: 0; top: 0; left: 0; right: 0;
+    text-align: center;
+  }
+  .center{
+    margin: 0 auto;
+  }
+  
+  .btn{
+    margin: 8px 4px 0;  
+  }
+  .btn{
+    width: 172px;
+    height: 28px;
+  }
+  
+  .line{  
+    height: 2em;
+  }
+  .word, .clue{
+    display: inline-block;
+    height: 1.5em;  
+    padding: 0 5px;
+  }
+  .word{
+    text-align: right;  
+    width: 100px;
+  }
+  .clue{
+    width: 500px;
+  }
+  
+  
+  .crossword{
+    display: block;  
+    background-color: rgb(32,32,32);  
+  }
+  .square{  
+    margin: 0 1px 1px 0;
+    display: inline-block;
+    font: 24px Calibri;
+    width: 1.25em;
+    height: 1.25em;
+    line-height: 1.25em;
+    vertical-align: middle;
+    
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .letter{
+    background-color: rgb(255,255,255);
+     
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+  }
+  .char:focus{
+    -webkit-box-shadow: 0 0 0 2px rgba(255,32,32,1);
+    -moz-box-shadow: 0 0 0 2px rgba(255,32,32,1);
+    box-shadow: inset 0 0 0 2px rgba(255,32,32,1);  
+  }
+  .char {
+    font-size:24px;
+    text-transform: uppercase;
+    outline: 0;
+    border: 0;
+    padding: 0;
+    margin: -1px 0 0 -1px;
+    width: 1.35em;
+    height: 1.35em;
+    text-align: center;
+    background: none; 
+  } 
+  
+  .hide{
+    visibility: hidden;
+  }
+  
+  .clueReadOnly
+  {
+    border: 0 ;
+    outline: 0;
+    color:#303030 !important;
+    background:none;
+  }
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 243b112..b915472 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -84,6 +84,9 @@ const Navbar = () => {
 				<span>
 					<Link href="/department/spec-plus">Spec+</Link>
 				</span>
+				<span>
+					<Link href="/games/games">Games</Link>
+				</span>
 				<span>
 					<Link href="/about/recruitments">Recruitments</Link>
 				</span>
diff --git a/pages/games/crossword.js b/pages/games/crossword.js
new file mode 100644
index 0000000..7aaad8d
--- /dev/null
+++ b/pages/games/crossword.js
@@ -0,0 +1,13 @@
+function setup() {
+    createCanvas(800,800);
+    rectMode(CENTER);
+    textAlign(CENTER);
+}
+
+function draw() {
+    game();
+}
+
+function game(){
+    background(150, 230, 240);
+}
\ No newline at end of file
diff --git a/pages/games/games.tsx b/pages/games/games.tsx
new file mode 100644
index 0000000..5eb3a1e
--- /dev/null
+++ b/pages/games/games.tsx
@@ -0,0 +1,423 @@
+//@ts-nocheck
+
+import Head from "next/head";
+import {useState, useEffect } from 'react';
+import styles from "../../styles/crossword.module.css";
+
+const GamesPage = () => {
+
+    useEffect(() => {    
+
+var board, wordArr, wordBank, wordsActive, mode;
+
+var Bounds = {  
+  top:0, right:0, bottom:0, left:0,
+
+  Update:function(x,y){
+    this.top = Math.min(y,this.top);
+    this.right = Math.max(x,this.right);
+    this.bottom = Math.max(y,this.bottom);
+    this.left = Math.min(x,this.left);
+  },
+  
+  Clean:function(){
+    this.top = 999;
+    this.right = 0;
+    this.bottom = 0;    
+    this.left = 999;
+  }
+};
+
+
+function Play(){
+  var letterArr = document.getElementsByClassName('letter');
+  
+  for(var i = 0; i < letterArr.length; i++){
+    letterArr[i].innerHTML = "<input class='char' type='text' maxlength='1'></input>";
+  }
+  
+  mode = 0;
+  ToggleInputBoxes(false);
+}
+
+
+function Create(){
+  if (mode === 0){
+    ToggleInputBoxes(true);
+    document.getElementById("crossword")!.innerHTML = BoardToHtml(" ")
+    mode = 1;
+  }
+  else{  
+    GetWordsFromInput();
+
+    for(var i = 0, isSuccess=false; i < 10 && !isSuccess; i++){
+      CleanVars();
+      isSuccess = PopulateBoard();
+    }
+
+    document.getElementById("crossword")!.innerHTML = 
+      (isSuccess) ? BoardToHtml(" ") : "Failed to find crossword." ;
+  }
+}
+
+
+function ToggleInputBoxes(active){
+  var w=document.getElementsByClassName('word'),
+      d=document.getElementsByClassName('clue');
+  
+  for(var i=0;i<w.length; i++){
+    if(active===true){
+      RemoveClass(w[i], 'hide');
+      RemoveClass(d[i], 'clueReadOnly');
+      d[i].disabled = '';
+    }
+    else{
+      AddClass(w[i], 'hide');
+      AddClass(d[i], 'clueReadOnly');
+      d[i].disabled = 'readonly';
+    }
+  }
+}
+
+
+function GetWordsFromInput(){
+  wordArr = [];  
+  for(var i=0,val,w=document.getElementsByClassName("word");i<w.length;i++){
+    val = w[i].value.toUpperCase();
+    if (val !== null && val.length > 1){wordArr.push(val);}
+  }
+}
+
+
+function CleanVars(){
+  Bounds.Clean();
+  wordBank = [];
+  wordsActive = [];
+  board = [];
+  
+  for(var i = 0; i < 32; i++){
+    board.push([]);
+    for(var j = 0; j < 32; j++){
+      board[i].push(null);
+    }
+  }
+}
+
+
+function PopulateBoard(){
+  PrepareBoard();
+  
+  for(var i=0,isOk=true,len=wordBank.length; i<len && isOk; i++){
+    isOk = AddWordToBoard();
+  }  
+  return isOk;
+}
+
+
+function PrepareBoard(){
+  wordBank=[];
+  
+  for(var i = 0, len = wordArr.length; i < len; i++){
+    wordBank.push(new WordObj(wordArr[i]));
+  }
+  
+  for(i = 0; i < wordBank.length; i++){
+    for(var j = 0, wA=wordBank[i]; j<wA.char.length; j++){
+      for(var k = 0, cA=wA.char[j]; k<wordBank.length; k++){
+        for(var l = 0,wB=wordBank[k]; k!==i && l<wB.char.length; l++){
+          wA.totalMatches += (cA === wB.char[l])?1:0;
+        }
+      }
+    }
+  }  
+}
+
+function AddWordToBoard(){
+  var i, len, curIndex, curWord, curChar, curMatch, testWord, testChar, 
+      minMatchDiff = 9999, curMatchDiff;  
+
+  if(wordsActive.length < 1){
+    curIndex = 0;
+    for(i = 0, len = wordBank.length; i < len; i++){
+      if (wordBank[i].totalMatches < wordBank[curIndex].totalMatches){
+        curIndex = i;
+      }
+    }
+    wordBank[curIndex].successfulMatches = [{x:12,y:12,dir:0}];
+  }
+  else{  
+    curIndex = -1;
+    
+    for(i = 0, len = wordBank.length; i < len; i++){
+      curWord = wordBank[i];
+      curWord.effectiveMatches = 0;
+      curWord.successfulMatches = [];
+      for(var j = 0, lenJ = curWord.char.length; j < lenJ; j++){
+        curChar = curWord.char[j];
+        for (var k = 0, lenK = wordsActive.length; k < lenK; k++){
+          testWord = wordsActive[k];
+          for (var l = 0, lenL = testWord.char.length; l < lenL; l++){
+            testChar = testWord.char[l];            
+            if (curChar === testChar){
+              curWord.effectiveMatches++;
+              
+              var curCross = {x:testWord.x,y:testWord.y,dir:0};              
+              if(testWord.dir === 0){                
+                curCross.dir = 1;
+                curCross.x += l;
+                curCross.y -= j;
+              } 
+              else{
+                curCross.dir = 0;
+                curCross.y += l;
+                curCross.x -= j;
+              }
+              
+              var isMatch = true;
+              
+              for(var m = -1, lenM = curWord.char.length + 1; m < lenM; m++){
+                var crossVal = [];
+                if (m !== j){
+                  if (curCross.dir === 0){
+                    var xIndex = curCross.x + m;
+                    
+                    if (xIndex < 0 || xIndex > board.length){
+                      isMatch = false;
+                      break;
+                    }
+                    
+                    crossVal.push(board[xIndex][curCross.y]);
+                    crossVal.push(board[xIndex][curCross.y + 1]);
+                    crossVal.push(board[xIndex][curCross.y - 1]);
+                  }
+                  else{
+                    var yIndex = curCross.y + m;
+                    
+                    if (yIndex < 0 || yIndex > board[curCross.x].length){
+                      isMatch = false;
+                      break;
+                    }
+                    
+                    crossVal.push(board[curCross.x][yIndex]);
+                    crossVal.push(board[curCross.x + 1][yIndex]);
+                    crossVal.push(board[curCross.x - 1][yIndex]);
+                  }
+
+                  if(m > -1 && m < lenM-1){
+                    if (crossVal[0] !== curWord.char[m]){
+                      if (crossVal[0] !== null){
+                        isMatch = false;                  
+                        break;
+                      }
+                      else if (crossVal[1] !== null){
+                        isMatch = false;
+                        break;
+                      }
+                      else if (crossVal[2] !== null){
+                        isMatch = false;                  
+                        break;
+                      }
+                    }
+                  }
+                  else if (crossVal[0] !== null){
+                    isMatch = false;                  
+                    break;
+                  }
+                }
+              }
+              
+              if (isMatch === true){                
+                curWord.successfulMatches.push(curCross);
+              }
+            }
+          }
+        }
+      }
+      
+      curMatchDiff = curWord.totalMatches - curWord.effectiveMatches;
+      
+      if (curMatchDiff<minMatchDiff && curWord.successfulMatches.length>0){
+        curMatchDiff = minMatchDiff;
+        curIndex = i;
+      }
+      else if (curMatchDiff <= 0){
+        return false;
+      }
+    }
+  }
+  
+  if (curIndex === -1){
+    return false;
+  }
+    
+  var spliced = wordBank.splice(curIndex, 1);
+  wordsActive.push(spliced[0]);
+  
+  var pushIndex = wordsActive.length - 1,
+      rand = Math.random(),
+      matchArr = wordsActive[pushIndex].successfulMatches,
+      matchIndex = Math.floor(rand * matchArr.length),  
+      matchData = matchArr[matchIndex];
+  
+  wordsActive[pushIndex].x = matchData.x;
+  wordsActive[pushIndex].y = matchData.y;
+  wordsActive[pushIndex].dir = matchData.dir;
+  
+  for(i = 0, len = wordsActive[pushIndex].char.length; i < len; i++){
+    var xIndex = matchData.x,
+        yIndex = matchData.y;
+    
+    if (matchData.dir === 0){
+      xIndex += i;    
+      board[xIndex][yIndex] = wordsActive[pushIndex].char[i];
+    }
+    else{
+      yIndex += i;  
+      board[xIndex][yIndex] = wordsActive[pushIndex].char[i];
+    }
+    
+    Bounds.Update(xIndex,yIndex);
+  }
+    
+  return true;
+}
+
+
+function BoardToHtml(blank){
+  for(var i=Bounds.top-1, str=""; i<Bounds.bottom+2; i++){
+    str+="<div class='row'>";
+    for(var j=Bounds.left-1; j<Bounds.right+2; j++){
+      str += BoardCharToElement(board[j][i]);
+    }
+    str += "</div>";
+  }
+  return str;
+}
+
+
+function BoardCharToElement(c){
+  var arr=(c)?['square','letter']:['square'];
+  return EleStr('div',[{a:'class',v:arr}],c);
+}
+
+function WordObj(stringValue){
+  this.string = stringValue;
+  this.char = stringValue.split("");
+  this.totalMatches = 0;
+  this.effectiveMatches = 0;
+  this.successfulMatches = [];  
+}
+
+function RegisterEvents(){
+  document.getElementById("crossword").onfocus = function (){ 
+    return false; }
+  document.getElementById("btnCreate").addEventListener('click',Create,false);
+  document.getElementById("btnPlay").addEventListener('click',Play,false);
+}
+RegisterEvents();
+
+function EleStr(e,c,h){
+  h = (h)?h:"";
+  for(var i=0,s="<"+e+" "; i<c.length; i++){
+    s+=c[i].a+ "='"+ArrayToString(c[i].v," ")+"' ";    
+  }
+  return (s+">"+h+"</"+e+">");
+}
+
+function ArrayToString(a,s){
+  if(a===null||a.length<1)return "";
+  if(s===null)s=",";
+  for(var r=a[0],i=1;i<a.length;i++){r+=s+a[i];}
+  return r;
+}
+
+function AddClass(ele,classStr){
+  ele.className = ele.className.replaceAll(' '+classStr,'')+' '+classStr;
+}
+
+function RemoveClass(ele,classStr){
+  ele.className = ele.className.replaceAll(' '+classStr,'');
+}
+
+function ToggleClass(ele,classStr){
+  var str = ele.className.replaceAll(' '+classStr,'');
+  ele.className = (str.length===ele.className.length)?str+' '+classStr:str;
+}
+
+String.prototype.replaceAll = function (replaceThis, withThis) {
+   var re = new RegExp(replaceThis,"g"); 
+   return this.replace(re, withThis);
+};
+
+Create();
+Play();
+        
+        }, []);
+	
+    return (
+		<>
+    
+			<Head>
+      <link rel="stylesheet" href="/_next/static/chunks/crossword.module.css"/>
+				<title>Games | The Spectator</title>
+			</Head>
+			<main id={styles.main}>
+				<h1>Crossword</h1>
+    <div className="container">
+  <button className="btn" id="btnCreate">Create</button>
+  <button className="btn" id="btnPlay">Play</button>
+  <br/><br/>  
+
+  <div className="center crossword" id="crossword"></div><br/>
+
+  <div className="center">
+
+    <div className="line">
+      <input className="word" type="text" value="Pen" />
+      <input className="clue" value="A writing utensil for written portions in the regents" />
+    </div>
+
+    <div className="line">
+      <input className="word" type="text" value="Pencil" />
+      <input className="clue" value="A writing utensil for filling out Scantrons" />
+    </div>
+
+    <div className="line">
+      <input className="word" type="text" value="stapler"/>
+      <input className="clue" value="For connecting late worksheets together" />
+    </div>
+    <div className="line">
+      <input className="word" type="text" value="bag"/>
+      <input className="clue" value="Where all students put their belongings" />
+    </div>
+    <div className="line">
+      <input className="word" type="text" value="paper"/>
+      <input className="clue" value="A rectangular white slip for writing" />
+    </div>
+    <div className="line">
+      <input className="word" type="text" value="ruler"/>
+      <input className="clue" value="For measuring the length of things" />
+    </div>
+    <div className="line">
+      <input className="word" type="text" value="glue"/>
+      <input className="clue" value="For sticking objects together" />
+    </div>
+    <div className="line">
+      <input className="word" type="text" value="eraser"/>
+      <input className="clue" value="A utensil used to remove mistakes" />
+    </div>
+    <div className="line">
+      <input className="word" type="text" value="sharpener"/>
+      <input className="clue" value="For shaving away the surface of pencils" />
+    </div>
+
+  </div>
+</div>
+            
+			</main>
+		</>
+	);
+   
+};
+
+export default GamesPage;
diff --git a/styles/crossword.module.css b/styles/crossword.module.css
new file mode 100644
index 0000000..11fb79c
--- /dev/null
+++ b/styles/crossword.module.css
@@ -0,0 +1,94 @@
+
+  .container{
+    position: absolute;
+    bottom: 0; top: 0; left: 0; right: 0;
+    text-align: center;
+  }
+  .center{
+    margin: 0 auto;
+  }
+  
+  .btn{
+    margin: 8px 4px 0;  
+  }
+  .btn{
+    width: 172px;
+    height: 28px;
+  }
+  
+  .line{  
+    height: 2em;
+  }
+  .word, .clue{
+    display: inline-block;
+    height: 1.5em;  
+    padding: 0 5px;
+  }
+  .word{
+    text-align: right;  
+    width: 100px;
+  }
+  .clue{
+    width: 500px;
+  }
+  
+  
+  .crossword{
+    display: block;  
+    background-color: rgb(32,32,32);  
+  }
+  .square{  
+    margin: 0 1px 1px 0;
+    display: inline-block;
+    font: 24px Calibri;
+    width: 1.25em;
+    height: 1.25em;
+    line-height: 1.25em;
+    vertical-align: middle;
+    
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .letter{
+    background-color: rgb(255,255,255);
+     
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+  }
+  .char:focus{
+    -webkit-box-shadow: 0 0 0 2px rgba(255,32,32,1);
+    -moz-box-shadow: 0 0 0 2px rgba(255,32,32,1);
+    box-shadow: inset 0 0 0 2px rgba(255,32,32,1);  
+  }
+  .char {
+    font-size:24px;
+    text-transform: uppercase;
+    outline: 0;
+    border: 0;
+    padding: 0;
+    margin: -1px 0 0 -1px;
+    width: 1.35em;
+    height: 1.35em;
+    text-align: center;
+    background: none; 
+  } 
+  
+  .hide{
+    visibility: hidden;
+  }
+  
+  .clueReadOnly
+  {
+    border: 0 ;
+    outline: 0;
+    color:#303030 !important;
+    background:none;
+  }
\ No newline at end of file

From 6edce7881128792de1191cefbafba0a893f97115 Mon Sep 17 00:00:00 2001
From: Zidanni Clerigo <zclerigo40@stuy.edu>
Date: Fri, 16 Jun 2023 00:05:24 -0400
Subject: [PATCH 2/2] add Games tab with interactive crossword users can play.
 Crosswords generate using words provided by developers

---
 pages/games/crossword.js    | 13 -----
 pages/games/games.tsx       | 60 +++++++++++++++++------
 styles/Crossword.module.css | 14 ++++++
 styles/crossword.module.css | 94 ------------------------------------
 styles/globals.css          | 95 +++++++++++++++++++++++++++++++++++++
 5 files changed, 155 insertions(+), 121 deletions(-)
 delete mode 100644 pages/games/crossword.js
 create mode 100644 styles/Crossword.module.css
 delete mode 100644 styles/crossword.module.css

diff --git a/pages/games/crossword.js b/pages/games/crossword.js
deleted file mode 100644
index 7aaad8d..0000000
--- a/pages/games/crossword.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function setup() {
-    createCanvas(800,800);
-    rectMode(CENTER);
-    textAlign(CENTER);
-}
-
-function draw() {
-    game();
-}
-
-function game(){
-    background(150, 230, 240);
-}
\ No newline at end of file
diff --git a/pages/games/games.tsx b/pages/games/games.tsx
index 5eb3a1e..70f4949 100644
--- a/pages/games/games.tsx
+++ b/pages/games/games.tsx
@@ -2,8 +2,7 @@
 
 import Head from "next/head";
 import {useState, useEffect } from 'react';
-import styles from "../../styles/crossword.module.css";
-
+import styles from  "../../styles/Crossword.module.css";
 const GamesPage = () => {
 
     useEffect(() => {    
@@ -284,7 +283,7 @@ function AddWordToBoard(){
 
 
 function BoardToHtml(blank){
-  for(var i=Bounds.top-1, str=""; i<Bounds.bottom+2; i++){
+  for(var i=Bounds.top-1, str="<br/><br/>"; i<Bounds.bottom+2; i++){
     str+="<div class='row'>";
     for(var j=Bounds.left-1; j<Bounds.right+2; j++){
       str += BoardCharToElement(board[j][i]);
@@ -311,8 +310,6 @@ function WordObj(stringValue){
 function RegisterEvents(){
   document.getElementById("crossword").onfocus = function (){ 
     return false; }
-  document.getElementById("btnCreate").addEventListener('click',Create,false);
-  document.getElementById("btnPlay").addEventListener('click',Play,false);
 }
 RegisterEvents();
 
@@ -358,18 +355,15 @@ Play();
 		<>
     
 			<Head>
-      <link rel="stylesheet" href="/_next/static/chunks/crossword.module.css"/>
+     
 				<title>Games | The Spectator</title>
 			</Head>
-			<main id={styles.main}>
-				<h1>Crossword</h1>
+      
     <div className="container">
-  <button className="btn" id="btnCreate">Create</button>
-  <button className="btn" id="btnPlay">Play</button>
   <br/><br/>  
 
   <div className="center crossword" id="crossword"></div><br/>
-
+  <section id={styles.table}>
   <div className="center">
 
     <div className="line">
@@ -410,11 +404,49 @@ Play();
       <input className="word" type="text" value="sharpener"/>
       <input className="clue" value="For shaving away the surface of pencils" />
     </div>
-
   </div>
+  </section>
 </div>
-            
-			</main>
+<main id={styles.main}>
+           <h1>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            <br/>
+            - A writing utensil for written portions in the regents
+            <br/>
+            <br/>
+            - A writing utensil for filling out Scantrons
+            <br/>
+            <br/>
+            - For connecting late worksheets together
+            <br/>
+            <br/>
+            - Where all students put their belongings
+            <br/>
+            <br/>
+            - A rectangular white slip for writing
+            <br/>
+            <br/>
+            - For measuring the length of things
+            <br/>
+            <br/>
+            - A utensil used to remove mistakes
+            <br/>
+            <br/> 
+            - For shaving away the surface of pencils
+           </h1> 
+    </main>
 		</>
 	);
    
diff --git a/styles/Crossword.module.css b/styles/Crossword.module.css
new file mode 100644
index 0000000..a619750
--- /dev/null
+++ b/styles/Crossword.module.css
@@ -0,0 +1,14 @@
+#main {
+    margin: 0;
+    border: 15px black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#table {
+    margin: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/styles/crossword.module.css b/styles/crossword.module.css
deleted file mode 100644
index 11fb79c..0000000
--- a/styles/crossword.module.css
+++ /dev/null
@@ -1,94 +0,0 @@
-
-  .container{
-    position: absolute;
-    bottom: 0; top: 0; left: 0; right: 0;
-    text-align: center;
-  }
-  .center{
-    margin: 0 auto;
-  }
-  
-  .btn{
-    margin: 8px 4px 0;  
-  }
-  .btn{
-    width: 172px;
-    height: 28px;
-  }
-  
-  .line{  
-    height: 2em;
-  }
-  .word, .clue{
-    display: inline-block;
-    height: 1.5em;  
-    padding: 0 5px;
-  }
-  .word{
-    text-align: right;  
-    width: 100px;
-  }
-  .clue{
-    width: 500px;
-  }
-  
-  
-  .crossword{
-    display: block;  
-    background-color: rgb(32,32,32);  
-  }
-  .square{  
-    margin: 0 1px 1px 0;
-    display: inline-block;
-    font: 24px Calibri;
-    width: 1.25em;
-    height: 1.25em;
-    line-height: 1.25em;
-    vertical-align: middle;
-    
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  .letter{
-    background-color: rgb(255,255,255);
-     
-    -webkit-touch-callout: text;
-    -webkit-user-select: text;
-    -khtml-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-  }
-  .char:focus{
-    -webkit-box-shadow: 0 0 0 2px rgba(255,32,32,1);
-    -moz-box-shadow: 0 0 0 2px rgba(255,32,32,1);
-    box-shadow: inset 0 0 0 2px rgba(255,32,32,1);  
-  }
-  .char {
-    font-size:24px;
-    text-transform: uppercase;
-    outline: 0;
-    border: 0;
-    padding: 0;
-    margin: -1px 0 0 -1px;
-    width: 1.35em;
-    height: 1.35em;
-    text-align: center;
-    background: none; 
-  } 
-  
-  .hide{
-    visibility: hidden;
-  }
-  
-  .clueReadOnly
-  {
-    border: 0 ;
-    outline: 0;
-    color:#303030 !important;
-    background:none;
-  }
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index b8d4090..4e2401f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -132,3 +132,98 @@ a {
 .discrete-link:focus {
 	text-decoration-color: var(--accent);
 }
+
+
+.container{
+    position: absolute;
+    bottom: 0; top: 0; left: 0; right: 0;
+    text-align: center;
+  }
+  .center{
+    margin: 0 auto;
+  }
+  
+  .btn{
+    margin: 8px 4px 0;  
+  }
+  .btn{
+    width: 172px;
+    height: 28px;
+  }
+  
+  .line{  
+    height: 2em;
+  }
+  .word, .clue{
+    display: inline-block;
+    height: 1.5em;  
+    padding: 0 5px;
+  }
+  .word{
+    text-align: right;  
+    width: 100px;
+  }
+  .clue{
+    width: 500px;
+  }
+  
+  
+  .crossword{
+    display: block;  
+    background-color: rgb(32,32,32);  
+  }
+  .square{  
+    margin: 0 1px 1px 0;
+    display: inline-block;
+    font: 24px Calibri;
+    width: 1.25em;
+    height: 1.25em;
+    line-height: 1.25em;
+    vertical-align: middle;
+    
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .letter{
+    background-color: rgb(255,255,255);
+     
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+  }
+  .char:focus{
+    -webkit-box-shadow: 0 0 0 2px rgba(255,32,32,1);
+    -moz-box-shadow: 0 0 0 2px rgba(255,32,32,1);
+    box-shadow: inset 0 0 0 2px rgba(255,32,32,1);  
+  }
+  .char {
+    font-size:24px;
+    text-transform: uppercase;
+    outline: 0;
+    border: 0;
+    padding: 0;
+    margin: -1px 0 0 -1px;
+    width: 1.35em;
+    height: 1.35em;
+    text-align: center;
+    background: none; 
+  } 
+  
+  .hide{
+    visibility: hidden;
+  }
+  
+  .clueReadOnly
+  {
+    border: 0 ;
+    outline: 0;
+    color:#303030 !important;
+    background:none;
+  }
\ No newline at end of file