Buttons mostly ok

0hh1.p8

@@ -1,13 +1,16 @@
 pico-8 cartridge // http://www.pico-8.com
 version 36
 __lua__
+-- enable mouse
+poke(0x5F2D, 1)
+
 -- Font M3X6 by daniel linssen
 poke(0x5600, 4, 4, 7)
 poke4(0x5700,unpack(split"0x0000.0000,0x0000.0000,0x0202.0202,0x0000.0200,0x0000.0505,0x0000.0000,0x0505.0705,0x0000.0507,0x0407.0106,0x0000.0203,0x0204.0100,0x0000.0401,0x0102.0502,0x0000.0305,0x0000.0102,0x0000.0000,0x0101.0102,0x0000.0201,0x0202.0201,0x0000.0102,0x0205.0000,0x0000.0005,0x0702.0000,0x0000.0002,0x0000.0000,0x0000.0102,0x0700.0000,0x0000.0000,0x0000.0000,0x0000.0200,0x0202.0404,0x0000.0101,0x0505.0506,0x0000.0305,0x0202.0302,0x0000.0702,0x0204.0403,0x0000.0701,0x0403.0403,0x0000.0304,0x0406.0505,0x0000.0404,0x0403.0107,0x0000.0304,0x0503.0106,0x0000.0605,0x0204.0407,0x0000.0202,0x0502.0506,0x0000.0305,0x0605.0503,0x0000.0304,0x0002.0000,0x0000.0002,0x0002.0000,0x0000.0102,0x0102.0400,0x0000.0402,0x0007.0000,0x0000.0007,0x0402.0100,0x0000.0102,0x0204.0403,0x0000.0200,0x0505.0506,0x0000.0601,0x0604.0300,0x0000.0705,0x0505.0301,0x0000.0705,0x0101.0600,0x0000.0701,0x0505.0604,0x0000.0705,0x0705.0600,0x0000.0601,0x0702.0204,0x0000.0202,0x0705.0600,0x0000.0304,0x0505.0301,0x0000.0505,0x0202.0002,0x0000.0202,0x0202.0002,0x0000.0102,0x0305.0101,0x0000.0505,0x0202.0202,0x0000.0402,0x0707.0300,0x0000.0507,0x0505.0300,0x0000.0505,0x0505.0600,0x0000.0305,0x0305.0700,0x0000.0101,0x0705.0600,0x0000.0404,0x0101.0600,0x0000.0101,0x0701.0600,0x0000.0304,0x0207.0202,0x0000.0202,0x0505.0500,0x0000.0705,0x0505.0500,0x0000.0205,0x0705.0500,0x0000.0507,0x0205.0500,0x0000.0505,0x0605.0500,0x0000.0304,0x0204.0700,0x0000.0701,0x0101.0103,0x0000.0301,0x0202.0101,0x0000.0404,0x0202.0203,0x0000.0302,0x0000.0502,0x0000.0000,0x0000.0000,0x0000.0403,0x0000.0201,0x0000.0000,0x0507.0506,0x0000.0505,0x0507.0503,0x0000.0705,0x0101.0106,0x0000.0701,0x0505.0503,0x0000.0305,0x0103.0107,0x0000.0701,0x0301.0106,0x0000.0101,0x0501.0106,0x0000.0705,0x0507.0505,0x0000.0505,0x0202.0207,0x0000.0702,0x0404.0407,0x0000.0304,0x0503.0505,0x0000.0505,0x0101.0101,0x0000.0701,0x0507.0705,0x0000.0505,0x0505.0503,0x0000.0505,0x0505.0506,0x0000.0305,0x0103.0507,0x0000.0101,0x0505.0506,0x0000.0403,0x0503.0507,0x0000.0505,0x0407.0106,0x0000.0304,0x0202.0207,0x0000.0202,0x0505.0505,0x0000.0705,0x0505.0505,0x0000.0205,0x0705.0505,0x0000.0507,0x0202.0505,0x0000.0505,0x0205.0505,0x0000.0202,0x0202.0407,0x0000.0701,0x0302.0204,0x0000.0402,0x0202.0202,0x0000.0202,0x0602.0201,0x0000.0102,0x0704.0000,0x0000.0001,0x0205.0200,0x0000.0000"))
-poke(0x5f58,0x81)
 
 #include main.lua
 #include board.lua
+#include ui.lua
 #include states/menu.lua
 #include states/game.lua
 #include states/rules.lua
@@ -54,5 +57,5 @@ cc0cc01101100cc0cc08801100110110110110011011011011001101101101100880110110110088
 110110110110011011011011001101101101100110110cc01100cc01101101100cc01101101100110cc08801100cc0cc08808800000000000000000000000000
 110110110110011011011011001101101101100110110cc01100cc01101101100cc01101101100110cc08801100cc0cc08808800000000000000000000000000
 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
-110cc0cc01100880cc0cc0880011011088011001101108801100cc01101101100cc01101101100110cc0880cc00880cc0880cc00000000000000000000000000
+110cc0cc01100880cc0cc0880011011088011001101108801100cc01101101100cc01101101100880cc0880cc00880cc0880cc00000000000000000000000000
-110cc0cc01100880cc0cc0880011011088011001101108801100cc01101101100cc01101101100110cc0880cc00880cc0880cc00000000000000000000000000
+110cc0cc01100880cc0cc0880011011088011001101108801100cc01101101100cc01101101100880cc0880cc00880cc0880cc00000000000000000000000000

main.lua

@@ -1,5 +1,3 @@
-poke(0x5F2D, 1)
-
 --
 -- constants
 --
