so://phie

blob: e9926411579076719b4b25f197e0fa139699197e (3610 bytes)[doc][blame][raw]

  1[
  2	{
  3		"id": "js",
  4		"name": "JavaScript",
  5		"url": "/js",
  6		"posts": [
  7			{
  8				"id": "js.game",
  9				"name": "Game",
 10				"syntax": "Game(width, height, { fps })",
 11				"description": "By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.",
 12				"url": "/js/game.js",
 13				"code": [
 14					"class DinoGame extends Game {",
 15					"\tconstructor() {",
 16					"\t\tsuper(900, 600);",
 17					"\t\tthis.point = { x: 100, y: 100 };",
 18					"\t}",
 19					"\tupdate() {",
 20					"\t\tthis.point.x += 1;",
 21					"\t}",
 22					"\trender(g) {",
 23					"\t\tsuper.render(g); // clear screen",
 24					"\t\tconst {x, y} = this.point;",
 25					"\t\tg.fillRect(x, y, 50, 50);",
 26					"\t}",
 27					"}",
 28					"",
 29					"const game = new DinoGame();",
 30					"document.body.append(game.canvas);",
 31					"",
 32					"game.start();"
 33				]
 34			},
 35			{
 36				"id": "js.surface",
 37				"name": "Surface",
 38				"syntax": "Surface(x, y, width, height)",
 39				"description": "Represents a rectangular surface with its own update and render method.",
 40				"url": "/js/game.js",
 41				"code": [
 42					"class Player extends Surface {",
 43					"\tconstructor(x, y) {",
 44					"\t\tsuper(x, y, 50, 50);",
 45					"\t}",
 46					"\tupdate() {",
 47					"\t\tthis.rect.x += 1;",
 48					"\t}",
 49					"\trender(g) {",
 50					"\t\tconst {x, y, width, height} = this.rect;",
 51					"\t\tg.fillRect(x, y, width, height);",
 52					"\t}",
 53					"}"
 54				]
 55			},
 56			{
 57				"id": "js.group",
 58				"name": "Group",
 59				"syntax": "Group()",
 60				"description": "Can be used to group specific elements for update and rendering purposes.",
 61				"url": "/js/game.js",
 62				"code": [
 63					"const group = new Group();",
 64					"group.add(...);",
 65					"",
 66					"group.update();",
 67					"group.render(g);"
 68				]
 69			},
 70			{
 71				"id": "js.rect",
 72				"name": "Rect",
 73				"syntax": "Rect(x, y, width, height)",
 74				"description": "Represents a rectangular hitbox.",
 75				"url": "/js/game.js"
 76			},
 77			{
 78				"id": "js.scalecanvas",
 79				"name": "scaleCanvas",
 80				"syntax": "scaleCanvas(canvas, width, height)",
 81				"description": "Scales a canvas to the device related pixel ratio.",
 82				"url": "/js/canvas.js"
 83			}
 84		]
 85	},
 86	{
 87		"id": "less",
 88		"name": "Less",
 89		"url": "/less",
 90		"posts": [
 91			{
 92				"id": "less.normalize",
 93				"name": "Normalize",
 94				"description": "Normalizes spacing and interactive elements and adds additional alignment classes.",
 95				"url": "/less/normalize.less",
 96				"code": [
 97					"// Required variables (define before import)",
 98					"@gap: px - Space between column elements",
 99					"@full-width: px - Maximum width for centered container elements",
100					"",
101					"// Alignment classes",
102					".col - Horizontal spacing",
103					".row - Inverts horziontal spacing",
104					".container - Align centered with horizontal spacing",
105					".container-fluid - Align full width with horizontal spacing",
106					"",
107					"// Structure",
108					".container-fluid {",
109					"\t.row {",
110					"\t\t.container {",
111					"\t\t\t...",
112					"\t\t}",
113					"\t}",
114					"}"
115				]
116			},
117			{
118				"id": "less.color",
119				"name": "Color",
120				"syntax": "@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]",
121				"description": "A collection of material colors inspired by the Google Material Colors.",
122				"url": "/less/color.less",
123				"code": [
124					"@color-black;",
125					"@color-teal-50;",
126					"@color-blue-500;"
127				]
128			},
129			{
130				"id": "less.icons",
131				"name": "Icons",
132				"syntax": ".ico",
133				"description": "Imports the Google Material Icons Fonts.",
134				"url": "/less/icons.less",
135				"code": [
136					"<span class=\"ico\">close</span>"
137				]
138			}
139		]
140	}