├── P8T.p8
├── .gitattributes
├── twitter.js
├── twitter.php
├── main.js
├── p8-gpio-comms.js
└── index.html


/P8T.p8:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/seleb/pico-8-gpio/HEAD/P8T.p8


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/twitter.js:
--------------------------------------------------------------------------------
 1 | var twitter={
 2 | 	tweets:null,
 3 | 
 4 | 	getTweet: function(params){
 5 | 		var request = new XMLHttpRequest();
 6 | 		request.onreadystatechange = function(){
 7 | 			if(request.readyState == 4){
 8 | 			if(request.status == 200){
 9 | 				// success
10 | 					this.tweets = JSON.parse(request.responseText);
11 | 					console.log("Loaded tweet:",JSON.stringify(this.tweets));
12 | 
13 | 					var t = this.tweets.statuses[0];
14 | 
15 | 					this.ontweetloaded();
16 | 				}else if(request.status == 400){
17 | 					// error
18 | 					console.error(request.responseText);
19 | 				}else{
20 | 					// something else
21 | 				}
22 | 			}
23 | 		}.bind(this);
24 | 
25 | 		request.open("get", "https://seans.site/stuff/P8T/twitter.php"+params, true);
26 | 		request.send();
27 | 	},
28 | 
29 | 	ontweetloaded: function(){
30 | 		// can overwrite this
31 | 	}
32 | };


--------------------------------------------------------------------------------
/twitter.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | header("Access-Control-Allow-Origin: *");
 3 | 
 4 | // convert key/secret to credentials
 5 | $credentials = base64_encode(rawurlencode($key).":".rawurlencode($secret));
 6 | 
 7 | // use credentials to get token
 8 | $authContext = stream_context_create(array(
 9 |     "http" => array(
10 |         "method"  => "POST",
11 |         "header"  => "Authorization: Basic ".$credentials."\r\n".
12 |                 "Content-type: application/x-www-form-urlencoded;charset=UTF-8\r\n",
13 |         "content" => "grant_type=client_credentials"
14 |     )
15 | ));
16 | $authResponse = file_get_contents("https://api.twitter.com/oauth2/token", false, $authContext);
17 | $decodedAuth = json_decode($authResponse, true);
18 | $bearerToken = $decodedAuth["access_token"];
19 | 
20 | 
21 | // use token to get data
22 | $context = stream_context_create(array(
23 |     "http" => array(
24 |         "method"  => "GET",
25 |         "header"  => "Authorization: Bearer " . $bearerToken . "\r\n"
26 |     )
27 | ));
28 | 
29 | $encodedData = file_get_contents("https://api.twitter.com/1.1/search/tweets.json?".$_SERVER['QUERY_STRING'], false, $context);
30 | 
31 | echo $encodedData;
32 | 
33 | ?>
34 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var last=[];
 3 | var btns=[];
 4 | var btnsp=[];
 5 | var searchField = document.getElementById("searchField");
 6 | 
 7 | function search(params){
 8 | 	if(comms.state == comms.States.IDLE){
 9 | 		twitter.getTweet.bind(twitter)(params);
10 | 		comms.state = comms.States.HOLD;
11 | 	}else{
12 | 		console.error("Comms are busy; action ignored");
13 | 	}
14 | }
15 | 
16 | 
17 | function next(){
18 | 	if(twitter.tweets != null){
19 | 		last.push(twitter.tweets.search_metadata.max_id_str);
20 | 		search(twitter.tweets.search_metadata.next_results);
21 | 	}
22 | }
23 | 
24 | function prev(){
25 | 	if(last.length > 0){
26 | 		search("?max_id="+last.pop()+"&q="+encodeURIComponent(searchField.value)+"&count=1");
27 | 	}else{
28 | 		refresh();
29 | 	}
30 | }
31 | 
32 | function refresh(){
33 | 	last=[];
34 | 	search("?q="+encodeURIComponent(searchField.value)+"&count=1");
35 | }
36 | 
37 | comms.onstartup = function(){
38 | 	comms.onreceive = function(){
39 | 		var btn = comms.incoming_packet[0];
40 | 		var b = [];
41 | 
42 | 		for(i=0;i<6;++i){
43 | 			b[i] = (btn & (1 << i)) != 0;
44 | 			btnsp[i] = !btns[i] && b[i];
45 | 			btns[i]=b[i];
46 | 		}
47 | 		if(btnsp[0]){
48 | 			prev();
49 | 		}else if(btnsp[1]){
50 | 			next();
51 | 		}else if(btnsp[2]){
52 | 			refresh();
53 | 		}
54 | 	};
55 | 	twitter.ontweetloaded = function(){
56 | 		try{
57 | 			var t = twitter.tweets.statuses[0];
58 | 			comms.send(
59 | 				t.user.name+" (@"+t.user.screen_name+"):\n\n"
60 | 				+t.text+"\n\n"
61 | 				+new Date(t.created_at).toLocaleDateString()
62 | 			);
63 | 		}catch(e){
64 | 			comms.send(":(  Sorry!  :(\nThere was an error retrieving tweets.\n\nTry refreshing the page if this continues.");
65 | 		}
66 | 	};
67 | 
68 | 	search("?q="+encodeURIComponent(searchField.value)+"&count=1");
69 | };