@@ -15,6 +13,14 @@ local LEFT,RIGHT,UP,DOWN,BTN_O,BTN_X = 0,1,2,3,4,5
 -- Utils
 --
 
+function customFont()
+	poke(0x5f58,0x81)
+end
+
+function standardFont(font)
+	poke(0x5f58,0x80)
+end
+
 function idx_xy(idx, width)
 	return (idx - 1) % width + 1, (idx - 1) \ width + 1
 end
@@ -111,41 +117,6 @@ end
 --   return str.."}"
 -- end
 
-function makeButton(x, y, w, h, text, onClick, onHover)
-	local state = 0 -- 0 = normal, 1 = hovered, 2 = pressed
-	return {
-		x = x,
-		y = y,
-		w = w,
-		h = h,
-		text = text,
-		onClick = onClick,
-		onHover = onHover,
-
-		draw=function(self, selected)
-			-- rectfillw(self.x, self.y, self.w, self.h, 8)
-			local color = selected and 7 or 5
-			print(self.text, self.x+1, self.y+1, color)
-		end,
-
-		update=function(self)
-			if mouse_x >= self.x and mouse_x <= self.x + self.w and
-				mouse_y >= self.y and mouse_y <= self.y + self.h then
-				if stat(34)&1 == 0 and state == 2 and self.onClick then
-					self.onClick()
-				end
-				if stat(34)&1 == 1 then
-					state = 2
-				else
-					if onHover then onHover() end
-					state = 1
-				end
-			else
-				state = 0
-			end
-		end
-	}
-end
 
 function setState(state, ...)
 	local args = {...}
@@ -175,7 +146,7 @@ function _init()
 		game = stateGame()
 	}
 
-	setState(states.rules)
+	setState(states.menu)
 
 end
 

states/menu.lua

@@ -1,13 +1,21 @@
 function stateMenu()
-
 	local selected = 1
+
+	function onBtnDraw(btn)
+		if selected == btn.data.i then
+			btn.color = 7
+		end
+	end
+
 	local buttons = {
-		makeButton(10, 10, 30, 6, "play",
+		makeButton({x=10, y=10, w=30, text="play", data={i=1},
-			function() setState(states.game) end,
+			onClick=function() setState(states.game) end,
-			function() selected = 1 end),
+			onHover=function(btn) btn.color = 7 selected = 1 end,
-		makeButton(10, 20, 30, 6, "rules",
+			onDraw=onBtnDraw}),
-			function() setState(states.rules) end,
+		makeButton({x=10, y=20, w=30, text="rules", data={i=2},
-			function() selected = 2 end)
+			onClick=function() setState(states.rules) end,
+			onHover=function(btn) btn.color = 7 selected = 2 end,
+			onDraw=onBtnDraw})
 	}
 
 	function _enter()

states/rules.lua

@@ -1,12 +1,19 @@
 function stateRules()
 
-	local fade = split"0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,4,9,10,9,4,2"
+	local fade = split"0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,9,10,9,4,2,1"
 	local color = 1
 
 	function blink(x,y,w,h)
 		rect2(x,y,w,h,fade[color])
 	end
 
+	function goBack()
+		setState(states.menu)
+	end
+
+	local btnBack = makeButton({x=1, y=118, w=30, h=7, text="❎ mENU", color=8,
+		onClick=function() goBack() end,
+		onHover=function(btn) btn.color = 7 end})
 
 	return {
 		_update=function()
@@ -16,9 +23,18 @@ function stateRules()
 			if color>#fade then
 				color = 1
 			end
+
+			-- Back to the menu
+			if btnp(BTN_X) then
+				goBack()
+			end
+
+			btnBack:update()
 		end,
 
 		_draw=function()
+			customFont()
+
 			print("1) yOU CAN'T HAVE MORE THAN\n   TWO (2) CONSECUTIVE TILES\n   OF THE SAME COLOR", 2,2, 7)
 			local x = 14
 			local y = 28
@@ -61,6 +77,10 @@ function stateRules()
 			sspr(91,32, 12,12, x+26,y+20)
 			blink(x-1, y+25, 12, 6)
 			blink(x+25, y+25, 12, 6)
+
+			--------------
+
+			btnBack:draw()
 		end,
 	}
 end

ui.lua

@@ -0,0 +1,41 @@
+function makeButton(options)
+	local state = 0 -- 0 = normal, 1 = hovered, 2 = pressed
+	return {
+		x = options.x,
+		y = options.y,
+		w = options.w,
+		h = options.h or 6,
+		data = options.data,
+		text = options.text,
+		onClick = options.onClick,
+		onHover = options.onHover,
+		onDraw = options.onDraw,
+		ogColor = options.color or 5,
+		color = options.color or 5,
+
+		draw=function(self, selected)
+			standardFont()
+			-- rect2(self.x, self.y, self.w, self.h, 8)
+			if self.onDraw then self.onDraw(self) end
+			print(self.text, self.x+1, self.y+1, self.color)
+		end,
+
+		update=function(self)
+			self.color = self.ogColor
+			if mouse_x >= self.x and mouse_x <= self.x + self.w and
+				mouse_y >= self.y and mouse_y <= self.y + self.h then
+				if stat(34)&1 == 0 and state == 2 and self.onClick then
+					self.onClick(self)
+				end
+				if stat(34)&1 == 1 then
+					state = 2
+				else
+					if self.onHover then self.onHover(self) end
+					state = 1
+				end
+			else
+				state = 0
+			end
+		end
+	}
+end