update

rf/browser_warn.css

@@ -0,0 +1,2 @@
+
+

rf/browser_warn.js

@@ -0,0 +1,34 @@
+
+
+
+function get_browser_type() {
+	clog("user_agent....")
+	// body...
+	var n
+	n = `<div class="browser_warn">Your browser does not appear to be fully supported.  We recommend a chromium based browser such as:
+	<br>
+	<a href="https://www.google.com/chrome/">chrome</a>
+	<a href="https://brave.com/download/">brave</a>
+	or
+	<a href="https://vivaldi.com/">vivaldi</a>
+	</div>`
+	$(".browser_warn").remove()
+	$("body").prepend(n)
+	var browser;
+var agent = navigator.userAgent.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
+if (navigator.userAgent.match(/Edge/i) || navigator.userAgent.match(/Trident.*rv[ :]*11\./i)) {
+    browser = "msie";
+}
+else {
+    browser = agent[1].toLowerCase();
+}
+	clog({"user_agent":navigator.userAgent,browser,agent})
+}
+get_browser_type()
+
+
+// browser_warn.js
+
+
+clog("zzs.z")
+// "apearss"

rf/filmstrip_mod/m.js

@@ -56,6 +56,7 @@ function saftly_remove(n,remove_nodes=true){
 function ffcb(){
 	clog("ffcb",this.value,this.checked,[this,...arguments])
 	disp(glob_react.base_conference.setFollowMe(this.checked))
+    msto.conference.follow_focus = this.checked
 	var follow_focus_force=$("#follow_focus_force")[0] 
 	if (follow_focus_force.checked && !this.checked){
 		msto.conference.force_follow = this.checked
@@ -70,6 +71,7 @@ function fffcb(){
 	if (!follow_focus.checked && this.checked){
 
 	follow_focus.checked = this.checked
+    msto.conference.follow_focus = this.checked
 	ffcb.bind(follow_focus)()
 	}
 	msto.conference.force_follow = this.checked
@@ -200,12 +202,31 @@ disable
     n.find("input#ov_timeout_disable")[0].onchange = scroll_timeout_runner
     n.find("#scroll_now")[0].onclick = scroll_send
     n.find("#num_pseudo")[0].onchange = num_pseudo
+    try_set_state(n)
 
     add_node(n,`.subject`,"prepend")
     }
 }
 
+function try_set_state(n){
+    try {
+    var base_conf 
+    base_conf = APP.store.getState()["features/base/conference"]
+        // APP.str
+        clog("tss...",base_conf.followMeEnabled,jc(msto.conference))
+        var followMeEnabled  = base_conf.followMeEnabled || msto.conference.follow_focus
+        // msto.conference.follow_focus
+
+        n.find("input#follow_focus")[0].checked = followMeEnabled
+        n.find("input#follow_focus_force")[0].checked = msto.conference.force_follow
+
 
+    } catch (e){
+        clog("tss err:",e)
+        // clog("tss")
+    }
+    // followMeEnabled
+}
 // 
 function init_api6(){
     clog("init_api6...")

rf/i4m/m.css

@@ -63,8 +63,32 @@ html {
 }
 
 .nxt {
+	/*outline: 2px solid red;*/
+}
+.nxt0 {
 	outline: 2px solid red;
 }
+.nxt1 {
+	box-sizing: border-box;
+	/*outline: 2px solid #00f;*/
+	border: 2px solid #00f;
+}
+.nxt2 {
+	outline: 5px solid #0ff;
+}
+.nxt3 * {
+	/*color: #0ff;*/
+	box-sizing: border-box;
+	/*outline: 2px solid #ff0;*/
+	border: 6px solid #ff0;
+
+}
+.nxt_x .tile_button {
+	background-color: red;
+}
+
+
+
 
 .rooms_dir0{
 	top: 50%;
@@ -93,6 +117,7 @@ html {
 	/*display: inline;*/
 	/*width: 300%;*/
 	top: 0;
+	/*background-color: #0ff;*/
 
 	/*left: 0;*/
 	width: auto;
@@ -102,27 +127,43 @@ html {
 }
 /*159/256*/
 
-
 .room_span {
+		/*position: relative;*/
+	/*display: flex;*/
+	/*display: block;*/
+	/*display: inline;*/
+	display: inline-block;
+	/*overflow: hidden;*/
+	/*outline: 1px solid #f00;*/
+	/*outline-offset: -2px;*/
+	/*outline-offset: 0px;*/
+}
+
+.room_span_container {
 	/*top: 0;*/
 	/*bottom: 0;*/
+	/*scroll-margin: 20px;*/
 	height: 200px;
 	height: calc(200px * (256/159));
 	/*width: 20%;*/
 	background-size: cover;
 	/*margin: 20em;*/
-	margin: 20px;
+	margin: 15px;
+	/*border: 20px solid blue;*/
+	/*padding: 20px;*/
 	border-radius: 20px; 
 
 
 
 	width: 200px;
+
 	/*outline: 2px solid #ff0;*/
 	position: relative;
 	display: flex;
 	display: inline;
 	display: inline-block;
 	overflow: hidden;
+	/*scrol*/
 	/*style="--vurl:/ign/rf/artists/fisher.png; --vtitle:"Fisher";"*/
 	/*background-image: url(--vurlx);*/
 	background-image: var(--vurl);

rf/i4m/m.html

@@ -5,9 +5,12 @@
 
 <div class="lobby_root plugin_top">
 	<div class="rooms_dir0">
-		
+			
+		<!-- <i class="arrow_container right"> -->
 		<i class="arrow right"></i>
+		<!-- </i><i class="arrow_container left"> -->
 		<i class="arrow left"></i>
+		<!-- </i> -->
 	<div class="rooms_dir">
 	<span class="rooms_dir_full">
 		<!-- <span class="room_span rx2"></span> -->
@@ -23,6 +26,7 @@
 <span>
 	
 		<span class="room_span rxt">
+		<span class="room_span_container">
 			<span class="tile_overlay">
 
 			</span>
@@ -30,6 +34,7 @@
 			<div class="tile_title"></div>
 			<div class="tile_button">Play Now</div>
 		</span>
+		</span>
 </span>
 
 

rf/i4m/m.js

@@ -36,8 +36,6 @@ function scroll_rt(n){
 	// room_span
 	// vid.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
 }
-
-
 function scroll_rt2(o){
 	var rooms_scroll = $(".rooms_dir_full")
 	var room_tiles = rooms_scroll.children(".room_span")
@@ -47,46 +45,113 @@ function scroll_rt2(o){
 	// rooms_scroll
 
 	bcr_rooms = rooms_dir[0].getBoundingClientRect()
-	clog("~~~",bcr_rooms)
+	// clog("~~~",bcr_rooms)
 	var v_last 
 	var r,l
+	var r_,l_,r_2,l_2
+	var c,c2,cr,cl,cr2,cl2
 	var r2,l2
+
+
+	var cr_n,cr_p,cl_n,cl_p
+	var cr_nn,cr_pn,cl_nn,cl_pn
+
+	cr_n = -Infinity
+	cl_n = -Infinity
+	cr_p = Infinity
+	cl_p = Infinity
+	cr_nn = ""
+	cl_nn = ""
+	cr_pn = ""
+	cl_pn = ""
+
+
+
     $(".nxt").removeClass("nxt")
+    $(".nxt_x").removeClass("nxt_x")
+    $(".nxt0").removeClass("nxt0")
+    $(".nxt1").removeClass("nxt1")
+    $(".nxt2").removeClass("nxt2")
+    $(".nxt3").removeClass("nxt3")
     for (v of room_tiles){
         bcr = v.getBoundingClientRect()
         // clog("...",bcr.left - bcr_rooms.left,bcr)
         // clog("...",bcr_rooms.left - bcr.left ,bcr)
         // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,bcr)
-        r = bcr_rooms.right - bcr.right
-        l = bcr_rooms.left - bcr.left
-        if ((r < 0 ) != ((r2 < 0))  && (r2 != undefined)){
-        	clog(":::",r,r2)
-        	if ($(o.that).hasClass("right")){
-        		$(v).addClass("nxt")
-        		clog("z")
-        	}
+        // r = bcr_rooms.right - bcr.right
+        // l = bcr_rooms.left - bcr.left
+
+        // r_ = bcr_rooms.right - bcr.left
+        // l_ = bcr_rooms.left - bcr.right
+
+
+        c = (bcr.right + bcr.left) / 2
+        cr = bcr_rooms.right - c
+        cl = bcr_rooms.left - c
+        cl = c - bcr_rooms.left 
+
+
+        if (cr < 0){
+        	cr_n = Math.max(cr_n,cr)
+        	cr_n == cr ? cr_nn = v : 0
+
+        } else {
+        	cr_p = Math.min(cr_p,cr)
+        	cr_p == cr ? cr_pn = v : 0
+
         }
-        // if (l < 0 && !(l2 < 0) ){
-        if ((l < 0) != ((l2 < 0))   && (l2 != undefined)){
-        	clog(":::2",l,l2)
-        	if ($(o.that).hasClass("left")){
-        		clog("z2")
-        		$(v).addClass("nxt")
-
-        	}
+
+        if (cl < 0){
+        	cl_n = Math.max(cl_n,cl)
+        	cl_n == cl ? cl_nn = v : 0
+        } else {
+        	cl_p = Math.min(cl_p,cl)
+        	cl_p == cl ? cl_pn = v : 0
         	
         }
 
-        r2 = r
-        l2 = l
 
 
+        // r2 = r
+        // l2 = l
+
+        // r_2 = r_
+        // l_2 = l_
+        c2 = c
+        cr2 = cr
+        cl2 = cl
+
 
 
 
-        clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
+        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
         v_last = v
     }
+    // $(cr_nn).addClass("nxt0")
+    // $(cl_nn).addClass("nxt1")
+    var scroll_n = ""
+
+    if ($(o.that).hasClass("right")){
+    	if (cr_nn){
+    		scroll_n = cr_nn
+    	} else {
+    		scroll_n = cr_np
+
+    	}
+    } else if ($(o.that).hasClass("left")){
+    	if (cl_nn){
+    		scroll_n = cl_nn
+    	} else {
+    		scroll_n = cl_np
+    		
+    	}
+    }
+    if (scroll_n){
+    	scroll_n.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
+    	// $(scroll_n).addClass("nxt_x")
+    }
+    // $(cr_pn).addClass("nxt2")
+    // $(cl_pn).addClass("nxt3")
 
 
 	// var bcr
@@ -98,7 +163,7 @@ function scroll_rt2(o){
 function arrow_click_cb(e){
 	scroll_rt2({that:this,e})
 
-	clog("arrow_click_cb",{that:this,e})
+	// clog("arrow_click_cb",{that:this,e})
 }
 function tile_button_cb(e){
 
@@ -161,6 +226,7 @@ function add_tiles(){
 
 function set_width(){
 	var rdf = $('.rooms_dir_full')
+  // var totalWidth = 20;
   var totalWidth = 0;
 	rdf.children().each(function(){
     totalWidth += $(this).outerWidth();

rf/i4m/m_jnk.css

@@ -0,0 +1,285 @@
+
+
+
+/*.lobby_root*/
+/*rooms_dir*/
+/*room_span*/
+
+/*rx1*/
+/*rx2*/
+
+
+
+
+
+
+.lobby_root {
+	/*opacity: .5;*/
+	/*opacity: 0;*/
+	/*display: none;*/
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	/*outline: 3px solid red;*/
+	outline-offset: -20px;
+	position: absolute;
+	z-index: 10;
+	/*background-image: url("../../media/examples/lizard.png");*/
+	/*background-image: url("/ign/rf/img/image.png");*/
+	/*background-image: url("/ign/rf/img/img3.jpg");*/
+	/*background-image: url("/ign/rf/img/cropped_bak.jpg");*/
+	/*--vurlx:url("/ign/rf/artists/fisher.png");*/
+	/*background-position: 50% 100%; */
+	/*background-position: 20% 0%; */
+	/*background-position: 50% 50%; */
+	/*background-attachment: fixed;*/
+	/*background-repeat: no-repeat;*/
+	/*background-size: cover; */
+
+	/*background-image: url("/ign/rf/img/img3.jpg");*/
+	/*vertical-align: middle;*/
+}
+html {
+  scroll-behavior: smooth;
+}
+
+
+.tile_overlay{
+	position: absolute;
+		top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	/*border-radius: 20px; */
+	/*background-image: #0004;*/
+	/*background-color: #0004;*/
+	/*background-color: linear-gradient(#0000 #0ff8 #0009);*/
+	/*background-image: linear-gradient(to bottom #0000, #0ff8, #0009);*/
+		/*background-image: linear-gradient( 10% #0000, 30% #0ff0, 60% #0009);*/
+
+	background-image: linear-gradient( #0000 , #0000, #000a);
+
+}
+
+.nxt {
+	/*outline: 2px solid red;*/
+}
+.nxt0 {
+	outline: 2px solid red;
+}
+.nxt1 {
+	box-sizing: border-box;
+	/*outline: 2px solid #00f;*/
+	border: 2px solid #00f;
+}
+.nxt2 {
+	outline: 5px solid #0ff;
+}
+.nxt3 * {
+	/*color: #0ff;*/
+	box-sizing: border-box;
+	/*outline: 2px solid #ff0;*/
+	border: 6px solid #ff0;
+
+}
+.nxt_x .tile_button {
+	background-color: red;
+}
+
+
+
+
+.rooms_dir0{
+	top: 50%;
+	transform: translate(0,-50%);
+	position: relative;
+
+}
+.rooms_dir {
+	/*padding-top: auto;*/
+	/*top: 50%;*/
+	top: 50%;
+	vertical-align: middle;
+	/*display: inline-block;*/
+	/*transform: translate(0,-50%);*/
+	width: calc(100% - 150px);
+	height: 400px;
+	position: relative;
+	/*outline: 6px solid green;*/
+	margin: auto;
+	overflow-x: scroll;
+
+}
+
+.rooms_dir_full{
+	/*position: relative;*/
+	/*display: inline;*/
+	/*width: 300%;*/
+	top: 0;
+	/*background-color: #0ff;*/
+
+	/*left: 0;*/
+	width: auto;
+	position: absolute;
+	/*right: 0;*/
+	bottom: 0;
+}
+/*159/256*/
+
+.room_span {
+		/*position: relative;*/
+	/*display: flex;*/
+	/*display: block;*/
+	/*display: inline;*/
+	display: inline-block;
+	/*overflow: hidden;*/
+	/*outline: 1px solid #f00;*/
+	/*outline-offset: -2px;*/
+	/*outline-offset: 0px;*/
+}
+
+.room_span_container {
+	/*top: 0;*/
+	/*bottom: 0;*/
+	/*scroll-margin: 20px;*/
+	height: 200px;
+	height: calc(200px * (256/159));
+	/*width: 20%;*/
+	background-size: cover;
+	/*margin: 20em;*/
+	margin: 15px;
+	/*border: 20px solid blue;*/
+	/*padding: 20px;*/
+	border-radius: 20px; 
+
+
+
+	width: 200px;
+
+	/*outline: 2px solid #ff0;*/
+	position: relative;
+	display: flex;
+	display: inline;
+	display: inline-block;
+	overflow: hidden;
+	/*scrol*/
+	/*style="--vurl:/ign/rf/artists/fisher.png; --vtitle:"Fisher";"*/
+	/*background-image: url(--vurlx);*/
+	background-image: var(--vurl);
+	/*background-image: url("/ign/rf/artists/fisher.png");*/
+	/*display: inline-flex;*/
+}
+
+.tile_title{
+	/*margin: auto 30px;*/
+	/*margin: 30px auto;*/
+	/*width: 100%;*/
+	text-align: center;
+	position: relative;
+	/*bottom: 20px;*/
+	/*top: 100%;*/
+	color: #fff;
+	top: calc(100% - 40px - 2em);
+	/*position: absolute;*/
+	/*display: inline;*/
+	font-size: 2em;
+
+}
+.tile_title:after{
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	position: absolute;
+content:var(--vtitle);
+
+}
+
+.tile_button{
+	/*top:40px;*/
+	bottom:40px;
+	bottom:20px;
+	/*margin: 20px;*/
+	left: 50%;
+	
+	--vcolor:#eee;
+	color: var(--vcolor);
+	outline: 2px solid var(--vcolor);
+	line-height:25px;
+	font-size: 15px;
+	text-align: center;
+
+	transform: translate(-50%,0);
+	/*padding: 20px;*/
+	/*bottom:40px;*/
+
+	/*position: relative;*/
+	position: absolute;
+	width: 125px;
+	height: 25px;
+	/*margin: 0 50%;*/
+	margin: 0 auto;
+
+
+}
+
+.tile_button:hover{
+	--vcolor:#fff;
+	background-color: #0009; 
+}
+
+
+.arrow{
+  border: solid #bbb;
+  width: 13px;
+  height: 13px;
+  border-width: 0 4px 4px 0;
+  display: inline-block;
+  padding: 3px;
+	position: absolute;
+	position: absolute;
+}
+
+.arrow_container {
+  /*border: solid #bbb;*/
+  width: 10px;
+  height: 10px;
+  /*border-width: 0 4px 4px 0;*/
+  /*display: inline-block;*/
+  /*padding: 3px;*/
+	position: absolute;
+
+}
+
+.arrow_container.right {
+		right: 20px;
+	top: 50%;
+}
+
+.arrow_container.left {
+		left: 20px;
+	/*position: absolute;*/
+	top: 50%;
+}
+
+
+
+.arrow:hover {
+  border-color: #fff;
+
+
+}
+
+.arrow.right {
+	/*position: absolute;*/
+	/*margin-right: 20px;*/
+	transform: rotate(-45deg);
+
+	/*transform: rotate(45);*/
+}
+.arrow.left {
+
+	transform: rotate(135deg);
+	/*transform: rotate(45);*/
+}

rf/i4m/m_jnk.js

@@ -0,0 +1,352 @@
+
+function scroll_rt2_3(o){
+	var rooms_scroll = $(".rooms_dir_full")
+	var room_tiles = rooms_scroll.children(".room_span")
+	var bcr
+	var bcr_rooms
+	var rooms_dir =  $(".rooms_dir")
+	// rooms_scroll
+
+	bcr_rooms = rooms_dir[0].getBoundingClientRect()
+	clog("~~~",bcr_rooms)
+	var v_last 
+	var r,l
+	var r_,l_,r_2,l_2
+	var r2,l2
+    $(".nxt").removeClass("nxt")
+    $(".nxt0").removeClass("nxt0")
+    $(".nxt1").removeClass("nxt1")
+    $(".nxt2").removeClass("nxt2")
+    $(".nxt3").removeClass("nxt3")
+    for (v of room_tiles){
+        bcr = v.getBoundingClientRect()
+        // clog("...",bcr.left - bcr_rooms.left,bcr)
+        // clog("...",bcr_rooms.left - bcr.left ,bcr)
+        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,bcr)
+        r = bcr_rooms.right - bcr.right
+        // l = bcr_rooms.left - bcr.left
+
+        l = bcr.left- bcr_rooms.left 
+        l_ =bcr.right- bcr_rooms.left 
+
+        r_ = bcr_rooms.right - bcr.left
+        // l_ = bcr_rooms.left - bcr.right
+
+        if ((r_ > 0 ) != ((r_2 > 0))  && (r_2 != undefined)){
+        	// clog(":::",r,r2)
+        		$(v).addClass("nxt0")
+        	// if ($(o.that).hasClass("right")){
+        		clog("z")
+        	// }
+        }
+
+
+
+        if ((r < 0 ) != ((r2 < 0))  && (r2 != undefined)){
+        	clog(":::",r,r2)
+        		$(v).addClass("nxt1")
+        	if ($(o.that).hasClass("right")){
+        		$(v).addClass("nxt")
+        		clog("z")
+        	}
+        }
+        // if (l < 0 && !(l2 < 0) ){
+        if ((l < 0) != ((l2 < 0))   && (l2 != undefined)){
+        	// clog(":::2",l,l2)
+        		$(v).addClass("nxt2")
+        	if ($(o.that).hasClass("left")){
+        		// clog("z2")
+        		$(v).addClass("nxt")
+
+        	}
+        	
+        }
+        if ((l_ < 0) != ((l_2 < 0))   && (l_2 != undefined)){
+        	// clog(":::2",l,l2)
+        		$(v).addClass("nxt3")
+
+        	
+        }
+        r2 = r
+        l2 = l
+
+        r_2 = r_
+        l_2 = l_
+
+
+
+
+        clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
+        v_last = v
+    }
+
+
+	// var bcr
+}
+
+function scroll_rt2_(o){
+	var rooms_scroll = $(".rooms_dir_full")
+	var room_tiles = rooms_scroll.children(".room_span")
+	var bcr
+	var bcr_rooms
+	var rooms_dir =  $(".rooms_dir")
+	// rooms_scroll
+
+	bcr_rooms = rooms_dir[0].getBoundingClientRect()
+	clog("~~~",bcr_rooms)
+	var v_last 
+	var r,l
+	var r_,l_,r_2,l_2
+	var r2,l2
+    $(".nxt").removeClass("nxt")
+    $(".nxt0").removeClass("nxt0")
+    $(".nxt1").removeClass("nxt1")
+    $(".nxt2").removeClass("nxt2")
+    $(".nxt3").removeClass("nxt3")
+    for (v of room_tiles){
+        bcr = v.getBoundingClientRect()
+        // clog("...",bcr.left - bcr_rooms.left,bcr)
+        // clog("...",bcr_rooms.left - bcr.left ,bcr)
+        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,bcr)
+        r = bcr_rooms.right - bcr.right
+        l = bcr_rooms.left - bcr.left
+
+        r_ = bcr_rooms.right - bcr.left
+        l_ = bcr_rooms.left - bcr.right
+
+        if ((r_ > 0 ) != ((r_2 > 0))  && (r_2 != undefined)){
+        	// clog(":::",r,r2)
+        		$(v).addClass("nxt0")
+        	// if ($(o.that).hasClass("right")){
+        		clog("z")
+        	// }
+        }
+
+
+
+        if ((r < 0 ) != ((r2 < 0))  && (r2 != undefined)){
+        	clog(":::",r,r2)
+        		$(v).addClass("nxt1")
+        	if ($(o.that).hasClass("right")){
+        		$(v).addClass("nxt")
+        		clog("z")
+        	}
+        }
+        // if (l < 0 && !(l2 < 0) ){
+        if ((l < 0) != ((l2 < 0))   && (l2 != undefined)){
+        	// clog(":::2",l,l2)
+        		$(v).addClass("nxt2")
+        	if ($(o.that).hasClass("left")){
+        		// clog("z2")
+        		$(v).addClass("nxt")
+
+        	}
+        	
+        }
+        if ((l_ < 0) != ((l_2 < 0))   && (l_2 != undefined)){
+        	// clog(":::2",l,l2)
+        		$(v).addClass("nxt3")
+
+        	
+        }
+        r2 = r
+        l2 = l
+
+        r_2 = r_
+        l_2 = l_
+
+
+
+
+        clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
+        v_last = v
+    }
+
+
+	// var bcr
+}
+
+
+
+
+
+
+
+
+
+
+function scroll_rt2(o){
+    var rooms_scroll = $(".rooms_dir_full")
+    var room_tiles = rooms_scroll.children(".room_span")
+    var bcr
+    var bcr_rooms
+    var rooms_dir =  $(".rooms_dir")
+    // rooms_scroll
+
+    bcr_rooms = rooms_dir[0].getBoundingClientRect()
+    clog("~~~",bcr_rooms)
+    var v_last 
+    var r,l
+    var r_,l_,r_2,l_2
+    var c,c2,cr,cl,cr2,cl2
+    var r2,l2
+
+
+    var cr_n,cr_p,cl_n,cl_p
+    var cr_nn,cr_pn,cl_nn,cl_pn
+
+    cr_n = -Infinity
+    cl_n = -Infinity
+    cr_p = Infinity
+    cl_p = Infinity
+    cr_nn = ""
+    cl_nn = ""
+    cr_pn = ""
+    cl_pn = ""
+
+
+
+    $(".nxt").removeClass("nxt")
+    $(".nxt_x").removeClass("nxt_x")
+    $(".nxt0").removeClass("nxt0")
+    $(".nxt1").removeClass("nxt1")
+    $(".nxt2").removeClass("nxt2")
+    $(".nxt3").removeClass("nxt3")
+    for (v of room_tiles){
+        bcr = v.getBoundingClientRect()
+        // clog("...",bcr.left - bcr_rooms.left,bcr)
+        // clog("...",bcr_rooms.left - bcr.left ,bcr)
+        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,bcr)
+        r = bcr_rooms.right - bcr.right
+        l = bcr_rooms.left - bcr.left
+
+        r_ = bcr_rooms.right - bcr.left
+        l_ = bcr_rooms.left - bcr.right
+
+
+        c = (bcr.right + bcr.left) / 2
+        cr = bcr_rooms.right - c
+        cl = bcr_rooms.left - c
+        cl = c - bcr_rooms.left 
+
+
+        if (cr < 0){
+            cr_n = Math.max(cr_n,cr)
+            cr_n == cr ? cr_nn = v : 0
+
+        } else {
+            cr_p = Math.min(cr_p,cr)
+            cr_p == cr ? cr_pn = v : 0
+
+        }
+
+        if (cl < 0){
+            cl_n = Math.max(cl_n,cl)
+            cl_n == cl ? cl_nn = v : 0
+        } else {
+            cl_p = Math.min(cl_p,cl)
+            cl_p == cl ? cl_pn = v : 0
+            
+        }
+
+        /*
+
+        if ((r_ > 0 ) != ((r_2 > 0))  && (r_2 != undefined)){
+            // clog(":::",r,r2)
+                $(v).addClass("nxt0")
+            // if ($(o.that).hasClass("right")){
+                clog("z")
+            // }
+        }
+
+
+
+        if ((r < 0 ) != ((r2 < 0))  && (r2 != undefined)){
+            clog(":::",r,r2)
+                $(v).addClass("nxt1")
+            if ($(o.that).hasClass("right")){
+                $(v).addClass("nxt")
+                clog("z")
+            }
+        }
+        // if (l < 0 && !(l2 < 0) ){
+        if ((l < 0) != ((l2 < 0))   && (l2 != undefined)){
+            // clog(":::2",l,l2)
+                $(v).addClass("nxt2")
+            if ($(o.that).hasClass("left")){
+                // clog("z2")
+                $(v).addClass("nxt")
+
+            }
+            
+        }
+        if ((l_ < 0) != ((l_2 < 0))   && (l_2 != undefined)){
+            // clog(":::2",l,l2)
+                $(v).addClass("nxt3")
+
+            
+        }
+        */
+
+
+
+
+        r2 = r
+        l2 = l
+
+        r_2 = r_
+        l_2 = l_
+        c2 = c
+        cr2 = cr
+        cl2 = cl
+
+
+
+
+        clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
+        v_last = v
+    }
+    // $(cr_nn).addClass("nxt0")
+    // $(cl_nn).addClass("nxt1")
+    var scroll_n = ""
+
+    if ($(o.that).hasClass("right")){
+        if (cr_nn){
+            scroll_n = cr_nn
+        } else {
+            scroll_n = cr_np
+
+        }
+    } else if ($(o.that).hasClass("left")){
+        if (cl_nn){
+            scroll_n = cl_nn
+        } else {
+            scroll_n = cl_np
+            
+        }
+    }
+    if (scroll_n){
+        scroll_n.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
+        $(scroll_n).addClass("nxt_x")
+    }
+    // $(cr_pn).addClass("nxt2")
+    // $(cl_pn).addClass("nxt3")
+    clog("zzzzz",{
+   cr_nn,
+cl_nn,
+cr_pn,
+cl_pn,
+cr_n,
+cl_n,
+cr_p,
+cl_p,
+
+
+})
+
+
+    // var bcr
+}
+
+
+