Skip to content

Commit f618473

Browse files
rubjorperrubjorper
committed
refactor: fix animation2, move canvas to globals
1 parent d3b2778 commit f618473

16 files changed

Lines changed: 169 additions & 88 deletions

‎Animation2.html‎

Lines changed: 8 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,6 @@
55
<title>Animação 2</title>
66
<meta charset="UTF-8">
77
<link rel="icon" href="resources/HTML5.png"/>
8-
<script type="text/javascript" src="js/JSTools.js"></script>
9-
<script charset="UTF-8" src="resources/languages/Animation 2.js"></script>
10-
<script>
11-
function resizeCanvas() {
12-
if (canvas) {
13-
memCanvas.width = canvas.width;
14-
memCanvas.height = canvas.height;
15-
memD.drawImage(canvas, 0, 0);
16-
17-
canvas.width = window.innerWidth;
18-
canvas.height = window.innerHeight;
19-
20-
c.drawImage(memCanvas, 0, 0);
21-
}
22-
}
23-
</script>
248
<style>
259
body {
2610
margin: 0px;
@@ -52,44 +36,17 @@
5236
}
5337
</style>
5438
</head>
55-
<body onresize="resizeCanvas();">
39+
<body>
5640
<canvas id="myCanvas" width="1366" height="638">O teu browser não suporta a tag canvas do HTML5.</canvas>
5741
<div id="toolBar">
58-
<button id="backToIndex" onclick="backToIndex();">Voltar</button>
59-
<button id="reloadButton" onclick="location.reload(true)">Recarregar</button>
60-
<select id="dropdownLanguage" onchange="setLanguage(this.value)">
42+
<button id="backToIndex">Voltar</button>
43+
<button id="reloadButton">Recarregar</button>
44+
<select id="dropdownLanguage">
6145
<option value="pt">Português</option>
6246
<option value="en">English</option>
63-
</select><script>/*ONLOAD=*/var dropdownLanguage = element("dropdownLanguage");if(getCookie("language")!=undefined&&getCookie("language")!=""){dropdownLanguage.value=getCookie("language")}else{dropdownLanguage.value="pt"}</script>
47+
</select>
6448
</div>
65-
<script>
66-
67-
var width = window.innerWidth;
68-
var height = window.innerHeight;
69-
var canvas = element("myCanvas");
70-
var c = canvas.getContext("2d");
71-
canvas.width = innerWidth;
72-
canvas.height = innerHeight;
73-
74-
var memCanvas = document.createElement("canvas");
75-
var memD = memCanvas.getContext("2d");
76-
77-
window.requestAnimationFrame(loop);
78-
function loop() {
79-
width = window.innerWidth;
80-
height = window.innerHeight;
81-
drawRandomPixel(random(0, width, 1), random(0, height, 1));
82-
window.requestAnimationFrame(loop);
83-
}
84-
85-
function drawRandomPixel(x, y) {
86-
c.beginPath();
87-
c.strokeStyle = getRandomColor();
88-
c.moveTo(x, y);
89-
c.lineTo(x + 1, y + 1);
90-
c.stroke();
91-
}
92-
</script>
93-
<script name="Define Language">setLanguage(getCookie("language"));</script>
94-
<!--</body>--></body>
49+
<script type="module" src="src/Animation2/entrypoint.ts"></script>
50+
<script name="Define Language"></script>
51+
</body>
9552
</html>

