play.html

@t header

<style>

#social, #sub-form, #main-header, #logo {
display: none;
}

textarea {
width: 85% !important; 
//width:400px !important; 
height: calc(100vh - 300px); // 500px; 
font-family: 'Roboto Mono'; 
font-size:13px; 
//margin-top:20px; 
padding: 5px; 
    border: none;
    outline: none; 

background-color:#f5f5f5; 
} 
.menu {
//height: auto; 
} 
button {
width: 100px; 
font-size:20px; 
} 
.controls {
//padding-top:20px ; 
height:40px; 

} 
.example {
display:none; 
} 
.center {
max-width:1070px !important; 
} 
#status {
color:#777; 
font-size: 80%; 
font-family: 'Roboto Mono'; 
margin-top: 10px; 
} 

.output {
font-family: 'Roboto Mono'; 
 
} 

@@media (max-width: 1030px) {
	.buttons {
		display: none;
	}
}

.buttons button {
height: 30px; 
font-size:14px; 
margin-bottom:10px; 
width: 100%; 
} 
.lines {
//position:relative;
padding-top:5px; 
float:left; 
font-size:13px;
color:#aaa; 
text-align:right; 
background-color:#f5f5f5; 
} 
.lines div { 
} 

	@@media (max-width: 1500px) {
#social-extra {
display:none !important; 
} 

} 


</style> 

<script  src="/js/jquery.min.js"></script> 
<script src="/js/jquery-linedtextarea.js"></script> 


<script>


var ip = 'play.vlang.io' 
function run() {
	var body = $('textarea').val(); 
	$('.controls').css('visibility', 'hidden'); 
	$('.output').text('Waiting for remote server...') 
	$('#status').text('') 
	var http = 'https://';
	if (!ip.includes('play')) {
		http = 'http://'; 
	} 
	console.log(http + ip + '/compile') 
	$.post(http + ip + '/compile', {body:body}, function(resp) {
		console.log(resp) 
		var vals = resp.split('==vmft:') 
		console.log(vals) 
		$('.output').text(vals[0]); 
	$('.controls').css('visibility', 'visible'); 
		if (vals.length > 1){ 
		var fmt = vals[1]; 
		if (fmt != '') { 
			$('textarea').val(fmt); 
		} 
		$('#status').text('Program exited.') 
	} 
} ); 
 
} 

function select_ex(id ) { 
	var text = $('#ex' + id).text()
	$('textarea').val(text) 
} 

$(document).ready(function() {
$("a:contains(Playground)").css('font-weight', '500') 
			$('#code').linedtextarea();

	var s = localStorage.getItem('play') 
	if (s != '') { 
		$('textarea').val(s) 
		localStorage.setItem('play', '') 
	} 

	document.addEventListener('keyup', doc_keyUp, false); 

}); 


function doc_keyUp(e) {
    if (e.ctrlKey && e.keyCode == 13) {
	run() 
    }
}

</script> 



<div class='center'> 
<p> 
<!-- 
Due to inconsitencies between the documentation and this pre-alpha build,
the playground has been disabled until a more stable release and an updated documentation. 
--> 
<p> 

</div> 
<div class='center'>
<div class='controls'> 
<button id=btnRun onclick='run()' >Run</button> 
<span style='font-size:80%; margin-left:10px; color:#444;'> 
(<!--or press -->Ctrl + Enter) 
<!--
WebAssembly playground coming today
-->
<!--
V.js playground will be out soon
<span style='float:right; font-size:80%;line-height:40px'>Your code will be formatted automatically</span> 
-->
</div> 


<div style='float:right; width:250px; margin-top:20px' class='buttons'> 
<button onclick='select_ex(0)'>Hello world</button> 
<button onclick='select_ex(1)'>Fibonacci</button> 
<button onclick='select_ex(2)'>Fibonacci + memoization</button> 
<button onclick='select_ex(3)'>JSON decoding/encoding</button> 
<button onclick='select_ex(4)'>Users repo + option types</button> 
<button onclick='select_ex(5)'>Advanced consts</button> 
<button onclick='select_ex(6)'>Basic operator overloading</button> 
<button onclick='select_ex(7)'>An updated copy of a struct</button> 

<br> 
<a target=_blank href='/docs'>Check out the docs for more examples</a> 
</div> 

<div style='height:calc(100vh - 295px); max-height:calc(100vh - 295px);'> 
<textarea id='code' autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}">fn main() {
	areas := ['game', 'web', 'tools', 'science', 'systems', 'GUI', 'mobile']
        for area in areas {
                println('Hello, $area developers!')
        }
} 
</textarea> 
</div> 

