TheArmagan · June 16, 2021 07:10
diff --git a/scuffedOWOTLocal.html b/scuffedOWOTLocal.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our World Of Text Scuffed Edition</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      outline: none;
      font-family: monospace;
    }
    .input {
      width: 8px;
      height: 16px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }

    .input:hover {
      background-color: rgb(255, 255, 196);
    }
    .row {
      display: flex;
      width: 100vw;
      height: 16px;
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100vh;
    }
  </style>
 </head>
 <body>
  <div id="app" @keydown="onInput" tabindex="0" @mouseleave="save">
    <div class="container">
      <span v-for="y in rows" class="row">
        <div :ref="`i_${x}_${y}`" v-for="x in cols" type="text" class="input" :xy="`${x}_${y}`" @click="setCursorPos(x, y)" tabindex="0"> </div>
      </span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data() {
        return {
          rows: Math.floor(innerHeight / 16)-1,
          cols: Math.floor(innerWidth / 8)-1,
          x: 1,
          y: 1,
          lastLineX: 1,
          newUpdates: false,
          buf: new Map()
        }
      },
      mounted() {
        this.updateCursorVis("yellow", 0, 0);
        let dataToLoad = JSON.parse(localStorage.getItem("scuffedOWOTData") || "[]");
        this.buf = new Map(dataToLoad);
        this.buf.forEach((char, xy) => {
          let [x, y] = xy.split("_");
          this.setCharXY(x, y, char);
        });
      },
      methods: {
        save() {
          if (!this.newUpdates) return;
          console.log("save")
          localStorage.setItem("scuffedOWOTData", JSON.stringify(Array.from(app.buf.entries())));
          this.newUpdates = false;
        },
        setCharXY(x, y, char) {
          if (this.$refs?.[`i_${x}_${y}`]?.[0]) {
            this.newUpdates = true;
            this.$refs[`i_${x}_${y}`][0].textContent = char;
            this.buf.set(`${x}_${y}`, char);
          }
        },
        updateCursorVis(color="red", offsetX=0, offsetY=0) {
          if (this.$refs?.[`i_${this.x+offsetX}_${this.y + offsetY}`]?.[0]) {
            this.$refs[`i_${this.x + offsetX}_${this.y + offsetY}`][0].style.backgroundColor = color;
          }
        },
        setCursorPos(x, y) {
          this.updateCursorVis("white", 0, 0);
          this.x = x;
          this.y = y;
          this.lastLineX = this.x;
          this.updateCursorVis("yellow", 0, 0);
        },
        onInput(e) {
          console.log(e);
          this.updateCursorVis("white", 0, 0);
          switch (e.key) {
            case "Enter": {
              this.y = Math.min(this.y + 1, this.rows);
              this.x = this.lastLineX;
              break;
            }
            case "Backspace": {
              this.x = Math.max(this.x - 1, 1);
              this.setCharXY(this.x, this.y, " ");
              
              break;
            }
            case "ArrowUp": {
              this.y = Math.max(this.y - 1, 1);
              this.lastLineX = this.x;
              break;
            }
            case "ArrowDown": {
              this.y = Math.min(this.y + 1, this.rows);
              this.lastLineX = this.x;
              break;
            }
            case "ArrowLeft": {
              this.x = Math.max(this.x - 1, 1);
              break;
            }
            case "ArrowRight": {
              this.x = Math.min(this.x + 1, this.cols + 1);
              break;
            }
            default: {
              if (e.key.length == 1) {
                this.setCharXY(this.x, this.y, e.key);
                this.x = Math.min(this.x + 1, this.cols + 1);
              }
            }
          }
          this.updateCursorVis("yellow", 0, 0);
        }
      }
    });
    app.$mount("#app");

    window.addEventListener("resize", ()=>{
      app.rows = Math.floor(innerHeight / 16) - 1;
      app.cols = Math.floor(innerWidth / 8) - 1
      app.buf.forEach((char,xy)=>{
        let [x, y] = xy.split("_");
        app.setCharXY(x, y, char);
      })
    })
    // By Kıraç Armağan Önal
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Our World Of Text Scuffed Edition</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	outline: none;
	font-family: monospace;
	}
	.input {
	width: 8px;
	height: 16px;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	}

	.input:hover {
	background-color: rgb(255, 255, 196);
	}
	.row {
	display: flex;
	width: 100vw;
	height: 16px;
	}
	.container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	}
	</style>
	</head>
	<body>
	<div id="app" @keydown="onInput" tabindex="0" @mouseleave="save">
	<div class="container">
	<span v-for="y in rows" class="row">
	<div :ref="`i_${x}_${y}`" v-for="x in cols" type="text" class="input" :xy="`${x}_${y}`" @click="setCursorPos(x, y)" tabindex="0"> </div>
	</span>
	</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
	const app = new Vue({
	data() {
	return {
	rows: Math.floor(innerHeight / 16)-1,
	cols: Math.floor(innerWidth / 8)-1,
	x: 1,
	y: 1,
	lastLineX: 1,
	newUpdates: false,
	buf: new Map()
	}
	},
	mounted() {
	this.updateCursorVis("yellow", 0, 0);
	let dataToLoad = JSON.parse(localStorage.getItem("scuffedOWOTData") \|\| "[]");
	this.buf = new Map(dataToLoad);
	this.buf.forEach((char, xy) => {
	let [x, y] = xy.split("_");
	this.setCharXY(x, y, char);
	});
	},
	methods: {
	save() {
	if (!this.newUpdates) return;
	console.log("save")
	localStorage.setItem("scuffedOWOTData", JSON.stringify(Array.from(app.buf.entries())));
	this.newUpdates = false;
	},
	setCharXY(x, y, char) {
	if (this.$refs?.[`i_${x}_${y}`]?.[0]) {
	this.newUpdates = true;
	this.$refs[`i_${x}_${y}`][0].textContent = char;
	this.buf.set(`${x}_${y}`, char);
	}
	},
	updateCursorVis(color="red", offsetX=0, offsetY=0) {
	if (this.$refs?.[`i_${this.x+offsetX}_${this.y + offsetY}`]?.[0]) {
	this.$refs[`i_${this.x + offsetX}_${this.y + offsetY}`][0].style.backgroundColor = color;
	}
	},
	setCursorPos(x, y) {
	this.updateCursorVis("white", 0, 0);
	this.x = x;
	this.y = y;
	this.lastLineX = this.x;
	this.updateCursorVis("yellow", 0, 0);
	},
	onInput(e) {
	console.log(e);
	this.updateCursorVis("white", 0, 0);
	switch (e.key) {
	case "Enter": {
	this.y = Math.min(this.y + 1, this.rows);
	this.x = this.lastLineX;
	break;
	}
	case "Backspace": {
	this.x = Math.max(this.x - 1, 1);
	this.setCharXY(this.x, this.y, " ");

	break;
	}
	case "ArrowUp": {
	this.y = Math.max(this.y - 1, 1);
	this.lastLineX = this.x;
	break;
	}
	case "ArrowDown": {
	this.y = Math.min(this.y + 1, this.rows);
	this.lastLineX = this.x;
	break;
	}
	case "ArrowLeft": {
	this.x = Math.max(this.x - 1, 1);
	break;
	}
	case "ArrowRight": {
	this.x = Math.min(this.x + 1, this.cols + 1);
	break;
	}
	default: {
	if (e.key.length == 1) {
	this.setCharXY(this.x, this.y, e.key);
	this.x = Math.min(this.x + 1, this.cols + 1);
	}
	}
	}
	this.updateCursorVis("yellow", 0, 0);
	}
	}
	});
	app.$mount("#app");

	window.addEventListener("resize", ()=>{
	app.rows = Math.floor(innerHeight / 16) - 1;
	app.cols = Math.floor(innerWidth / 8) - 1
	app.buf.forEach((char,xy)=>{
	let [x, y] = xy.split("_");
	app.setCharXY(x, y, char);
	})
	})
	// By Kıraç Armağan Önal
	</script>
	</body>
	</html>