‎src/Animation2/Main.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { backToIndex, element, getCookie, getRandomColor, random } from "../JSTools";
2+
import { setLanguage } from "../languages/Animation2";
3+
4+
// <select> ONLOAD=
5+
var dropdownLanguage = element('dropdownLanguage') as HTMLSelectElement;
6+
if (getCookie('language') != undefined && getCookie('language') != '') {
7+
dropdownLanguage.value = getCookie('language');
8+
} else {
9+
dropdownLanguage.value = 'pt';
10+
}
11+
12+
13+
element("backToIndex")!.onclick = backToIndex;
14+
element('reloadButton')!.onclick = () =>
15+
(location.reload as (forceGet: boolean) => void)(true);
16+
dropdownLanguage.onchange = () => setLanguage(dropdownLanguage.value as "pt" | "en");
17+
18+
19+
var width = window.innerWidth;
20+
var height = window.innerHeight;
21+
const canvas = element("myCanvas") as HTMLCanvasElement;
22+
if (canvas == null) {
23+
throw new Error("Canvas is null.");
24+
}
25+
26+
var c = canvas.getContext('2d') as CanvasRenderingContext2D;
27+
canvas.width = innerWidth;
28+
canvas.height = innerHeight;
29+
30+
var memCanvas = document.createElement('canvas');
31+
var memD = memCanvas.getContext('2d');
32+
33+
document.body.onresize = resizeCanvas;
34+
if (document.readyState === "loading") {
35+
// Loading hasn't finished yet
36+
document.addEventListener("DOMContentLoaded", resizeCanvas);
37+
} else {
38+
// `DOMContentLoaded` has already fired
39+
resizeCanvas();
40+
}
41+
42+
function resizeCanvas() {
43+
if (canvas) {
44+
memCanvas.width = canvas.width;
45+
memCanvas.height = canvas.height;
46+
if (memD) {
47+
memD.drawImage(canvas, 0, 0);
48+
}
49+
50+
canvas.width = window.innerWidth;
51+
canvas.height = window.innerHeight;
52+
53+
c.drawImage(memCanvas, 0, 0);
54+
}
55+
}
56+
57+
window.requestAnimationFrame(loop);
58+
function loop() {
59+
width = window.innerWidth;
60+
height = window.innerHeight;
61+
drawRandomPixel(random(0, width, 1), random(0, height, 1));
62+
window.requestAnimationFrame(loop);
63+
}
64+
65+
function drawRandomPixel(x: number, y: number) {
66+
c.beginPath();
67+
c.strokeStyle = getRandomColor();
68+
c.moveTo(x, y);
69+
c.lineTo(x + 1, y + 1);
70+
c.stroke();
71+
}
72+
73+
//Define language
74+
setLanguage(getCookie("language") as "pt" | "en");
75+
76+
export { canvas };

‎src/Animation2/entrypoint.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// import '../globals';
2+
// import '../JSTools';
3+
import './Main';