<pre class='example' id='ex0' >fn main() { 
	areas := ['game', 'web', 'tools', 'science', 'systems', 'GUI', 'mobile']
        for area in areas {
                println('Hello, $area developers!')
        }
} 
</pre> 
<pre class='example' id='ex1'>fn fib(n int) int {
        if n <= 1 {
                return n
        }
        return fib(n - 1) + fib(n - 2)
}

fn main() {
        for i := 0; i < 10; i++ {
                println(fib(i))
        }
}
</pre> 
<pre class='example' id=ex2>const (
        MAX = 15 
)

struct Fib {
        nums []int
}

fn (fib mut Fib) calc(n int) int {
        if n <= 1 {
                return n
        }
        if fib.nums[n] != 0 {
                return fib.nums[n]
        }
        fib.nums[n] = fib.calc(n - 1) + fib.calc(n - 2)
        return fib.nums[n]
}

fn main() {
        mut fib := Fib {
                nums: [0].repeat(MAX)
        }
        for i := 0; i < MAX; i++ {
                println(fib.calc(i))
        }
}
</pre> 

<pre class='example' id=ex3>import json

struct User {
	name          string
	age           int
mut: 
	is_registered bool
}

fn main() {
	s := '[{ "name":"Frodo", "age":25}, {"name":"Bobby", "age":10}]'
	mut users := json.decode( []User, s) or {
		eprintln('Failed to parse json')
		return 
	}
	for user in users {
		println('$user.name: $user.age')
	}
	println('')
	for i, user in users {
		println('$i) $user.name')
		if !user.can_register() {
			println('Cannot register $user.name, they are too young')
			continue 
		}
		users[i].register() // `user` is immutable, we have to modify the array 
	}
	// Let's encode users again just for fun
	println('')
	println(json.encode(users))
}

fn (u User) can_register() bool {
        return u.age >= 16
}

fn (u mut User) register() {
        u.is_registered = true
}
</pre> 

<pre class='example' id=ex4>struct User {
	id   int
	name string
}

struct Repo {
	users []User
}

fn new_repo() Repo {
	return Repo {
		users: [User{1, 'Andrew'}, User {2, 'Bob'}, User {10, 'Charles'}]
	}
}

fn (r Repo) find_user_by_id(id int) ?User {
	for user in r.users {
		if user.id == id {
			// V automatically wraps this into an option type
			return user
		}
	}
	return error('User $id not found')
}

fn main() {
	repo := new_repo()
	// Option types must be handled by `or` blocks
	user := repo.find_user_by_id(10) or {
		// `or` block must end with `return`, `break`, or `continue`
		println('not found')
		return
	}
	println(user.id) // ==> '10'
	println(user.name) // ==> 'Charles'
}
</pre> 

<pre class='example' id=ex5>import strings

struct Color {
        r int
        g int
        b int
}

fn (c Color) str() string {
	return '{$c.r, $c.g, $c.b}' 
} 

fn rgb(r, g, b int) Color { 
	return Color{r: r, g: g, b: b}
} 

const (
        NUMBERS = [1, 2, 3]

        RED  = Color{r: 255, g: 0, b: 0}
        BLUE = rgb(0, 0, 255)
)

fn main() {
        println(NUMBERS)
        println(RED)
        println(BLUE)
}  
</pre> 


<pre class='example' id=ex6>struct Vec {
	x int
	y int
}

fn (a Vec) str() string {
	return '{$a.x, $a.y}'
}

fn (a Vec) + (b Vec) Vec {
	return Vec {
		a.x + b.x,
		a.y + b.y
	}
}

fn (a Vec) - (b Vec) Vec {
	return Vec {
		a.x - b.x,
		a.y - b.y
	}
}

fn main() {
	a := Vec{2, 3}
	b := Vec{4, 5}
	println(a + b) 
	println(a - b) 
}
</pre> 


<pre class='example' id=ex7>struct User {
	name string
	age  int	 
} 

fn main() { 
	user1 := User{'Bob', 20} 
	user2 := { user1 | name: 'Peter' } 
	println(user1.name)
	println(user1.age)
	println(user2.name) 
	println(user2.age)
} 
</pre> 

<pre class='output'> 
The playground is running the latest version of V, updated multiple times per
day.

This is an alpha stage, please <a style='font-family:Roboto-Mono,Menlo,Monospace,Courier New;' target=_blank href='https://github.com/vlang/v/issues/new?assignees=&labels=bug&template=bug_report.md&title='>report all issues via GitHub</a>. 

<!--
For security reasons, imports are temporarily disabled, the size of the program
is limited, and your program can't run for more than 1 second. 
-->





</pre> 
<span id='status'></span> 
</div> 

@t footer