--------------------------------------------------------------------------------
/p8-gpio-comms.js:
--------------------------------------------------------------------------------
  1 | var pico8_gpio = new Array(128);
  2 | 
  3 | var comms = {
  4 | 	Turns:Object.freeze({
  5 | 		MY_TURN:1,
  6 | 		THEIR_TURN:0
  7 | 	}),
  8 | 	States:Object.freeze({
  9 | 		STARTING:0,
 10 | 		RECEIVING:1,
 11 | 		SENDING:2,
 12 | 		SENT:3,
 13 | 		RECEIVED:4,
 14 | 		IDLE:5
 15 | 	}),
 16 | 	Pins:Object.freeze({
 17 | 		TURN:0,
 18 | 		STATE:1,
 19 | 		FRAME_ID:2,
 20 | 		FRAME_LENGTH:3,
 21 | 		DATA_LENGTH:4,
 22 | 		DEBUG:5,
 23 | 		DATA_START:6
 24 | 	}),
 25 | 
 26 | 	debug:0,
 27 | 	state:0,
 28 | 
 29 | 	char_offset: 31, // ignore control characters
 30 | 	data_bytes: 120, // bytes available for data
 31 | 
 32 | 	pending_packets: [],
 33 | 	incoming_packet: [],
 34 | 
 35 | 	send: function (data){
 36 | 		if(this.state == this.States.IDLE || this.state == this.States.HOLD){
 37 | 			// how many packets do we need to send to fit the data?
 38 | 			var num_packets = Math.max(1,Math.ceil(data.length/this.data_bytes));
 39 | 
 40 | 			// split the data into packets
 41 | 			this.pending_packets = [];
 42 | 			for(i = 1; i <= num_packets; ++i){
 43 | 				// grab the first chunk of the data as a character array
 44 | 				var chars = data.substr(0,this.data_bytes).split("");
 45 | 
 46 | 				// convert characters to numbers matching
 47 | 				for(j=0;j<chars.length;++j){
 48 | 					chars[j] = this.charToPico(chars[j]);
 49 | 				}
 50 | 
 51 | 				// construct the actual packet
 52 | 				var packet = {
 53 | 					frame_id: i,
 54 | 					frame_length: num_packets,
 55 | 					data_length: chars.length,
 56 | 					data: chars
 57 | 				};
 58 | 
 59 | 				// add the packet to the queue
 60 | 				this.pending_packets.push(packet);
 61 | 
 62 | 				// throw away the data we just packed
 63 | 				data = data.substr(chars.length);
 64 | 			}
 65 | 
 66 | 			console.log("Sending packets:",JSON.stringify(this.pending_packets));
 67 | 			this.state = this.States.SENDING;
 68 | 		}else{
 69 | 			console.error("Comms busy; send aborted");
 70 | 		}
 71 | 	},
 72 | 
 73 | 	// converts characters to a format which the cart can read
 74 | 	// case is reversed, characters are offset, and newline is a special character
 75 | 	charToPico: function (c){
 76 | 		if(c == '\n'){
 77 | 			return 0;
 78 | 		}else{
 79 | 			// swap case
 80 | 			c = (c == c.toLowerCase() ? c.toUpperCase() : c.toLowerCase());
 81 | 			// convert to ASCII
 82 | 			c = c.charCodeAt();
 83 | 			// offset
 84 | 			c -= this.char_offset;
 85 | 			return c;
 86 | 		}
 87 | 	},
 88 | 
 89 | 	write_packet:function(packet){
 90 | 		for(i=0;i<packet.data_length;++i){
 91 | 			pico8_gpio[i+this.Pins.DATA_START] = packet.data[i];
 92 | 		}
 93 | 		pico8_gpio[this.Pins.FRAME_ID] = packet.frame_id;
 94 | 		pico8_gpio[this.Pins.FRAME_LENGTH] = packet.frame_length;
 95 | 		pico8_gpio[this.Pins.DATA_LENGTH] = packet.data_length;
 96 | 	},
 97 | 
 98 | 	read_packet:function(){
 99 | 		for(i=0;i<pico8_gpio[this.Pins.DATA_LENGTH];++i){
100 | 			this.incoming_packet[i] = pico8_gpio[i+this.Pins.DATA_START];
101 | 		}
102 | 	},
103 | 
104 | 	update: function(){
105 | 
106 | 		window.requestAnimationFrame(comms.update.bind(comms));
107 | 		
108 | 		// return early if it's not our turn
109 | 		if(pico8_gpio[this.Pins.TURN] != this.Turns.MY_TURN){
110 | 			return;
111 | 		}
112 | 
113 | 		// store current io as the incoming packet
114 | 		this.read_packet();
115 | 		this.onreceive();
116 | 
117 | 
118 | 		// decide what to do with our turn
119 | 		switch(this.state){
120 | 			case this.States.STARTING: 
121 | 				// if cart is in startup state, switch to idle
122 | 				console.log("Comms established");
123 | 				this.state = this.States.IDLE;
124 | 				this.onstartup();
125 | 				break;
126 | 			case this.States.SENDING:
127 | 				// if no packets to send, switch to idle
128 | 				if(this.pending_packets.length == 0){
129 | 					this.state = this.States.IDLE;
130 | 					
131 | 					pico8_gpio[this.Pins.FRAME_LENGTH] = 0;
132 | 					pico8_gpio[this.Pins.FRAME_ID] = 0;
133 | 					pico8_gpio[this.Pins.DATA_LENGTH] = 0;
134 | 					return;
135 | 				}
136 | 
137 | 				// write the first packet to the io and discard it
138 | 				this.write_packet(this.pending_packets.shift());
139 | 				break;
140 | 				break;
141 | 			case this.States.IDLE:
142 | 			case this.States.HOLD:
143 | 				break;
144 | 		}
145 | 
146 | 		// give the turn back to them
147 | 		pico8_gpio[this.Pins.STATE] = this.state;
148 | 		pico8_gpio[this.Pins.DEBUG] = this.debug;
149 | 		pico8_gpio[this.Pins.TURN] = this.Turns.THEIR_TURN;
150 | 	},
151 | 
152 | 	onstartup: function(){
153 | 		// can overwrite this
154 | 	},
155 | 
156 | 	onreceive: function(){
157 | 		// can overwrite this
158 | 	}
159 | };
160 | 
161 | window.requestAnimationFrame(comms.update.bind(comms));


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<title>P8T PICO-8 Cartridge</title>
  7 | 		<meta name="description" content="">
  8 | 
  9 | 		<style type="text/css">
 10 | 		<!--
 11 | 		html,body{
 12 | 			padding:0;
 13 | 			margin:0;
 14 | 			width:100%;
 15 | 			height:100%;
 16 | 			background:transparent;
 17 | 		}
 18 | 		center{
 19 | 			text-align:center;
 20 | 			width:512px;
 21 | 			height:557px;
 22 | 			position:absolute;
 23 | 			display:block;
 24 | 			top:0;
 25 | 			bottom:0;
 26 | 			right:0;
 27 | 			left:0;
 28 | 			margin:auto;
 29 | 		}
 30 | 		canvas#canvas{
 31 | 			width: 512px;
 32 | 			height: 512px;
 33 | 
 34 | 			image-rendering: -moz-crisp-edges;
 35 | 			image-rendering:   -o-crisp-edges;
 36 | 			image-rendering: -webkit-optimize-contrast;
 37 | 			image-rendering: crisp-edges;
 38 | 			-ms-interpolation-mode: nearest-neighbor;
 39 | 			image-rendering: pixelated;
 40 | 		}
 41 | 
 42 | 				.pico8_el{
 43 | 			width:92px;
 44 | 			height:16px;
 45 | 			display:inline-block; 
 46 | 			margin: 1px;
 47 | 			margin-bottom:0;
 48 | 			padding: 4px;
 49 | 			text-align: center;
 50 | 			color:rgb(255, 241, 232);
 51 | 			background-color:rgb(29, 43, 83);
 52 | 			font-family : verdana, sans-serif;
 53 | 			font-size: 9pt;
 54 | 			cursor: pointer;
 55 | 
 56 | 			user-select: none;
 57 | 			-moz-user-select: none;
 58 | 			-webkit-user-select: none;
 59 | 			-ms-user-select: none;
 60 | 		}
 61 | 		.pico8_el img{
 62 | 			image-rendering: -moz-crisp-edges;
 63 | 			image-rendering:   -o-crisp-edges;
 64 | 			image-rendering: -webkit-optimize-contrast;
 65 | 			image-rendering: crisp-edges;
 66 | 			-ms-interpolation-mode: nearest-neighbor;
 67 | 			image-rendering: pixelated;
 68 | 		}
 69 | 
 70 | 		.pico8_el a{
 71 | 			text-decoration: none;
 72 | 			color:rgb(255, 241, 232);
 73 | 		}
 74 | 
 75 | 		.pico8_el:hover,
 76 | 		.pico8_el:link{
 77 | 			background-color:rgb(41, 173, 255);
 78 | 		}
 79 | 				-->
 80 | 		</style>
 81 | 	</head>
 82 | 
 83 | 	<body style="background:rgba(0, 0, 0, 0)">
 84 | 		<center>
 85 | 			<div style="width:512px;">
 86 | 				<!-- CANVAS -->
 87 | 				<input id="searchField" style="width:100%;height:20px;" value="#pico8-filter:retweets"/>
 88 | 				<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
 89 | 
 90 | 				<!-- SCRIPTS -->
 91 | 				<script type="text/javascript">
 92 | 					var require = null; // fix for node.js issue (prevents game from running when opened in something like NW.js)
 93 | 
 94 | 					// if using NW.js, let ESC exit fullscreen (no way to get out of it otherwise)
 95 | 					if (typeof nw !== 'undefined' && nw !== null) {
 96 | 						nw.App.registerGlobalHotKey(new nw.Shortcut({
 97 | 							key: "Escape",
 98 | 							active: function() {
 99 | 								nw.Window.get().leaveFullscreen();
100 | 							}
101 | 						}));
102 | 					}
103 | 
104 | 					var canvas = document.getElementById("canvas");
105 | 					canvas.width = window.innerWidth;
106 | 					canvas.height = window.innerHeight;
107 | 
108 | 					// show Emscripten environment where the canvas is
109 | 					// arguments are passed to PICO-8
110 | 					
111 | 					var Module = {
112 | 						arguments: ["-width","512","-height","512"],
113 | 					};
114 | 					Module.canvas = canvas;
115 | 					
116 | 					/*
117 | 					// When pico8_buttons is defined, PICO-8 takes each int to be a live bitfield
118 | 					// representing the state of each player's buttons
119 | 					
120 | 					var pico8_buttons = [0, 0, 0, 0, 0, 0, 0, 0]; // max 8 players
121 | 					pico8_buttons[0] = 2 | 16; // example: player 0, RIGHT and Z held down
122 | 					*/
123 | 				</script>
124 | 				<script async type="text/javascript" src="P8T.js"></script>
125 | 
126 | 
127 | 				<!-- WEB STUFF -->
128 | 				<script type="text/javascript" src="p8-gpio-comms.js"></script>
129 | 				<script type="text/javascript" src="twitter.js"></script>
130 | 				<script type="text/javascript" src="main.js"></script>
131 | 
132 | 
133 | 				<script>
134 | 					// key blocker. prevent cursor keys from scrolling page while playing cart.
135 | 					function onKeyDown_blocker(event) {
136 | 						event = event || window.event;
137 | 						var o = document.activeElement;
138 | 						if(!o || o == document.body || o.tagName == "canvas"){
139 | 							if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1){
140 | 								if(event.preventDefault){
141 | 									event.preventDefault();
142 | 								}
143 | 							}
144 | 						}
145 | 					}
146 | 
147 | 					document.addEventListener('keydown', onKeyDown_blocker, false);
148 | 
149 | 					// sometimes iframes have issues getting focus, so
150 | 					// attempt to auto-focus right now and also when we get clicked
151 | 					window.focus();
152 | 					document.addEventListener('mousedown',function(event){
153 | 						window.focus();
154 | 					});
155 | 
156 | 				</script>
157 | 				<!-- BUTTONS -->
158 | 				<div class=pico8_el onclick="Module.pico8Reset();"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Reset" width=12 height=12/> Reset</div><div class=pico8_el onclick="Module.pico8TogglePaused();"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPUlEQVR4Ae3doQ0AIAxEUWABLPtPh2WCq26DwFSU/JPNT166QSu/Hg86W9dwLte+diP7AwAAAAAAgD+A+jM2ZAgo84I0PgAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Pause" width=12 height=12/> Pause</div><div class=pico8_el onclick="Module.requestFullScreen(true, false);"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dsQ1AIQhExfze1v2ns3UCrfgFhmgUUAoGgHscp21wX9BqaZoDojbB96OkDJKNcTN2BHTyYNYmoT2BlPL7BKgcPfHjAVXKKadkHOn9K1r16N0czN6a95N8mnA7Aq2fTZ3Af3UKmCSMazL8HwAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Fullscreen" width=12 height=12/> Fullscreen</div><div class=pico8_el onclick="Module.pico8ToggleSound();"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAXklEQVR4Ae2doQ4AIQxD4YLH8v9fh+ULhjpxxSwLg2uyapr1JRu1iV5Z+1BGl4+xNpX38SYo2uRvYiT5LwEmt+ocgXVLrhPEgBiw8Q5w7/kueSkK+D2tJO4E/I3GrwkqQCBabEj/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Toggle Sound" width=12 height=12/> Sound</div><div class=pico8_el ><a target="_new" href="http://www.lexaloffle.com/bbs/?cat=7&sub=2" style="width:100%; display:inline-block;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAlElEQVR4Ae2dMQ5FQBCGh6jcwAkkateg3DiAa+iQUGqVKi95FQfAJRQOoHeBUf8JyQqKjZ1uMzuz2e/LTE3KhyF7kSlgLOykas23f6D+A9Yp84aAOYU15pcJnfji0Il2ID8HzC4y38ZrnfIBGxeRoR3c3EWrACdsV5BOsx7OSRnrOXh4F5HzA6bevwUn8wlz7eCDsQM99B3ks0s/4QAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=" alt="Carts" width=12 height=12/> Carts</a></div>			</div>
159 | 		</center>
160 | 	</body>
161 | </html>


--------------------------------------------------------------------------------