‎src/JSTools.ts‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { c as ctx, canvas } from "./Monopoly/Initialization";
21
import './globals';
3-
2+
let canvas: HTMLCanvasElement;
3+
let ctx: CanvasRenderingContext2D;
44
/*--------------------------------------Function-1------------------------------------------------------------------*/
55
function backToIndex(){ /*collapse(1,313)*/
66
var currentURL = location.href;
@@ -21,6 +21,7 @@ function getRandomColor() {
2121
}
2222
/*--------------------------------------Function-4------------------------------------------------------------------*/
2323
function resizeCanvas(){
24+
const canvas = (window as any).globals.canvas;
2425
//Get Window Ratio
2526
(window as any).globals.windowRatio = window.innerWidth / (window.innerHeight - (window as any).globals.toolBarHeight);
2627
//Get Canvas Ratio
@@ -141,6 +142,8 @@ Array.prototype.getControlByName = function (name: string) { //Ver se é mesmo n
141142
var functionSaved = false;
142143
var functionSave: () => void;
143144
function AnimationLOOP (funct: () => void) {
145+
const canvas = (window as any).globals.canvas;
146+
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
144147
if (!functionSaved) {
145148
functionSave = funct;
146149
functionSaved = true;
@@ -207,6 +210,8 @@ class Rectangle extends Control {
207210
}
208211

209212
public draw() {
213+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
214+
210215
if (this.visible) {
211216
ctx.fillStyle = this.color;
212217
ctx.strokeStyle = this.outlineColor;
@@ -221,6 +226,8 @@ class Rectangle extends Control {
221226
}
222227

223228
drawParts_outline() {
229+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
230+
224231
switch (this.outlinePosition.toLowerCase()) {
225232
case "inner":
226233
ctx.strokeRect(this.x + this.outlineWidth / 2, this.y + this.outlineWidth / 2, this.width - this.outlineWidth, this.height - this.outlineWidth);
@@ -235,6 +242,8 @@ class Rectangle extends Control {
235242
}
236243

237244
drawParts_patterns() {
245+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
246+
238247
switch (this.doPattern.toLowerCase()) {
239248
case "diagonals":
240249
ctx.beginPath();
@@ -291,6 +300,8 @@ class Circle extends Control {
291300
}
292301

293302
draw() {
303+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
304+
294305
if (this.visible) {
295306
ctx.beginPath();
296307
ctx.fillStyle = this.color;
@@ -325,6 +336,8 @@ class Label extends Control {
325336
this.yAlign = "middle"; //Vertical Aligning
326337
}
327338
updateContext () {
339+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
340+
328341
if (this.visible) {
329342
ctx.fillStyle = this.color;
330343
ctx.textAlign = this.xAlign;
@@ -335,6 +348,8 @@ class Label extends Control {
335348
}
336349
}
337350
draw () {
351+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
352+
338353
if (this.visible) {
339354
/*
340355
var something;
@@ -364,6 +379,8 @@ function Button(x: number, y: number, width: number, height: number, text: strin
364379
Button.prototype = Object.create(Rectangle.prototype);
365380
Button.prototype.constructor = Button;
366381
Button.prototype.draw = function () {
382+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
383+
367384
if (this.visible) {
368385
//RECTANGLE DRAWING;
369386
//Configs:
@@ -406,6 +423,8 @@ Button.prototype.draw = function () {
406423
}
407424
}
408425
Button.prototype.onhover = function () {
426+
const ctx = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
427+
409428
if (this.xAlign == "center") { //Para sincronizar o hovering com os align, e para verificar se há hovering.
410429
var hovering1 = mouseX > this.x - ctx.measureText(this.text).width / 2 - this.hoveringHeightIncrement;
411430
var hovering2 = mouseX < this.x + ctx.measureText(this.text).width / 2 + this.hoveringHeightIncrement;

‎src/Monopoly/Initialization.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const canvas = element("canvas") as HTMLCanvasElement;
1515
if (canvas == null) {
1616
throw new Error("Canvas is null.");
1717
}
18+
(window as any).globals.canvas = canvas;
1819

1920
document.body.onresize = resizeCanvas;
2021
if (document.readyState === "loading") {
@@ -39,7 +40,7 @@ const canvasPadding = 10;
3940
resizeCanvas();
4041
const places: Place[] = [];
4142

42-
setLanguage(getCookie("language") as "pt" | "en")
43+
setLanguage(getCookie("language") as "pt" | "en");
4344

44-
export { canvas, ctx as c, canvasPadding, places };
45+
export { canvasPadding, places };
4546

‎src/Monopoly/Main.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { canvas, canvasPadding, places } from './Initialization';
1+
import { canvasPadding, places } from './Initialization';
22
import { Place, JSWindow } from './Classes';
33
import { AnimationLOOP, Control, Rectangle } from '../JSTools';
44

5+
const canvas = (window as any).globals.canvas;
6+
57
var gameBoard = new Rectangle(canvasPadding, canvasPadding, canvas.width-canvasPadding*2, canvas.height-canvasPadding*2);
68
gameBoard.doTranslate = true; //Space 980x980
79
gameBoard.color = "#B0B3B7";

‎src/TheBallGame/Classes.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { Circle, distance, Label, Rectangle, transparent } from "../JSTools";
22
import { downIsDown, leftIsDown, mouseIsDown, mouseX, mouseY, rightIsDown, setKeyStates, upIsDown } from "./Events";
3-
import { bellRing, c, canvas, click } from "./Initialization";
3+
import { bellRing, click } from "./Initialization";
44
import { game } from "./Main";
55

6+
const canvas = (window as any).globals.canvas;
7+
const c = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
8+
69
class TextButton extends Label {
710
hoveringHeightIncrement: number;
811
onclick: undefined | (() => void);

‎src/TheBallGame/Events.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { resizeCanvas } from "../JSTools";
2-
import { background, canvas } from "./Initialization";
2+
import { background } from "./Initialization";
33
import { game } from "./Main";
44

5+
const canvas = (window as any).globals.canvas;
6+
57
var lastKey;
68
var upIsDown = false;
79
var leftIsDown = false;

‎src/TheBallGame/Initialization.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const canvas = element("canvas") as HTMLCanvasElement;
1515
if (canvas == null) {
1616
throw new Error("Canvas is null.");
1717
}
18+
(window as any).globals.canvas = canvas;
1819

1920
//Creating variables for the elements...
2021
const background = element("background")!;
@@ -56,4 +57,5 @@ var bellRing = new Audio("resources/BellRing.wav");
5657
//Resizing Canvas...
5758
resizeCanvas();
5859

59-
export { canvas, ctx as c, click, bellRing, background };
60+
61+
export { click, bellRing, background };

‎src/TheBallGame/Main.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import "../languages/TheBallGame";
22
import { AnimationLOOP, download, Label, Rectangle } from "../JSTools";
3-
import { c } from "./Initialization";
43
import { setKeyStates } from "./Events";
54
import { Ball, GameState, TextButton } from "./Classes";
65

6+
const c = (window as any).globals.canvas.getContext('2d') as CanvasRenderingContext2D;
7+
78
var game = new GameState();
89
var mainMenu = new GameState();
910
var options = new GameState();
@@ -66,6 +67,7 @@ var debugFrameRate: number;
6667
var debugTimer: number;
6768

6869
// (window as any).globals.w = new JSWindow(700, 500);
70+
// (window as any).globals.w.container.closeButton = new TextButton(0, 0, "X", "center", 20, 5);
6971
// (window as any).globals.w.visible = true;
7072
// (window as any).globals.w.show();
7173

0 commit comments

Comments
 (0)