Update code examples

Closes #3

Author: ark120202

assets/layout/landing.html

@@ -27,17 +27,16 @@
 
 type Vector = [number, number, number];
 
-declare class Unit {
-    getLevel(): number;
+declare function findUnits(this: void, center: Vector, radius: number): Unit[];
+declare interface Unit {
     isEnemy(other: Unit): boolean;
     kill(): void;
-    FindUnitsInRadius(radius: number): Unit[];
 }</div>
             <!-- prettier-ignore -->
             <div class="example-item" id="ts-source"><b>// TS Source</b>
 
-function onSpellStart(caster: Unit, targetLocation: Vector): void {
-    const units = FindUnitsInRadius(targetLocation, 500);
+function onAbilityCast(this: void, caster: Unit, targetLocation: Vector) {
+    const units = findUnits(targetLocation, 500);
     const enemies = units.filter(unit => caster.isEnemy(unit));
 
     for (const enemy of enemies) {
@@ -48,13 +47,11 @@
         <!-- prettier-ignore -->
         <div class="example-item" id="lua"><b>-- Lua Output</b>
 
-function onSpellStart(caster, targetLocation)
-    local units = FindUnitsInRadius(targetLocation, 500);
-    local enemies = __TS__ArrayFilter(units, function(unit) return caster:isEnemy(unit) end);
-    for _, enemy in ipairs(enemies) do
-        do
-            enemy:kill();
-        end
+function onAbilityCast(caster, targetLocation)
+    local units = findUnits(targetLocation, 500)
+    local enemies = __TS__ArrayFilter(units, function(____, unit) return caster:isEnemy(unit) end)
+    for ____, enemy in ipairs(enemies) do
+        enemy:kill()
     end
 end</div>
     </div>

assets/styles/landing.scss

@@ -2,7 +2,6 @@
 
 main,
 header {
-    width: 900px;
     overflow: hidden;
     margin-left: auto;
     margin-right: auto;
@@ -47,7 +46,14 @@ nav {
     }
 }
 
+main {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+}
+
 #features {
+    max-width: 900px;
     margin-top: 30px;
     margin-bottom: 20px;
     display: flex;
@@ -66,44 +72,42 @@ nav {
     margin-bottom: 10px;
 }
 
-.example-item {
-    padding: (15px !important);
-    white-space: pre;
-    font-size: 12px;
-    font-family: $console-fonts;
+#example {
+    max-width: 100%;
+    margin-top: 70px;
 }
 
 #example #ts {
     display: flex;
-    border-bottom: solid 2px #5690fc;
+    @media screen and (max-width: 1200px) {
+        flex-direction: column;
+    }
 }
 
-#example {
-    margin-top: 70px;
-    width: 100%;
+.example-item {
+    padding: (15px !important);
+    white-space: pre;
+    font-size: 12px;
+    font-family: $console-fonts;
 }
 
-#ts-declarations,
-#ts-source {
-    display: inline-block;
-    overflow: hidden;
+@media screen and (max-width: 1200px) {
+    .example-item:not(#lua) {
+        border-bottom: solid 2px #5690fc;
+    }
 }
 
-#ts-declarations {
-    flex: 40%;
-}
+@media screen and (min-width: 1201px) {
+    #example #ts {
+        border-bottom: solid 2px #5690fc;
+    }
 
-#ts-source {
-    flex: 60%;
-    border-left: solid 2px #5690fc;
+    #ts-source {
+        border-left: solid 2px #5690fc;
+    }
 }
 
 @media screen and (max-width: 900px) {
-    main,
-    header {
-        width: 100%;
-    }
-
     nav {
         font-size: 24px;
     }
@@ -113,10 +117,6 @@ nav {
         margin-top: 15px;
     }
 
-    .example-item {
-        font-size: 9px;
-    }
-
     #example {
         margin-top: 25px;
     }

src/playground/code.ts

@@ -1,30 +1,20 @@
-const example = `/** @noSelfInFile */
-
-// Declare exposed API
+const example = `// Declare exposed API
 type Vector = [number, number, number];
 
-declare interface OnSpellStartEvent {
-    caster: Unit;
-    targetLocation: Vector;
-}
-
-declare class Unit {
-    getLevel(): number;
+declare function findUnits(this: void, center: Vector, radius: number): Unit[];
+declare interface Unit {
     isEnemy(other: Unit): boolean;
     kill(): void;
 }
 
-declare function print(...messages: any[]): void;
-declare function FindUnitsInRadius(location: Vector, radius: number): Unit[];
 
 // Use declared API in code
-function onSpellStart(event: OnSpellStartEvent): void {
-    const units = FindUnitsInRadius(event.targetLocation, 500);
-    const enemies = units.filter(unit => event.caster.isEnemy(unit));
+function onAbilityCast(this: void, caster: Unit, targetLocation: Vector) {
+    const units = findUnits(targetLocation, 500);
+    const enemies = units.filter(unit => caster.isEnemy(unit));
 
-    for (const unit of enemies) {
-        print(unit, unit.getLevel());
-        unit.kill();
+    for (const enemy of enemies) {
+        enemy.kill();
     }
 }
 `;